From 86a2635f5a6a89c62fc2e456256886cbe4e4b343 Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Mon, 22 Apr 2024 16:04:09 -0700 Subject: [PATCH 1/6] add new prop --- packages/react/src/Button/Button.docs.json | 6 +++ .../src/Button/Button.features.stories.tsx | 35 ++++++++++++++ packages/react/src/Button/Button.stories.tsx | 7 +++ packages/react/src/Button/ButtonBase.tsx | 2 + packages/react/src/Button/styles.ts | 46 +++++++++++++++++++ packages/react/src/Button/types.ts | 3 ++ 6 files changed, 99 insertions(+) diff --git a/packages/react/src/Button/Button.docs.json b/packages/react/src/Button/Button.docs.json index a79de2ca1e3..17500654ba3 100644 --- a/packages/react/src/Button/Button.docs.json +++ b/packages/react/src/Button/Button.docs.json @@ -82,6 +82,12 @@ "type": "'default'\n| 'primary'\n| 'danger'\n| 'invisible'", "defaultValue": "'default'", "description": "Change the visual style of the button." + }, + { + "name": "truncation", + "type": "'ellipses'\n| 'wrap'\n| 'none'\n|", + "defaultValue": "'none'", + "description": "Determines how the button label text will overflow." } ], "passthrough": { diff --git a/packages/react/src/Button/Button.features.stories.tsx b/packages/react/src/Button/Button.features.stories.tsx index 313b249c093..540689842d8 100644 --- a/packages/react/src/Button/Button.features.stories.tsx +++ b/packages/react/src/Button/Button.features.stories.tsx @@ -1,6 +1,7 @@ import {EyeIcon, TriangleDownIcon, HeartIcon} from '@primer/octicons-react' import React, {useState} from 'react' import {Button} from '.' +import {Stack} from '../Stack/Stack' export default { title: 'Components/Button/Features', @@ -96,3 +97,37 @@ export const Small = () => export const Medium = () => export const Large = () => + +export const TruncationEllipses = () => { + return ( + + + + + + ) +} + +export const TruncationWrap = () => { + return ( + + + + + + + + ) +} diff --git a/packages/react/src/Button/Button.stories.tsx b/packages/react/src/Button/Button.stories.tsx index 793d5884195..c9c2b38d7ae 100644 --- a/packages/react/src/Button/Button.stories.tsx +++ b/packages/react/src/Button/Button.stories.tsx @@ -48,6 +48,12 @@ Playground.argTypes = { type: 'boolean', }, }, + truncation: { + control: { + type: 'radio', + }, + options: ['ellipses', 'wrap', 'none'], + }, leadingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), trailingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), trailingAction: OcticonArgType([TriangleDownIcon]), @@ -62,6 +68,7 @@ Playground.args = { trailingVisual: null, leadingVisual: null, trailingAction: null, + truncation: 'none', } export const Default = () => diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index 746a26dfe0b..66f4d1efadf 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -25,6 +25,7 @@ const ButtonBase = forwardRef( alignContent = 'center', block = false, inactive, + truncation = 'none', ...rest } = props @@ -73,6 +74,7 @@ const ButtonBase = forwardRef( data-size={size === 'small' || size === 'large' ? size : undefined} data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined} data-inactive={inactive ? true : undefined} + data-truncation={truncation} > {Icon ? ( diff --git a/packages/react/src/Button/styles.ts b/packages/react/src/Button/styles.ts index 1ff80f6fad9..d83b381edb0 100644 --- a/packages/react/src/Button/styles.ts +++ b/packages/react/src/Button/styles.ts @@ -304,6 +304,52 @@ export const getButtonStyles = (theme?: Theme) => { '&[data-block="block"]': { width: '100%', }, + '&[data-truncation="ellipses"]': { + minWidth: 'min-content', + '[data-component="buttonContent"]': { + flex: '1 1 auto', + }, + '[data-component="text"]': { + overflow: 'hidden', + textOverflow: 'ellipsis', + wordBreak: 'break-word', + }, + }, + '&[data-truncation="wrap"]': { + minWidth: 'fit-content', + height: 'unset', + minHeight: 'var(--control-medium-size)', + + '[data-component="buttonContent"]': { + flex: '1 1 auto', + alignSelf: 'stretch', + paddingBlock: 'calc(var(--control-medium-paddingBlock) - 2px)', + }, + + '[data-component="text"]': { + whiteSpace: 'unset', + wordBreak: 'break-word', + }, + + '&[data-size="small"]': { + height: 'unset', + minHeight: 'var(--control-small-size)', + + '[data-component="buttonContent"]': { + paddingBlock: 'calc(var(--control-small-paddingBlock) - 2px)', + }, + }, + + '&[data-size="large"]': { + height: 'unset', + minHeight: 'var(--control-large-size)', + paddingInline: 'var(--control-large-paddingInline-spacious)', + + '[data-component="buttonContent"]': { + paddingBlock: 'calc(var(--control-large-paddingBlock) - 2px)', + }, + }, + }, '&[data-inactive]:not([disabled])': { backgroundColor: `var(--button-inactive-bgColor, ${theme?.colors.btn.inactive.bg})`, borderColor: `var(--button-inactive-bgColor, ${theme?.colors.btn.inactive.bg})`, diff --git a/packages/react/src/Button/types.ts b/packages/react/src/Button/types.ts index c41e3a0e5c5..70cada6ac61 100644 --- a/packages/react/src/Button/types.ts +++ b/packages/react/src/Button/types.ts @@ -16,6 +16,8 @@ export type Size = 'small' | 'medium' | 'large' export type AlignContent = 'start' | 'center' +export type TruncationType = 'ellipses' | 'wrap' | 'none' + type ButtonA11yProps = | {'aria-label': string; 'aria-labelledby'?: undefined} | {'aria-label'?: undefined; 'aria-labelledby': string} @@ -42,6 +44,7 @@ export type ButtonBaseProps = { * interactions as an enabled button. */ inactive?: boolean + truncation?: TruncationType } & SxProp & React.ButtonHTMLAttributes From 3033e828a3a3bd73de4a6ad4966b05c50114e6fb Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Mon, 22 Apr 2024 16:13:42 -0700 Subject: [PATCH 2/6] Create ninety-mice-rush.md --- .changeset/ninety-mice-rush.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/ninety-mice-rush.md diff --git a/.changeset/ninety-mice-rush.md b/.changeset/ninety-mice-rush.md new file mode 100644 index 00000000000..2d0d6f18554 --- /dev/null +++ b/.changeset/ninety-mice-rush.md @@ -0,0 +1,6 @@ +--- +"@primer/react": minor +"docs": minor +--- + +Add `truncation` prop to `Button` to allow for ellipses overflow or text wrapping for long button labels From 085f178043472ae3628d827376045de9ba3b7175 Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Mon, 22 Apr 2024 16:19:20 -0700 Subject: [PATCH 3/6] add fallbacks --- packages/react/src/Button/styles.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/react/src/Button/styles.ts b/packages/react/src/Button/styles.ts index d83b381edb0..e53e86d69fb 100644 --- a/packages/react/src/Button/styles.ts +++ b/packages/react/src/Button/styles.ts @@ -318,12 +318,12 @@ export const getButtonStyles = (theme?: Theme) => { '&[data-truncation="wrap"]': { minWidth: 'fit-content', height: 'unset', - minHeight: 'var(--control-medium-size)', + minHeight: 'var(--control-medium-size, 2rem)', '[data-component="buttonContent"]': { flex: '1 1 auto', alignSelf: 'stretch', - paddingBlock: 'calc(var(--control-medium-paddingBlock) - 2px)', + paddingBlock: 'calc(var(--control-medium-paddingBlock, 0.375rem) - 2px)', }, '[data-component="text"]': { @@ -333,20 +333,20 @@ export const getButtonStyles = (theme?: Theme) => { '&[data-size="small"]': { height: 'unset', - minHeight: 'var(--control-small-size)', + minHeight: 'var(--control-small-size, 1.75rem)', '[data-component="buttonContent"]': { - paddingBlock: 'calc(var(--control-small-paddingBlock) - 2px)', + paddingBlock: 'calc(var(--control-small-paddingBlock, 0.25rem) - 2px)', }, }, '&[data-size="large"]': { height: 'unset', - minHeight: 'var(--control-large-size)', - paddingInline: 'var(--control-large-paddingInline-spacious)', + minHeight: 'var(--control-large-size, 2.5rem)', + paddingInline: 'var(--control-large-paddingInline-spacious, 1rem)', '[data-component="buttonContent"]': { - paddingBlock: 'calc(var(--control-large-paddingBlock) - 2px)', + paddingBlock: 'calc(var(--control-large-paddingBlock, 0.625rem) - 2px)', }, }, }, From e12f4e08340fecf4ae7612fc1caad16d413cc76a Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Mon, 22 Apr 2024 18:07:21 -0700 Subject: [PATCH 4/6] snappies --- .../__snapshots__/Button.test.tsx.snap | 427 ++++++++++++++++++ .../__snapshots__/TextInput.test.tsx.snap | 183 ++++++++ 2 files changed, 610 insertions(+) diff --git a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap index bdb67a2bd0e..e957faeffaf 100644 --- a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -163,6 +163,66 @@ exports[`Button respects block prop 1`] = ` width: 100%; } +.c0[data-truncation="ellipses"] { + min-width: -webkit-min-content; + min-width: -moz-min-content; + min-width: min-content; +} + +.c0[data-truncation="ellipses"] [data-component="buttonContent"] { + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} + +.c0[data-truncation="ellipses"] [data-component="text"] { + overflow: hidden; + text-overflow: ellipsis; + word-break: break-word; +} + +.c0[data-truncation="wrap"] { + min-width: -webkit-fit-content; + min-width: -moz-fit-content; + min-width: fit-content; + height: unset; + min-height: var(--control-medium-size,2rem); +} + +.c0[data-truncation="wrap"] [data-component="buttonContent"] { + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px); +} + +.c0[data-truncation="wrap"] [data-component="text"] { + white-space: unset; + word-break: break-word; +} + +.c0[data-truncation="wrap"][data-size="small"] { + height: unset; + min-height: var(--control-small-size,1.75rem); +} + +.c0[data-truncation="wrap"][data-size="small"] [data-component="buttonContent"] { + padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px); +} + +.c0[data-truncation="wrap"][data-size="large"] { + height: unset; + min-height: var(--control-large-size,2.5rem); + padding-inline: var(--control-large-paddingInline-spacious,1rem); +} + +.c0[data-truncation="wrap"][data-size="large"] [data-component="buttonContent"] { + padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px); +} + .c0[data-inactive]:not([disabled]) { background-color: var(--button-inactive-bgColor,undefined); border-color: var(--button-inactive-bgColor,undefined); @@ -246,6 +306,7 @@ exports[`Button respects block prop 1`] = ` class="c0" data-block="block" data-no-visuals="true" + data-truncation="none" type="button" > Date: Tue, 11 Jun 2024 18:53:50 -0400 Subject: [PATCH 5/6] removes ellipsis truncation option --- packages/react/src/Button/Button.docs.json | 8 +- .../src/Button/Button.features.stories.tsx | 26 +- packages/react/src/Button/Button.stories.tsx | 7 +- packages/react/src/Button/ButtonBase.tsx | 4 +- .../__snapshots__/Button.test.tsx.snap | 231 ++++-------------- packages/react/src/Button/styles.ts | 13 +- packages/react/src/Button/types.ts | 7 +- .../__snapshots__/TextInput.test.tsx.snap | 99 ++------ 8 files changed, 90 insertions(+), 305 deletions(-) diff --git a/packages/react/src/Button/Button.docs.json b/packages/react/src/Button/Button.docs.json index 17500654ba3..53f346410ec 100644 --- a/packages/react/src/Button/Button.docs.json +++ b/packages/react/src/Button/Button.docs.json @@ -84,10 +84,10 @@ "description": "Change the visual style of the button." }, { - "name": "truncation", - "type": "'ellipses'\n| 'wrap'\n| 'none'\n|", - "defaultValue": "'none'", - "description": "Determines how the button label text will overflow." + "name": "labelWrap", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the button label should wrap to multiple lines of it is longer than the button width." } ], "passthrough": { diff --git a/packages/react/src/Button/Button.features.stories.tsx b/packages/react/src/Button/Button.features.stories.tsx index 2d13966853a..7d328f2d336 100644 --- a/packages/react/src/Button/Button.features.stories.tsx +++ b/packages/react/src/Button/Button.features.stories.tsx @@ -137,34 +137,20 @@ export const Medium = () => export const Large = () => -export const TruncationEllipses = () => { +export const LabelWrap = () => { return ( - - - - - ) -} - -export const TruncationWrap = () => { - return ( - - - + - - - diff --git a/packages/react/src/Button/Button.stories.tsx b/packages/react/src/Button/Button.stories.tsx index c9c2b38d7ae..7642d726e04 100644 --- a/packages/react/src/Button/Button.stories.tsx +++ b/packages/react/src/Button/Button.stories.tsx @@ -48,11 +48,10 @@ Playground.argTypes = { type: 'boolean', }, }, - truncation: { + labelWrap: { control: { - type: 'radio', + type: 'boolean', }, - options: ['ellipses', 'wrap', 'none'], }, leadingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), trailingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), @@ -68,7 +67,7 @@ Playground.args = { trailingVisual: null, leadingVisual: null, trailingAction: null, - truncation: 'none', + labelWrap: false, } export const Default = () => diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index 66f4d1efadf..5ca0530e967 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -25,7 +25,7 @@ const ButtonBase = forwardRef( alignContent = 'center', block = false, inactive, - truncation = 'none', + labelWrap, ...rest } = props @@ -74,7 +74,7 @@ const ButtonBase = forwardRef( data-size={size === 'small' || size === 'large' ? size : undefined} data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined} data-inactive={inactive ? true : undefined} - data-truncation={truncation} + data-label-wrap={labelWrap} > {Icon ? ( diff --git a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap index e957faeffaf..03a5c0187ed 100644 --- a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -163,25 +163,7 @@ exports[`Button respects block prop 1`] = ` width: 100%; } -.c0[data-truncation="ellipses"] { - min-width: -webkit-min-content; - min-width: -moz-min-content; - min-width: min-content; -} - -.c0[data-truncation="ellipses"] [data-component="buttonContent"] { - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; -} - -.c0[data-truncation="ellipses"] [data-component="text"] { - overflow: hidden; - text-overflow: ellipsis; - word-break: break-word; -} - -.c0[data-truncation="wrap"] { +.c0[data-label-wrap="true"] { min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; @@ -189,7 +171,7 @@ exports[`Button respects block prop 1`] = ` min-height: var(--control-medium-size,2rem); } -.c0[data-truncation="wrap"] [data-component="buttonContent"] { +.c0[data-label-wrap="true"] [data-component="buttonContent"] { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; @@ -199,27 +181,27 @@ exports[`Button respects block prop 1`] = ` padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px); } -.c0[data-truncation="wrap"] [data-component="text"] { +.c0[data-label-wrap="true"] [data-component="text"] { white-space: unset; word-break: break-word; } -.c0[data-truncation="wrap"][data-size="small"] { +.c0[data-label-wrap="true"][data-size="small"] { height: unset; min-height: var(--control-small-size,1.75rem); } -.c0[data-truncation="wrap"][data-size="small"] [data-component="buttonContent"] { +.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] { padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px); } -.c0[data-truncation="wrap"][data-size="large"] { +.c0[data-label-wrap="true"][data-size="large"] { height: unset; min-height: var(--control-large-size,2.5rem); padding-inline: var(--control-large-paddingInline-spacious,1rem); } -.c0[data-truncation="wrap"][data-size="large"] [data-component="buttonContent"] { +.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] { padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px); } @@ -306,7 +288,6 @@ exports[`Button respects block prop 1`] = ` class="c0" data-block="block" data-no-visuals="true" - data-truncation="none" type="button" > { '&[data-block="block"]': { width: '100%', }, - '&[data-truncation="ellipses"]': { - minWidth: 'min-content', - '[data-component="buttonContent"]': { - flex: '1 1 auto', - }, - '[data-component="text"]': { - overflow: 'hidden', - textOverflow: 'ellipsis', - wordBreak: 'break-word', - }, - }, - '&[data-truncation="wrap"]': { + '&[data-label-wrap="true"]': { minWidth: 'fit-content', height: 'unset', minHeight: 'var(--control-medium-size, 2rem)', diff --git a/packages/react/src/Button/types.ts b/packages/react/src/Button/types.ts index 70cada6ac61..f1552d8b474 100644 --- a/packages/react/src/Button/types.ts +++ b/packages/react/src/Button/types.ts @@ -16,8 +16,6 @@ export type Size = 'small' | 'medium' | 'large' export type AlignContent = 'start' | 'center' -export type TruncationType = 'ellipses' | 'wrap' | 'none' - type ButtonA11yProps = | {'aria-label': string; 'aria-labelledby'?: undefined} | {'aria-label'?: undefined; 'aria-labelledby': string} @@ -44,7 +42,10 @@ export type ButtonBaseProps = { * interactions as an enabled button. */ inactive?: boolean - truncation?: TruncationType + /** + * Whether the button label should wrap to multiple lines of it is longer than the button width. + */ + labelWrap?: boolean } & SxProp & React.ButtonHTMLAttributes diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap index fefb9b6a018..f3e4be334ce 100644 --- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1824,25 +1824,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` width: 100%; } -.c4[data-truncation="ellipses"] { - min-width: -webkit-min-content; - min-width: -moz-min-content; - min-width: min-content; -} - -.c4[data-truncation="ellipses"] [data-component="buttonContent"] { - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; -} - -.c4[data-truncation="ellipses"] [data-component="text"] { - overflow: hidden; - text-overflow: ellipsis; - word-break: break-word; -} - -.c4[data-truncation="wrap"] { +.c4[data-label-wrap="true"] { min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; @@ -1850,7 +1832,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` min-height: var(--control-medium-size,2rem); } -.c4[data-truncation="wrap"] [data-component="buttonContent"] { +.c4[data-label-wrap="true"] [data-component="buttonContent"] { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; @@ -1860,27 +1842,27 @@ exports[`TextInput renders trailingAction icon button 1`] = ` padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px); } -.c4[data-truncation="wrap"] [data-component="text"] { +.c4[data-label-wrap="true"] [data-component="text"] { white-space: unset; word-break: break-word; } -.c4[data-truncation="wrap"][data-size="small"] { +.c4[data-label-wrap="true"][data-size="small"] { height: unset; min-height: var(--control-small-size,1.75rem); } -.c4[data-truncation="wrap"][data-size="small"] [data-component="buttonContent"] { +.c4[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] { padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px); } -.c4[data-truncation="wrap"][data-size="large"] { +.c4[data-label-wrap="true"][data-size="large"] { height: unset; min-height: var(--control-large-size,2.5rem); padding-inline: var(--control-large-paddingInline-spacious,1rem); } -.c4[data-truncation="wrap"][data-size="large"] [data-component="buttonContent"] { +.c4[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] { padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px); } @@ -2242,7 +2224,6 @@ exports[`TextInput renders trailingAction icon button 1`] = ` data-component="IconButton" data-no-visuals={true} data-size="small" - data-truncation="none" onBlur={[Function]} onClick={[MockFunction]} onFocus={[Function]} @@ -2454,25 +2435,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` width: 100%; } -.c4[data-truncation="ellipses"] { - min-width: -webkit-min-content; - min-width: -moz-min-content; - min-width: min-content; -} - -.c4[data-truncation="ellipses"] [data-component="buttonContent"] { - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; -} - -.c4[data-truncation="ellipses"] [data-component="text"] { - overflow: hidden; - text-overflow: ellipsis; - word-break: break-word; -} - -.c4[data-truncation="wrap"] { +.c4[data-label-wrap="true"] { min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; @@ -2480,7 +2443,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` min-height: var(--control-medium-size,2rem); } -.c4[data-truncation="wrap"] [data-component="buttonContent"] { +.c4[data-label-wrap="true"] [data-component="buttonContent"] { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; @@ -2490,27 +2453,27 @@ exports[`TextInput renders trailingAction text button 1`] = ` padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px); } -.c4[data-truncation="wrap"] [data-component="text"] { +.c4[data-label-wrap="true"] [data-component="text"] { white-space: unset; word-break: break-word; } -.c4[data-truncation="wrap"][data-size="small"] { +.c4[data-label-wrap="true"][data-size="small"] { height: unset; min-height: var(--control-small-size,1.75rem); } -.c4[data-truncation="wrap"][data-size="small"] [data-component="buttonContent"] { +.c4[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] { padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px); } -.c4[data-truncation="wrap"][data-size="large"] { +.c4[data-label-wrap="true"][data-size="large"] { height: unset; min-height: var(--control-large-size,2.5rem); padding-inline: var(--control-large-paddingInline-spacious,1rem); } -.c4[data-truncation="wrap"][data-size="large"] [data-component="buttonContent"] { +.c4[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] { padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px); } @@ -2754,7 +2717,6 @@ exports[`TextInput renders trailingAction text button 1`] = ` className="c4" data-block={null} data-no-visuals={true} - data-truncation="none" onClick={[MockFunction]} style={{}} type="button" @@ -2942,25 +2904,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` width: 100%; } -.c4[data-truncation="ellipses"] { - min-width: -webkit-min-content; - min-width: -moz-min-content; - min-width: min-content; -} - -.c4[data-truncation="ellipses"] [data-component="buttonContent"] { - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; -} - -.c4[data-truncation="ellipses"] [data-component="text"] { - overflow: hidden; - text-overflow: ellipsis; - word-break: break-word; -} - -.c4[data-truncation="wrap"] { +.c4[data-label-wrap="true"] { min-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content; @@ -2968,7 +2912,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` min-height: var(--control-medium-size,2rem); } -.c4[data-truncation="wrap"] [data-component="buttonContent"] { +.c4[data-label-wrap="true"] [data-component="buttonContent"] { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; @@ -2978,27 +2922,27 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px); } -.c4[data-truncation="wrap"] [data-component="text"] { +.c4[data-label-wrap="true"] [data-component="text"] { white-space: unset; word-break: break-word; } -.c4[data-truncation="wrap"][data-size="small"] { +.c4[data-label-wrap="true"][data-size="small"] { height: unset; min-height: var(--control-small-size,1.75rem); } -.c4[data-truncation="wrap"][data-size="small"] [data-component="buttonContent"] { +.c4[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] { padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px); } -.c4[data-truncation="wrap"][data-size="large"] { +.c4[data-label-wrap="true"][data-size="large"] { height: unset; min-height: var(--control-large-size,2.5rem); padding-inline: var(--control-large-paddingInline-spacious,1rem); } -.c4[data-truncation="wrap"][data-size="large"] [data-component="buttonContent"] { +.c4[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] { padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px); } @@ -3356,7 +3300,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` className="c4" data-block={null} data-no-visuals={true} - data-truncation="none" onBlur={[Function]} onClick={[MockFunction]} onFocus={[Function]} From 949362dbddf683d9d2bc599cf00e4c5f2f66cbdc Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 12 Jun 2024 16:00:23 -0400 Subject: [PATCH 6/6] fixes changeset --- .changeset/ninety-mice-rush.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.changeset/ninety-mice-rush.md b/.changeset/ninety-mice-rush.md index 2d0d6f18554..3b316888eaf 100644 --- a/.changeset/ninety-mice-rush.md +++ b/.changeset/ninety-mice-rush.md @@ -1,6 +1,5 @@ --- "@primer/react": minor -"docs": minor --- Add `truncation` prop to `Button` to allow for ellipses overflow or text wrapping for long button labels