Merge branch 'main' into pagelayout-hidden-prop

Author: colebemis

.changeset/breezy-trainers-drop.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Updates SegmentedControl styles to use component primitives.

package-lock.json

@@ -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",

package.json

@@ -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> = ({

src/SegmentedControl/SegmentedControl.tsx

@@ -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);
@@ -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 {
@@ -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 {

src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap

@@ -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
@@ -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.

src/SegmentedControl/getSegmentedControlStyles.ts

@@ -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 {

src/__tests__/__snapshots__/SideNav.test.tsx.snap

@@ -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 {
@@ -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 {
@@ -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 {