feat: implement t-shirt sizing for Divider, closes #972

BREAKING CHANGE: .spectrum-Divider--size* is now required BREAKING CHANGE: .spectrum-Divider--small is now .spectrum-Divider--sizeS, .spectrum-Divider--medium is now .spectrum-Divider--sizeM, .spectrum-Divider--large is now .spectrum-Divider--sizeL
adobe · Dec 1, 2020 · bb10aa9 · bb10aa9
1 parent 0a20b52
commit bb10aa9
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 63 deletions.
diff --git a/components/dialog/metadata/dialog.yml b/components/dialog/metadata/dialog.yml
@@ -15,7 +15,7 @@ examples:
           <div class="spectrum-Dialog spectrum-Dialog--small" role="dialog" tabindex="-1" aria-modal="true">
             <div class="spectrum-Dialog-grid">
               <h1 class="spectrum-Dialog-heading">Disclaimer</h1>
-              <hr class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--horizontal spectrum-Dialog-divider">
+              <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
               <section class="spectrum-Dialog-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.</section>
             </div>
           </div>
@@ -34,7 +34,7 @@ examples:
           <div class="spectrum-Dialog spectrum-Dialog--medium" role="dialog" tabindex="-1" aria-modal="true">
             <div class="spectrum-Dialog-grid">
               <h1 class="spectrum-Dialog-heading">Disclaimer</h1>
-              <hr class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--horizontal spectrum-Dialog-divider">
+              <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
               <section class="spectrum-Dialog-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.</section>
             </div>
           </div>
@@ -53,7 +53,7 @@ examples:
           <div class="spectrum-Dialog spectrum-Dialog--large" role="dialog" tabindex="-1" aria-modal="true">
             <div class="spectrum-Dialog-grid">
               <h1 class="spectrum-Dialog-heading">Disclaimer</h1>
-              <hr class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--horizontal spectrum-Dialog-divider">
+              <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
               <section class="spectrum-Dialog-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.</section>
             </div>
           </div>
@@ -72,7 +72,7 @@ examples:
           <section class="spectrum-Dialog spectrum-Dialog--medium spectrum-Dialog--dismissable" role="dialog" tabindex="-1" aria-modal="true">
             <div class="spectrum-Dialog-grid">
               <h1 class="spectrum-Dialog-heading">Disclaimer</h1>
-              <hr class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--horizontal spectrum-Dialog-divider">
+              <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
               <section class="spectrum-Dialog-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
                 Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id
                 faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper
@@ -149,7 +149,7 @@ examples:
           <section class="spectrum-Dialog spectrum-Dialog--medium spectrum-Dialog--confirmation" role="alertdialog" tabindex="-1" aria-modal="true">
             <div class="spectrum-Dialog-grid">
               <h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">Enable Smart Filters?</h1>
-              <hr class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--horizontal spectrum-Dialog-divider">
+              <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
               <section class="spectrum-Dialog-content">Smart filters are nondestructive and will preserve your original images.</section>
               <div class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
                 <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-ButtonGroup-item" type="button" onclick="closeDialog(this.closest('.spectrum-Modal-wrapper'))">
@@ -175,7 +175,7 @@ examples:
           <section class="spectrum-Dialog spectrum-Dialog--medium spectrum-Dialog--information" role="alertdialog" tabindex="-1" aria-modal="true">
             <div class="spectrum-Dialog-grid">
               <h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">Connect to WiFi</h1>
-              <hr class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--horizontal spectrum-Dialog-divider">
+              <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
               <section class="spectrum-Dialog-content">Please connect to WiFi to sync your projects or go to Settings to change your preferences.</section>
               <div class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
                 <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-ButtonGroup-item" type="button" onclick="closeDialog(this.closest('.spectrum-Modal-wrapper'))">
@@ -201,7 +201,7 @@ examples:
           <section class="spectrum-Dialog spectrum-Dialog--medium spectrum-Dialog--destructive" role="alertdialog" tabindex="-1" aria-modal="true">
             <div class="spectrum-Dialog-grid">
               <h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">Delete 3 Documents</h1>
-              <hr class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--horizontal spectrum-Dialog-divider">
+              <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
               <section class="spectrum-Dialog-content">Are you sure you want to delete the 3 selected documents?</section>
               <div class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
                 <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-ButtonGroup-item" type="button" onclick="closeDialog(this.closest('.spectrum-Modal-wrapper'))">
