Skip to content

Allow Button to break-word for extra long labels (edge cases) #4062

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

Allow Button to break-word for extra long labels (edge cases) #4062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e8b18f4
remove white-space nowrap
langermank Dec 14, 2023
19a691e
undo story change
langermank Dec 14, 2023
3cf8c1c
preserves top and bottom padding in buttons, even w/ wrapped text
mperrotti Dec 18, 2023
776d372
Update src/Button/styles.ts
langermank Jan 17, 2024
b5c4a00
align SegmentedControl styles with PVC SegmentedControl
mperrotti Jan 24, 2024
9fb8940
Merge branch 'make-button-break-word' of github.com:primer/react into…
mperrotti Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
320 changes: 192 additions & 128 deletions src/Button/__tests__/__snapshots__/Button.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

36 changes: 24 additions & 12 deletions src/Button/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,10 +209,10 @@ export const getBaseStyles = (theme?: Theme) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
height: '32px',
padding: '0 12px',
minHeight: 'var(--control-medium-size, 32px)',
// calc explained: sets block padding to the correct size, minus 2px for border
paddingInline: 'var(--control-medium-paddingInline-normal, 0.75rem)',
gap: '8px',
minWidth: 'max-content',
transition: '80ms cubic-bezier(0.65, 0, 0.35, 1)',
transitionProperty: 'color, fill, background-color, border-color',
'&[href]': {
Expand Down Expand Up @@ -247,14 +247,19 @@ export const getBaseStyles = (theme?: Theme) => ({
display: 'inline-grid',
padding: 'unset',
placeContent: 'center',
width: '32px',
width: 'var(--control-medium-size, 32px)',
minWidth: 'unset',
},
'&[data-size="small"]': {
padding: '0 8px',
height: '28px',
minHeight: 'var(--control-small-size, 28px)',
gap: '4px',
fontSize: '0',
paddingInline: 'var(--control-small-paddingInline-condensed, 0.5rem)',

'[data-component="buttonContent"]': {
// calc explained: sets block padding to the correct size, minus 2px for border
paddingBlock: 'calc(var(--control-small-paddingBlock, 0.25rem) - 2px)',
},

'[data-component="text"]': {
lineHeight: 'calc(20 / 12)',
Expand All @@ -269,21 +274,26 @@ export const getBaseStyles = (theme?: Theme) => ({
},

'&[data-component=IconButton]': {
width: '28px',
width: 'var(--control-small-size, 28px)',
padding: 'unset',
},
},
'&[data-size="large"]': {
padding: '0 16px',
height: '40px',
minHeight: 'var(--control-large-size, 40px)',
gap: '8px',
// calc explained: sets block padding to the correct size, minus 2px for border
paddingInline: 'var(--control-large-paddingInline-spacious, 1rem)',

'[data-component="buttonContent"]': {
paddingBlock: 'calc(var(--control-large-paddingBlock, 0.625rem) - 2px)',
},

'[data-component="buttonContent"] > :not(:last-child)': {
mr: '8px',
},

'&[data-component=IconButton]': {
width: '40px',
width: 'var(--control-large-size, 40px)',
padding: 'unset',
},
},
Expand All @@ -309,7 +319,6 @@ export const getButtonStyles = (theme?: Theme) => {
'[data-component="text"]': {
gridArea: 'text',
lineHeight: 'calc(20/14)',
whiteSpace: 'nowrap',
},
'[data-component="trailingVisual"]': {
gridArea: 'trailingVisual',
Expand All @@ -318,12 +327,15 @@ export const getButtonStyles = (theme?: Theme) => {
marginRight: '-4px',
},
'[data-component="buttonContent"]': {
flex: '1 0 auto',
flex: '1 1 auto',
display: 'grid',
gridTemplateAreas: '"leadingVisual text trailingVisual"',
gridTemplateColumns: 'min-content minmax(0, auto) min-content',
alignItems: 'center',
alignContent: 'center',
alignSelf: 'stretch',
// calc explained: sets block padding to the correct size, minus 2px for border
paddingBlock: 'calc(var(--control-medium-paddingBlock, 0.375rem) - 2px)',
},
'[data-component="buttonContent"] > :not(:last-child)': {
mr: '8px',
Expand Down
218 changes: 189 additions & 29 deletions src/SegmentedControl/SegmentedControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,186 @@ import SegmentedControlIconButton, {SegmentedControlIconButtonProps} from './Seg
import {ActionList} from '../ActionList'
import {ActionMenu} from '../ActionMenu'
import {useTheme} from '../ThemeProvider'
import sx, {merge, SxProp} from '../sx'
import sx, {SxProp} from '../sx'
import {ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
import {WidthOnlyViewportRangeKeys} from '../utils/types/ViewportRangeKeys'
import styled from 'styled-components'
import {defaultSxProp} from '../utils/defaultSxProp'
import {get} from '../constants'

const StyledSegmentedControlList = styled.ul`
--segmentedControl-item-padding: var(--control-small-paddingBlock);

background-color: var(--controlTrack-bgColor-rest, ${get('colors.segmentedControl.bg')});
border-radius: var(--borderRadius-medium);
display: inline-flex;
list-style: none;
margin: 0;
padding: 0;
max-width: 100%;

&[data-icon-only='true'] {
[data-component='SegmentedControlButton'] {
width: 100%;
padding-inline: 0 !important;
}
}

/* sizes */

&[data-size='small'] {
--segmentedControl-item-padding: var(--control-xsmall-paddingBlock);
height: var(--control-small-size);

[data-component='SegmentedControlItem'] [data-component='SegmentedControlButton'] {
padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));
}

&[data-icon-only='true'] [data-component='SegmentedControlItem'] {
width: var(--control-small-size);
}

[data-component='SegmentedControlLeadingVisual'] {
margin-right: var(--control-small-gap, 0.25rem);
}
}

&[data-size='medium'] {
height: var(--control-medium-size);

&[data-icon-only='true'] [data-component='SegmentedControlItem'] {
width: var(--control-medium-size);
}

[data-component='SegmentedControlLeadingVisual'] {
margin-right: var(--control-medium-gap, 0.5rem);
}
}

/* item */

[data-component='SegmentedControlItem'] {
position: relative;
display: inline-flex;
justify-content: center;
border: var(--borderWidth-thin) solid transparent;
border-radius: var(--borderRadius-medium);
padding: var(--segmentedControl-item-padding);
flex: 0 1 auto;
min-width: 0;

/* button color overrides */
[data-component='SegmentedControlButton'] {
&:hover:not(:disabled) {
background-color: var(--controlTrack-bgColor-hover, ${get('colors.segmentedControl.button.hover.bg')});
}

&:active:not(:disabled) {
background-color: var(--controlTrack-bgColor-active, ${get('colors.segmentedControl.button.active.bg')});
}
}

/* Selected ---------------------------------------- */
&[data-selected='true'] {
background-color: var(--controlKnob-bgColor-rest, ${get('colors.segmentedControl.button.bg')});
border-color: var(--controlKnob-borderColor-rest, ${get('colors.segmentedControl.button.selected.border')});

[data-component='SegmentedControlButton'] {
font-weight: var(--base-text-weight-semibold);

&:hover:not(:disabled) {
background-color: transparent;
}
}

&::before {
border-color: transparent !important;
}

& + [data-component='SegmentedControlItem']::before {
border-color: transparent;
}
}

/* renders a visibly hidden "copy" of the text in bold, reserving box space for when text becomes bold on selected */
[data-component='SegmentedControlLabel'][data-content]::before {
display: block;
height: 0;
font-weight: var(--base-text-weight-semibold);
visibility: hidden;
content: attr(data-content);
}

/* Separator lines */
&:not(:first-child) {
&::before {
position: absolute;
inset: 0 0 0 -1px;
margin-top: var(--control-medium-paddingBlock);
margin-bottom: var(--control-medium-paddingBlock);
content: '';
border-left: var(--borderWidth-thin) solid var(--borderColor-default, ${get('colors.border.default')});
}
}

/* Button ----------------------------------------- */
[data-component='SegmentedControlButton'] {
background-color: transparent;
min-height: 100%;
min-width: 100%;
border: 0;
font-weight: var(--base-text-weight-normal);
border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);
padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));
cursor: pointer;
z-index: 1;

&:focus-visible {
outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));
border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);
}

svg {
fill: var(--fgColor-muted, ${get('colors.fg.muted')});
}

&:hover:not(:disabled) {
background-color: var(--controlTrack-bgColor-hover, ${get('colors.segmentedControl.button.hover.bg')});

svg {
fill: var(--fgColor-default, ${get('colors.fg.default')});
}
}
}

[data-component='SegmentedControlButtonContent'] {
align-items: center;
display: flex;
}

[data-component='SegmentedControlLabel'] {
color: var(--button-default-fgColor-rest, ${get('colors.btn.text')});
/* use ellipsis with the assumption that icon only variant will be used when not enough space is available */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

/* fullWidth */
&[data-full-width='true'] {
display: flex;

[data-component='SegmentedControlItem'] {
flex: 1;
justify-content: center;
}

[data-component='SegmentedControlButtonContent'] {
justify-content: center;
}
}

// Needed because passing a ref to `Box` causes a type error
const SegmentedControlList = styled.ul`
${sx};
`

Expand All @@ -29,25 +201,14 @@ type SegmentedControlProps = {
variant?: 'default' | Partial<Record<WidthOnlyViewportRangeKeys, 'hideLabels' | 'dropdown' | 'default'>>
} & SxProp

const getSegmentedControlStyles = (props: {isFullWidth?: boolean; size?: SegmentedControlProps['size']}) => ({
backgroundColor: 'segmentedControl.bg',
borderRadius: 2,
display: props.isFullWidth ? 'flex' : 'inline-flex',
fontSize: props.size === 'small' ? 0 : 1,
height: props.size === 'small' ? '28px' : '32px', // TODO: use primitive `control.{small|medium}.size` when it is available
margin: 0,
padding: 0,
width: props.isFullWidth ? '100%' : undefined,
})

const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledby,
children,
fullWidth,
onChange,
size,
sx: sxProp = defaultSxProp,
size = 'medium',
sx: listSxProp = defaultSxProp,
variant = 'default',
...rest
}) => {
Expand Down Expand Up @@ -92,7 +253,9 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({

return React.isValidElement<SegmentedControlIconButtonProps>(childArg) ? childArg.props['aria-label'] : null
}
const listSx = merge(getSegmentedControlStyles({isFullWidth, size}), sxProp as SxProp)
const onlyIconButtonChildren = React.Children.toArray(children).every(
child => React.isValidElement<SegmentedControlIconButtonProps>(child) && child.type === SegmentedControlIconButton,
)

if (!ariaLabel && !ariaLabelledby) {
// eslint-disable-next-line no-console
Expand Down Expand Up @@ -141,11 +304,14 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
</>
) : (
// Render a segmented control
<SegmentedControlList
sx={listSx}
<StyledSegmentedControlList
sx={listSxProp}
aria-label={ariaLabel}
aria-labelledby={ariaLabelledby}
ref={segmentedControlContainerRef}
data-icon-only={onlyIconButtonChildren || responsiveVariant === 'hideLabels'}
data-size={size}
data-full-width={isFullWidth}
{...rest}
>
{React.Children.map(children, (child, index) => {
Expand Down Expand Up @@ -184,7 +350,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
children: childPropsChildren,
...restChildProps
} = child.props
const {sx: sharedSxProp, ...restSharedChildProps} = sharedChildProps

if (!leadingIcon) {
// eslint-disable-next-line no-console
console.warn('A `leadingIcon` prop is required when hiding visible labels')
Expand All @@ -193,14 +359,8 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
<SegmentedControlIconButton
aria-label={childAriaLabel || childPropsChildren}
icon={leadingIcon}
sx={
{
...sharedSxProp,
// setting width here avoids having to pass `isFullWidth` directly to child components
width: !isFullWidth ? '32px' : '100%', // TODO: use primitive `control.medium.size` when it is available instead of '32px'
} as React.CSSProperties
}
{...restSharedChildProps}
data-component="SegmentedControlButton"
{...sharedChildProps}
{...restChildProps}
/>
)
Expand All @@ -210,7 +370,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
// Render the children as-is and add the shared child props
return React.cloneElement(child, sharedChildProps)
})}
</SegmentedControlList>
</StyledSegmentedControlList>
)
}

Expand Down
Loading