chore: update menu group

adobe · Jul 25, 2023 · fedead6 · fedead6
1 parent 2c71191
commit fedead6
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 5 deletions.
diff --git a/packages/menu/src/menu-group.css b/packages/menu/src/menu-group.css
@@ -24,14 +24,13 @@ governing permissions and limitations under the License.
  * direction of the content while https://github.com/adobe/spectrum-css/issues/794
  * persists at the Spectrum CSS level.
  */
-:host([dir='ltr']) .header {
-    /* .spectrum-Menu-sectionHeading */
+
+/* :host([dir='ltr']) .header {
     padding: 0 var(--spectrum-global-dimension-size-450) 0
         var(--spectrum-global-dimension-size-150);
 }
 
 :host([dir='rtl']) .header {
-    /* .spectrum-Menu-sectionHeading */
     padding: 0 var(--spectrum-global-dimension-size-150) 0
         var(--spectrum-global-dimension-size-450);
 }
@@ -50,4 +49,4 @@ sp-menu {
 
 [hidden] {
     display: none !important;
-}
+} */
diff --git a/packages/menu/src/spectrum-config.js b/packages/menu/src/spectrum-config.js
@@ -311,7 +311,7 @@ const config = {
             fileName: 'menu',
             excludeByComponents: [
                 builder.class('spectrum-Menu-divider'),
-                builder.class('spectrum-Menu-sectionHeading'),
+                // builder.class('spectrum-Menu-sectionHeading'),
                 builder.class('spectrum-menu-itemSelection'),
                 {
                     type: 'class',
@@ -425,6 +425,50 @@ const config = {
                         },
                     ],
                 },
+                {
+                    find: [
+                        builder.element('li'),
+                        {
+                            type: 'pseudo-class',
+                            kind: 'not',
+                            selectors: [
+                                [builder.class('spectrum-Menu-item')],
+                                [builder.class('spectrum-Menu-divider')],
+                            ],
+                        },
+                        builder.combinator('child'),
+                        builder.class('spectrum-Menu-sectionHeading'),
+                    ],
+                    replace: [
+                        {
+                            replace: builder.element('li'),
+                        },
+                        {
+                            replace: {
+                                type: 'pseudo-class',
+                                kind: 'not',
+                                selectors: [
+                                    [
+                                        {
+                                            type: 'pseudo-element',
+                                            kind: 'slotted',
+                                            selector: [
+                                                builder.element('sp-menu-item'),
+                                            ],
+                                        },
+                                    ],
+                                    [builder.class('menu-divider')],
+                                ],
+                            },
+                        },
+                        {
+                            replace: builder.combinator('child'),
+                        },
+                        {
+                            replace: builder.class('header'),
+                        },
+                    ],
+                },
             ],
         },
     ],

diff --git a/packages/menu/src/spectrum-menu.css b/packages/menu/src/spectrum-menu.css
@@ -324,6 +324,15 @@ governing permissions and limitations under the License.
         var(--spectrum-menu-item-selectable-edge-to-text-not-selected)
     );
 }
+:host([selects]) ::slotted(sp-menu-item[selected]) {
+    --spectrum-menu-checkmark-display: var(
+        --spectrum-menu-checkmark-display-shown
+    );
+    padding-inline-start: var(
+        --mod-menu-item-label-inline-edge-to-content,
+        var(--spectrum-menu-item-label-inline-edge-to-content)
+    );
+}
 li:not(::slotted(sp-menu-item), .menu-divider) {
     align-items: center;
     background-color: var(
@@ -364,3 +373,52 @@ li:not(::slotted(sp-menu-item), .menu-divider) {
     display: grid;
     grid-template: '. chevronAreaCollapsible . iconArea sectionHeadingArea . . .' 1fr 'selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn' '. . . . descriptionArea . . .' '. . . . submenuArea . . .' / auto auto auto auto 1fr auto auto auto;
 }
+.spectrum-Menu-sectionHeading {
+    grid-area: sectionHeadingArea/1/sectionHeadingArea/-1;
+}
+li:not(::slotted(sp-menu-item), .menu-divider) > .header {
+    padding-inline-start: var(
+        --mod-menu-item-label-inline-edge-to-content,
+        var(--spectrum-menu-item-label-inline-edge-to-content)
+    );
+}
+.spectrum-Menu-sectionHeading {
+    color: var(
+        --highcontrast-menu-item-color-default,
+        var(
+            --mod-menu-section-header-color,
+            var(--spectrum-menu-section-header-color)
+        )
+    );
+    display: block;
+    font-size: var(
+        --mod-menu-section-header-font-size,
+        var(--spectrum-menu-section-header-font-size)
+    );
+    font-weight: var(
+        --mod-menu-section-header-font-weight,
+        var(--spectrum-menu-section-header-font-weight)
+    );
+    line-height: var(
+        --mod-menu-section-header-line-height,
+        var(--spectrum-menu-section-header-line-height)
+    );
+    min-inline-size: var(
+        --mod-menu-section-header-min-width,
+        var(--spectrum-menu-section-header-min-width)
+    );
+    padding-block-end: var(
+        --mod-menu-section-header-bottom-edge-to-text,
+        var(
+            --mod-menu-item-bottom-edge-to-text,
+            var(--spectrum-menu-item-bottom-edge-to-text)
+        )
+    );
+    padding-block-start: var(
+        --mod-menu-section-header-top-edge-to-text,
+        var(
+            --mod-menu-item-top-edge-to-text,
+            var(--spectrum-menu-item-top-edge-to-text)
+        )
+    );
+}