chore: add icon and selection story

adobe · Jul 11, 2023 · 3aef48b · 3aef48b
1 parent 87374f7
commit 3aef48b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/packages/menu/src/spectrum-config.js b/packages/menu/src/spectrum-config.js
@@ -97,16 +97,16 @@ const config = {
                     'spectrum-Menu-checkmark--withAdjacentIcon',
                     'checkmark--withAdjacentIcon'
                 ),
-                converter.classToClass(
-                    'spectrum-Menu-itemIcon--workflowIcon',
-                    'icon--workflow-icon'
-                ),
                 converter.classToAttribute(
                     'spectrum-Menu-item--drillIn',
                     'has-submenu'
                 ),
                 converter.classToSlotted('spectrum-Icon', 'icon'),
                 converter.classToSlotted('spectrum-Menu-itemIcon', 'icon'),
+                converter.classToSlotted(
+                    'spectrum-Menu-itemIcon--workflowIcon',
+                    'icon'
+                ),
                 converter.classToSlotted('spectrum-Menu-itemValue', 'value'),
                 converter.classToClass(
                     'spectrum-menu-itemSelection',

diff --git a/packages/menu/src/spectrum-menu-item.css b/packages/menu/src/spectrum-menu-item.css
@@ -539,8 +539,13 @@ governing permissions and limitations under the License.
         var(--spectrum-menu-item-checkmark-width)
     );
 }
-.checkmark--withAdjacentText,
-.icon--workflow-icon {
+::slotted([slot='icon']) {
+    margin-inline-end: var(
+        --mod-menu-item-label-text-to-visual,
+        var(--spectrum-menu-item-label-text-to-visual)
+    );
+}
+.checkmark--withAdjacentText {
     margin-inline-end: var(
         --mod-menu-item-label-text-to-visual,
         var(--spectrum-menu-item-label-text-to-visual)

diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts
@@ -19,6 +19,9 @@ import '@spectrum-web-components/menu/sp-menu-divider.js';
 import '@spectrum-web-components/menu/sp-menu-group.js';
 import '@spectrum-web-components/icon/sp-icon.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-export.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-share.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';
 
 export default {
@@ -103,10 +106,32 @@ export const multipleSelect = (): TemplateResult => {
         </sp-popover>
     `;
 };
+
+export const selectsWithIcons = (): TemplateResult => {
+    return html`
+        <sp-popover open>
+            <sp-menu selects="single">
+                <sp-menu-item>
+                    <sp-icon-export slot="icon"></sp-icon-export>
+                    Quick export
+                </sp-menu-item>
+                <sp-menu-item>
+                    <sp-icon-folder-open slot="icon"></sp-icon-folder-open>
+                    Open a copy
+                </sp-menu-item>
+                <sp-menu-item>
+                    <sp-icon-share slot="icon"></sp-icon-share>
+                    Share link
+                </sp-menu-item>
+            </sp-menu>
+        </sp-popover>
+    `;
+};
+
 export const headersAndIcons = (): TemplateResult => {
     return html`
         <sp-popover open>
-            <sp-menu>
+            <sp-menu selects="single">
                 <sp-menu-group>
                     <span slot="header">Section Heading</span>
                     <sp-menu-item>Action 1</sp-menu-item>