From d31c1834dcc9873caa2a7028c4632052b1418c1d Mon Sep 17 00:00:00 2001 From: Aram <37216945+alimpens@users.noreply.github.com> Date: Wed, 8 May 2024 12:05:05 +0200 Subject: [PATCH 1/2] chore: Add test for `small` prop to UnorderedList (#1222) --- packages/react/src/UnorderedList/UnorderedList.test.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/react/src/UnorderedList/UnorderedList.test.tsx b/packages/react/src/UnorderedList/UnorderedList.test.tsx index f0d847c11c..48082c57c5 100644 --- a/packages/react/src/UnorderedList/UnorderedList.test.tsx +++ b/packages/react/src/UnorderedList/UnorderedList.test.tsx @@ -61,6 +61,14 @@ describe('Unordered list', () => { expect(items.length).toBe(3) }) + it('renders the small size class', () => { + render() + + const component = screen.getByRole('list') + + expect(component).toHaveClass('ams-unordered-list--small') + }) + it('supports ForwardRef in React', () => { const ref = createRef() From 6eeaeb41fae90a2d455b4e41da3ff3a4561dcbe4 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 8 May 2024 12:37:38 +0200 Subject: [PATCH 2/2] fix!: Flatten token names for default text size and line height (#1221) --- packages/css/src/components/link-list/link-list.scss | 4 ++-- packages/css/src/components/paragraph/paragraph.scss | 4 ++-- proprietary/tokens/src/components/ams/link-list.tokens.json | 6 ++---- proprietary/tokens/src/components/ams/paragraph.tokens.json | 6 ++---- 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss index e602c3cf3a..8df908b4fe 100644 --- a/packages/css/src/components/link-list/link-list.scss +++ b/packages/css/src/components/link-list/link-list.scss @@ -26,10 +26,10 @@ color: var(--ams-link-list-link-color); display: inline-flex; font-family: var(--ams-link-list-link-font-family); - font-size: var(--ams-link-list-link-medium-font-size); + font-size: var(--ams-link-list-link-font-size); font-weight: var(--ams-link-list-link-font-weight); gap: var(--ams-link-list-link-gap); - line-height: var(--ams-link-list-link-medium-line-height); + line-height: var(--ams-link-list-link-line-height); outline-offset: var(--ams-link-list-link-outline-offset); text-decoration-line: var(--ams-link-list-link-text-decoration-line); text-decoration-thickness: var(--ams-link-list-link-text-decoration-thickness); diff --git a/packages/css/src/components/paragraph/paragraph.scss b/packages/css/src/components/paragraph/paragraph.scss index d2cfa2a229..6648b32e66 100644 --- a/packages/css/src/components/paragraph/paragraph.scss +++ b/packages/css/src/components/paragraph/paragraph.scss @@ -13,9 +13,9 @@ .ams-paragraph { color: var(--ams-paragraph-color); font-family: var(--ams-paragraph-font-family); - font-size: var(--ams-paragraph-medium-font-size); + font-size: var(--ams-paragraph-font-size); font-weight: var(--ams-paragraph-font-weight); - line-height: var(--ams-paragraph-medium-line-height); + line-height: var(--ams-paragraph-line-height); @include text-rendering; @include reset; diff --git a/proprietary/tokens/src/components/ams/link-list.tokens.json b/proprietary/tokens/src/components/ams/link-list.tokens.json index c82861a815..4ee797a87c 100644 --- a/proprietary/tokens/src/components/ams/link-list.tokens.json +++ b/proprietary/tokens/src/components/ams/link-list.tokens.json @@ -5,8 +5,10 @@ "link": { "color": { "value": "{ams.link-appearance.color}" }, "font-family": { "value": "{ams.text.font-family}" }, + "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, "gap": { "value": "0.5em" }, + "line-height": { "value": "{ams.text.level.5.line-height}" }, "outline-offset": { "value": "{ams.focus.outline-offset}" }, "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" }, "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" }, @@ -15,10 +17,6 @@ "font-size": { "value": "{ams.text.level.6.font-size}" }, "line-height": { "value": "{ams.text.level.6.line-height}" } }, - "medium": { - "font-size": { "value": "{ams.text.level.5.font-size}" }, - "line-height": { "value": "{ams.text.level.5.line-height}" } - }, "large": { "font-size": { "value": "{ams.text.level.4.font-size}" }, "line-height": { "value": "{ams.text.level.4.line-height}" } diff --git a/proprietary/tokens/src/components/ams/paragraph.tokens.json b/proprietary/tokens/src/components/ams/paragraph.tokens.json index 258ed9391a..9e3ba0c585 100644 --- a/proprietary/tokens/src/components/ams/paragraph.tokens.json +++ b/proprietary/tokens/src/components/ams/paragraph.tokens.json @@ -3,16 +3,14 @@ "paragraph": { "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, + "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.normal}" }, + "line-height": { "value": "{ams.text.level.5.line-height}" }, "inverse-color": { "value": "{ams.color.primary-white}" }, "small": { "font-size": { "value": "{ams.text.level.6.font-size}" }, "line-height": { "value": "{ams.text.level.6.line-height}" } }, - "medium": { - "font-size": { "value": "{ams.text.level.5.font-size}" }, - "line-height": { "value": "{ams.text.level.5.line-height}" } - }, "large": { "font-size": { "value": "{ams.text.level.4.font-size}" }, "line-height": { "value": "{ams.text.level.4.line-height}" }