Merge branch 'main' into token-css-modules-base-and-token

.changeset/big-jokes-jog.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+BugFix: Fix issue in ButtonGroup Overlay screenshots by updating the selector to use `:is(button, a)` and `:first-of-type` and `:last-of-type` pseudo-classes.

.changeset/cyan-buses-visit.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert SelectPanel to CSS modules behind feature flag

.changeset/friendly-tomatoes-yell.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert PageHeader to CSS modules behind feature flag

.changeset/quick-chairs-rule.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert `Pagination` component to use CSS modules

packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx

@@ -235,22 +235,22 @@ export const ShortcutMenu = () => {
 
 export const ContextMenu = () => {
   const ListItemWithContextMenu = ({children}: {children: string}) => {
-    const handleContextMenu: React.MouseEventHandler<HTMLLIElement> = event => {
+    const handleContextMenu: React.MouseEventHandler<HTMLElement> = event => {
       event.preventDefault()
       setOpen(true)
     }
 
     const [open, setOpen] = React.useState(false)
-    const triggerRef = React.useRef<HTMLLIElement>(null)
+    const triggerRef = React.useRef<HTMLButtonElement>(null)
 
     return (
-      // We need to add an aria-label for improving support for more assistive technologies. For example: VoiceOver might not detect the `name` without `aria-label`
-      // Since this has a custom context menu, it's ok to add a tabIndex
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      <li ref={triggerRef} onContextMenu={handleContextMenu} tabIndex={0} aria-label={children}>
-        {children}
+      <li onContextMenu={handleContextMenu}>
         <ActionMenu open={open} onOpenChange={setOpen} anchorRef={triggerRef}>
-          <ActionMenu.Button sx={{visibility: 'hidden', height: 0}}>Anchor</ActionMenu.Button>
+          <ActionMenu.Anchor>
+            <Button ref={triggerRef} variant="invisible" onClick={handleContextMenu}>
+              {children}
+            </Button>
+          </ActionMenu.Anchor>
           <ActionMenu.Overlay>
             <ActionList>
               <ActionList.Item>

packages/react/src/ButtonGroup/ButtonGroup.module.css

@@ -3,18 +3,18 @@
   vertical-align: middle;
   isolation: isolate;
 
-  & > *:not([data-loading-wrapper]) {
+  & > *:not([data-loading-wrapper]):is(button, a) {
     /* stylelint-disable-next-line primer/spacing */
     margin-inline-end: -1px;
     position: relative;
     border-radius: 0;
 
-    &:first-child {
+    &:first-of-type {
       border-top-left-radius: var(--borderRadius-medium);
       border-bottom-left-radius: var(--borderRadius-medium);
     }
 
-    &:last-child {
+    &:last-of-type {
       border-top-right-radius: var(--borderRadius-medium);
       border-bottom-right-radius: var(--borderRadius-medium);
     }

packages/react/src/ButtonGroup/ButtonGroup.tsx

@@ -19,17 +19,17 @@ const StyledButtonGroup = toggleStyledComponent(
     vertical-align: middle;
     isolation: isolate;
 
-    && > *:not([data-loading-wrapper]) {
+    && > *:not([data-loading-wrapper]):is(button, a) {
       margin-inline-end: -1px;
       position: relative;
       border-radius: 0;
 
-      :first-child {
+      :first-of-type {
         border-top-left-radius: ${get('radii.2')};
         border-bottom-left-radius: ${get('radii.2')};
       }
 
-      :last-child {
+      :last-of-type {
         border-top-right-radius: ${get('radii.2')};
         border-bottom-right-radius: ${get('radii.2')};
       }

packages/react/src/PageHeader/PageHeader.module.css

@@ -0,0 +1,218 @@
+.PageHeader {
+  /* Grid Row Order */
+  --grid-row-order-context-area: 1;
+  --grid-row-order-leading-action: 2;
+  --grid-row-order-breadcrumbs: 2;
+  --grid-row-order-title-area: 2;
+  --grid-row-order-trailing-action: 2;
+  --grid-row-order-actions: 2;
+  --grid-row-order-description: 3;
+  --grid-row-order-navigation: 4;
+
+  /* Title Area Region Order */
+  --title-area-region-order-leading-visual: 0;
+  --title-area-region-order-title: 1;
+  --title-area-region-order-trailing-visual: 2;
+
+  /* Context Area Region Order */
+  --context-area-region-order-parent-link: 0;
+  --context-area-region-order-context-bar: 1;
+  --context-area-region-order-context-area-actions: 2;
+
+  display: grid;
+
+  /* We have max 5 columns. */
+  grid-template-columns: auto auto auto auto 1fr;
+  grid-template-areas:
+    'context-area context-area context-area context-area context-area'
+    'leading-action breadcrumbs title-area trailing-action actions'
+    'description description description description description'
+    'navigation navigation navigation navigation navigation';
+
+  /* 
+    line-height is calculated with calc(height/font-size) and the below numbers are from @primer/primitives.
+    --custom-font-size, --custom-line-height, --custom-font-weight are custom properties that can be used to override the below values.
+    We don't want these values to be overridden but still want to allow consumers to override them if needed.
+  */
+  &:has([data-component='TitleArea'][data-size-variant='large']) {
+    font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));
+    font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));
+    line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); /* calc(48/32) */
+
+    --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));
+  }
+
+  &:has([data-component='TitleArea'][data-size-variant='medium']) {
+    font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));
+    font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));
+    line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */
+
+    --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
+  }
+
+  &:has([data-component='TitleArea'][data-size-variant='subtitle']) {
+    font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));
+    font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));
+    line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */
+
+    --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
+  }
+
+  & [data-component='PH_LeadingAction'],
+  & [data-component='PH_TrailingAction'],
+  & [data-component='PH_Actions'],
+  & [data-component='PH_LeadingVisual'],
+  & [data-component='PH_TrailingVisual'] {
+    height: calc(var(--title-line-height) * 1em);
+  }
+
+  & [data-hidden-all] {
+    display: none;
+  }
+
+  & [data-hidden-narrow] {
+    @media screen and (max-width: 768px) {
+      display: none;
+    }
+  }
+
+  & [data-hidden-regular] {
+    @media screen and (min-width: 768px) {
+      display: none;
+    }
+  }
+
+  & [data-hidden-wide] {
+    @media screen and (min-width: 1440px) {
+      display: none;
+    }
+  }
+}
+
+.ContextArea {
+  display: flex;
+  padding-bottom: var(--base-size-8);
+  font-size: var(--text-body-size-medium, 0.875rem);
+  font-weight: var(--base-text-weight-light);
+  line-height: var(--text-body-lineHeight-medium, 1.4285);
+  flex-direction: row;
+  grid-row: var(--grid-row-order-context-area);
+  grid-area: context-area;
+  align-items: center;
+  gap: var(--stack-gap-condensed);
+}
+
+.ParentLink {
+  display: flex;
+  align-items: center;
+  order: var(--context-area-region-order-parent-link);
+  gap: var(--stack-gap-condensed);
+}
+
+.ContextBar {
+  display: flex;
+  order: var(--context-area-region-order-context-bar);
+}
+
+.ContextAreaActions {
+  display: flex;
+  flex-direction: row;
+  order: var(--context-area-region-order-context-area-actions);
+  align-items: center;
+  gap: var(--stack-gap-condensed);
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+
+.TitleArea {
+  grid-row: var(--grid-row-order-title-area);
+  grid-area: title-area;
+  display: flex;
+  gap: var(--stack-gap-condensed);
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.LeadingAction {
+  display: flex;
+  padding-right: var(--base-size-8);
+  grid-row: var(--grid-row-order-leading-action);
+  grid-area: leading-action;
+  align-items: center;
+}
+
+.Breadcrumbs {
+  display: flex;
+  padding-right: var(--base-size-8);
+  font-size: var(--text-body-size-medium, 0.875rem);
+  font-weight: var(--base-text-weight-light);
+  line-height: var(--text-body-lineHeight-medium, 1.4285);
+  grid-row: var(--grid-row-order-breadcrumbs);
+  grid-area: breadcrumbs;
+  align-items: center;
+}
+
+.LeadingVisual {
+  /* using flex and order to display the leading visual in the title area. */
+  display: flex;
+  order: var(--title-area-region-order-leading-visual);
+  align-items: center;
+}
+
+.Title {
+  /* using flex and order to display the title in the title area. */
+  display: flex;
+  order: var(--title-area-region-order-title);
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+.TrailingVisual {
+  /* using flex and order to display the trailing visual in the title area. */
+  display: flex;
+  order: var(--title-area-region-order-trailing-visual);
+  align-items: center;
+}
+
+.TrailingAction {
+  display: flex;
+  padding-left: var(--base-size-8);
+  grid-row: var(--grid-row-order-trailing-action);
+  grid-area: trailing-action;
+  align-items: center;
+}
+
+.Actions {
+  display: flex;
+  min-width: max-content;
+  padding-left: var(--base-size-8);
+  flex-direction: row;
+  grid-row: var(--grid-row-order-actions);
+  grid-area: actions;
+  gap: var(--stack-gap-condensed);
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.Description {
+  display: flex;
+  padding-top: var(--base-size-8);
+  font-size: var(--text-body-size-medium, 0.875rem);
+  font-weight: var(--base-text-weight-light);
+  line-height: var(--text-body-lineHeight-medium, 1.4285);
+  flex-direction: row;
+  grid-row: var(--grid-row-order-description);
+  grid-area: description;
+  align-items: center;
+  gap: var(--stack-gap-condensed);
+}
+
+.Navigation {
+  display: block;
+  padding-top: var(--base-size-8);
+  font-size: var(--text-body-size-medium, 0.875rem);
+  font-weight: var(--base-text-weight-light);
+  line-height: var(--text-body-lineHeight-medium, 1.4285);
+  grid-row: var(--grid-row-order-navigation);
+  grid-area: navigation;
+}