Skip to content

Commit

Permalink
Remove min-width on leading visuals + add to Selection in ActionL…
Browse files Browse the repository at this point in the history
…ist (#5411)

* remove width

* Create tiny-fireants-deny.md

* fix

* test(vrt): update snapshots

* lint

* reset

* test(vrt): update snapshots

* reset

* snaps

* test(vrt): update snapshots

---------

Co-authored-by: langermank <[email protected]>
  • Loading branch information
langermank and langermank authored Dec 11, 2024
1 parent d9e62e9 commit 74d3de4
Show file tree
Hide file tree
Showing 141 changed files with 14 additions and 10 deletions.
5 changes: 5 additions & 0 deletions .changeset/tiny-fireants-deny.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Remove `min-width` on leading visuals in ActionList
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 4 additions & 2 deletions packages/react/src/ActionList/Selection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se

if (selectionVariant === 'single' || listRole === 'menu') {
return (
<LeadingVisualContainer data-component="ActionList.Selection">{selected && <CheckIcon />}</LeadingVisualContainer>
<LeadingVisualContainer data-component="ActionList.Selection" sx={{minWidth: '16px'}}>
{selected && <CheckIcon />}
</LeadingVisualContainer>
)
}

Expand Down Expand Up @@ -61,7 +63,7 @@ export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({se
}

return (
<LeadingVisualContainer data-component="ActionList.Selection">
<LeadingVisualContainer data-component="ActionList.Selection" sx={{minWidth: '16px'}}>
<Box
sx={{
borderColor: selected ? 'accent.fg' : 'neutral.emphasis',
Expand Down
2 changes: 0 additions & 2 deletions packages/react/src/ActionList/Visuals.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from 'react'
import {AlertIcon} from '@primer/octicons-react'
import Box from '../Box'
import Spinner from '../Spinner'
import {get} from '../constants'
import type {SxProp} from '../sx'
import {merge} from '../sx'
import {ItemContext, TEXT_ROW_HEIGHT, getVariantStyles} from './shared'
Expand All @@ -17,7 +16,6 @@ export const LeadingVisualContainer: React.FC<React.PropsWithChildren<VisualProp
sx={merge(
{
height: TEXT_ROW_HEIGHT, // match height of text row
minWidth: get('space.3'),
maxWidth: TEXT_ROW_HEIGHT, // square (same as height)
display: 'flex',
justifyContent: 'center',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -888,7 +888,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
</span>,
.c5 {
height: 20px;
min-width: 16px;
max-width: 20px;
display: -webkit-box;
display: -webkit-flex;
Expand All @@ -907,6 +906,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
flex-shrink: 0;
margin-right: 8px;
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
min-width: 16px;
}
.c6 {
Expand Down Expand Up @@ -974,7 +974,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
.c9 {
height: 20px;
min-width: 16px;
max-width: 20px;
display: -webkit-box;
display: -webkit-flex;
Expand Down Expand Up @@ -1839,7 +1838,6 @@ exports[`snapshots renders a multiselect input 1`] = `
</span>,
.c4 {
height: 20px;
min-width: 16px;
max-width: 20px;
display: -webkit-box;
display: -webkit-flex;
Expand All @@ -1858,6 +1856,7 @@ exports[`snapshots renders a multiselect input 1`] = `
flex-shrink: 0;
margin-right: 8px;
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
min-width: 16px;
}
.c5 {
Expand Down Expand Up @@ -2692,7 +2691,6 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
</span>,
.c4 {
height: 20px;
min-width: 16px;
max-width: 20px;
display: -webkit-box;
display: -webkit-flex;
Expand All @@ -2711,6 +2709,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
flex-shrink: 0;
margin-right: 8px;
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
min-width: 16px;
}
.c5 {
Expand Down Expand Up @@ -3705,7 +3704,6 @@ exports[`snapshots renders a single select input 1`] = `
</span>,
.c4 {
height: 20px;
min-width: 16px;
max-width: 20px;
display: -webkit-box;
display: -webkit-flex;
Expand All @@ -3724,6 +3722,7 @@ exports[`snapshots renders a single select input 1`] = `
flex-shrink: 0;
margin-right: 8px;
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
min-width: 16px;
}
.c5 {
Expand Down Expand Up @@ -4199,7 +4198,6 @@ exports[`snapshots renders with a custom text input component 1`] = `
/>,
.c4 {
height: 20px;
min-width: 16px;
max-width: 20px;
display: -webkit-box;
display: -webkit-flex;
Expand All @@ -4218,6 +4216,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
flex-shrink: 0;
margin-right: 8px;
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
min-width: 16px;
}
.c5 {
Expand Down

0 comments on commit 74d3de4

Please sign in to comment.