Skip to content
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

Jump to bottom

Use SegmentedControl component primitives #2186

Merged
merged 5 commits into from
Jul 25, 2022
Merged

Use SegmentedControl component primitives #2186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fdb2bb8
bumps @primer/primitives and uses SegmentedControl component tokens
mperrotti Jul 25, 2022
9b3e244
revert comment change in SegmentedControlIconButton
mperrotti Jul 25, 2022
01ed340
adds changeset
mperrotti Jul 25, 2022
9df05d2
update themePreval snap with primitives@7.9.0
mperrotti Jul 25, 2022
019d85a
Merge branch 'main' of github.com:primer/react into mp/segmented-cont…
mperrotti Jul 25, 2022
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
5 changes: 5 additions & 0 deletions .changeset/breezy-trainers-drop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

Updates SegmentedControl styles to use component primitives.
14 changes: 7 additions & 7 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
"dependencies": {
"@primer/behaviors": "^1.1.1",
"@primer/octicons-react": "^17.3.0",
"@primer/primitives": "7.8.4",
"@primer/primitives": "7.9.0",
"@radix-ui/react-polymorphic": "^0.0.14",
"@react-aria/ssr": "^3.1.0",
"@styled-system/css": "^5.1.5",
Expand Down
7 changes: 2 additions & 5 deletions src/SegmentedControl/SegmentedControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,13 @@ type SegmentedControlProps = {
} & SxProp

const getSegmentedControlStyles = (props?: SegmentedControlProps) => ({
// TODO: update color primitive name(s) to use different primitives:
// - try to use general 'control' primitives (e.g.: https://primer.style/primitives/spacing#ui-control)
// - when that's not possible, use specific to segmented controls
backgroundColor: 'switchTrack.bg', // TODO: update primitive when it is available
backgroundColor: 'segmentedControl.bg',
borderColor: 'border.default',
borderRadius: 2,
borderStyle: 'solid',
borderWidth: 1,
display: props?.fullWidth ? 'flex' : 'inline-flex',
height: '32px' // TODO: use primitive `primer.control.medium.size` when it is available
height: '32px' // TODO: use primitive `control.medium.size` when it is available
})

const Root: React.FC<SegmentedControlProps> = ({
Expand Down
10 changes: 5 additions & 5 deletions src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ exports[`SegmentedControl renders consistently 1`] = `
-ms-flex-align: center;
align-items: center;
background-color: #f6f8fa;
border-color: #8c959f;
border-color: #6e7781;
border-style: solid;
border-width: 1px;
border-radius: var(--segmented-control-outer-radius);
Expand Down Expand Up @@ -157,11 +157,11 @@ exports[`SegmentedControl renders consistently 1`] = `
}

.c2:hover .segmentedControl-content {
background-color: rgba(208,215,222,0.32);
background-color: rgba(175,184,193,0.2);
}

.c2:active .segmentedControl-content {
background-color: rgba(208,215,222,0.48);
background-color: rgba(175,184,193,0.4);
}

.c2:first-child {
Expand Down Expand Up @@ -256,11 +256,11 @@ exports[`SegmentedControl renders consistently 1`] = `
}

.c3:hover .segmentedControl-content {
background-color: rgba(208,215,222,0.32);
background-color: rgba(175,184,193,0.2);
}

.c3:active .segmentedControl-content {
background-color: rgba(208,215,222,0.48);
background-color: rgba(175,184,193,0.4);
}

.c3:first-child {
Expand Down
10 changes: 5 additions & 5 deletions src/SegmentedControl/getSegmentedControlStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,14 @@ export const getSegmentedControlButtonStyles = (
padding: props?.selected ? 0 : 'var(--segmented-control-button-bg-inset)',
position: 'relative',
...(props?.isIconOnly && {
height: 'var(--primer-control-medium-size, 32px)',
width: 'var(--primer-control-medium-size, 32px)'
height: '32px', // TODO: use primitive `control.medium.size` when it is available
width: '32px' // TODO: use primitive `control.medium.size` when it is available
}),

'.segmentedControl-content': {
alignItems: 'center',
backgroundColor: props?.selected ? 'btn.bg' : 'transparent',
borderColor: props?.selected ? '#8c959f' : 'transparent', // TODO: use a functional primitive for the selected border color when it is available
borderColor: props?.selected ? 'segmentedControl.button.selected.border' : 'transparent',
borderStyle: 'solid',
borderWidth: 1,
borderRadius: props?.selected
Expand All @@ -76,11 +76,11 @@ export const getSegmentedControlButtonStyles = (
},

':hover .segmentedControl-content': {
backgroundColor: props?.selected ? undefined : 'actionListItem.default.hoverBg' // TODO: replace with a functional primitive
backgroundColor: props?.selected ? undefined : 'segmentedControl.button.hover.bg'
},

':active .segmentedControl-content': {
backgroundColor: props?.selected ? undefined : 'actionListItem.default.activeBg' // TODO: replace with a functional primitive
backgroundColor: props?.selected ? undefined : 'segmentedControl.button.active.bg'
},

// Icon-only buttons render the button inside of an element rendered by the Tooltip component.
Expand Down
2 changes: 1 addition & 1 deletion src/__tests__/__snapshots__/SideNav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `

.c1.variant-normal > .c0[aria-current='page']::before,
.c1.variant-normal > .c0[aria-selected='true']::before {
background-color: #FD8C73;
background-color: #fd8c73;
}

.c1.variant-lightweight > .c0 {
Expand Down
6 changes: 3 additions & 3 deletions src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a

.c0.PRC-selected {
color: #24292f;
border-bottom-color: #FD8C73;
border-bottom-color: #fd8c73;
}

.c0.PRC-selected .PRC-UnderlineNav-octicon {
Expand Down Expand Up @@ -90,7 +90,7 @@ exports[`UnderlineNav.Link renders consistently 1`] = `

.c0.PRC-selected {
color: #24292f;
border-bottom-color: #FD8C73;
border-bottom-color: #fd8c73;
}

.c0.PRC-selected .PRC-UnderlineNav-octicon {
Expand Down Expand Up @@ -148,7 +148,7 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `

.c0.PRC-selected {
color: #24292f;
border-bottom-color: #FD8C73;
border-bottom-color: #fd8c73;
}

.c0.PRC-selected .PRC-UnderlineNav-octicon {
Expand Down
Loading