@@ -230,7 +230,7 @@ examples:
               <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Dialog-typeIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-icon-18-Alert"></use>
               </svg>
-              <hr class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--horizontal spectrum-Dialog-divider">
+              <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
               <section class="spectrum-Dialog-content">An error occurred while sharing your project. Please verify the email address and try again.</section>
               <div class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
                 <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-ButtonGroup-item" type="button" onclick="closeDialog(this.closest('.spectrum-Modal-wrapper'))">
@@ -256,7 +256,7 @@ examples:
               <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Dialog-typeIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-icon-18-Alert"></use>
               </svg>
-              <hr class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--horizontal spectrum-Dialog-divider">
+              <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
               <section class="spectrum-Dialog-content">An error occurred while sharing your project. Please verify the email address and try again.</section>
               <div class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
                 <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary spectrum-ButtonGroup-item" type="button" onclick="closeDialog(this.closest('.spectrum-Modal-wrapper'))">
@@ -279,7 +279,7 @@ examples:
           <section class="spectrum-Dialog spectrum-Dialog--medium" role="alertdialog" tabindex="-1" aria-modal="true">
             <div class="spectrum-Dialog-grid">
               <h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">Rate This App</h1>
-              <hr class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--horizontal spectrum-Dialog-divider">
+              <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
               <section class="spectrum-Dialog-content">If you enjoy our app, would you mind taking a moment to rate it?</section>
               <div class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
                 <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-ButtonGroup-item" type="button" onclick="closeDialog(this.closest('.spectrum-Modal-wrapper'))">
@@ -309,7 +309,7 @@ examples:
           <section class="spectrum-Dialog spectrum-Dialog--large" role="alertdialog" tabindex="-1" aria-modal="true">
             <div class="spectrum-Dialog-grid">
               <h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">EULA</h1>
-              <hr class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--horizontal spectrum-Dialog-divider">
+              <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
               <section class="spectrum-Dialog-content">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                   aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -366,7 +366,7 @@ examples:
           <section class="spectrum-Dialog spectrum-Dialog--fullscreen" role="alertdialog" tabindex="-1" aria-modal="true">
             <div class="spectrum-Dialog-grid">
               <h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">Default Dialog - Fullscreen</h1>
-              <hr class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--horizontal spectrum-Dialog-divider">
+              <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
               <section class="spectrum-Dialog-content">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                   aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -423,7 +423,7 @@ examples:
           <section class="spectrum-Dialog spectrum-Dialog--fullscreenTakeover" role="alertdialog" tabindex="-1" aria-modal="true">
             <div class="spectrum-Dialog-grid">
               <h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">Fullscreen Takeover</h1>
-              <hr class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--horizontal spectrum-Dialog-divider">
+              <hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider">
               <section class="spectrum-Dialog-content"> This is a fullscreen takeover dialog.<br> This is a fullscreen takeover dialog.<br> This is a fullscreen takeover dialog.<br> This is a fullscreen takeover dialog.<br> This is a fullscreen takeover
                 dialog.<br> This is a fullscreen takeover dialog.<br> This is a fullscreen takeover dialog.<br> This is a fullscreen takeover dialog.<br> This is a fullscreen takeover dialog.<br> This is a fullscreen takeover dialog.<br> This is a
                 fullscreen takeover dialog.<br> This is a fullscreen takeover dialog.<br> This is a fullscreen takeover dialog.<br> This is a fullscreen takeover dialog.<br> This is a fullscreen takeover dialog.<br> This is a fullscreen takeover

diff --git a/components/divider/index.css b/components/divider/index.css
@@ -12,51 +12,46 @@ governing permissions and limitations under the License.
 
 @import "../commons/index.css";
 
-:root {
-  --spectrum-divider-vertical-height: 100%;
-}
 
