feat: add CSS Layer support to form and select panel components

.changeset/css-layers-filtered-form-select-panel.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+FilteredActionList, FormControl, SelectPanel: Add CSS layer support for component styles

packages/react/src/FilteredActionList/FilteredActionList.module.css

@@ -1,82 +1,84 @@
-.Root {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
+@layer primer.components.FilteredActionList {
+  .Root {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
 
-.Header {
-  /* stylelint-disable-next-line primer/box-shadow */
-  box-shadow: 0 1px 0 var(--borderColor-default);
-  z-index: 1;
-}
+  .Header {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: 0 1px 0 var(--borderColor-default);
+    z-index: 1;
+  }
 
-.Container {
-  display: flex;
-  height: 100%;
-  overflow: auto;
-  flex-grow: 1;
+  .Container {
+    display: flex;
+    height: 100%;
+    overflow: auto;
+    flex-grow: 1;
 
-  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.
-     Exclude items that show the active indicator line, as content-visibility: auto applies paint containment
-     which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */
-  & .ActionListItem:not(:focus, [data-is-active-descendant], [data-active], [data-input-focused]) {
-    content-visibility: auto;
-    contain-intrinsic-size: auto 32px;
-  }
+    /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.
+       Exclude items that show the active indicator line, as content-visibility: auto applies paint containment
+       which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */
+    & .ActionListItem:not(:focus, [data-is-active-descendant], [data-active], [data-input-focused]) {
+      content-visibility: auto;
+      contain-intrinsic-size: auto 32px;
+    }
 
-  /* When showDividers is enabled, divider ::before pseudo-elements on ActionListSubContent are
-     positioned outside the item bounds (top: -7px). content-visibility: auto applies paint containment
-     which clips these, so we must disable it for items in lists with dividers. */
-  & [data-dividers='true'] .ActionListItem {
-    content-visibility: visible;
+    /* When showDividers is enabled, divider ::before pseudo-elements on ActionListSubContent are
+       positioned outside the item bounds (top: -7px). content-visibility: auto applies paint containment
+       which clips these, so we must disable it for items in lists with dividers. */
+    & [data-dividers='true'] .ActionListItem {
+      content-visibility: visible;
+    }
   }
-}
 
-.ActionList {
-  flex-grow: 1;
-}
+  .ActionList {
+    flex-grow: 1;
+  }
 
-.ActionListItem:focus {
-  background: var(--control-transparent-bgColor-selected);
+  .ActionListItem:focus {
+    background: var(--control-transparent-bgColor-selected);
 
-  &::after {
-    @mixin activeIndicatorLine;
+    &::after {
+      @mixin activeIndicatorLine;
+    }
   }
-}
 
-.ActionListItem:where([data-input-focused]):where([data-first-child]) {
-  background: var(--control-transparent-bgColor-selected);
+  .ActionListItem:where([data-input-focused]):where([data-first-child]) {
+    background: var(--control-transparent-bgColor-selected);
 
-  &::after {
-    @mixin activeIndicatorLine;
+    &::after {
+      @mixin activeIndicatorLine;
+    }
   }
-}
 
-.FullScreenTextInput {
-  @media screen and (--viewportRange-narrow) {
-    /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */
-    @supports (-webkit-touch-callout: none) {
-      font-size: var(--text-title-size-small);
+  .FullScreenTextInput {
+    @media screen and (--viewportRange-narrow) {
+      /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */
+      @supports (-webkit-touch-callout: none) {
+        font-size: var(--text-title-size-small);
+      }
     }
   }
-}
 
-.SelectAllContainer {
-  display: flex;
-  align-items: center;
-  padding-block: var(--base-size-4);
-  padding-inline: var(--base-size-16);
-  background: var(--bgColor-muted);
-  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
-}
+  .SelectAllContainer {
+    display: flex;
+    align-items: center;
+    padding-block: var(--base-size-4);
+    padding-inline: var(--base-size-16);
+    background: var(--bgColor-muted);
+    border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+  }
 
-.SelectAllCheckbox {
-  /* -1px hack to offset 1px border-bottom causing uneven alignment */
-  /* stylelint-disable-next-line primer/spacing */
-  margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0;
-}
+  .SelectAllCheckbox {
+    /* -1px hack to offset 1px border-bottom causing uneven alignment */
+    /* stylelint-disable-next-line primer/spacing */
+    margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0;
+  }
 
-.SelectAllLabel {
-  font-size: var(--text-body-size-medium);
-  color: var(--fgColor-muted);
+  .SelectAllLabel {
+    font-size: var(--text-body-size-medium);
+    color: var(--fgColor-muted);
+  }
 }

packages/react/src/FilteredActionList/FilteredActionListLoaders.module.css

@@ -1,19 +1,21 @@
-.LoadingSkeleton {
-  /* stylelint-disable-next-line primer/borders */
-  border-radius: 4px;
-}
+@layer primer.components.FilteredActionList {
+  .LoadingSkeleton {
+    /* stylelint-disable-next-line primer/borders */
+    border-radius: 4px;
+  }
 
-.LoadingSpinner {
-  padding: var(--base-size-16);
-  flex-grow: 1;
-  align-content: center;
-  text-align: center;
-  height: 100%;
-}
+  .LoadingSpinner {
+    padding: var(--base-size-16);
+    flex-grow: 1;
+    align-content: center;
+    text-align: center;
+    height: 100%;
+  }
 
-.LoadingSkeletonContainer {
-  padding: var(--base-size-8);
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
+  .LoadingSkeletonContainer {
+    padding: var(--base-size-8);
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+  }
 }

packages/react/src/FormControl/FormControl.module.css

@@ -1,57 +1,59 @@
-.ControlHorizontalLayout {
-  display: flex;
+@layer primer.components.FormControl {
+  .ControlHorizontalLayout {
+    display: flex;
 
-  &:where([data-has-leading-visual]) {
-    align-items: center;
+    &:where([data-has-leading-visual]) {
+      align-items: center;
+    }
   }
-}
 
-.ControlVerticalLayout {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  .ControlVerticalLayout {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
 
-  & > *:not(label) + * {
-    margin-top: var(--base-size-4);
-  }
+    & > *:not(label) + * {
+      margin-top: var(--base-size-4);
+    }
 
-  &[data-has-label] > * + * {
-    margin-top: var(--base-size-4);
+    &[data-has-label] > * + * {
+      margin-top: var(--base-size-4);
+    }
   }
-}
-
-.ControlChoiceInputs > input {
-  margin-right: 0;
-  margin-left: 0;
-}
 
-.LabelContainer {
-  > * {
-    /* stylelint-disable-next-line primer/spacing */
-    padding-left: var(--stack-gap-condensed);
+  .ControlChoiceInputs > input {
+    margin-right: 0;
+    margin-left: 0;
   }
 
-  > label {
-    font-weight: var(--base-text-weight-normal);
+  .LabelContainer {
+    > * {
+      /* stylelint-disable-next-line primer/spacing */
+      padding-left: var(--stack-gap-condensed);
+    }
+
+    > label {
+      font-weight: var(--base-text-weight-normal);
+    }
   }
-}
 
-.LeadingVisual {
-  margin-left: var(--base-size-8);
-  color: var(--fgColor-muted);
+  .LeadingVisual {
+    margin-left: var(--base-size-8);
+    color: var(--fgColor-muted);
 
-  &:where([data-disabled]) {
-    color: var(--control-fgColor-disabled);
-  }
+    &:where([data-disabled]) {
+      color: var(--control-fgColor-disabled);
+    }
 
-  > * {
-    min-width: var(--text-body-size-large);
-    min-height: var(--text-body-size-large);
-    fill: currentColor;
-  }
+    > * {
+      min-width: var(--text-body-size-large);
+      min-height: var(--text-body-size-large);
+      fill: currentColor;
+    }
 
-  > *:where([data-has-caption]) {
-    min-width: var(--base-size-24);
-    min-height: var(--base-size-24);
+    > *:where([data-has-caption]) {
+      min-width: var(--base-size-24);
+      min-height: var(--base-size-24);
+    }
   }
 }

packages/react/src/FormControl/FormControlCaption.module.css

@@ -1,9 +1,11 @@
-.Caption {
-  display: block;
-  font-size: var(--text-body-size-small);
-  color: var(--fgColor-muted);
+@layer primer.components.FormControl {
+  .Caption {
+    display: block;
+    font-size: var(--text-body-size-small);
+    color: var(--fgColor-muted);
 
-  &:where([data-control-disabled]) {
-    color: var(--control-fgColor-disabled);
+    &:where([data-control-disabled]) {
+      color: var(--control-fgColor-disabled);
+    }
   }
 }

packages/react/src/FormControl/FormControlLeadingVisual.module.css

@@ -1,21 +1,23 @@
-.LeadingVisual {
-  --leadingVisual-size: 16px;
+@layer primer.components.FormControl {
+  .LeadingVisual {
+    --leadingVisual-size: 16px;
 
-  color: var(--fgColor-default);
-  display: flex;
-  align-items: center;
+    color: var(--fgColor-default);
+    display: flex;
+    align-items: center;
 
-  &:where([data-control-disabled]) {
-    color: var(--control-fgColor-disabled);
-  }
+    &:where([data-control-disabled]) {
+      color: var(--control-fgColor-disabled);
+    }
 
-  & > * {
-    min-width: var(--leadingVisual-size);
-    min-height: var(--leadingVisual-size);
-    fill: currentColor;
-  }
+    & > * {
+      min-width: var(--leadingVisual-size);
+      min-height: var(--leadingVisual-size);
+      fill: currentColor;
+    }
 
-  &:where([data-has-caption]) {
-    --leadingVisual-size: 24px;
+    &:where([data-has-caption]) {
+      --leadingVisual-size: 24px;
+    }
   }
 }