feat: use SixedMixin to manage "size" property

packages/action-button/src/ActionButton.ts

@@ -24,6 +24,13 @@ import '@spectrum-web-components/icon/sp-icon.js';
 import cornerTriangleStyles from '@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js';
 import { CornerTriangle300Icon } from '@spectrum-web-components/icons-ui';
 
+const holdAffordanceClass = {
+    s: 'spectrum-UIIcon-CornerTriangle75',
+    m: 'spectrum-UIIcon-CornerTriangle100',
+    l: 'spectrum-UIIcon-CornerTriangle200',
+    xl: 'spectrum-UIIcon-CornerTriangle300',
+};
+
 /**
  * @element sp-card
  *
@@ -100,7 +107,7 @@ export class ActionButton extends SizedMixin(ButtonBase) {
                 <sp-icon
                     id="hold-affordance"
                     size="none"
-                    class="spectrum-UIIcon-CornerTriangle75"
+                    class="${holdAffordanceClass[this.size]}"
                 >
                     ${CornerTriangle300Icon()}
                 </sp-icon>

packages/action-button/stories/action-button-sizes.stories.ts

@@ -0,0 +1,130 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { html, action } from '@open-wc/demoing-storybook';
+import { TemplateResult } from '@spectrum-web-components/base';
+import '@spectrum-web-components/icon/sp-icon.js';
+import { EditIcon } from '@spectrum-web-components/icons-workflow';
+
+import '../src';
+import '../sp-action-button.js';
+
+interface Properties {
+    quiet?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    toggles?: boolean;
+    emphasized?: boolean;
+    size?: 's' | 'm' | 'l' | 'xl';
+    holdAffordance?: boolean;
+    icon?: TemplateResult;
+    label?: string;
+}
+
+function renderButton(properties: Properties): TemplateResult {
+    return html`
+        <sp-action-button
+            ?quiet="${!!properties.quiet}"
+            ?emphasized="${!!properties.emphasized}"
+            ?disabled=${!!properties.disabled}
+            ?selected=${!!properties.selected}
+            ?toggles=${!!properties.toggles}
+            @click=${action(`Action`)}
+            size=${properties.size || 'm'}
+            ?hold-affordance=${!!properties.holdAffordance}
+        >
+            ${properties.icon}${properties.label}
+        </sp-action-button>
+    `;
+}
+
+function renderButtonsSelected(properties: Properties): TemplateResult {
+    const icon = html`
+        <sp-icon slot="icon" size=${properties.size || 'm'}>
+            ${EditIcon({ hidden: true })}
+        </sp-icon>
+    `;
+    const label = 'Edit';
+    const emphasized = true;
+    const holdAffordance = true;
+    const quiet = true;
+    const disabled = Object.assign({}, properties, { disabled: true });
+    const selected = Object.assign({}, properties, { selected: true });
+    return html`
+        <div>
+            ${renderButton({
+                ...properties,
+                label,
+            })}
+            ${renderButton({
+                ...properties,
+                label,
+                icon,
+            })}
+            ${renderButton({
+                ...properties,
+                icon,
+            })}
+            ${renderButton({
+                ...properties,
+                icon,
+                holdAffordance,
+            })}
+            ${renderButton({
+                ...properties,
+                icon,
+                quiet,
+            })}
+            ${renderButton({
+                ...selected,
+                icon,
+            })}
+            ${renderButton({
+                ...selected,
+                emphasized,
+                icon,
+            })}
+            ${renderButton({
+                ...disabled,
+                icon,
+            })}
+        </div>
+    `;
+}
+
+export default {
+    component: 'sp-action-button',
+    title: 'Action Button/Sizes',
+};
+
+export const s = (): TemplateResult => {
+    return renderButtonsSelected({
+        size: 's',
+    });
+};
+
+export const m = (): TemplateResult => {
+    return renderButtonsSelected({
+        size: 'm',
+    });
+};
+
+export const l = (): TemplateResult => {
+    return renderButtonsSelected({
+        size: 'l',
+    });
+};
+
+export const XL = (): TemplateResult => {
+    return renderButtonsSelected({
+        size: 'xl',
+    });
+};

packages/action-button/stories/action-button.stories.ts

@@ -17,7 +17,7 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';
 
-import '../';
+import '../src';
 import '../sp-action-button.js';
 
 interface Properties {
@@ -26,6 +26,7 @@ interface Properties {
     selected?: boolean;
     toggles?: boolean;
     emphasized?: boolean;
+    size?: 's' | 'm' | 'l' | 'xl';
 }
 
 function renderButton(properties: Properties): TemplateResult {
@@ -37,12 +38,18 @@ function renderButton(properties: Properties): TemplateResult {
             ?selected=${!!properties.selected}
             ?toggles=${!!properties.toggles}
             @click=${action(`Action`)}
+            size=${properties.size || 'm'}
         >
             Action
         </sp-action-button>
     `;
 }
 
+export default {
+    component: 'sp-action-button',
+    title: 'Action Button',
+};
+
 function renderButtonsSelected(properties: Properties): TemplateResult {
     const disabled = Object.assign({}, properties, { disabled: true });
     const selected = Object.assign({}, properties, { selected: true });
@@ -54,19 +61,6 @@ function renderButtonsSelected(properties: Properties): TemplateResult {
     `;
 }
 
-export default {
-    component: 'sp-action-button',
-    title: 'ActionButton',
-};
-
-export const Default = (): TemplateResult => {
-    return renderButtonsSelected({
-        quiet: false,
-        disabled: false,
-        selected: false,
-    });
-};
-
 export const emphasized = (): TemplateResult => {
     return renderButtonsSelected({
         emphasized: true,

packages/bar-loader/stories/bar-loader-sizes.stories.ts

@@ -0,0 +1,44 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { html, TemplateResult } from '@spectrum-web-components/base';
+
+import '../sp-bar-loader.js';
+
+export default {
+    title: 'Bar Loader/Sizes',
+    component: 'sp-bar-loader',
+};
+
+export const s = (): TemplateResult => {
+    return html`
+        <sp-bar-loader label="Loading" progress="50" size="s"></sp-bar-loader>
+    `;
+};
+
+export const m = (): TemplateResult => {
+    return html`
+        <sp-bar-loader label="Loading" progress="50" size="m"></sp-bar-loader>
+    `;
+};
+
+export const l = (): TemplateResult => {
+    return html`
+        <sp-bar-loader label="Loading" progress="50" size="l"></sp-bar-loader>
+    `;
+};
+
+export const XL = (): TemplateResult => {
+    return html`
+        <sp-bar-loader label="Loading" progress="50" size="xl"></sp-bar-loader>
+    `;
+};

packages/bar-loader/stories/bar-loader.stories.ts

@@ -19,12 +19,6 @@ export default {
     component: 'sp-bar-loader',
 };
 
-export const Default = (): TemplateResult => {
-    return html`
-        <sp-bar-loader progress="50"></sp-bar-loader>
-    `;
-};
-
 export const label = (): TemplateResult => {
     return html`
         <sp-bar-loader label="Loading" progress="50"></sp-bar-loader>

packages/base/src/sizedMixin.ts

@@ -25,7 +25,7 @@ export interface SizedElementInterface {
 
 export function SizedMixin<T extends Constructor<UpdatingElement>>(
     constructor: T,
-    sizes = ['s', 'm', 'l', 'xl']
+    validSizes: Partial<ElementSize>[] = ['s', 'm', 'l', 'xl']
 ): T & Constructor<SizedElementInterface> {
     class SizedElement extends constructor {
         @property({ type: String, reflect: true })
@@ -34,8 +34,8 @@ export function SizedMixin<T extends Constructor<UpdatingElement>>(
         }
 
         public set size(value: ElementSize) {
-            const size = value.toLocaleLowerCase();
-            const validSize = (sizes.includes(size)
+            const size = value.toLocaleLowerCase() as ElementSize;
+            const validSize = (validSizes.includes(size)
                 ? size
                 : 'm') as ElementSize;
             if (this._size === validSize) return;

packages/button/stories/button-cta-sizes.stories.ts

@@ -0,0 +1,29 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { TemplateResult } from '@spectrum-web-components/base';
+import { renderButtonSet } from './index.js';
+
+export default {
+    component: 'sp-button',
+    title: 'Button/CTA/Sizes',
+};
+
+const variant = 'cta';
+
+export const s = (): TemplateResult => renderButtonSet({ size: 's', variant });
+
+export const m = (): TemplateResult => renderButtonSet({ size: 'm', variant });
+
+export const l = (): TemplateResult => renderButtonSet({ size: 'l', variant });
+
+export const XL = (): TemplateResult =>
+    renderButtonSet({ size: 'xl', variant });