feat(rule): update spectrum css input

adobe · Jan 6, 2021 · 1e9f240 · 1e9f240
1 parent 05d8131
commit 1e9f240
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 44 deletions.
diff --git a/packages/rule/README.md b/packages/rule/README.md
@@ -29,15 +29,15 @@ import { Rule } from '@spectrum-web-components/rule';
 
 ```html-live
 <h2 class="spectrum-Heading spectrum-Heading--M">Large</h2>
-<sp-rule size="large"></sp-rule>
+<sp-rule size="l"></sp-rule>
 <p class="spectrum-Body">Page or Section Titles.</p>
 ```
 
 ### Medium
 
 ```html-live
 <h3 class="spectrum-Heading spectrum-Heading--S">Medium</h3>
-<sp-rule size="medium"></sp-rule>
+<sp-rule size="m"></sp-rule>
 <p class="spectrum-Body">
     Divide subsections, or divide different groups of elements (between panels,
     rails, etc.)
@@ -48,7 +48,7 @@ import { Rule } from '@spectrum-web-components/rule';
 
 ```html-live
 <h4 class="spectrum-Heading spectrum-Heading--XS">Small</h4>
-<sp-rule size="small"></sp-rule>
+<sp-rule size="s"></sp-rule>
 <p class="spectrum-Body">
     Divide like-elements (tables, tool groups, elements within a panel, etc.)
 </p>
@@ -64,7 +64,7 @@ When a vertical Rule is used inside of a flex container, use `align-self: stretc
     <sp-action-button quiet label="Zoom in">
         <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
     </sp-action-button>
-    <sp-rule size="small" vertical></sp-rule>
+    <sp-rule size="s" vertical></sp-rule>
     <sp-action-button quiet label="Zoom in">
         <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
     </sp-action-button>
@@ -78,7 +78,7 @@ When a vertical Rule is used inside of a flex container, use `align-self: stretc
     <sp-action-button quiet label="Zoom in">
         <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
     </sp-action-button>
-    <sp-rule size="medium" vertical></sp-rule>
+    <sp-rule size="m" vertical></sp-rule>
     <sp-action-button quiet label="Zoom in">
         <sp-icon slot="icon" size="m" name="ui:Magnifier"></sp-icon>
     </sp-action-button>

diff --git a/packages/rule/package.json b/packages/rule/package.json
@@ -51,7 +51,8 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/divider": "^1.0.0-beta.2"
+        "@spectrum-css/divider": "^1.0.0-beta.3",
+        "@spectrum-web-components/action-button": "^0.0.1"
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",

diff --git a/packages/rule/src/spectrum-config.js b/packages/rule/src/spectrum-config.js
@@ -27,10 +27,20 @@ const config = {
                 {
                     type: 'enum',
                     name: 'size',
+                    forceOntoHost: true,
                     values: [
-                        '.spectrum-Divider--small',
-                        '.spectrum-Divider--medium',
-                        '.spectrum-Divider--large',
+                        {
+                            name: 's',
+                            selector: '.spectrum-Divider--sizeS',
+                        },
+                        {
+                            name: 'm',
+                            selector: '.spectrum-Divider--sizeM',
+                        },
+                        {
+                            name: 'l',
+                            selector: '.spectrum-Divider--sizeL',
+                        },
                     ],
                 },
             ],

