refactor(chip)!: Renamed property and updated values (#6058)

BREAKING CHANGE: Renamed `color` property and updated values, and updated `appearance` values. - Renamed the property `color`, use `kind` instead. - Updated the accepted values of `kind` to `brand`, `inverse`, and `neutral` (default). - Updated the accepted values of `appearance` to , `outline`, `outline-fill` and `solid` (default).
Esri · Dec 15, 2022 · 9c479ca · 9c479ca
1 parent 969a2eb
commit 9c479ca
Show file tree

Hide file tree

Showing 10 changed files with 1,159 additions and 598 deletions.
diff --git a/conventions/Accessibility.md b/conventions/Accessibility.md
@@ -38,92 +38,92 @@ Calcite Components leverages the [W3C Accessibility Standards](https://www.w3.or
 <div class="check-div">
     <input type="checkbox" name="1" id="1">
     <label for="1">Information should not depend on color, sound, shape, size, or visual location
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="2" id="2">
     <label for="2">Text and background color should have sufficient contrast
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="3" id="3">
     <label for="3">Links should be descriptive and provide intent
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="4" id="4">
     <label for="4">Links should be visually identifiable
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="5" id="5">
     <label for="5">Use descriptive section headings
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="6" id="6">
     <label for="6">Content should use semantic HTML elements
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="7" id="7">
     <label for="7">HTML should be valid and error-free
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="8" id="8">
     <label for="8">Forms have descriptive labels
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="9" id="9">
     <label for="9">Forms have helpful and accessible error and verification messages
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="10" id="10">
     <label for="10">Labels and help text should be programmatically associated with form fields
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="11" id="11">
     <label for="11">Use correct HTML5 input types
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="12" id="12">
     <label for="12">Content does not loose context when zoomed/enlarged
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="13" id="13">
     <label for="13">Site should not time out unexpectedly
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="14" id="14">
     <label for="14">Pages are understandable with no styles enabled
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="15" id="15">
     <label for="15">Web page size should not exceed 500k
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 
@@ -132,52 +132,52 @@ Calcite Components leverages the [W3C Accessibility Standards](https://www.w3.or
 <div class="check-div">
     <input type="checkbox" name="16" id="16">
     <label for="16">Users should be able to navigate content using a screen reader
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="17" id="17">
     <label for="17">Avoid mouse only interactions
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="18" id="18">
     <label for="18">Support keyboard navigation
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="19" id="19">
     <label for="19">Focus states should be visible for keyboard users
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="20" id="20">
     <label for="20">Allow keyboard users to skip navigation
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="21" id="21">
     <label for="21">Offer multiple ways to find pages on your website
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="22" id="22">
     <label for="22">Use ARIA landmarks where applicable
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="23" id="23">
     <label for="23">Set focus on modals, popovers, alerts, etc.
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 
@@ -186,53 +186,53 @@ Calcite Components leverages the [W3C Accessibility Standards](https://www.w3.or
 <div class="check-div">
     <input type="checkbox" name="25" id="25">
     <label for="25">Images should have meaningful alternative text or intentionally marked decorative
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="26" id="26">
     <label for="26">Decorative images should not be visible to screen readers
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="27" id="27">
     <label for="27">Content that moves automatically has the ability to be paused
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="28" id="28">
     <label for="28">Limit or remove any flashing elements
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="29" id="29">
     <label for="29">Ensure audio and video is not played automatically unless that is the expected behavior
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="30" id="30">
     <label for="30">Multimedia should have alternative ways to be consumed
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="31" id="31">
     <label for="31">Make data available for graphs, charts, maps, SVGs, etc. through assistive technology
-    <calcite-chip appearance="solid" color="blue" icon="palette" scale="s">Design</calcite-chip>
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" icon="palette" scale="s">Design</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 <div class="check-div">
     <input type="checkbox" name="32" id="32">
     <label for="32">Table data is accessible to non-sighted users
-    <calcite-chip appearance="solid" color="yellow" icon="code" scale="s">Development</calcite-chip>
+    <calcite-chip appearance="solid" kind="neutral" icon="code" scale="s">Development</calcite-chip>
     </label>
 </div>
 

diff --git a/src/05-custom-theme.stories.mdx b/src/05-custom-theme.stories.mdx
@@ -153,18 +153,14 @@ export const Template = () =>
           </label>
         </div>
         <div>
-          <calcite-chip>Grey</calcite-chip>
-          <calcite-chip color="red">Red</calcite-chip>
-          <calcite-chip color="yellow">Yellow</calcite-chip>
-          <calcite-chip color="green">Green</calcite-chip>
-          <calcite-chip color="blue">Blue</calcite-chip>
+          <calcite-chip>Neutral</calcite-chip>
+          <calcite-chip kind="inverse">Inverse</calcite-chip>
+          <calcite-chip kind="brand">Brand</calcite-chip>
         </div>
         <div>
-          <calcite-chip appearance="transparent">Grey</calcite-chip>
-          <calcite-chip appearance="transparent" color="red">Red</calcite-chip>
-          <calcite-chip appearance="transparent" color="yellow">Yellow</calcite-chip>
-          <calcite-chip appearance="transparent" color="green">Green</calcite-chip>
-          <calcite-chip appearance="transparent" color="blue">Red</calcite-chip>
+          <calcite-chip appearance="transparent">Neutral</calcite-chip>
+          <calcite-chip appearance="transparent" kind="inverse">Inverse</calcite-chip>
+          <calcite-chip appearance="outline-fill" kind="brand">Brand</calcite-chip>
         </div>
         <calcite-pagination total="1200" num="100" start="1"></calcite-pagination>
         <calcite-slider

diff --git a/src/components/chip/chip.e2e.ts b/src/components/chip/chip.e2e.ts
@@ -31,27 +31,27 @@ describe("calcite-chip", () => {
 
     const element = await page.find("calcite-chip");
     expect(element).toEqualAttribute("appearance", "solid");
-    expect(element).toEqualAttribute("color", "grey");
+    expect(element).toEqualAttribute("kind", "neutral");
     expect(element).toEqualAttribute("scale", "m");
   });
 
   it("renders requested props when valid props are provided", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-chip appearance="transparent" color="blue" scale="l">Chip content</calcite-chip>`);
+    await page.setContent(`<calcite-chip appearance="outline" kind="brand" scale="l">Chip content</calcite-chip>`);
 
     const element = await page.find("calcite-chip");
-    expect(element).toEqualAttribute("appearance", "transparent");
-    expect(element).toEqualAttribute("color", "blue");
+    expect(element).toEqualAttribute("appearance", "outline");
+    expect(element).toEqualAttribute("kind", "brand");
     expect(element).toEqualAttribute("scale", "l");
   });
 
-  it("renders transparent chip when appearance='transparent'", async () => {
+  it("renders outline-fill chip when appearance='outline-fill'", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-chip appearance="transparent" color="blue" scale="l">Chip content</calcite-chip>`);
+    await page.setContent(`<calcite-chip appearance="outline-fill" kind="brand" scale="l">Chip content</calcite-chip>`);
 
     const element = await page.find("calcite-chip");
-    expect(element).toEqualAttribute("appearance", "transparent");
-    expect(element).toEqualAttribute("color", "blue");
+    expect(element).toEqualAttribute("appearance", "outline-fill");
+    expect(element).toEqualAttribute("kind", "brand");
     expect(element).toEqualAttribute("scale", "l");
   });
 
@@ -76,8 +76,8 @@ describe("calcite-chip", () => {
       <calcite-chip
         class="layers"
         icon="layer"
-        appearance="transparent"
-        color="green"
+        appearance="solid"
+        kind="neutral"
         closable
       >
         Layers