Add truncation features to the LabelGroup component

.changeset/blue-dragons-marry.md

@@ -0,0 +1,11 @@
+---
+"@primer/react": patch
+---
+
+Adds truncation features to the LabelGroup component:
+- truncate LabelGroup children after a static number of children (for example, truncate after the 5th label)
+- truncate LabelGroup children to fit in the width of the parent
+- show full list in an Overlay
+- show full list inline
+
+<!-- Changed components: LabelGroup -->

e2e/components/LabelGroup.test.ts

@@ -58,4 +58,74 @@ test.describe('LabelGroup', () => {
       })
     }
   })
+
+  test.describe('Truncated to 5', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-labelgroup--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`LabelGroup.TruncateToFive.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-labelgroup-features--truncate-after-five',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Truncated to fit', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-labelgroup--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`LabelGroup.TruncateAuto.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-labelgroup-features--truncate-auto',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('LabelGroup Interactions', () => {
+    test('inline overflow - focuses the first focusable token that was previously hidden', async ({page}) => {
+      await visit(page, {
+        id: 'components-labelgroup-features--truncate-auto-expand-inline-with-interactive-tokens',
+        globals: {
+          colorScheme: 'light',
+        },
+      })
+      await page.locator('button', {hasText: '+5'}).click()
+
+      await expect(page.locator('button', {hasText: 'Twelve'})).toBeFocused()
+    })
+  })
 })

src/AnchoredOverlay/AnchoredOverlay.docs.json

@@ -53,6 +53,18 @@
       "defaultValue": "'start'",
       "description": ""
     },
