fix(action-button): add support for XS t-shirt size

adobe · Oct 7, 2022 · 75440ce · 75440ce
1 parent fc153ae
commit 75440ce
Show file tree

Hide file tree

Showing 13 changed files with 98 additions and 2 deletions.
diff --git a/packages/action-button/README.md b/packages/action-button/README.md
@@ -27,6 +27,26 @@ import { ActionButton } from '@spectrum-web-components/action-button';
 ## Sizes
 
 <sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="xs">Extra Small</sp-tab>
+<sp-tab-panel value="xs">
+
+```html demo
+<sp-action-group>
+    <sp-action-button size="xs">Edit</sp-action-button>
+    <sp-action-button size="xs">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+        Edit
+    </sp-action-button>
+    <sp-action-button size="xs">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
+    <sp-action-button size="xs" hold-affordance>
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
+</sp-action-group>
+```
+
+</sp-tab-panel>
 <sp-tab value="s">Small</sp-tab>
 <sp-tab-panel value="s">
 

diff --git a/packages/action-button/src/ActionButton.ts b/packages/action-button/src/ActionButton.ts
@@ -25,6 +25,7 @@ import cornerTriangleStyles from '@spectrum-web-components/icon/src/spectrum-ico
 import '@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js';
 
 const holdAffordanceClass = {
+    xs: 'spectrum-UIIcon-CornerTriangle75',
     s: 'spectrum-UIIcon-CornerTriangle75',
     m: 'spectrum-UIIcon-CornerTriangle100',
     l: 'spectrum-UIIcon-CornerTriangle200',
@@ -48,7 +49,9 @@ export type LongpressEvent = {
  * `pointerdown` event that is >=300ms or a keyboard event wher code is `Space` or code is `ArrowDown`
  * while `altKey===true`.
  */
-export class ActionButton extends SizedMixin(ButtonBase) {
+export class ActionButton extends SizedMixin(ButtonBase, {
+    validSizes: ['xs', 's', 'm', 'l', 'xl'],
+}) {
     public static override get styles(): CSSResultArray {
         return [buttonStyles, cornerTriangleStyles];
     }

diff --git a/packages/action-button/src/action-button.css b/packages/action-button/src/action-button.css
@@ -44,6 +44,25 @@ governing permissions and limitations under the License.
     text-align: var(--spectrum-actionbutton-label-text-align);
 }
 
+:host([size='xs']) {
+    /* Work around non-square icon only Action Buttons in Spectrum CSS */
+    min-width: var(--spectrum-actionbutton-height, 0);
+
+    /* Pass t-shirt sizing to icons within the XS-sized Action Button */
+    --spectrum-icon-tshirt-size-height: var(
+        --spectrum-alias-workflow-icon-size-xs
+    );
+    --spectrum-icon-tshirt-size-width: var(
+        --spectrum-alias-workflow-icon-size-xs
+    );
+    --spectrum-ui-icon-tshirt-size-height: var(
+        --spectrum-alias-ui-icon-cornertriangle-size-75
+    );
+    --spectrum-ui-icon-tshirt-size-width: var(
+        --spectrum-alias-ui-icon-cornertriangle-size-75
+    );
+}
+
 :host([size='s']) {
     --spectrum-icon-tshirt-size-height: var(
         --spectrum-alias-workflow-icon-size-s

diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css
@@ -76,7 +76,7 @@ governing permissions and limitations under the License.
             var(--spectrum-actionbutton-focus-ring-gap)
     );
 }
-.spectrum-ActionButton--sizeXS {
+:host([size='xs']) {
     --spectrum-actionbutton-min-width: calc(
         var(--spectrum-component-edge-to-visual-only-75) * 2 +
             var(--spectrum-workflow-icon-size-75)

diff --git a/packages/action-button/src/spectrum-config.js b/packages/action-button/src/spectrum-config.js
@@ -71,6 +71,10 @@ const config = {
                     type: 'enum',
                     name: 'size',
                     values: [
+                        {
+                            name: 'xs',
+                            selector: '.spectrum-ActionButton--sizeXS',
+                        },
                         {
                             name: 's',
                             selector: '.spectrum-ActionButton--sizeS',

diff --git a/packages/action-button/stories/action-button-black-quiet.stories.ts b/packages/action-button/stories/action-button-black-quiet.stories.ts
@@ -23,6 +23,13 @@ export default {
 const variant = 'black';
 const quiet = true;
 
+export const XS = (args: Properties): TemplateResult => renderButtons(args);
+XS.args = {
+    size: 'xs',
+    quiet,
+    variant,
+};
+
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
     size: 's',

diff --git a/packages/action-button/stories/action-button-black.stories.ts b/packages/action-button/stories/action-button-black.stories.ts
@@ -22,6 +22,12 @@ export default {
 
 const variant = 'black';
 
+export const XS = (args: Properties): TemplateResult => renderButtons(args);
+XS.args = {
+    size: 'xs',
+    variant,
+};
+
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
     size: 's',

diff --git a/packages/action-button/stories/action-button-emphasized-quiet.stories.ts b/packages/action-button/stories/action-button-emphasized-quiet.stories.ts
@@ -21,6 +21,13 @@ export default {
 const emphasized = true;
 const quiet = true;
 
+export const XS = (args: Properties): TemplateResult => renderButtons(args);
+XS.args = {
+    emphasized,
+    size: 'xs',
+    quiet,
+};
+
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
     emphasized,

diff --git a/packages/action-button/stories/action-button-emphasized.stories.ts b/packages/action-button/stories/action-button-emphasized.stories.ts
@@ -20,6 +20,12 @@ export default {
 
 const emphasized = true;
 
+export const XS = (args: Properties): TemplateResult => renderButtons(args);
+XS.args = {
+    emphasized,
+    size: 'xs',
+};
+
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
     emphasized,

diff --git a/packages/action-button/stories/action-button-quiet.stories.ts b/packages/action-button/stories/action-button-quiet.stories.ts
@@ -20,6 +20,12 @@ export default {
 
 const quiet = true;
 
+export const XS = (args: Properties): TemplateResult => renderButtons(args);
+XS.args = {
+    size: 'xs',
+    quiet,
+};
+
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
     size: 's',

diff --git a/packages/action-button/stories/action-button-standard.stories.ts b/packages/action-button/stories/action-button-standard.stories.ts
@@ -18,6 +18,11 @@ export default {
     title: 'Action Button/Standard',
 };
 
+export const XS = (args: Properties): TemplateResult => renderButtons(args);
+XS.args = {
+    size: 'xs',
+};
+
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
     size: 's',

diff --git a/packages/action-button/stories/action-button-white-quiet.stories.ts b/packages/action-button/stories/action-button-white-quiet.stories.ts
@@ -23,6 +23,13 @@ export default {
 const variant = 'white';
 const quiet = true;
 
+export const XS = (args: Properties): TemplateResult => renderButtons(args);
+XS.args = {
+    size: 'xs',
+    quiet,
+    variant,
+};
+
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
     size: 's',

diff --git a/packages/action-button/stories/action-button-white.stories.ts b/packages/action-button/stories/action-button-white.stories.ts
@@ -22,6 +22,12 @@ export default {
 
 const variant = 'white';
 
+export const XS = (args: Properties): TemplateResult => renderButtons(args);
+XS.args = {
+    size: 'xs',
+    variant,
+};
+
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
     size: 's',