Document CSS-based sizing for nimble-chip

packages/storybook/src/nimble/chip/chip-matrix.stories.ts

@@ -5,7 +5,8 @@ import { ChipAppearance } from '@ni/nimble-components/dist/esm/chip/types';
 import { chipTag } from '@ni/nimble-components/dist/esm/chip';
 import {
     controlLabelFont,
-    controlLabelFontColor
+    controlLabelFontColor,
+    controlSlimHeight
 } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
 import {
     createMatrix,
@@ -23,6 +24,12 @@ const appearanceStates = [
 ] as const;
 type AppearanceState = (typeof appearanceStates)[number];
 
+const sizeStates = [
+    ['Default', ''],
+    ['Small', `height: var(${controlSlimHeight.cssCustomProperty})`]
+] as const;
+type SizeState = (typeof sizeStates)[number];
+
 const removableStates = [
     ['Removable', true],
     ['Not Removable', false]
@@ -64,20 +71,21 @@ export default metadata;
 const component = (
     [disabledName, disabled]: DisabledState,
     [appearanceName, appearance]: AppearanceState,
+    [sizeName, size]: SizeState,
     [removableName, removable]: RemovableStates,
     [showStartSlotIconName, showStartSlotIcon]: ShowStartSlotIconState,
     [labelName, label]: LabelState,
     [widthName, width]: WidthState
 ): ViewTemplate => html`
     <div style="display: flex; flex-direction: column;">
         <label style="color: var(${controlLabelFontColor.cssCustomProperty}); font: var(${controlLabelFont.cssCustomProperty})">
-            ${appearanceName}, ${removableName}, ${showStartSlotIconName}, ${labelName}, ${widthName}, ${disabledName ? `(${disabledName})` : ''} 
+            ${appearanceName}, ${sizeName}, ${removableName}, ${showStartSlotIconName}, ${labelName}, ${widthName}, ${disabledName ? `(${disabledName})` : ''} 
         </label> 
         <${chipTag}
             appearance="${() => appearance}"
             ?removable="${() => removable}"
             ?disabled=${() => disabled}
-            style="margin-right: 8px; margin-bottom: 8px; ${() => width};">
+            style="margin-right: 8px; margin-bottom: 8px; ${() => width}; ${() => size};">
                 ${when(() => showStartSlotIcon, html`<${iconKeyTag} slot="start"></${iconKeyTag}>`)}
                 ${label}
         </${chipTag}>
@@ -88,6 +96,7 @@ export const themeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
         disabledStates,
         appearanceStates,
+        sizeStates,
         removableStates,
         showStartSlotIconStates,
         labelStates,
@@ -98,6 +107,7 @@ export const themeMatrix: StoryFn = createMatrixThemeStory(
 const interactionStates = cartesianProduct([
     disabledStates,
     appearanceStates,
+    sizeStates,
     removableStates,
     [showStartSlotIconStatesOnlyIcon],
     [labelStatesOnlyShort],
@@ -107,6 +117,7 @@ const interactionStates = cartesianProduct([
 const interactionStatesHover = cartesianProduct([
     disabledStates,
     appearanceStates,
+    sizeStates,
     removableStates,
     [showStartSlotIconStatesOnlyIcon],
     [labelStatesOnlyShort],

packages/storybook/src/nimble/chip/chip.mdx

@@ -19,6 +19,11 @@ remove button to allow users to delete the chip.
 
 ## Styling
 
+### Sizing
+
+The default chip height is 32px. For compact layouts, a 24px variant can be
+achieved by setting the CSS `height` to the `control-slim-height` design token.
+
 By default the chip will grow to fit its text content, up to its `max-width`.
 Applications may override the default `max-width` if needed. If your application
 needs a different width behavior, please file an issue to discuss.

packages/storybook/src/nimble/chip/chip.stories.ts

@@ -3,6 +3,14 @@ import type { HtmlRenderer, Meta, StoryObj } from '@storybook/html-vite';
 import { withActions } from 'storybook/actions/decorator';
 import { chipTag } from '@ni/nimble-components/dist/esm/chip';
 import { ChipAppearance } from '@ni/nimble-components/dist/esm/chip/types';
+import {
+    controlSlimHeight
+} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import {
+    scssPropertyFromTokenName,
+    scssPropertySetterMarkdown,
+    tokenNames
+} from '@ni/nimble-components/dist/esm/theme-provider/design-token-names';
 import {
     apiCategory,
     appearanceDescription,
@@ -11,8 +19,14 @@ import {
     disableStorybookZoomTransform
 } from '../../utilities/storybook';
 
+const chipSize = {
+    default: null,
+    small: `height: var(${controlSlimHeight.cssCustomProperty});`
+} as const;
+
 interface ChipArgs {
     appearance: keyof typeof ChipAppearance;
+    size: keyof typeof chipSize;
     removable: boolean;
     content: string;
     icon: boolean;
@@ -24,7 +38,7 @@ const metadata: Meta<ChipArgs> = {
     title: 'Components/Chip',
     render: createUserSelectedThemeStory(html`
     ${disableStorybookZoomTransform}
-        <${chipTag} appearance="${x => x.appearance}" ?removable="${x => x.removable}" ?disabled="${x => x.disabled}">
+        <${chipTag} appearance="${x => x.appearance}" style="${x => chipSize[x.size]}" ?removable="${x => x.removable}" ?disabled="${x => x.disabled}">
             ${x => x.content}
             ${when(x => x.icon, html`
                 <nimble-icon-check slot="start"></nimble-icon-check>
@@ -38,6 +52,34 @@ const metadata: Meta<ChipArgs> = {
             control: { type: 'radio' },
             table: { category: apiCategory.attributes }
         },
+        size: {
+            name: 'Chip sizing',
+            description:
+                '<p>Size of the chip component.</p><details><summary>Usage details</summary>To customize its size, set its CSS '
+                + '<span style="font-family: monospace;">height</span> to a design token.<br/><ul>'
+                + `<li>For Default (32px): No additional styling needed (uses <span style="font-family: monospace;">${scssPropertyFromTokenName(
+                    tokenNames.controlHeight
+                )}</span>).
+                </li>`
+                + `<li>For Small (24px): ${scssPropertySetterMarkdown(
+                    tokenNames.controlSlimHeight,
+                    'height'
+                )}
+                </li></ul></details>`,
+            options: Object.keys(chipSize),
+            table: { category: apiCategory.styles },
+            control: {
+                type: 'radio',
+                labels: {
+                    default: `Default - 32px - ${scssPropertyFromTokenName(
+                        tokenNames.controlHeight
+                    )}`,
+                    small: `Small - 24px - ${scssPropertyFromTokenName(
+                        tokenNames.controlSlimHeight
+                    )}`
+                }
+            }
+        },
         removable: {
             name: 'removable',
             description: 'When the `removable` attribute is set, a remove button is displayed on the chip. When the remove button is pressed a `remove` event is dispatched. The client application is responsible for performing the actual removal.',
@@ -68,6 +110,7 @@ const metadata: Meta<ChipArgs> = {
     },
     args: {
         appearance: 'outline',
+        size: 'default',
         removable: false,
         content: 'Homer Simpson',
         icon: false,