-.spectrum-Divider {
-  inline-size: 100%;
-
-  /* Show the overflow for hr in Edge and IE. */
-  overflow: visible;
+@import "../vars/css/components/spectrum-divider.css";
 
-  border: none;
-  border-width: var(--spectrum-divider-medium-height);
-  border-radius: var(--spectrum-divider-medium-height);
+.spectrum-Divider--sizeS {
+  @remapvars {
+    find: --spectrum-divider-s-;
+    replace: --spectrum-divider-;
+  }
 }
 
-.spectrum-Divider--large {
-  block-size: var(--spectrum-divider-large-height);
-
-  border-radius: var(--spectrum-divider-large-border-radius);
+.spectrum-Divider--sizeM {
+  @remapvars {
+    find: --spectrum-divider-m-;
+    replace: --spectrum-divider-;
+  }
 }
 
-.spectrum-Divider--medium {
-  block-size: var(--spectrum-divider-medium-height);
+.spectrum-Divider--sizeL {
+  @remapvars {
+    find: --spectrum-divider-l-;
+    replace: --spectrum-divider-;
+  }
+}
 
-  border-radius: var(--spectrum-divider-medium-border-radius);
+.spectrum-Divider {
+  --spectrum-divider-vertical-height: 100%;
 }
 
-.spectrum-Divider--small {
-  block-size: var(--spectrum-divider-small-height);
+.spectrum-Divider {
+  inline-size: 100%;
 
-  border-radius: var(--spectrum-divider-small-border-radius);
+  /* Show the overflow for hr in Edge and IE. */
+  overflow: visible;
+
+  border: none;
+  border-width: var(--spectrum-divider-height);
+  border-radius: var(--spectrum-divider-height);
 }
 
 .spectrum-Divider--vertical {
   block-size: var(--spectrum-divider-vertical-height);
-
-  &.spectrum-Divider--large {
-    inline-size: var(--spectrum-divider-large-vertical-width);
-  }
-
-  &.spectrum-Divider--medium {
-    inline-size: var(--spectrum-divider-medium-vertical-width);
-  }
-
-  &.spectrum-Divider--small {
-    inline-size: var(--spectrum-divider-small-vertical-width);
-  }
+  inline-size: var(--spectrum-divider-vertical-width);
 }
diff --git a/components/divider/metadata/divider.yml b/components/divider/metadata/divider.yml
@@ -2,31 +2,34 @@ name: Divider
 status: Verified
 SpectrumSiteSlug: https://spectrum.adobe.com/page/divider/
 sections:
-  - name: Migrating from Rule
+  - name: Migration Guide
     description: |
       ### Component rename
       Rule is now named Divider. All instances of `.spectrum-Rule` in your code should be replaced with `.spectrum-Divider`, and the `@spectrum-css/divider` package should be used instead of `@spectrum-css/rule`.
 
       ### Change workflow icon size to medium
-      Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
+      Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.sections:
+
+      ### T-shirt sizing
+      Divider now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-Divider--size*` class.
 examples:
   - id: divider-large
     name: 'Large'
     markup: |
       <h2 class="spectrum-Heading spectrum-Heading--sizeM">Large</h2>
-      <hr class="spectrum-Divider spectrum-Divider--large">
+      <hr class="spectrum-Divider spectrum-Divider--sizeL">
       <p class="spectrum-Body">Page or Section Titles.</p>
   - id: divider-medium
     name: 'Medium'
     markup: |
       <h2 class="spectrum-Heading spectrum-Heading--sizeS">Medium</h2>
-      <hr class="spectrum-Divider spectrum-Divider--medium">
+      <hr class="spectrum-Divider spectrum-Divider--sizeM">
       <p class="spectrum-Body">Divide subsections, or divide different groups of elements (between panels, rails, etc.)</p>
   - id: divider-small
     name: 'Small'
     markup: |
       <h2 class="spectrum-Heading spectrum-Heading--sizeXS">Small</h2>
-      <hr class="spectrum-Divider spectrum-Divider--small">
+      <hr class="spectrum-Divider spectrum-Divider--sizeS">
       <p class="spectrum-Body">Divide like-elements (tables, tool groups, elements within a panel, etc.)</p>
   - id: divider-vertical-small
     name: 'Vertical, Small'
@@ -39,7 +42,7 @@ examples:
             <use xlink:href="#spectrum-icon-18-Properties" />
           </svg>
         </button>
-        <div class="spectrum-Divider spectrum-Divider--small spectrum-Divider--vertical" style="height: auto; align-self: stretch;"></div>
+        <div class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--vertical" style="height: auto; align-self: stretch;"></div>
         <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
           <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Select">
             <use xlink:href="#spectrum-icon-18-Select" />
@@ -55,7 +58,7 @@ examples:
             <use xlink:href="#spectrum-icon-18-Properties" />
           </svg>
         </button>
-        <div class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--vertical" style="height: auto; align-self: stretch;"></div>
+        <div class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--vertical" style="height: auto; align-self: stretch;"></div>
         <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
           <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Select">
             <use xlink:href="#spectrum-icon-18-Select" />