fix: support a wider number of sizes

adobe · Feb 24, 2021 · ee44978 · ee44978
1 parent a7ecf4b
commit ee44978
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 9 deletions.
diff --git a/packages/action-button/src/ActionButton.ts b/packages/action-button/src/ActionButton.ts
@@ -17,6 +17,7 @@ import {
     PropertyValues,
     TemplateResult,
     SizedMixin,
+    ElementSize,
 } from '@spectrum-web-components/base';
 import { ButtonBase } from '@spectrum-web-components/button';
 import buttonStyles from './action-button.css.js';
@@ -38,6 +39,8 @@ export type LongpressEvent = {
     source: 'pointer' | 'keyboard';
 };
 
+type ActionButtonSize = Exclude<ElementSize, 'xxl'>;
+
 /**
  * @element sp-card
  *
@@ -178,7 +181,9 @@ export class ActionButton extends SizedMixin(ButtonBase) {
             buttonContent.unshift(html`
                 <sp-icon
                     id="hold-affordance"
-                    class="${holdAffordanceClass[this.size]}"
+                    class="${holdAffordanceClass[
+                        this.size as ActionButtonSize
+                    ]}"
                 >
                     ${CornerTriangle300Icon()}
                 </sp-icon>

diff --git a/packages/base/src/sizedMixin.ts b/packages/base/src/sizedMixin.ts
@@ -17,7 +17,7 @@ type Constructor<T = Record<string, unknown>> = {
     prototype: T;
 };
 
-type ElementSize = 's' | 'm' | 'l' | 'xl';
+export type ElementSize = 's' | 'm' | 'l' | 'xl' | 'xxl';
 
 export interface SizedElementInterface {
     size: ElementSize;
@@ -29,7 +29,7 @@ export function SizedMixin<T extends Constructor<UpdatingElement>>(
         validSizes = ['s', 'm', 'l', 'xl'],
         noDefaultSize,
     }: {
-        validSizes?: Partial<ElementSize>[];
+        validSizes?: ElementSize[];
         noDefaultSize?: boolean;
     } = {}
 ): T & Constructor<SizedElementInterface> {

diff --git a/packages/checkbox/src/Checkbox.ts b/packages/checkbox/src/Checkbox.ts
@@ -17,6 +17,7 @@ import {
     property,
     PropertyValues,
     SizedMixin,
+    ElementSize,
 } from '@spectrum-web-components/base';
 import { CheckboxBase } from './CheckboxBase.js';
 import '@spectrum-web-components/icon/sp-icon.js';
@@ -62,6 +63,8 @@ const dashIcon = {
     xl: Dash300Icon,
 };
 
+type CheckboxSize = Exclude<ElementSize, 'xxl'>;
+
 export class Checkbox extends SizedMixin(CheckboxBase) {
     @property({ type: Boolean, reflect: true })
     public indeterminate = false;
@@ -80,11 +83,17 @@ export class Checkbox extends SizedMixin(CheckboxBase) {
         return html`
             ${super.render()}
             <span id="box">
-                <sp-icon id="checkmark" class=${checkmarkClass[this.size]}>
-                    ${checkmarkIcon[this.size]()}
+                <sp-icon
+                    id="checkmark"
+                    class=${checkmarkClass[this.size as CheckboxSize]}
+                >
+                    ${checkmarkIcon[this.size as CheckboxSize]()}
                 </sp-icon>
-                <sp-icon id="partialCheckmark" class=${dashClass[this.size]}>
-                    ${dashIcon[this.size]()}
+                <sp-icon
+                    id="partialCheckmark"
+                    class=${dashClass[this.size as CheckboxSize]}
+                >
+                    ${dashIcon[this.size as CheckboxSize]()}
                 </sp-icon>
             </span>
             <label id="label"><slot></slot></label>

diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
@@ -20,6 +20,7 @@ import {
     nothing,
     ifDefined,
     SizedMixin,
+    ElementSize,
 } from '@spectrum-web-components/base';
 
 import pickerStyles from './picker.css.js';
@@ -50,6 +51,8 @@ const chevronClass = {
     xl: 'spectrum-UIIcon-ChevronDown300',
 };
 
+type PickerSize = Exclude<ElementSize, 'xxl'>;
+
 /**
  * @element sp-picker
  * @slot label - The placeholder content for the picker
@@ -315,7 +318,9 @@ export class PickerBase extends SizedMixin(Focusable) {
                           <sp-icon-alert class="validationIcon"></sp-icon-alert>
                       `
                     : nothing}
-                <sp-icon class="icon picker ${chevronClass[this.size]}">
+                <sp-icon
+                    class="icon picker ${chevronClass[this.size as PickerSize]}"
+                >
                     ${Chevron100Icon()}
                 </sp-icon>
             `,

diff --git a/packages/split-button/src/SplitButton.ts b/packages/split-button/src/SplitButton.ts
@@ -19,6 +19,7 @@ import {
     query,
     ifDefined,
     SizedMixin,
+    ElementSize,
 } from '@spectrum-web-components/base';
 
 import '@spectrum-web-components/button/sp-button.js';
@@ -37,6 +38,8 @@ const chevronClass = {
     xl: 'spectrum-UIIcon-ChevronDown300',
 };
 
+type SplitButtonSize = Exclude<ElementSize, 'xxl'>;
+
 /**
  * @slot options - The menu with options that will display when the picker is open
  */
@@ -141,7 +144,7 @@ export class SplitButton extends SizedMixin(PickerBase) {
                 >
                     <sp-icon
                         class="icon ${this.type === 'field'
-                            ? chevronClass[this.size]
+                            ? chevronClass[this.size as SplitButtonSize]
                             : ''}"
                     >
                         ${this.type === 'field'