Merge branch 'master' into benelan/date-picker-remove-deprecations

* master: (36 commits) 1.0.0-next.696 feat(tip,tip-manager): add built-in translations (#6074) 1.0.0-next.695 fix(icon, graphic, loader): Set aria-hidden on internal svg elements (#6069) 1.0.0-next.694 refactor(modal)!: Renamed CSS variable (#6078) 1.0.0-next.693 refactor(color-picker-hex-input)!: removed `intl*` properties (#6063) 1.0.0-next.692 feat(shell): Add slots for Modal and Alert (#5983) 1.0.0-next.691 refactor(input-date-picker)!: Removed deprecated start, startAsDate, end, endAsDate properties (#6076) 1.0.0-next.690 fix(combobox): Fix error when typing a custom value (#6071) 1.0.0-next.689 fix(rating): 5312 improve user interface (#5948) chore: Clean outdated properties (#6073) docs: update component READMEs (#6072) chore: Update interface references (#6068) chore(action): Clean up action appearance references (#6067) ...
Esri · Dec 16, 2022 · 84109bb · 84109bb
2 parents 78b610e + a4c0dde
commit 84109bb
Show file tree

Hide file tree

Showing 192 changed files with 5,418 additions and 3,668 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
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,54 +186,64 @@ 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>
 
 </fieldset>
+
+## Renderring SVG elements within components
+
+SVGs are visual elements. When rendering them in a component, assess if the SVG has semantic meaning that needs to be described.
+
+If the SVG has no semantic meaning or the semantic meaning is described elsewhere, make sure to set `aria-hidden="true"` on it so that screen readers can ignore it.
+
+If the SVG has some semantic meaning that needs to be described to an end user, set the role to `img` and ensure that it has an `aria-label` or `aria-lablledby`.
+
+More information can be found here: https://www.deque.com/blog/creating-accessible-svgs/
diff --git a/conventions/README.md b/conventions/README.md
@@ -188,7 +188,7 @@ Notice `.card` does not appear anywhere. We would then apply styles to the host
 Modifier classes on the "block" (host element) can often be written by reflecting the prop and selecting it directly via an attribute selector:
 
 ```scss
-:host([color="blue"]) {
+:host([kind="success"]) {
 }
 ```
 

diff --git a/conventions/Styling.md b/conventions/Styling.md
@@ -30,47 +30,6 @@ Add a class to handle the logic in the component class.
 }
 ```
 
-## Color
-
-If a component has multiple color themes (for example Blue, Red, Green, and Yellow) representing various state implement a `color` prop and reflect it to an attributes.
-
-```tsx
-enum Colors {
-  red = "red",
-  blue = "blue",
-  green = "green",
-  yellow = "yellow",
-}
-
-export class Component {
-
-// ...
-
-@Prop({ reflect: true }) color: Colors = 'blue'
-
-// ...
-```
-
-You can then use the `:host()` selector to define your custom colors:
-
-```scss
-:host([color="blue"]) {
-  .something {
-    // make it blue
-  }
-}
-
-:host([color="red"]) {
-  .something {
-    // make it red
-  }
-}
-```
-
-**Discussed In**:
-
-- https://github.com/Esri/calcite-components/pull/24/files/3446c89010e3ef0421803d68d627aba2e7c4bfa0#r289427838
-
 ## Light Theme/Dark Theme
 
 In the [global CSS file](https://github.com/Esri/calcite-components/blob/master/src/assets/styles/global.scss), we specify the values of each color for both light and dark theme. This enables theming to be inherited throughout a component tree. Consider this valid example:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.684",
+  "version": "1.0.0-next.696",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

diff --git a/src/05-custom-theme.stories.mdx b/src/05-custom-theme.stories.mdx
@@ -96,14 +96,14 @@ export const Template = () =>
             </calcite-tree>
           </calcite-accordion-item>
         </calcite-accordion>
-        <calcite-notice color="red" scale="s" open>
+        <calcite-notice kind="danger" scale="s" open>
           <div slot="title">Something failed</div>
           <div slot="message">
             There was an error while performing the task.
           </div>
           <calcite-link slot="link" title="my action">Retry</calcite-link>
         </calcite-notice>
-        <calcite-notice icon color="green" scale="s" open closable>
+        <calcite-notice icon kind="success" scale="s" open closable>
           <div slot="title">Something worked</div>
           <div slot="message">
             That thing you wanted to do worked as expected
@@ -144,7 +144,7 @@ export const Template = () =>
             </calcite-dropdown-group>
           </calcite-dropdown>
           <calcite-button appearance="outline">Outline</calcite-button>
-          <calcite-button color="red">Red</calcite-button>
+          <calcite-button kind="danger">Red</calcite-button>
         </div>
         <div>
           <label>
@@ -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
@@ -189,7 +185,7 @@ export const Template = () =>
         </calcite-tabs>
         <calcite-loader class="chromatic-ignore"></calcite-loader>
         <label>
-          <calcite-switch scale="m" checked color="red"> </calcite-switch>
+          <calcite-switch scale="m" checked> </calcite-switch>
           Red switch scale medium
         </label>
       </div>
-Original file line number
+Diff line change
@@ Expand Up @@
     Modifier classes on the "block" (host element) can often be written by reflecting the prop and selecting it directly via an attribute selector:
     ```scss
-    :host([color="blue"]) {
+    :host([kind="success"]) {
     }
     ```
@@ Expand Down @@