From 9561eb81372d7b24402d3abb94fb309100cc0e59 Mon Sep 17 00:00:00 2001 From: Ashley Watson-Nolan Date: Mon, 9 Dec 2024 12:08:45 +0000 Subject: [PATCH] fix(pie-divider): DSW-000 divider font-size set to 16px --- .changeset/wet-fishes-look.md | 5 + .../components/pie-divider/src/divider.scss | 92 ++++++++++--------- 2 files changed, 53 insertions(+), 44 deletions(-) create mode 100644 .changeset/wet-fishes-look.md diff --git a/.changeset/wet-fishes-look.md b/.changeset/wet-fishes-look.md new file mode 100644 index 0000000000..4c2d9b5ffa --- /dev/null +++ b/.changeset/wet-fishes-look.md @@ -0,0 +1,5 @@ +--- +"@justeattakeaway/pie-divider": minor +--- + +[Fixed] - divider font-size set to 16px diff --git a/packages/components/pie-divider/src/divider.scss b/packages/components/pie-divider/src/divider.scss index 9c0d894e28..4b3943a906 100644 --- a/packages/components/pie-divider/src/divider.scss +++ b/packages/components/pie-divider/src/divider.scss @@ -1,54 +1,58 @@ -@use '@justeattakeaway/pie-css/scss' as p; +@use '@justeattakeaway/pie-css/scss'as p; .c-divider { - --divider-bg-color: var(--dt-color-divider-default); - --divider-width: 100%; - --divider-min-width: 16px; - --divider-height: 1px; - --divider-label-max-width: 90%; - - width: var(--divider-width); - - &, - hr { - margin: 0; - border: 0; - background-color: var(--divider-bg-color); - } - - &:not(.c-divider--labelled) { - height: var(--divider-height); - } - - &.c-divider--labelled { - display: flex; - align-items: center; - text-align: center; - gap: var(--dt-spacing-b); - background-color: transparent; - - .c-divider-label { - max-width: var(--divider-label-max-width); - word-wrap: break-word; - } + --divider-bg-color: var(--dt-color-divider-default); + --divider-width: 100%; + --divider-min-width: 16px; + --divider-height: 1px; + --divider-label-max-width: 90%; + --divider-font-size: #{p.font-size(--dt-font-body-l-size)}; + --divider-line-height: #{p.font-size(--dt-font-body-l-line-height)}; + + width: var(--divider-width); + &, hr { - flex-grow: 1; - height: var(--divider-height); - min-width: var(--divider-min-width); + margin: 0; + border: 0; + background-color: var(--divider-bg-color); } - &.c-divider--inverse { - color: var(--dt-color-content-inverse); + &:not(.c-divider--labelled) { + height: var(--divider-height); + } + + &.c-divider--labelled { + display: flex; + align-items: center; + text-align: center; + gap: var(--dt-spacing-b); + background-color: transparent; + + .c-divider-label { + font-size: var(--divider-font-size); + line-height: var(--divider-line-height); + max-width: var(--divider-label-max-width); + word-wrap: break-word; + } + + hr { + flex-grow: 1; + height: var(--divider-height); + min-width: var(--divider-min-width); + } + + &.c-divider--inverse { + color: var(--dt-color-content-inverse); + } } - } - &.c-divider--inverse { - --divider-bg-color: var(--dt-color-divider-inverse); - } + &.c-divider--inverse { + --divider-bg-color: var(--dt-color-divider-inverse); + } - &.c-divider--vertical { - --divider-width: 1px; - --divider-height: 100%; - } + &.c-divider--vertical { + --divider-width: 1px; + --divider-height: 100%; + } }