From 2567601e0d688f5765f135f5454637666e610e33 Mon Sep 17 00:00:00 2001 From: Kelsey Johnson <35350751+kjohn1922@users.noreply.github.com> Date: Wed, 1 Nov 2023 11:26:38 -0500 Subject: [PATCH 1/6] Add card title slot --- packages/nimble-components/src/card/styles.ts | 11 +++++++++- .../nimble-components/src/card/template.ts | 7 ++++++- .../src/card/tests/card-matrix.stories.ts | 1 + .../src/card/tests/card.stories.ts | 20 ++++++++++++++++--- 4 files changed, 34 insertions(+), 5 deletions(-) diff --git a/packages/nimble-components/src/card/styles.ts b/packages/nimble-components/src/card/styles.ts index ec872c9fe5..d7fb44473d 100644 --- a/packages/nimble-components/src/card/styles.ts +++ b/packages/nimble-components/src/card/styles.ts @@ -6,7 +6,8 @@ import { borderColor, borderWidth, sectionBackgroundColor, - standardPadding + standardPadding, + titleFont } from '../theme-provider/design-tokens'; export const styles = css` @@ -21,4 +22,12 @@ export const styles = css` color: ${bodyFontColor}; background-color: ${sectionBackgroundColor}; } + + ::slotted([slot='title']) { + font: ${titleFont}; + } + + section { + display: contents; + } `; diff --git a/packages/nimble-components/src/card/template.ts b/packages/nimble-components/src/card/template.ts index b5536a0adf..3bb8136626 100644 --- a/packages/nimble-components/src/card/template.ts +++ b/packages/nimble-components/src/card/template.ts @@ -1,4 +1,9 @@ import { html } from '@microsoft/fast-element'; import type { Card } from '.'; -export const template = html``; +export const template = html` +
+ + +
+`; diff --git a/packages/nimble-components/src/card/tests/card-matrix.stories.ts b/packages/nimble-components/src/card/tests/card-matrix.stories.ts index 023f4afd2b..e5a8376b6e 100644 --- a/packages/nimble-components/src/card/tests/card-matrix.stories.ts +++ b/packages/nimble-components/src/card/tests/card-matrix.stories.ts @@ -25,6 +25,7 @@ export default metadata; const component = (): ViewTemplate => html` <${cardTag}> + Title <${numberFieldTag}>Numeric field 1 <${numberFieldTag}>Numeric field 2 <${selectTag}> diff --git a/packages/nimble-components/src/card/tests/card.stories.ts b/packages/nimble-components/src/card/tests/card.stories.ts index 3d49d16fdc..c76879df9b 100644 --- a/packages/nimble-components/src/card/tests/card.stories.ts +++ b/packages/nimble-components/src/card/tests/card.stories.ts @@ -9,10 +9,14 @@ import { numberFieldTag } from '../../number-field'; import { selectTag } from '../../select'; import { cardTag } from '..'; +interface CardArgs { + title: string; +} + const overviewText = `The \`nimble-card\` is a container that is designed to contain arbitrary content that is specified by a client application. The \`nimble-card\` is intended for grouping related content.`; -const metadata: Meta = { +const metadata: Meta = { title: 'Incubating/Card', tags: ['autodocs'], parameters: { @@ -29,6 +33,7 @@ const metadata: Meta = { statusLink: 'https://github.com/ni/nimble/issues/296' })} <${cardTag}> + ${x => x.title} <${numberFieldTag}>Numeric field 1 <${numberFieldTag}>Numeric field 2 <${selectTag}> @@ -37,9 +42,18 @@ const metadata: Meta = { <${listOptionTag} value="3">Option 3 - `) + `), + argTypes: { + title: { + description: + 'Text displayed as a title inside the card. Cards should **always include a title**. The title is used to provide an accessible name to assistive technologies.

Provide the title in an `inline` element such as `` that is targeted to the `title` slot.' + } + }, + args: { + title: 'Title text' + } }; export default metadata; -export const card: StoryObj = {}; +export const card: StoryObj = {}; From 0cfec717b529321ff7d1976983120a54ae510b45 Mon Sep 17 00:00:00 2001 From: Kelsey Johnson <35350751+kjohn1922@users.noreply.github.com> Date: Wed, 1 Nov 2023 11:56:18 -0500 Subject: [PATCH 2/6] Change files --- ...le-components-d70e99f7-8c44-4141-a566-77b59825e16e.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-nimble-components-d70e99f7-8c44-4141-a566-77b59825e16e.json diff --git a/change/@ni-nimble-components-d70e99f7-8c44-4141-a566-77b59825e16e.json b/change/@ni-nimble-components-d70e99f7-8c44-4141-a566-77b59825e16e.json new file mode 100644 index 0000000000..ef8e921f65 --- /dev/null +++ b/change/@ni-nimble-components-d70e99f7-8c44-4141-a566-77b59825e16e.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Add a title slot to the nimble-card", + "packageName": "@ni/nimble-components", + "email": "35350751+kjohn1922@users.noreply.github.com", + "dependentChangeType": "patch" +} From 859a20e58560d29fb8f6c2c68c3fc07f5534666d Mon Sep 17 00:00:00 2001 From: Kelsey Johnson <35350751+kjohn1922@users.noreply.github.com> Date: Wed, 1 Nov 2023 13:41:53 -0500 Subject: [PATCH 3/6] Add title font color --- packages/nimble-components/src/card/styles.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/nimble-components/src/card/styles.ts b/packages/nimble-components/src/card/styles.ts index d7fb44473d..4b441bd3ae 100644 --- a/packages/nimble-components/src/card/styles.ts +++ b/packages/nimble-components/src/card/styles.ts @@ -7,7 +7,8 @@ import { borderWidth, sectionBackgroundColor, standardPadding, - titleFont + titleFont, + titleFontColor } from '../theme-provider/design-tokens'; export const styles = css` @@ -25,6 +26,7 @@ export const styles = css` ::slotted([slot='title']) { font: ${titleFont}; + color: ${titleFontColor}; } section { From 82eb2c2d286214d4df4381f70b6210a2fc9625c3 Mon Sep 17 00:00:00 2001 From: Kelsey Johnson <35350751+kjohn1922@users.noreply.github.com> Date: Wed, 1 Nov 2023 14:42:19 -0500 Subject: [PATCH 4/6] Remove unneeded "inline" details from title docs --- packages/nimble-components/src/card/tests/card.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nimble-components/src/card/tests/card.stories.ts b/packages/nimble-components/src/card/tests/card.stories.ts index c76879df9b..28d3315276 100644 --- a/packages/nimble-components/src/card/tests/card.stories.ts +++ b/packages/nimble-components/src/card/tests/card.stories.ts @@ -46,7 +46,7 @@ const metadata: Meta = { argTypes: { title: { description: - 'Text displayed as a title inside the card. Cards should **always include a title**. The title is used to provide an accessible name to assistive technologies.

Provide the title in an `inline` element such as `` that is targeted to the `title` slot.' + 'Text displayed as a title inside the card. Cards should **always include a title**. The title is used to provide an accessible name to assistive technologies.

Provide the title in an element targeted to the `title` slot.' } }, args: { From 1847487e445b2b7c3a6bc238955f5eb8ffdb6693 Mon Sep 17 00:00:00 2001 From: Kelsey Johnson <35350751+kjohn1922@users.noreply.github.com> Date: Wed, 1 Nov 2023 17:28:57 -0500 Subject: [PATCH 5/6] Change files --- ...e-components-604c9a3b-c917-4978-b425-167277e5097e.json} | 2 +- ...le-components-a3500224-7314-4022-aa82-2f4cf29f7866.json | 7 ------- 2 files changed, 1 insertion(+), 8 deletions(-) rename change/{@ni-nimble-components-d70e99f7-8c44-4141-a566-77b59825e16e.json => @ni-nimble-components-604c9a3b-c917-4978-b425-167277e5097e.json} (90%) delete mode 100644 change/@ni-nimble-components-a3500224-7314-4022-aa82-2f4cf29f7866.json diff --git a/change/@ni-nimble-components-d70e99f7-8c44-4141-a566-77b59825e16e.json b/change/@ni-nimble-components-604c9a3b-c917-4978-b425-167277e5097e.json similarity index 90% rename from change/@ni-nimble-components-d70e99f7-8c44-4141-a566-77b59825e16e.json rename to change/@ni-nimble-components-604c9a3b-c917-4978-b425-167277e5097e.json index ef8e921f65..2f0fb6109b 100644 --- a/change/@ni-nimble-components-d70e99f7-8c44-4141-a566-77b59825e16e.json +++ b/change/@ni-nimble-components-604c9a3b-c917-4978-b425-167277e5097e.json @@ -1,5 +1,5 @@ { - "type": "minor", + "type": "patch", "comment": "Add a title slot to the nimble-card", "packageName": "@ni/nimble-components", "email": "35350751+kjohn1922@users.noreply.github.com", diff --git a/change/@ni-nimble-components-a3500224-7314-4022-aa82-2f4cf29f7866.json b/change/@ni-nimble-components-a3500224-7314-4022-aa82-2f4cf29f7866.json deleted file mode 100644 index fd818ccdc5..0000000000 --- a/change/@ni-nimble-components-a3500224-7314-4022-aa82-2f4cf29f7866.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "Add an incubating `nimble-card` component", - "packageName": "@ni/nimble-components", - "email": "35350751+kjohn1922@users.noreply.github.com", - "dependentChangeType": "patch" -} From 7e1c7ce8757087bf004919073ab613abe99c7f23 Mon Sep 17 00:00:00 2001 From: Kelsey Johnson <35350751+kjohn1922@users.noreply.github.com> Date: Thu, 2 Nov 2023 11:29:17 -0500 Subject: [PATCH 6/6] Changes for PR comments --- packages/nimble-components/src/card/styles.ts | 8 ++++---- packages/nimble-components/src/card/template.ts | 4 ++-- packages/nimble-components/src/card/tests/card.stories.ts | 2 ++ .../nimble-components/src/utilities/tests/storybook.ts | 4 ++-- 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/nimble-components/src/card/styles.ts b/packages/nimble-components/src/card/styles.ts index 4b441bd3ae..03ede1b905 100644 --- a/packages/nimble-components/src/card/styles.ts +++ b/packages/nimble-components/src/card/styles.ts @@ -24,12 +24,12 @@ export const styles = css` background-color: ${sectionBackgroundColor}; } + section { + display: contents; + } + ::slotted([slot='title']) { font: ${titleFont}; color: ${titleFontColor}; } - - section { - display: contents; - } `; diff --git a/packages/nimble-components/src/card/template.ts b/packages/nimble-components/src/card/template.ts index 3bb8136626..9969efbd43 100644 --- a/packages/nimble-components/src/card/template.ts +++ b/packages/nimble-components/src/card/template.ts @@ -2,8 +2,8 @@ import { html } from '@microsoft/fast-element'; import type { Card } from '.'; export const template = html` -
- +
+
`; diff --git a/packages/nimble-components/src/card/tests/card.stories.ts b/packages/nimble-components/src/card/tests/card.stories.ts index 28d3315276..fbbd5399c0 100644 --- a/packages/nimble-components/src/card/tests/card.stories.ts +++ b/packages/nimble-components/src/card/tests/card.stories.ts @@ -2,6 +2,7 @@ import { html } from '@microsoft/fast-element'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory, + disableStorybookZoomTransform, incubatingWarning } from '../../utilities/tests/storybook'; import { listOptionTag } from '../../list-option'; @@ -28,6 +29,7 @@ const metadata: Meta = { actions: {} }, render: createUserSelectedThemeStory(html` + ${disableStorybookZoomTransform} ${incubatingWarning({ componentName: 'card', statusLink: 'https://github.com/ni/nimble/issues/296' diff --git a/packages/nimble-components/src/utilities/tests/storybook.ts b/packages/nimble-components/src/utilities/tests/storybook.ts index 235c0871b1..92a1ecfc81 100644 --- a/packages/nimble-components/src/utilities/tests/storybook.ts +++ b/packages/nimble-components/src/utilities/tests/storybook.ts @@ -163,8 +163,8 @@ WARNING - The ${config.componentName} is still incubating. It is not recommended See the incubating component status. `; -// On Firefox, on the Docs page, there is a div with a scale(1) transform that causes the dropdown -// to be confined to the div. We remove the transform to allow the dropdown to escape the div, but +// On the Docs page, there is a div with a scale(1) transform that causes the dropdown to be +// confined to the div. We remove the transform to allow the dropdown to escape the div, but // that also breaks zooming behavior, so we remove the zoom buttons on the docs page. export const disableStorybookZoomTransform = `