Merge branch 'main' into treeview-arrow-keys

Author: colebemis

.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/PageLayout.mdx

@@ -202,6 +202,39 @@ Add `offsetHeader` prop to specify the height of the custom sticky header along
 </Box>
 ```
 
+### With `NavList`
+
+`PageLayout.Pane` by itself does not specify or provide landmark roles. Using
+components that define their own landmark roles, such as [`NavList`](/NavList), will provide
+clear structure to the page that is not present by default in `PageLayout.Pane`.
+
+It's important to note that multiple landmark roles, such as multiple
+`<nav>` elements, should be uniquely labelled in order to clarify what the
+navigation container is used for.
+
+```jsx live
+<PageLayout>
+  <PageLayout.Header>
+    <Placeholder label="Header" height={64} />
+  </PageLayout.Header>
+  <PageLayout.Pane position="start" aria-label="Secondary navigation">
+    <NavList>
+      <NavList.Item href="/" aria-current="page">
+        Home
+      </NavList.Item>
+      <NavList.Item href="/about">About</NavList.Item>
+      <NavList.Item href="/contact">Contact</NavList.Item>
+    </NavList>
+  </PageLayout.Pane>
+  <PageLayout.Content>
+    <Placeholder label="Content" height={240} />
+  </PageLayout.Content>
+  <PageLayout.Footer>
+    <Placeholder label="Footer" height={64} />
+  </PageLayout.Footer>
+</PageLayout>
+```
+
 ### With `aria-label`
 
 Using `aria-label` along with `PageLayout.Header`, `PageLayout.Content`, or `PageLayout.Footer` creates a unique label for that landmark role that can make it easier to navigate between sections of content on a page.
@@ -262,6 +295,20 @@ Each component may be labeled through either `aria-label` or `aria-labelledby` i
 - [WCAG, ARIA11 Technique](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11)
 - [MDN, Landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role)
 
+### `PageLayout.Pane`
+
+The `PageLayout.Pane` component does not provide a default landmark role as the
+content of this component may have different roles. When using this component,
+consider the type of content being rendered inside of `PageLayout.Pane` and if
+it requires a landmark role. Common landmark roles include:
+
+- [`aside`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
+- [`navigation`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
+
+Some components, such as `NavList` may already include a landmark role. In these
+situation, these components use an appropriate landmark role and no further
+action is needed when using `PageLayout.Pane`.
+
 ### Screen readers
 
 Most screen readers provide a mechanism through which you can navigate between landmarks on the page. Typically, this is done through a specific keyboard shortcut or through an option in a rotor.

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"

package-lock.json

@@ -602,6 +602,7 @@ export const CustomStickyHeader: Story = args => (
   // a box to create a sticky top element that will be on the consumer side and outside of the PageLayout component
   <Box data-testid="story-window">
     <Box
+      as="header"
       data-testid="sticky-header"
       sx={{
         position: 'sticky',

src/PageLayout/PageLayout.stories.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/SegmentedControl.tsx

@@ -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/__snapshots__/SegmentedControl.test.tsx.snap

@@ -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/examples.stories.tsx

@@ -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
 })