Wip

Author: hectahertz

packages/react/src/ActionList/ActionList.docs.json

@@ -15,7 +15,7 @@
     },
     {
       "name": "variant",
-      "type": "'inset' | 'full'",
+      "type": "'inset' | 'horizontal-inset' | 'full'",
       "defaultValue": "'inset'",
       "description": "`inset` children are offset (vertically and horizontally) from list edges. `full` children are flush (vertically and horizontally) with list edges"
     },

packages/react/src/ActionList/ActionList.module.css

@@ -11,9 +11,11 @@
     list-style: none;
   }
 
-  &:where([data-variant='inset']) {
+  &:where([data-variant='horizontal-inset']) {
     padding-block: var(--base-size-8);
+  }
 
+  &:where([data-variant='inset'], [data-variant='horizontal-inset']) {
     /* this is only to match default experience */
     & .ActionListItem {
       margin-inline: var(--base-size-8);

packages/react/src/ActionList/ActionList.stories.tsx

@@ -45,7 +45,7 @@ Playground.argTypes = {
     control: {
       type: 'radio',
     },
-    options: ['inset', 'full'],
+    options: ['inset', 'horizontal-inset', 'full'],
   },
   selectionVariant: {
     control: {

packages/react/src/ActionList/Heading.module.css

@@ -5,7 +5,7 @@
     margin-inline-start: var(--base-size-8);
   }
 
-  &:where([data-list-variant='inset']) {
+  &:where([data-list-variant='inset'], [data-list-variant='horizontal-inset']) {
     /* stylelint-disable-next-line primer/spacing */
     margin-inline-start: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-8));
   }

packages/react/src/ActionList/Item.tsx

@@ -187,7 +187,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       paddingY: '6px', // custom value off the scale
       lineHeight: '16px',
       minHeight: 5,
-      marginX: listVariant === 'inset' ? 2 : 0,
+      marginX: listVariant === 'inset' || listVariant === 'horizontal-inset' ? 2 : 0,
       borderRadius: 2,
       transition: 'background 33.333ms linear',
       color: getVariantStyles(variant, disabled, inactive || loading).color,
@@ -211,7 +211,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       appearance: 'none',
       background: 'unset',
       border: 'unset',
-      width: listVariant === 'inset' ? 'calc(100% - 16px)' : '100%',
+      width: listVariant === 'inset' || listVariant === 'horizontal-inset' ? 'calc(100% - 16px)' : '100%',
       fontFamily: 'unset',
       textAlign: 'unset',
       marginY: 'unset',

packages/react/src/ActionList/shared.ts

@@ -120,7 +120,7 @@ export type ActionListProps = React.PropsWithChildren<{
   /**
    * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
    */
-  variant?: 'inset' | 'full'
+  variant?: 'inset' | 'horizontal-inset' | 'full'
   /**
    * Whether multiple Items or a single Item can be selected.
    */

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -501,7 +501,7 @@ export function SelectPanel({
           onInputRefChanged={onInputRefChanged}
           placeholderText={placeholderText}
           {...listProps}
-          variant="full"
+          variant="horizontal-inset"
           role="listbox"
           // browsers give aria-labelledby precedence over aria-label so we need to make sure
           // we don't accidentally override props.aria-label

packages/react/src/deprecated/ActionList/List.tsx

@@ -62,7 +62,7 @@ export interface ListPropsBase {
    * - `"inset"` - `List` children are offset (vertically and horizontally) from `List`’s edges
    * - `"full"` - `List` children are flush (vertically and horizontally) with `List` edges
    */
-  variant?: 'inset' | 'full'
+  variant?: 'inset' | 'horizontal-inset' | 'full'
 
   /**
    *  For `Item`s which can be selected, whether `multiple` `Item`s or a `single` `Item` can be selected