feat: use less confusing icons in pick-list and value-list

Esri · Apr 24, 2020 · d4c9c7a · d4c9c7a
1 parent ed3769d
commit d4c9c7a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 28 deletions.
diff --git a/src/components/calcite-pick-list/calcite-pick-list.stories.ts b/src/components/calcite-pick-list/calcite-pick-list.stories.ts
@@ -42,7 +42,7 @@ const createAttributes: () => Attributes = () => [
 ];
 
 const action = dedent`
-  <calcite-action slot="secondary-action" label="click-me" onClick="console.log('clicked');" appearance="clear" style="color: #f689d8;" icon="circle"></calcite-action>
+  <calcite-action slot="secondary-action" label="click-me" onClick="console.log('clicked');" appearance="clear" scale="s" icon="information"></calcite-action>
 `;
 
 export const basic = (): string =>

diff --git a/src/components/calcite-value-list/calcite-value-list.stories.ts b/src/components/calcite-value-list/calcite-value-list.stories.ts
@@ -46,7 +46,7 @@ const createAttributes: () => Attributes = () => [
 ];
 
 const action = dedent`
-  <calcite-action slot="secondary-action" label="click-me" onClick="console.log('clicked');" appearance="clear" style="color: #f689d8;" icon="circle"></calcite-action>
+  <calcite-action slot="secondary-action" label="click-me" onClick="console.log('clicked');" appearance="clear" scale="s" icon="ellipsis"></calcite-action>
 `;
 
 export const basic = (): string =>

diff --git a/src/demos/pick-list/advanced.html b/src/demos/pick-list/advanced.html
@@ -35,8 +35,7 @@ <h2>multi-select w/ filter</h2>
               id="action-test"
               label="click-me"
               onClick="console.log('clicked');"
-              icon="circle"
-              style="color: #f689d8;"
+              icon="ellipsis"
             >
             </calcite-action>
           </calcite-pick-list-item>
@@ -53,8 +52,7 @@ <h2>multi-select w/ filter</h2>
               id="action-test"
               label="click-me"
               onClick="console.log('clicked');"
-              icon="circle"
-              style="color: #f689d8;"
+              icon="ellipsis"
             >
             </calcite-action>
           </calcite-pick-list-item>
@@ -74,8 +72,7 @@ <h2>multi-select w/ filter</h2>
               id="action-test"
               label="click-me"
               onClick="console.log('clicked');"
-              icon="circle"
-              style="color: #f689d8;"
+              icon="ellipsis"
             >
             </calcite-action>
           </calcite-pick-list-item>
@@ -92,8 +89,7 @@ <h2>multi-select w/ filter</h2>
               id="action-test"
               label="click-me"
               onClick="console.log('clicked');"
-              icon="circle"
-              style="color: #f689d8;"
+              icon="ellipsis"
             >
             </calcite-action>
           </calcite-pick-list-item>
@@ -107,8 +103,7 @@ <h2>multi-select w/ filter</h2>
               id="action-test"
               label="click-me"
               onClick="console.log('clicked');"
-              icon="circle"
-              style="color: #f689d8;"
+              icon="ellipsis"
             >
             </calcite-action>
           </calcite-pick-list-item>
@@ -132,8 +127,7 @@ <h2>single-select</h2>
               id="action-test"
               label="click-me"
               onClick="console.log('clicked');"
-              icon="circle"
-              style="color: #f689d8;"
+              icon="ellipsis"
             >
             </calcite-action>
           </calcite-pick-list-item>
@@ -146,8 +140,7 @@ <h2>single-select</h2>
               id="action-test"
               label="click-me"
               onClick="console.log('clicked');"
-              icon="circle"
-              style="color: #f689d8;"
+              icon="ellipsis"
             >
             </calcite-action>
           </calcite-pick-list-item>
@@ -157,8 +150,7 @@ <h2>single-select</h2>
               id="action-test"
               label="click-me"
               onClick="console.log('clicked');"
-              icon="circle"
-              style="color: #f689d8;"
+              icon="ellipsis"
             >
             </calcite-action>
           </calcite-pick-list-item>
@@ -247,8 +239,7 @@ <h2>multi-select</h2>
               id="action-test"
               label="click-me"
               onClick="console.log('clicked');"
-              icon="circle"
-              style="color: #f689d8;"
+              icon="ellipsis"
             >
             </calcite-action>
           </calcite-pick-list-item>
@@ -262,8 +253,7 @@ <h2>multi-select</h2>
               id="action-test"
               label="click-me"
               onClick="console.log('clicked');"
-              icon="circle"
-              style="color: #f689d8;"
+              icon="ellipsis"
             >
             </calcite-action>
           </calcite-pick-list-item>
@@ -277,8 +267,7 @@ <h2>multi-select</h2>
               id="action-test"
               label="click-me"
               onClick="console.log('clicked');"
-              icon="circle"
-              style="color: #f689d8;"
+              icon="ellipsis"
             >
             </calcite-action>
           </calcite-pick-list-item>
@@ -292,8 +281,7 @@ <h2>multi-select</h2>
               id="action-test"
               label="click-me"
               onClick="console.log('clicked');"
-              icon="circle"
-              style="color: #f689d8;"
+              icon="ellipsis"
             >
             </calcite-action>
           </calcite-pick-list-item>
@@ -307,8 +295,7 @@ <h2>multi-select</h2>
               id="action-test"
               label="click-me"
               onClick="console.log('clicked');"
-              icon="circle"
-              style="color: #f689d8;"
+              icon="ellipsis"
             >
             </calcite-action>
           </calcite-pick-list-item>