+    {
+      "name": "alignmentOffset",
+      "type": "number",
+      "defaultValue": "4",
+      "description": "An additional offset, in pixels, to move the floating element from the aligning edge. Positive values move the floating element in the direction of center-alignment. Negative values move the floating element away from center-alignment. When align is `'center`, positive offsets move the floating element right (top or bottom anchor side) or down (left or right anchor side). If using outside positioning, or if `align` is set to `'center'`, this defaults to `0` instead of `4`."
+    },
+    {
+      "name": "anchorOffset",
+      "type": "number",
+      "defaultValue": "4",
+      "description": "The number of pixels between the anchor edge and the floating element. Positive values move the floating element farther from the anchor element (for outside positioning) or further inside the anchor element (for inside positioning). Negative values have the opposite effect. If `side` is set to `'inside-center'`, this defaults to `0` instead of `4`."
+    },
     {
       "name": "overlayProps",
       "type": "Partial<OverlayProps>",

src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -80,7 +80,7 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
 
 export type AnchoredOverlayProps = AnchoredOverlayBaseProps &
   (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor) &
-  Partial<Pick<PositionSettings, 'align' | 'side'>>
+  Partial<Pick<PositionSettings, 'align' | 'side' | 'anchorOffset' | 'alignmentOffset'>>
 
 /**
  * An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
@@ -101,6 +101,8 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   focusZoneSettings,
   side = 'outside-bottom',
   align = 'start',
+  alignmentOffset,
+  anchorOffset,
 }) => {
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
   const [overlayRef, updateOverlayRef] = useRenderForcingRef<HTMLDivElement>()
@@ -140,6 +142,8 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
       floatingElementRef: overlayRef,
       side,
       align,
+      alignmentOffset,
+      anchorOffset,
     },
     [overlayRef.current],
   )

src/LabelGroup/LabelGroup.docs.json

@@ -6,8 +6,16 @@
   "stories": [],
   "props": [
     {
-      "name": "sx",
-      "type": "SystemStyleObject"
+      "name": "overflowStyle",
+      "description": "How hidden tokens should be shown. `'inline'` shows the hidden tokens after the visible tokens. `'overlay'` shows all tokens in an overlay that appears on top of the visible tokens.",
+      "defaultValue": "",
+      "type": "'inline' | 'overlay'"
+    },
+    {
+      "name": "visibleChildCount",
+      "description": "How many tokens to show. `'auto'` truncates the tokens to fit in the parent container. Passing a number will truncate after that number tokens. If this is undefined, tokens will never be truncated.",
+      "defaultValue": "",
+      "type": "'auto' | number"
     }
   ],
   "subcomponents": []

src/LabelGroup/LabelGroup.features.stories.tsx

@@ -0,0 +1,143 @@
+import React from 'react'
+import styled from 'styled-components'
+import LabelGroup from './LabelGroup'
+import {Meta, Story} from '@storybook/react'
+import Token from '../Token/Token'
+import Label from '../Label/Label'
+
+const meta: Meta = {
+  title: 'Components/LabelGroup/Features',
+  component: LabelGroup,
+  decorators: [
+    Story => {
+      return (
+        <>
+          <Story />
+        </>
+      )
+    },
+  ],
+}
+
+const ResizableContainer = styled.div`
+  outline: 1px solid black;
+  overflow: auto;
+  padding: 0.25rem;
+  resize: horizontal;
+  width: 600px;
+`
+
+export const TruncateAuto: Story = () => (
+  <ResizableContainer>
+    <LabelGroup visibleChildCount="auto">
+      <Label>One</Label>
+      <Label>Two</Label>
+      <Label>Three</Label>
+      <Label>Four</Label>
+      <Label>Five</Label>
+      <Label>Six</Label>
+      <Label>Seven</Label>
+      <Label>Eight</Label>
+      <Label>Nine</Label>
+      <Label>Ten</Label>
+      <Label>Eleven</Label>
+      <Label>Twelve</Label>
+      <Label>Thirteen</Label>
+      <Label>Fourteen</Label>
+      <Label>Fifteen</Label>
+      <Label>Sixteen</Label>
+    </LabelGroup>
+  </ResizableContainer>
+)
+
+export const TruncateAutoWithInteractiveTokens: Story = () => (
+  <ResizableContainer>
+    <LabelGroup visibleChildCount="auto">
+      <Token as="button" text="One" />
+      <Token as="button" text="Two" />
+      <Token as="button" text="Three" />
+      <Token as="button" text="Four" />
+      <Token as="button" text="Five" />
+      <Token as="button" text="Six" />
+      <Token as="button" text="Seven" />
+      <Token as="button" text="Eight" />
+      <Token as="button" text="Nine" />
+      <Token as="button" text="Ten" />
+      <Token as="button" text="Eleven" />
+      <Token as="button" text="Twelve" />
+      <Token as="button" text="Thirteen" />
+      <Token as="button" text="Fourteen" />
+      <Token as="button" text="Fifteen" />
+      <Token as="button" text="Sixteen" />
+    </LabelGroup>
+  </ResizableContainer>
+)
+
+export const TruncateAfterFive: Story = () => (
+  <LabelGroup visibleChildCount={5}>
+    <Label>One</Label>
+    <Label>Two</Label>
+    <Label>Three</Label>
+    <Label>Four</Label>
+    <Label>Five</Label>
+    <Label>Six</Label>
+    <Label>Seven</Label>
+    <Label>Eight</Label>
+    <Label>Nine</Label>
+    <Label>Ten</Label>
+    <Label>Eleven</Label>
+    <Label>Twelve</Label>
+    <Label>Thirteen</Label>
+    <Label>Fourteen</Label>
+    <Label>Fifteen</Label>
+    <Label>Sixteen</Label>
+  </LabelGroup>
+)
+
+export const TruncateAutoExpandInline: Story = () => (
+  <ResizableContainer>
+    <LabelGroup visibleChildCount="auto" overflowStyle="inline">
+      <Label>One</Label>
+      <Label>Two</Label>
+      <Label>Three</Label>
+      <Label>Four</Label>
+      <Label>Five</Label>
+      <Label>Six</Label>
+      <Label>Seven</Label>
+      <Label>Eight</Label>
+      <Label>Nine</Label>
+      <Label>Ten</Label>
+      <Label>Eleven</Label>
+      <Label>Twelve</Label>
+      <Label>Thirteen</Label>
+      <Label>Fourteen</Label>
+      <Label>Fifteen</Label>
+      <Label>Sixteen</Label>
+    </LabelGroup>
+  </ResizableContainer>
+)
+
+export const TruncateAutoExpandInlineWithInteractiveTokens: Story = () => (
+  <ResizableContainer>
+    <LabelGroup visibleChildCount="auto" overflowStyle="inline">
+      <Token as="button" text="One" />
+      <Token as="button" text="Two" />
+      <Token as="button" text="Three" />
+      <Token as="button" text="Four" />
+      <Token as="button" text="Five" />
+      <Token as="button" text="Six" />
+      <Token as="button" text="Seven" />
+      <Token as="button" text="Eight" />
+      <Token as="button" text="Nine" />
+      <Token as="button" text="Ten" />
+      <Token as="button" text="Eleven" />
+      <Token as="button" text="Twelve" />
+      <Token as="button" text="Thirteen" />
+      <Token as="button" text="Fourteen" />
+      <Token as="button" text="Fifteen" />
+      <Token as="button" text="Sixteen" />
+    </LabelGroup>
+  </ResizableContainer>
+)
+
+export default meta