Adds size prop to the SegmentedControl (#2347)

* adds small size variant and updates stories

* updates component docs

* updates snapshot

* adds changeset

Author: mperrotti

.changeset/large-trains-press.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds a `size` prop to the SegmentedControl component. Users can choose between 'medium' (default), and 'small'. More sizes can be added when/if we find we need them.

docs/content/SegmentedControl.mdx

@@ -39,6 +39,16 @@ const Controlled = () => {
 render(Controlled)
 ```
 
+### Small
+
+```jsx live
+<SegmentedControl aria-label="File view" size="small">
+  <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>
+  <SegmentedControl.Button>Raw</SegmentedControl.Button>
+  <SegmentedControl.Button>Blame</SegmentedControl.Button>
+</SegmentedControl>
+```
+
 ### With icons and labels
 
 ```jsx live
@@ -210,6 +220,7 @@ render(Controlled)
     type="boolean"
     description="Whether the segment is selected. This is used for controlled SegmentedControls, and needs to be updated using the onChange handler on SegmentedControl."
   />
+  <PropsTableRow name="selected" type="'small' | 'medium'" description="The size of the buttons" />
   <PropsTableRow
     name="defaultSelected"
     type="boolean"

src/SegmentedControl/SegmentedControl.tsx

@@ -24,21 +24,24 @@ type SegmentedControlProps = {
   fullWidth?: boolean | ResponsiveValue<boolean>
   /** The handler that gets called when a segment is selected */
   onChange?: (selectedIndex: number) => void
+  /** The size of the buttons */
+  size?: 'small' | 'medium'
   /** Configure alternative ways to render the control when it gets rendered in tight spaces */
   variant?: 'default' | Partial<Record<WidthOnlyViewportRangeKeys, 'hideLabels' | 'dropdown' | 'default'>>
 } & SxProp
 
-const getSegmentedControlStyles = (isFullWidth?: boolean) => ({
+const getSegmentedControlStyles = (props: {isFullWidth?: boolean; size?: SegmentedControlProps['size']}) => ({
   backgroundColor: 'segmentedControl.bg',
   borderColor: 'border.default',
   borderRadius: 2,
   borderStyle: 'solid',
   borderWidth: 1,
-  display: isFullWidth ? 'flex' : 'inline-flex',
-  height: '32px', // TODO: use primitive `control.medium.size` when it is available
+  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: isFullWidth ? '100%' : undefined
+  width: props.isFullWidth ? '100%' : undefined
 })
 
 const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
@@ -47,6 +50,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
   children,
   fullWidth,
   onChange,
+  size,
   sx: sxProp = {},
   variant,
   ...rest
@@ -91,7 +95,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
 
     return React.isValidElement<SegmentedControlIconButtonProps>(childArg) ? childArg.props['aria-label'] : null
   }
-  const listSx = merge(getSegmentedControlStyles(isFullWidth), sxProp as SxProp)
+  const listSx = merge(getSegmentedControlStyles({isFullWidth, size}), sxProp as SxProp)
 
   if (!ariaLabel && !ariaLabelledby) {
     // eslint-disable-next-line no-console

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

@@ -10,7 +10,6 @@ exports[`SegmentedControl renders consistently 1`] = `
   flex-grow: 1;
   margin-top: -1px;
   margin-bottom: -1px;
-  height: 32px;
   --separator-color: transparent;
 }
 
@@ -45,7 +44,6 @@ exports[`SegmentedControl renders consistently 1`] = `
   flex-grow: 1;
   margin-top: -1px;
   margin-bottom: -1px;
-  height: 32px;
   --separator-color: #d0d7de;
 }
 
@@ -82,7 +80,7 @@ exports[`SegmentedControl renders consistently 1`] = `
   color: currentColor;
   cursor: pointer;
   font-family: inherit;
-  font-size: 14px;
+  font-size: inherit;
   font-weight: 600;
   padding: 0;
   height: 100%;
@@ -145,7 +143,7 @@ exports[`SegmentedControl renders consistently 1`] = `
   color: currentColor;
   cursor: pointer;
   font-family: inherit;
-  font-size: 14px;
+  font-size: inherit;
   font-weight: 400;
   padding: var(--segmented-control-button-bg-inset);
   height: 100%;
@@ -216,7 +214,7 @@ exports[`SegmentedControl renders consistently 1`] = `
   color: currentColor;
   cursor: pointer;
   font-family: inherit;
-  font-size: 14px;
+  font-size: inherit;
   font-weight: 400;
   padding: var(--segmented-control-button-bg-inset);
   height: 100%;
@@ -286,6 +284,7 @@ exports[`SegmentedControl renders consistently 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  font-size: 14px;
   height: 32px;
   margin: 0;
   padding: 0;

src/SegmentedControl/examples.stories.tsx

@@ -12,6 +12,7 @@ type Args = {
   fullWidthAtNarrow?: boolean
   fullWidthAtRegular?: boolean
   fullWidthAtWide?: boolean
+  size?: 'small' | 'medium'
   variantAtNarrow: ResponsiveVariantOptions
   variantAtRegular: ResponsiveVariantOptions
   variantAtWide: ResponsiveVariantOptions
@@ -72,6 +73,13 @@ export default {
         type: 'boolean'
       }
     },
+    size: {
+      defaultValue: 'medium',
+      control: {
+        type: 'radio',
+        options: ['small', 'medium']
+      }
+    },
     variantAtNarrow: {
       name: 'variant.narrow',
       defaultValue: 'default',
@@ -116,6 +124,7 @@ export const Default = (args: Args) => (
     aria-label="File view"
     fullWidth={parseFullWidthFromArgs(args)}
     variant={parseVariantFromArgs(args)}
+    size={args.size}
   >
     <SegmentedControl.Button selected>Preview</SegmentedControl.Button>
     <SegmentedControl.Button>Raw</SegmentedControl.Button>
@@ -135,6 +144,7 @@ export const Controlled = (args: Args) => {
       onChange={handleChange}
       fullWidth={parseFullWidthFromArgs(args)}
       variant={parseVariantFromArgs(args)}
+      size={args.size}
     >
       <SegmentedControl.Button selected={selectedIndex === 0}>Preview</SegmentedControl.Button>
       <SegmentedControl.Button selected={selectedIndex === 1}>Raw</SegmentedControl.Button>
@@ -151,6 +161,7 @@ export const WithIconsAndLabels = (args: Args) => (
       aria-label="File view"
       fullWidth={parseFullWidthFromArgs(args)}
       variant={parseVariantFromArgs(args)}
+      size={args.size}
     >
       <SegmentedControl.Button selected leadingIcon={EyeIcon}>
         Preview
@@ -169,6 +180,7 @@ export const IconsOnly = (args: Args) => (
       aria-label="File view"
       fullWidth={parseFullWidthFromArgs(args)}
       variant={parseVariantFromArgs(args)}
+      size={args.size}
     >
       <SegmentedControl.IconButton selected icon={EyeIcon} aria-label="Preview" />
       <SegmentedControl.IconButton icon={FileCodeIcon} aria-label="Raw" />

src/SegmentedControl/getSegmentedControlStyles.ts

@@ -37,7 +37,7 @@ export const getSegmentedControlButtonStyles = (
   color: 'currentColor',
   cursor: 'pointer',
   fontFamily: 'inherit',
-  fontSize: 1,
+  fontSize: 'inherit',
   fontWeight: props?.selected ? 'bold' : 'normal',
   padding: props?.selected ? 0 : 'var(--segmented-control-button-bg-inset)',
   height: '100%',
@@ -114,7 +114,6 @@ export const getSegmentedControlListItemStyles = () => ({
   flexGrow: 1,
   marginTop: '-1px',
   marginBottom: '-1px',
-  height: '32px', // TODO: use primitive `control.medium.size` when it is available
   ':not(:last-child)': borderedSegment,
   ...directChildLayoutAdjustments
 })