implements basic SegmentedControl functionality

docs/content/SegmentedControl.mdx

@@ -157,6 +157,7 @@ description: Use a segmented control to let users select an option from a short
     name="onChange"
     type="(selectedIndex?: number) => void"
     description="The handler that gets called when a segment is selected"
+    required
   />
   <PropsTableRow
     name="variant"
@@ -174,7 +175,6 @@ description: Use a segmented control to let users select an option from a short
 ### SegmentedControl.Button
 
 <PropsTable>
-  <PropsTableRow name="aria-label" type="string" />
   <PropsTableRow name="leadingIcon" type="Component" description="The leading icon comes before item label" />
   <PropsTableRow name="selected" type="boolean" description="Whether the segment is selected" />
   <PropsTableSxRow />
@@ -184,8 +184,13 @@ description: Use a segmented control to let users select an option from a short
 ### SegmentedControl.IconButton
 
 <PropsTable>
-  <PropsTableRow name="aria-label" type="string" />
-  <PropsTableRow name="icon" type="Component" description="The icon that represents the segmented control item" />
+  <PropsTableRow name="aria-label" type="string" required />
+  <PropsTableRow
+    name="icon"
+    type="Component"
+    description="The icon that represents the segmented control item"
+    required
+  />
   <PropsTableRow name="selected" type="boolean" description="Whether the segment is selected" />
   <PropsTableSxRow />
   <PropsTableRefRow refType="HTMLButtonElement" />

src/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import Button, {SegmentedControlButtonProps} from './SegmentedControlButton'
+import SegmentedControlIconButton, {SegmentedControlIconButtonProps} from './SegmentedControlIconButton'
+import {Box, useTheme} from '..'
+import {merge, SxProp} from '../sx'
+
+type SegmentedControlProps = {
+  'aria-label'?: string
+  'aria-labelledby'?: string
+  'aria-describedby'?: string
+  /** Whether the control fills the width of its parent */
+  fullWidth?: boolean
+  /** The handler that gets called when a segment is selected */
+  onChange?: (selectedIndex: number) => void // TODO: consider making onChange required if we force this component to be controlled
+} & 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
+  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
+})
+
+// TODO: implement `variant` prop for responsive behavior
+// TODO: implement `loading` prop
+// TODO: log a warning if no `ariaLabel` or `ariaLabelledBy` prop is passed
+const SegmentedControl: React.FC<SegmentedControlProps> = ({
+  children,
+  fullWidth,
+  onChange,
+  sx: sxProp = {},
+  ...rest
+}) => {
+  const {theme} = useTheme()
+  const selectedChildren = React.Children.toArray(children).map(
+    child =>
+      React.isValidElement<SegmentedControlButtonProps | SegmentedControlIconButtonProps>(child) && child.props.selected
+  )
+  const hasSelectedButton = selectedChildren.some(isSelected => isSelected)
+  const selectedIndex = hasSelectedButton ? selectedChildren.indexOf(true) : 0
+  const sx = merge(
+    getSegmentedControlStyles({
+      fullWidth
+    }),
+    sxProp as SxProp
+  )
+
+  return (
+    <Box role="group" sx={sx} {...rest}>
+      {React.Children.map(children, (child, i) => {
+        if (React.isValidElement<SegmentedControlButtonProps | SegmentedControlIconButtonProps>(child)) {
+          return React.cloneElement(child, {
+            onClick: onChange
+              ? (e: React.MouseEvent<HTMLButtonElement>) => {
+                  onChange(i)
+                  child.props.onClick && child.props.onClick(e)
+                }
+              : child.props.onClick,
+            selected: i === selectedIndex,
+            sx: {
+              '--separator-color':
+                i === selectedIndex || i === selectedIndex - 1 ? 'transparent' : theme?.colors.border.default
+            } as React.CSSProperties
+          })
+        }
+      })}
+    </Box>
+  )
+}
+
+export default Object.assign(SegmentedControl, {
+  Button,
+  IconButton: SegmentedControlIconButton
+})

src/SegmentedControl/SegmentedControlButton.tsx

@@ -0,0 +1,33 @@
+import React, {HTMLAttributes} from 'react'
+import {IconProps} from '@primer/octicons-react'
+import {Box} from '..'
+import {merge, SxProp} from '../sx'
+import getSegmentedControlButtonStyles from './getSegmentedControlStyles'
+
+export type SegmentedControlButtonProps = {
+  children?: string
+  /** Whether the segment is selected */
+  selected?: boolean
+  /** The leading icon comes before item label */
+  leadingIcon?: React.FunctionComponent<IconProps>
+} & SxProp &
+  HTMLAttributes<HTMLButtonElement>
+
+// TODO: Try and get this to work without `fowardRef`
+// Without it, the whole `<Box /> is marked as a very cryptic type error
+const SegmentedControlButton = React.forwardRef<HTMLButtonElement, SegmentedControlButtonProps>(
+  ({children, leadingIcon: LeadingIcon, selected, sx: sxProp = {}, ...rest}, forwardedRef) => {
+    const sx = merge(getSegmentedControlButtonStyles({selected, children}), sxProp as SxProp)
+
+    return (
+      <Box as="button" aria-pressed={selected} sx={sx} {...rest} ref={forwardedRef}>
+        <span className="segmentedControl-content">
+          <Box mr={1}>{LeadingIcon && <LeadingIcon />}</Box>
+          <Box className="segmentedControl-text">{children}</Box>
+        </span>
+      </Box>
+    )
+  }
+)
+
+export default SegmentedControlButton

