fix(card): normalize sizing technique to align with future t-shirt si…

…ze usage
adobe · Aug 13, 2021 · 6f05b3b · 6f05b3b
1 parent d96ccb6
commit 6f05b3b
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 49 deletions.
diff --git a/packages/card/README.md b/packages/card/README.md
@@ -192,13 +192,13 @@ Gallery cards can contain a heading, a subheading, an image preview, a descripti
 </div>
 ```
 
-### Small
+### Size
 
-The `small` attriibute can be applied to a standard card:
+`size="s"` will delivery the `<sp-card>` element at a "small" size. It can be leveraged with a standard card:
 
 ```html demo
 <div style="width: 208px; height: 264px">
-    <sp-card small heading="Card Heading" subheading="JPG Photo">
+    <sp-card size="s" heading="Card Heading" subheading="JPG Photo">
         <img
             slot="cover-photo"
             alt="Demo Image"
@@ -215,7 +215,7 @@ A `horizontal` card:
 <div
     style="color: var(--spectrum-body-text-color, var(--spectrum-alias-text-color));"
 >
-    <sp-card small horizontal heading="Card Heading" subheading="JPG Photo">
+    <sp-card size="s" horizontal heading="Card Heading" subheading="JPG Photo">
         <sp-icon slot="preview" style="width: 36px; height: 36px;">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -241,7 +241,7 @@ Or a `quiet` card:
     style="color: var(--spectrum-body-text-color, var(--spectrum-alias-text-color)); width: 110px;"
 >
     <sp-card
-        small
+        size="s"
         heading="Card Heading"
         subheading="JPG Photo"
         variant="quiet"

