fix!: use divider component in menu, closes #1371

BREAKING CHANGE: Add `.spectrum-Divider` and `spectrum-Divider--sizeM` classes to `spectrum-Menu-divider`
adobe · Apr 11, 2022 · 5c901f1 · 5c901f1
1 parent 59e8443
commit 5c901f1
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 22 deletions.
diff --git a/components/menu/index.css b/components/menu/index.css
@@ -13,6 +13,7 @@ governing permissions and limitations under the License.
 @import "../vars/css/scales/spectrum-large.css";
 @import "../vars/css/scales/spectrum-medium.css";
 @import "../vars/css/components/spectrum-listitem.css";
+@import "../vars/css/components/spectrum-divider.css";
 
 .spectrum-Menu {
   --spectrum-menu-margin-x: var(--spectrum-global-dimension-size-40);
@@ -190,20 +191,6 @@ governing permissions and limitations under the License.
   transform: logical rotate(0deg);
 }
 
-.spectrum-Menu-divider {
-  /* Add the correct box sizing for hr in Firefox. */
-  box-sizing: content-box;
-
-  /* Show the overflow for hr in Edge and IE. */
-  overflow: visible;
-
-  block-size: var(--spectrum-listitem-texticon-divider-size);
-  margin-block: calc(var(--spectrum-listitem-texticon-divider-padding) / 2);
-  margin-inline: var(--spectrum-listitem-texticon-padding-y);
-  padding: 0;
-  border: none;
-}
-
 .spectrum-Menu-sectionHeading {
   display: block;
   margin: var(--spectrum-listitem-texticon-heading-margin);

diff --git a/components/menu/metadata/menu.yml b/components/menu/metadata/menu.yml
@@ -3,6 +3,8 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/side-navigation/
 section:
   - name: Migration Guide
     description: |
+      ### Use divider in Menu
+      Add `.spectrum-Divider` and `spectrum-Divider--sizeM` classes to `spectrum-Menu-divider`.
       ### Change workflow icon size to medium
       Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
 examples:
@@ -24,7 +26,7 @@ examples:
           <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
             <span class="spectrum-Menu-itemLabel">Select and Mask...</span>
           </li>
-          <li class="spectrum-Menu-divider" role="separator"></li>
+          <li class="spectrum-Divider spectrum-Divider--sizeM spectrum-Menu-divider" role="separator"></li>
           <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
             <span class="spectrum-Menu-itemLabel">Save Selection</span>
           </li>
@@ -48,7 +50,7 @@ examples:
               </li>
             </ul>
           </li>
-          <li class="spectrum-Menu-divider" role="separator"></li>
+          <li class="spectrum-Divider spectrum-Divider--sizeM spectrum-Menu-divider" role="separator"></li>
           <li role="presentation">
             <span class="spectrum-Menu-sectionHeading" id="menu-heading-category-2"  aria-hidden="true">Section Heading</span>
             <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1" aria-disabled="true">
@@ -83,7 +85,7 @@ examples:
               </li>
             </ul>
           </li>
-          <li class="spectrum-Menu-divider" role="separator"></li>
+          <li class="spectrum-Divider spectrum-Divider--sizeM spectrum-Menu-divider" role="separator"></li>
           <li role="presentation">
             <span class="spectrum-Menu-sectionHeading" id="menu-heading-oak" aria-hidden="true">Oakland</span>
             <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-oak">

diff --git a/components/menu/package.json b/components/menu/package.json
@@ -16,11 +16,13 @@
     "build": "gulp"
   },
   "peerDependencies": {
+    "@spectrum-css/divider": "^1.0.23",
     "@spectrum-css/icon": "^3.0.11-beta.0",
     "@spectrum-css/vars": "^7.0.0"
   },
   "devDependencies": {
     "@spectrum-css/component-builder": "^3.1.1",
+    "@spectrum-css/divider": "^1.0.23",
     "@spectrum-css/icon": "^3.0.20",
     "@spectrum-css/vars": "^7.3.0",
     "gulp": "^4.0.0"
@@ -29,4 +31,4 @@
     "access": "public"
   },
   "homepage": "https://opensource.adobe.com/spectrum-css/"
-}
+}
diff --git a/components/menu/skin.css b/components/menu/skin.css
@@ -13,6 +13,7 @@ governing permissions and limitations under the License.
 .spectrum-Menu {
   /* these need to be removed but we don't have a full design spec */
   --spectrum-listheading-text-color: var(--spectrum-global-color-gray-700);
+  --spectrum-listitem-m-texticon-divider-color: var(--spectrum-global-color-gray-300);
 }
 
 .spectrum-Menu {
@@ -66,7 +67,3 @@ governing permissions and limitations under the License.
 .spectrum-Menu-sectionHeading {
   color: var(--spectrum-listheading-text-color);
 }
-
-.spectrum-Menu-divider {
-  background-color: var(--spectrum-listitem-m-texticon-divider-color);
-}