diff --git a/packages/rule/src/spectrum-rule.css b/packages/rule/src/spectrum-rule.css
@@ -10,17 +10,17 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 
 THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-.spectrum-Divider--sizeS {
+:host([size='s']) {
     /* .spectrum-Divider--sizeS */
     --spectrum-divider-height: var(--spectrum-global-dimension-size-10);
     --spectrum-divider-vertical-width: var(--spectrum-global-dimension-size-10);
 }
-.spectrum-Divider--sizeM {
+:host([size='m']) {
     /* .spectrum-Divider--sizeM */
     --spectrum-divider-height: var(--spectrum-global-dimension-size-25);
     --spectrum-divider-vertical-width: var(--spectrum-global-dimension-size-25);
 }
-.spectrum-Divider--sizeL {
+:host([size='l']) {
     /* .spectrum-Divider--sizeL */
     --spectrum-divider-height: var(--spectrum-global-dimension-size-50);
     --spectrum-divider-vertical-width: var(--spectrum-global-dimension-size-50);
@@ -52,15 +52,15 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         --spectrum-global-color-gray-300
     );
 }
-.spectrum-Divider--sizeL {
+:host([size='l']) {
     /* .spectrum-Divider--sizeL */
     background-color: var(--spectrum-divider-l-background-color);
 }
-.spectrum-Divider--sizeM {
+:host([size='m']) {
     /* .spectrum-Divider--sizeM */
     background-color: var(--spectrum-divider-m-background-color);
 }
-.spectrum-Divider--sizeS {
+:host([size='s']) {
     /* .spectrum-Divider--sizeS */
     background-color: var(--spectrum-divider-s-background-color);
 }
diff --git a/packages/rule/stories/rule.stories.ts b/packages/rule/stories/rule.stories.ts
@@ -10,12 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, select } from '@open-wc/demoing-storybook';
+import { html } from '@open-wc/demoing-storybook';
 import { TemplateResult } from '@spectrum-web-components/base';
 
 import '../sp-rule.js';
 import './typography-decorator.js';
-import '@spectrum-web-components/button/sp-action-button.js';
+import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/icon/sp-icon.js';
 import {
     AlignLeftIcon,
@@ -32,29 +32,17 @@ export default {
 };
 
 export const large = (): TemplateResult => {
-    const size = select(
-        'Size',
-        ['small', 'medium', 'large'],
-        'large',
-        'Element'
-    );
     return html`
         <h2 class="spectrum-Heading spectrum-Heading--sizeM">Large</h2>
-        <sp-rule size=${size}></sp-rule>
+        <sp-rule size="l"></sp-rule>
         <p class="spectrum-Body">Page or Section Titles.</p>
     `;
 };
 
 export const medium = (): TemplateResult => {
-    const size = select(
-        'Size',
-        ['small', 'medium', 'large'],
-        'medium',
-        'Element'
-    );
     return html`
         <h3 class="spectrum-Heading spectrum-Heading--sizeS">Medium</h3>
-        <sp-rule size=${size}></sp-rule>
+        <sp-rule size="m"></sp-rule>
         <p class="spectrum-Body">
             Divide subsections, or divide different groups of elements (between
             panels, rails, etc.)
@@ -63,15 +51,9 @@ export const medium = (): TemplateResult => {
 };
 
 export const small = (): TemplateResult => {
-    const size = select(
-        'Size',
-        ['small', 'medium', 'large'],
-        'small',
-        'Element'
-    );
     return html`
         <h4 class="spectrum-Heading spectrum-Heading--sizeXS">Small</h4>
-        <sp-rule size=${size}></sp-rule>
+        <sp-rule size="s"></sp-rule>
         <p class="spectrum-Body">
             Divide like-elements (tables, tool groups, elements within a panel,
             etc.)
@@ -80,15 +62,16 @@ export const small = (): TemplateResult => {
 };
 
 export const verticalSmall = (): TemplateResult => {
-    const size = select('Size', ['small', 'medium'], 'small', 'Element');
     return html`
-        <div style="height: 32px; display: flex;">
+        <div
+            style="height: var(--spectrum-global-dimension-size-400, 32px); display: flex;"
+        >
             <sp-action-button quiet>
                 <sp-icon slot="icon">
                     ${AlignLeftIcon()}
                 </sp-icon>
             </sp-action-button>
-            <sp-rule size=${size} vertical></sp-rule>
+            <sp-rule size="s" vertical></sp-rule>
             <sp-action-button quiet>
                 <sp-icon slot="icon">
                     ${AlignRightIcon()}
@@ -99,15 +82,16 @@ export const verticalSmall = (): TemplateResult => {
 };
 
 export const verticalMedium = (): TemplateResult => {
-    const size = select('Size', ['small', 'medium'], 'medium', 'Element');
     return html`
-        <div style="height: 32px; display: flex;">
+        <div
+            style="height: var(--spectrum-global-dimension-size-400, 32px); display: flex;"
+        >
             <sp-action-button quiet>
                 <sp-icon slot="icon">
                     ${AlignLeftIcon()}
                 </sp-icon>
             </sp-action-button>
-            <sp-rule size=${size} vertical></sp-rule>
+            <sp-rule size="m" vertical></sp-rule>
             <sp-action-button quiet>
                 <sp-icon slot="icon">
                     ${AlignRightIcon()}