diff --git a/packages/card/src/Card.ts b/packages/card/src/Card.ts
@@ -65,8 +65,8 @@ export class Card extends ObserveSlotPresence(
     @property({ type: Boolean, reflect: true })
     public horizontal = false;
 
-    @property({ type: Boolean, reflect: true })
-    public small = false;
+    @property({ type: String, reflect: true })
+    public size?: 's';
 
     @property({ type: Boolean, reflect: true })
     public focused = false;
@@ -152,9 +152,7 @@ export class Card extends ObserveSlotPresence(
     protected get renderHeading(): TemplateResult {
         return html`
             <div class="title spectrum-Heading spectrum-Heading--sizeXS">
-                <slot name="heading">
-                    ${this.heading}
-                </slot>
+                <slot name="heading">${this.heading}</slot>
             </div>
         `;
     }
@@ -195,9 +193,7 @@ export class Card extends ObserveSlotPresence(
     private get renderSubtitleAndDescription(): TemplateResult {
         return html`
             <div class="subtitle spectrum-Detail spectrum-Detail--sizeS">
-                <slot name="subheading">
-                    ${this.subheading}
-                </slot>
+                <slot name="subheading">${this.subheading}</slot>
             </div>
             <slot name="description"></slot>
         `;
@@ -217,7 +213,7 @@ export class Card extends ObserveSlotPresence(
                       </sp-quick-actions>
                   `
                 : html``}
-            ${this.variant === 'quiet' && this.small
+            ${this.variant === 'quiet' && this.size === 's'
                 ? html`
                       <sp-quick-actions class="spectrum-QuickActions actions">
                           <slot name="actions"></slot>
@@ -231,7 +227,7 @@ export class Card extends ObserveSlotPresence(
                     ${this.variant === 'gallery'
                         ? this.renderSubtitleAndDescription
                         : html``}
-                    ${this.variant !== 'quiet' || !this.small
+                    ${this.variant !== 'quiet' || this.size !== 's'
                         ? html`
                               <div class="actionButton">
                                   <slot name="actions"></slot>

diff --git a/packages/card/src/spectrum-card.css b/packages/card/src/spectrum-card.css
@@ -451,35 +451,35 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
    * .spectrum-Card--quiet .spectrum-Card-body */
     padding: 0;
 }
-:host([small]) {
+:host([size='s']) {
     /* .spectrum-Card--small */
     min-width: var(
         --spectrum-card-quiet-small-min-size,
         var(--spectrum-global-dimension-size-900)
     );
 }
-:host([dir='ltr'][small]) .quickActions {
+:host([dir='ltr'][size='s']) .quickActions {
     /* [dir=ltr] .spectrum-Card--small .spectrum-Card-quickActions */
     left: var(
         --spectrum-card-quiet-small-checkbox-margin,
         var(--spectrum-global-dimension-size-125)
     );
 }
-:host([dir='rtl'][small]) .quickActions {
+:host([dir='rtl'][size='s']) .quickActions {
     /* [dir=rtl] .spectrum-Card--small .spectrum-Card-quickActions */
     right: var(
         --spectrum-card-quiet-small-checkbox-margin,
         var(--spectrum-global-dimension-size-125)
     );
 }
-:host([small]) .quickActions {
+:host([size='s']) .quickActions {
     /* .spectrum-Card--small .spectrum-Card-quickActions */
     top: var(
         --spectrum-card-quiet-small-checkbox-margin,
         var(--spectrum-global-dimension-size-125)
     );
 }
-:host([small]) #preview {
+:host([size='s']) #preview {
     /* .spectrum-Card--small .spectrum-Card-preview */
     padding: var(
         --spectrum-card-quiet-small-preview-padding,
@@ -490,7 +490,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-global-dimension-size-900)
     );
 }
-:host([small]) .header {
+:host([size='s']) .header {
     /* .spectrum-Card--small .spectrum-Card-header */
     margin-top: var(
         --spectrum-card-quiet-small-body-margin-top,
@@ -501,7 +501,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-global-dimension-size-150)
     );
 }
-:host([small]) .title {
+:host([size='s']) .title {
     /* .spectrum-Card--small .spectrum-Card-title */
     font-size: var(
         --spectrum-card-quiet-small-title-text-size,

diff --git a/packages/card/src/spectrum-config.js b/packages/card/src/spectrum-config.js
@@ -79,9 +79,14 @@ const config = {
                     selector: '.is-drop-target',
                 },
                 {
-                    type: 'boolean',
-                    name: 'small',
-                    selector: '.spectrum-Card--small',
+                    type: 'enum',
+                    name: 'size',
+                    values: [
+                        {
+                            name: 's',
+                            selector: '.spectrum-Card--small',
+                        },
+                    ],
                 },
                 {
                     type: 'boolean',

diff --git a/packages/card/stories/card.stories.ts b/packages/card/stories/card.stories.ts
@@ -24,7 +24,7 @@ export default {
     component: 'sp-card',
     title: 'Card',
     args: {
-        small: false,
+        size: undefined,
         horizontal: false,
     },
     argTypes: {
@@ -39,29 +39,29 @@ export default {
                 type: 'boolean',
             },
         },
-        small: {
-            name: 'small',
-            type: { name: 'boolean', required: false },
+        size: {
+            name: 'size',
+            type: { name: 'string', required: false },
             table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
+                type: { summary: '"s"' },
+                defaultValue: { summary: undefined },
             },
-            control: { type: 'boolean' },
+            control: { type: 'text' },
         },
     },
 };
 
 interface StoryArgs {
     horizontal?: boolean;
-    small?: boolean;
+    size?: 's';
 }
 
 export const Default = (args: StoryArgs): TemplateResult => {
     return html`
         <sp-card
             heading="Card Heading"
             subheading="JPG"
-            ?small=${args.small}
+            .size=${args.size}
             ?horizontal=${args.horizontal}
         >
             <img slot="cover-photo" src=${portrait} alt="Demo Graphic" />
@@ -76,7 +76,7 @@ export const actions = (args: StoryArgs): TemplateResult => {
         <sp-card
             heading="Card Heading"
             subheading="JPG"
-            ?small=${args.small}
+            .size=${args.size}
             ?horizontal=${args.horizontal}
         >
             <img slot="cover-photo" src=${portrait} alt="Demo Graphic" />
@@ -101,7 +101,7 @@ export const Gallery = (args: StoryArgs): TemplateResult => {
                 variant="gallery"
                 heading="Card Heading"
                 subheading="JPG"
-                ?small=${args.small}
+                .size=${args.size}
                 ?horizontal=${args.horizontal}
             >
                 <img
@@ -121,7 +121,7 @@ export const noPreviewImage = (args: StoryArgs): TemplateResult => {
         <sp-card
             heading="Card Heading"
             subheading="No preview image"
-            ?small=${args.small}
+            .size=${args.size}
             ?horizontal=${args.horizontal}
         >
             <div slot="footer">Footer</div>
@@ -136,7 +136,7 @@ export const Quiet = (args: StoryArgs): TemplateResult => {
                 variant="quiet"
                 heading="Card Heading"
                 subheading="JPG"
-                ?small=${args.small}
+                .size=${args.size}
                 ?horizontal=${args.horizontal}
             >
                 <img src=${portrait} alt="Demo Graphic" slot="preview" />
@@ -153,7 +153,7 @@ export const quietFile = (args: StoryArgs): TemplateResult => {
                 variant="quiet"
                 subheading="JPG"
                 asset="file"
-                ?small=${args.small}
+                .size=${args.size}
                 ?horizontal=${args.horizontal}
             >
                 <img src=${portrait} alt="Demo Graphic" slot="preview" />
@@ -171,7 +171,7 @@ export const quietFolder = (args: StoryArgs): TemplateResult => {
                 variant="quiet"
                 subheading="JPG"
                 asset="folder"
-                ?small=${args.small}
+                .size=${args.size}
                 ?horizontal=${args.horizontal}
             >
                 <img src=${portrait} alt="Demo Graphic" slot="preview" />
@@ -189,7 +189,7 @@ export const quietActions = (args: StoryArgs): TemplateResult => {
                 variant="quiet"
                 heading="Card Heading"
                 subheading="JPG"
-                ?small=${args.small}
+                .size=${args.size}
                 ?horizontal=${args.horizontal}
             >
                 <img src=${portrait} alt="Demo Graphic" slot="preview" />
@@ -218,7 +218,7 @@ export const small = (args: StoryArgs): TemplateResult => {
             style="--spectrum-card-title-padding-right: 0; --spectrum-card-title-padding-left: 0;"
         >
             <sp-card
-                ?small=${args.small}
+                .size=${args.size}
                 ?horizontal=${args.horizontal}
                 heading="Card Heading"
                 subheading="JPG"
@@ -235,13 +235,13 @@ export const small = (args: StoryArgs): TemplateResult => {
     `;
 };
 small.args = {
-    small: true,
+    size: 's',
 };
 
 export const smallHorizontal = (args: StoryArgs): TemplateResult => {
     return html`
         <sp-card
-            ?small=${args.small}
+            .size=${args.size}
             ?horizontal=${args.horizontal}
             heading="Card Heading"
             subheading="JPG"
@@ -255,14 +255,14 @@ export const smallHorizontal = (args: StoryArgs): TemplateResult => {
 };
 smallHorizontal.args = {
     horizontal: true,
-    small: true,
+    size: 's',
 };
 
 export const smallQuiet = (args: StoryArgs): TemplateResult => {
     return html`
         <div style="width: 115px">
             <sp-card
-                ?small=${args.small}
+                .size=${args.size}
                 ?horizontal=${args.horizontal}
                 heading="Card Heading"
                 subheading="JPG"
@@ -284,7 +284,7 @@ export const smallQuiet = (args: StoryArgs): TemplateResult => {
     `;
 };
 smallQuiet.args = {
-    small: true,
+    size: 's',
 };
 
 export const SlottedHeading = (args: StoryArgs): TemplateResult => {
@@ -304,7 +304,7 @@ export const SlottedHeading = (args: StoryArgs): TemplateResult => {
             --spectrum-alias-single-line-width: 100%;
         "
         >
-            <sp-card ?small=${args.small} ?horizontal=${args.horizontal}>
+            <sp-card .size=${args.size} ?horizontal=${args.horizontal}>
                 <img slot="cover-photo" src=${portrait} alt="Demo Graphic" />
                 <sp-textfield
                     class="slotted-textfield-heading"

diff --git a/packages/card/test/card.test.ts b/packages/card/test/card.test.ts
@@ -70,7 +70,7 @@ describe('card', () => {
         const el = await fixture<Card>(
             html`
                 <sp-card
-                    small
+                    size="s"
                     heading="Card Heading"
                     subheading="JPG"
                     variant="quiet"