From 101cd79412a77c697a1d9814ccaf33a4129ff3f2 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Thu, 26 Sep 2024 08:52:47 -0700 Subject: [PATCH 1/6] add classname --- packages/react/src/ActionList/Group.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx index f4c1e2e8105..f5c5d4a95f7 100644 --- a/packages/react/src/ActionList/Group.tsx +++ b/packages/react/src/ActionList/Group.tsx @@ -165,6 +165,13 @@ export const GroupHeading: React.FC> borderBottom: '1px solid', borderColor: 'neutral.muted', }), + + [`.ActionListItemDescription`]: { + fontSize: 'var(--text-body-size-small)'; + fontWeight: 'var(--base-text-weight-normal)'; + lineHeight: 'var(--text-body-lineHeight-small)'; + color: 'var(--fgColor-muted)' + }, } return ( @@ -173,7 +180,7 @@ export const GroupHeading: React.FC> {listRole && listRole !== 'list' ? ( ) : ( // for explicit (role="list" is passed as prop) and implicit list roles (ActionList ins rendered as list by default), group titles are proper heading tags. From d3ecec728a921f19748b037baaa48902df0ae7e2 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Thu, 26 Sep 2024 09:07:28 -0700 Subject: [PATCH 2/6] fix description styles --- .../src/ActionList/ActionList.stories.tsx | 2 +- packages/react/src/ActionList/Group.tsx | 35 +++++++++++++------ 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/packages/react/src/ActionList/ActionList.stories.tsx b/packages/react/src/ActionList/ActionList.stories.tsx index 5e77aab1b4a..fe6dcdb8cfb 100644 --- a/packages/react/src/ActionList/ActionList.stories.tsx +++ b/packages/react/src/ActionList/ActionList.stories.tsx @@ -265,7 +265,7 @@ LinkItemPlayground.argTypes = { } export const GroupPlayground: StoryFn = args => ( - + Item 1 Item 2 diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx index f5c5d4a95f7..cf4a0a42c22 100644 --- a/packages/react/src/ActionList/Group.tsx +++ b/packages/react/src/ActionList/Group.tsx @@ -10,6 +10,7 @@ import type {ActionListHeadingProps} from './Heading' import {useSlots} from '../hooks/useSlots' import {defaultSxProp} from '../utils/defaultSxProp' import {invariant} from '../utils/invariant' +import styled from 'styled-components' export type ActionListGroupProps = { /** @@ -166,30 +167,44 @@ export const GroupHeading: React.FC> borderColor: 'neutral.muted', }), - [`.ActionListItemDescription`]: { - fontSize: 'var(--text-body-size-small)'; - fontWeight: 'var(--base-text-weight-normal)'; - lineHeight: 'var(--text-body-lineHeight-small)'; - color: 'var(--fgColor-muted)' + [`.ActionListGroupHeading`]: { + fontSize: 'var(--text-body-size-small)', + fontWeight: 'var(--base-text-weight-semibold)', + lineHeight: 'var(--text-body-lineHeight-small)', + color: 'var(--fgColor-muted)', + }, + + [`.ActionListGroupHeadingDescription`]: { + fontSize: 'var(--text-body-size-small)', + fontWeight: 'var(--base-text-weight-normal)', + lineHeight: 'var(--text-body-lineHeight-small)', + color: 'var(--fgColor-muted)', }, } + const ActionListItemDescription = styled.div` + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-normal); + line-height: var(--text-body-lineHeight-small); + color: var(--fgColor-muted); + ` + return ( <> {/* for listbox (SelectPanel) and menu (ActionMenu) roles, group titles are presentational. */} {listRole && listRole !== 'list' ? ( ) : ( // for explicit (role="list" is passed as prop) and implicit list roles (ActionList ins rendered as list by default), group titles are proper heading tags. - <> - (styles, sx)} {...props}> + + {_internalBackwardCompatibleTitle ?? children} - {auxiliaryText && {auxiliaryText}} - + {auxiliaryText &&
{auxiliaryText}
} + )} ) From 91603dfa1ffff5b8583933e25a1a0f52b82eeb6a Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Thu, 26 Sep 2024 09:07:55 -0700 Subject: [PATCH 3/6] remove role on story --- packages/react/src/ActionList/ActionList.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/ActionList/ActionList.stories.tsx b/packages/react/src/ActionList/ActionList.stories.tsx index fe6dcdb8cfb..5e77aab1b4a 100644 --- a/packages/react/src/ActionList/ActionList.stories.tsx +++ b/packages/react/src/ActionList/ActionList.stories.tsx @@ -265,7 +265,7 @@ LinkItemPlayground.argTypes = { } export const GroupPlayground: StoryFn = args => ( - + Item 1 Item 2 From db27cbc0b997ae1937043ab4fb9505caf5f07754 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Thu, 26 Sep 2024 09:46:42 -0700 Subject: [PATCH 4/6] add fallback --- packages/react/src/ActionList/Group.tsx | 19 +++------ .../__snapshots__/NavList.test.tsx.snap | 42 ++++++++++++++----- 2 files changed, 38 insertions(+), 23 deletions(-) diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx index cf4a0a42c22..fb281279896 100644 --- a/packages/react/src/ActionList/Group.tsx +++ b/packages/react/src/ActionList/Group.tsx @@ -168,27 +168,20 @@ export const GroupHeading: React.FC> }), [`.ActionListGroupHeading`]: { - fontSize: 'var(--text-body-size-small)', - fontWeight: 'var(--base-text-weight-semibold)', - lineHeight: 'var(--text-body-lineHeight-small)', + fontSize: 'var(--text-body-size-small), 12px', + fontWeight: 'var(--base-text-weight-semibold, 600)', + lineHeight: 'var(--text-body-lineHeight-small, 1.6666)', color: 'var(--fgColor-muted)', }, [`.ActionListGroupHeadingDescription`]: { - fontSize: 'var(--text-body-size-small)', - fontWeight: 'var(--base-text-weight-normal)', - lineHeight: 'var(--text-body-lineHeight-small)', + fontSize: 'var(--text-body-size-small, 12px)', + fontWeight: 'var(--base-text-weight-normal, 400)', + lineHeight: 'var(--text-body-lineHeight-small, 1.6666)', color: 'var(--fgColor-muted)', }, } - const ActionListItemDescription = styled.div` - font-size: var(--text-body-size-small); - font-weight: var(--base-text-weight-normal); - line-height: var(--text-body-lineHeight-small); - color: var(--fgColor-muted); - ` - return ( <> {/* for listbox (SelectPanel) and menu (ActionMenu) roles, group titles are presentational. */} diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap index 837ba3e6eb9..7319ed101bf 100644 --- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -474,6 +474,20 @@ exports[`NavList renders with groups 1`] = ` color: var(--fgColor-muted,var(--color-fg-muted,#656d76)); } +.c3 .ActionListGroupHeading { + font-size: var(--text-body-size-small),12px; + font-weight: var(--base-text-weight-semibold,600); + line-height: var(--text-body-lineHeight-small,1.6666); + color: var(--fgColor-muted); +} + +.c3 .ActionListGroupHeadingDescription { + font-size: var(--text-body-size-small,12px); + font-weight: var(--base-text-weight-normal,400); + line-height: var(--text-body-lineHeight-small,1.6666); + color: var(--fgColor-muted); +} + .c4 { padding-inline-start: 0; } @@ -853,12 +867,16 @@ exports[`NavList renders with groups 1`] = `
  • -

    - Overview -

    +

    + Overview +

    +
      -

      - Components -

      +

      + Components +

      +
        Date: Thu, 26 Sep 2024 09:48:48 -0700 Subject: [PATCH 5/6] Create angry-tigers-jump.md --- .changeset/angry-tigers-jump.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/angry-tigers-jump.md diff --git a/.changeset/angry-tigers-jump.md b/.changeset/angry-tigers-jump.md new file mode 100644 index 00000000000..8ab9717c248 --- /dev/null +++ b/.changeset/angry-tigers-jump.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +ActionListGroup description style bug fix From 242afcc556e9f24bf6acefbf051cad203e992fdf Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Fri, 27 Sep 2024 08:18:14 -0700 Subject: [PATCH 6/6] lint --- packages/react/src/ActionList/Group.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx index fb281279896..da31c6830ef 100644 --- a/packages/react/src/ActionList/Group.tsx +++ b/packages/react/src/ActionList/Group.tsx @@ -1,8 +1,7 @@ import React from 'react' import {useId} from '../hooks/useId' import Box from '../Box' -import type {SxProp, BetterSystemStyleObject} from '../sx' -import {merge} from '../sx' +import type {SxProp} from '../sx' import {ListContext, type ActionListProps} from './shared' import type {AriaRole} from '../utils/types' import {default as Heading} from '../Heading' @@ -10,7 +9,6 @@ import type {ActionListHeadingProps} from './Heading' import {useSlots} from '../hooks/useSlots' import {defaultSxProp} from '../utils/defaultSxProp' import {invariant} from '../utils/invariant' -import styled from 'styled-components' export type ActionListGroupProps = { /**