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 = () => 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