From 6f05b3b7c88633b17cd44224af184c37c3d9c8bf Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Fri, 6 Aug 2021 09:01:22 -0400 Subject: [PATCH] fix(card): normalize sizing technique to align with future t-shirt size usage --- packages/card/README.md | 10 +++--- packages/card/src/Card.ts | 16 ++++------ packages/card/src/spectrum-card.css | 14 ++++---- packages/card/src/spectrum-config.js | 11 +++++-- packages/card/stories/card.stories.ts | 46 +++++++++++++-------------- packages/card/test/card.test.ts | 2 +- 6 files changed, 50 insertions(+), 49 deletions(-) diff --git a/packages/card/README.md b/packages/card/README.md index 96d110606a..b480911f19 100644 --- 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 ``` -### Small +### Size -The `small` attriibute can be applied to a standard card: +`size="s"` will delivery the `` element at a "small" size. It can be leveraged with a standard card: ```html demo
- + Demo Image - + - - ${this.heading} - + ${this.heading}
`; } @@ -195,9 +193,7 @@ export class Card extends ObserveSlotPresence( private get renderSubtitleAndDescription(): TemplateResult { return html`
- - ${this.subheading} - + ${this.subheading}
`; @@ -217,7 +213,7 @@ export class Card extends ObserveSlotPresence( ` : html``} - ${this.variant === 'quiet' && this.small + ${this.variant === 'quiet' && this.size === 's' ? html` @@ -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`
diff --git a/packages/card/src/spectrum-card.css b/packages/card/src/spectrum-card.css index 317b2b770f..0d872c79f2 100644 --- 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 index 70114af9aa..b6edaa7f2f 100644 --- 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 index b483302173..f6c11b444b 100644 --- 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,21 +39,21 @@ 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 => { @@ -61,7 +61,7 @@ export const Default = (args: StoryArgs): TemplateResult => { Demo Graphic @@ -76,7 +76,7 @@ export const actions = (args: StoryArgs): TemplateResult => { 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} > {
Footer
@@ -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} > Demo Graphic @@ -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} > Demo Graphic @@ -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} > Demo Graphic @@ -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} > Demo Graphic @@ -218,7 +218,7 @@ export const small = (args: StoryArgs): TemplateResult => { style="--spectrum-card-title-padding-right: 0; --spectrum-card-title-padding-left: 0;" > { `; }; small.args = { - small: true, + size: 's', }; export const smallHorizontal = (args: StoryArgs): TemplateResult => { return html` { }; smallHorizontal.args = { horizontal: true, - small: true, + size: 's', }; export const smallQuiet = (args: StoryArgs): TemplateResult => { return html`
{ `; }; 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%; " > - + Demo Graphic { const el = await fixture( html`