src/SegmentedControl/SegmentedControlIconButton.tsx

@@ -0,0 +1,36 @@
+import React, {HTMLAttributes} from 'react'
+import {IconProps} from '@primer/octicons-react'
+import {Box} from '..'
+import {merge, SxProp} from '../sx'
+import getSegmentedControlButtonStyles from './getSegmentedControlStyles'
+
+export type SegmentedControlIconButtonProps = {
+  'aria-label': string
+  /** The icon that represents the segmented control item */
+  icon: React.FunctionComponent<IconProps>
+  /** Whether the segment is selected */
+  selected?: boolean
+} & SxProp &
+  HTMLAttributes<HTMLButtonElement>
+
+// TODO: Try and get this to work without `fowardRef`
+// Without it, the whole `<Box /> is marked as a very cryptic type error
+//
+// TODO: get tooltips working:
+// - by default, the tooltip shows the `ariaLabel` content
+// - allow users to pass custom tooltip text
+export const SegmentedControlIconButton = React.forwardRef<HTMLButtonElement, SegmentedControlIconButtonProps>(
+  ({icon: Icon, selected, sx: sxProp = {}, ...rest}, forwardedRef) => {
+    const sx = merge(getSegmentedControlButtonStyles({selected}), sxProp as SxProp)
+
+    return (
+      <Box as="button" aria-pressed={selected} sx={sx} {...rest} ref={forwardedRef}>
+        <span className="segmentedControl-content">
+          <Icon />
+        </span>
+      </Box>
+    )
+  }
+)
+
+export default SegmentedControlIconButton

src/SegmentedControl/getSegmentedControlStyles.ts

@@ -0,0 +1,83 @@
+import {SegmentedControlButtonProps} from './SegmentedControlButton'
+
+const getSegmentedControlButtonStyles = (props?: SegmentedControlButtonProps) => ({
+  '--segmented-control-button-inner-padding': '12px', // TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available
+  backgroundColor: 'transparent',
+  borderColor: 'transparent',
+  borderRadius: 2,
+  borderWidth: 0,
+  color: 'currentColor',
+  cursor: 'pointer',
+  flexGrow: 1,
+  fontWeight: props?.selected ? 'bold' : 'normal',
+  marginTop: '-1px',
+  marginBottom: '-1px',
+  padding: props?.selected ? 0 : 'calc(var(--segmented-control-button-inner-padding) / 2)',
+  position: 'relative',
+
+  '.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
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderRadius: 2,
+    display: 'flex',
+    height: '100%',
+    justifyContent: 'center',
+    paddingLeft: props?.selected
+      ? 'var(--segmented-control-button-inner-padding)'
+      : 'calc(var(--segmented-control-button-inner-padding) / 2)',
+    paddingRight: props?.selected
+      ? 'var(--segmented-control-button-inner-padding)'
+      : 'calc(var(--segmented-control-button-inner-padding) / 2)'
+  },
+
+  svg: {
+    fill: 'fg.muted'
+  },
+
+  ':hover .segmentedControl-content': {
+    backgroundColor: props?.selected ? undefined : 'rgba(0,0,0,0.08)'
+  },
+
+  ':active .segmentedControl-content': {
+    backgroundColor: props?.selected ? undefined : 'rgba(0,0,0,0.12)'
+  },
+
+  ':first-child': {
+    marginLeft: '-1px'
+  },
+
+  ':last-child': {
+    marginRight: '-1px'
+  },
+
+  ':not(:last-child)': {
+    marginRight: '1px',
+    ':after': {
+      backgroundColor: 'var(--separator-color)',
+      content: '""',
+      position: 'absolute',
+      right: '-2px',
+      top: 2,
+      bottom: 2,
+      width: '1px'
+    }
+  },
+
+  '.segmentedControl-text': {
+    ':after': {
+      content: `"${props?.children}"`,
+      display: 'block',
+      fontWeight: 'bold',
+      height: 0,
+      overflow: 'hidden',
+      pointerEvents: 'none',
+      userSelect: 'none',
+      visibility: 'hidden'
+    }
+  }
+})
+
+export default getSegmentedControlButtonStyles

src/SegmentedControl/index.ts

@@ -0,0 +1 @@
+export {default} from './SegmentedControl'