From b587f1dd025ffd3d15ac4347dfa6f1a61a48afb7 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Wed, 8 Jan 2025 16:57:16 -0500 Subject: [PATCH 01/16] fix(blockquote): override potential `max-width` for quote content --- elements/rh-blockquote/rh-blockquote.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/elements/rh-blockquote/rh-blockquote.css b/elements/rh-blockquote/rh-blockquote.css index 7a93352e12..e5a2a1565f 100644 --- a/elements/rh-blockquote/rh-blockquote.css +++ b/elements/rh-blockquote/rh-blockquote.css @@ -45,6 +45,10 @@ rh-icon { text-align: center; } +:host([align='center']) #quote ::slotted(*) { + max-width: none !important; +} + :host([size='large']) { font-size: var(--rh-font-size-body-text-2xl, 1.5rem); line-height: var(--rh-line-height-heading, 1.3); From 1fa484507d92ab0bdcfb0a72a88ae42fcff1ca51 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Wed, 8 Jan 2025 16:58:09 -0500 Subject: [PATCH 02/16] chore(blockquote): add changeset --- .changeset/thick-flowers-beam.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/thick-flowers-beam.md diff --git a/.changeset/thick-flowers-beam.md b/.changeset/thick-flowers-beam.md new file mode 100644 index 0000000000..1317fb2ae1 --- /dev/null +++ b/.changeset/thick-flowers-beam.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: make quote content centered when `align="center"` From f5f0a575949eaac62fc9723fb56ea16d606c4430 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Wed, 8 Jan 2025 17:10:55 -0500 Subject: [PATCH 03/16] fix(blockquote): use logical properties --- elements/rh-blockquote/rh-blockquote.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/elements/rh-blockquote/rh-blockquote.css b/elements/rh-blockquote/rh-blockquote.css index e5a2a1565f..e4e326948a 100644 --- a/elements/rh-blockquote/rh-blockquote.css +++ b/elements/rh-blockquote/rh-blockquote.css @@ -1,7 +1,7 @@ :host { color: var(--rh-color-text-primary); margin: 0 auto; - text-align: left; + text-align: start; font-size: var(--rh-font-size-body-text-lg, 1.125rem); font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif); line-height: var(--rh-line-height-body-text, 1.5); @@ -46,7 +46,7 @@ rh-icon { } :host([align='center']) #quote ::slotted(*) { - max-width: none !important; + max-inline-size: none !important; } :host([size='large']) { From 525c06335efad00a3b24d56036bd3cb5e2c32513 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 9 Jan 2025 15:55:29 -0500 Subject: [PATCH 04/16] fix(blockquote): update quote and author spacing --- elements/rh-blockquote/rh-blockquote.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/elements/rh-blockquote/rh-blockquote.css b/elements/rh-blockquote/rh-blockquote.css index e4e326948a..e0cd502bdd 100644 --- a/elements/rh-blockquote/rh-blockquote.css +++ b/elements/rh-blockquote/rh-blockquote.css @@ -20,7 +20,8 @@ blockquote { } blockquote ::slotted(p) { - margin: var(--rh-length-lg, 16px) 0; + margin: 0; + margin-block-end: var(--rh-length-lg, 16px); } figcaption { @@ -35,6 +36,7 @@ figcaption p { #author { font-weight: var(--rh-font-weight-heading-bold, 700); + margin-block-start: var(--rh-space-lg, 16px); } rh-icon { From 4b22f702cb132e4c0c599d8541824361ac1edf09 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 9 Jan 2025 16:12:29 -0500 Subject: [PATCH 05/16] docs(blockquote): update maximum width size With direction from Marionne --- elements/rh-blockquote/docs/20-guidelines.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/elements/rh-blockquote/docs/20-guidelines.md b/elements/rh-blockquote/docs/20-guidelines.md index c76d9235f5..bf582389dc 100644 --- a/elements/rh-blockquote/docs/20-guidelines.md +++ b/elements/rh-blockquote/docs/20-guidelines.md @@ -106,18 +106,18 @@ A minimum width is hard to determine because a blockquote can be placed in a var ### Maximum width -The maximum width of a blockquote anywhere is 750px to avoid reader fatigue. +The maximum width of a blockquote anywhere is 752px to avoid reader fatigue. Image of default size blockquote left aligned with a maximum width of 750px Image of large size blockquote vertically centered with a maximum width of 750px From 023d7e942642c5c3c07097f322b6fa496dbfab8f Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 9 Jan 2025 16:12:39 -0500 Subject: [PATCH 06/16] feat(blockquote): limit width to 752px per docs --- elements/rh-blockquote/rh-blockquote.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/elements/rh-blockquote/rh-blockquote.css b/elements/rh-blockquote/rh-blockquote.css index e0cd502bdd..af0cd2f227 100644 --- a/elements/rh-blockquote/rh-blockquote.css +++ b/elements/rh-blockquote/rh-blockquote.css @@ -19,6 +19,11 @@ blockquote { margin: 0; } +figure { + display: block; + max-inline-size: 752px; +} + blockquote ::slotted(p) { margin: 0; margin-block-end: var(--rh-length-lg, 16px); @@ -47,6 +52,10 @@ rh-icon { text-align: center; } +:host([align='center']) figure { + margin-inline: auto; +} + :host([align='center']) #quote ::slotted(*) { max-inline-size: none !important; } From b6b4eb6d4848ccbe9f886f525b621fe139269abf Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 9 Jan 2025 16:18:30 -0500 Subject: [PATCH 07/16] docs(blockquote): remove "Image of" at start of alt text --- elements/rh-blockquote/docs/00-overview.md | 3 +- elements/rh-blockquote/docs/10-style.md | 22 +++---- elements/rh-blockquote/docs/20-guidelines.md | 62 ++++++++++---------- 3 files changed, 43 insertions(+), 44 deletions(-) diff --git a/elements/rh-blockquote/docs/00-overview.md b/elements/rh-blockquote/docs/00-overview.md index f5dc19b5cb..33f2ce6110 100644 --- a/elements/rh-blockquote/docs/00-overview.md +++ b/elements/rh-blockquote/docs/00-overview.md @@ -5,6 +5,5 @@ - When you need to break up large portions of text diff --git a/elements/rh-blockquote/docs/10-style.md b/elements/rh-blockquote/docs/10-style.md index 8c25141e9f..9aa194a65a 100644 --- a/elements/rh-blockquote/docs/10-style.md +++ b/elements/rh-blockquote/docs/10-style.md @@ -31,7 +31,7 @@ also include the following optional elements: ## Sizes - Image of two blockquotes, default size on the left and large size on the right @@ -68,7 +68,7 @@ tokens][/theming/color-palettes] to respond to it's color context. ### Light theme - Image of a light theme blockquote, red quote icon, black quotation text, and dark gray citation text @@ -77,7 +77,7 @@ tokens][/theming/color-palettes] to respond to it's color context. ### Dark theme - Image of a dark theme blockquote, red quote icon, white quotation text, and light gray citation text @@ -86,14 +86,14 @@ tokens][/theming/color-palettes] to respond to it's color context. ### Emphasis border - Image of two blockquotes, a red emphasis border on the left and a black emphasis border on the right - Image of two blockquotes, a red emphasis border on the left and a black emphasis border on the right @@ -111,14 +111,14 @@ tokens][/theming/color-palettes] to respond to it's color context. ### Title and heading text - Image of two blockquotes, both with red title text and black header text - Image of two blockquotes, both with red title text and white header text @@ -138,7 +138,7 @@ tokens][/theming/color-palettes] to respond to it's color context. The base elements in both sizes are stacked and left aligned by default, but they can be vertically centered if necessary. - Image of four blockquotes, two are left aligned and two are vertically centered, the quote icon is 20px tall @@ -150,7 +150,7 @@ A blockquote was designed to be read from top to bottom. If certain optional ele
- Image of a blockquote with numbers 1 - 4 on the right side going from top to bottom @@ -172,7 +172,7 @@ Citation text has specific styles applied to it. Image of three citation text examples @@ -194,7 +194,7 @@ Space values are the same in both sizes and on all breakpoints. Image of four blockquotes with spacing values in between diff --git a/elements/rh-blockquote/docs/20-guidelines.md b/elements/rh-blockquote/docs/20-guidelines.md index bf582389dc..084686615d 100644 --- a/elements/rh-blockquote/docs/20-guidelines.md +++ b/elements/rh-blockquote/docs/20-guidelines.md @@ -8,7 +8,7 @@ Use the Default size for larger amounts of text and the Large size for smaller a Image of two blockquotes, default size on the left and large size on the right with green check icons below @@ -23,7 +23,7 @@ Both blockquote sizes can be left or center aligned. Image of two blockquotes, default and large sizes both vertically centered @@ -35,14 +35,14 @@ A variety of extras including an emphasis border, logo, and text styles may be a Image of a light theme blockquote with red emphasis border Image of two light theme blockquotes, left example is default size with logo and right example is default size with title text and heading text @@ -51,14 +51,14 @@ A variety of extras including an emphasis border, logo, and text styles may be a Image of a dark theme blockquote with red emphasis border Image of two dark theme blockquotes, left example is default size with logo and right example is default size with title text and heading text @@ -70,14 +70,14 @@ Other elements including a video or card may also be added to a blockquote. They Image of blockquote with video to the right Image of blockquote with card to the right @@ -91,14 +91,14 @@ A minimum width is hard to determine because a blockquote can be placed in a var Image of default size blockquote left aligned with a minimum width of 450px Image of large size blockquote vertically centered with a minimum width of 450px @@ -110,14 +110,14 @@ The maximum width of a blockquote anywhere is 752px to avoid reader Image of default size blockquote left aligned with a maximum width of 752px Image of large size blockquote vertically centered with a maximum width of 752px @@ -127,7 +127,7 @@ The maximum width of a blockquote anywhere is 752px to avoid reader A Default size blockquote can be placed in a card if the text is short enough. Otherwise, keep blockquotes with lots of text in the page layout to avoid readability issues. A blockquote will get taller as containers and breakpoints get smaller, so take that into consideration as well. - Image of default size blockquote in a card + Default size blockquote in a card @@ -142,14 +142,14 @@ When other elements are used with blockquotes, they are placed on the right. Som Image of blockquote with video to the right and a grid overlaid on top Image of blockquote with card to the right and a grid overlaid on top @@ -161,28 +161,28 @@ As breakpoints get smaller, blockquote text sizes will be reduced based on the m Image of a default size blockquote for desktop Image of a default size blockquote for tablet Image of a default size blockquote for large mobile screens Image of a default size blockquote for small mobile screens @@ -192,28 +192,28 @@ As breakpoints get smaller, blockquote text sizes will be reduced based on the m Image of a large size blockquote for desktop Image of a large size blockquote for tablet Image of a large size blockquote for large mobile screens Image of a large size blockquote for small mobile screens @@ -222,28 +222,28 @@ As breakpoints get smaller, blockquote text sizes will be reduced based on the m Image of a blockquote with video for desktop Image of a blockquote with video for tablet Image of a blockquote with video for large mobile screens Image of a blockquote with video for small mobile screens @@ -257,7 +257,7 @@ The quote icon and citation text must always be included. Image of two blockquotes both missing elements which is incorrect usage @@ -268,7 +268,7 @@ Blockquotes that are too thin are sometimes hard to read. Image of two very thin blockquotes which is incorrect usage @@ -279,7 +279,7 @@ Do not add an emphasis border to a centered blockquote. Image of a large size blockquote with an emphasis border on the left which is incorrect usage @@ -289,7 +289,7 @@ Do not place any elements near centered blockquotes. Image of a vertically centered blockquote with a placeholder element next to it which is incorrect usage From 7f75d1833ac7a711263650c09058ccc89dfc02c0 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 9 Jan 2025 16:19:06 -0500 Subject: [PATCH 08/16] docs(blockquote): remove a11y note about `aria-label` --- elements/rh-blockquote/docs/40-accessibility.md | 1 - 1 file changed, 1 deletion(-) diff --git a/elements/rh-blockquote/docs/40-accessibility.md b/elements/rh-blockquote/docs/40-accessibility.md index f4fc5b7442..6559f7682b 100644 --- a/elements/rh-blockquote/docs/40-accessibility.md +++ b/elements/rh-blockquote/docs/40-accessibility.md @@ -1,6 +1,5 @@ ## Implementation -- To provide context, include an aria-label attribute in the markup - Ensure the blockquote is not interactive and cannot receive focus (unless there are interactive elements) - Ensure that surrounding content can convey the purpose of a blockquote via assistive technologies - Using a blockquote for anything other than its intended purpose will be confusing for assistive technologies From 40c4c877cd92851c204465699ad1423c12764d7f Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 9 Jan 2025 16:32:23 -0500 Subject: [PATCH 09/16] fix(blockquote): use standard media query size --- elements/rh-blockquote/rh-blockquote.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-blockquote/rh-blockquote.css b/elements/rh-blockquote/rh-blockquote.css index af0cd2f227..a52a722bec 100644 --- a/elements/rh-blockquote/rh-blockquote.css +++ b/elements/rh-blockquote/rh-blockquote.css @@ -65,8 +65,8 @@ rh-icon { line-height: var(--rh-line-height-heading, 1.3); } -@media (min-width: 700px) { :host([size='large']) { +@media (min-width: 768px) { font-size: var(--rh-font-size-heading-md, 1.75rem); } } From 0fdb12168cf81a31f406bc84e15b2ca9194a311c Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 9 Jan 2025 17:11:34 -0500 Subject: [PATCH 10/16] docs(blockquote): re-add content to sizes table --- elements/rh-blockquote/docs/10-style.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/elements/rh-blockquote/docs/10-style.md b/elements/rh-blockquote/docs/10-style.md index 9aa194a65a..5d7ad4c3ef 100644 --- a/elements/rh-blockquote/docs/10-style.md +++ b/elements/rh-blockquote/docs/10-style.md @@ -39,14 +39,14 @@ also include the following optional elements: -| Size | Element | Current value | -|-------------------|-----------------------|---------------| -| Default | Text size - quotation | 20px, 1.25rem | -| Default | 30 (1.5) | | -| Large | 28px, 1.75rem | | -| Large | 36.4 (1.3) | | -| Default and Large | 14px, 0.875rem | | -| Default and Large | 21 (1.5) | | +| Size | Element | Current value | +|-------------------|-------------------------|----------------| +| Default | Text size - quotation | 20px, 1.25rem | +| Default | Line height - quotation | 30 (1.5) | +| Large | Text size - quotation | 28px, 1.75rem | +| Large | Line height - quotation | 36.4 (1.3) | +| Default and Large | Text size - citation | 14px, 0.875rem | +| Default and Large | Line height - citation | 21 (1.5) | From 33c227da11afb20f907bb26bdd77ab758971b5ce Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 9 Jan 2025 17:12:00 -0500 Subject: [PATCH 11/16] docs(blockquote): fix and update themable tokens link on Style page --- elements/rh-blockquote/docs/10-style.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-blockquote/docs/10-style.md b/elements/rh-blockquote/docs/10-style.md index 5d7ad4c3ef..2a199a5207 100644 --- a/elements/rh-blockquote/docs/10-style.md +++ b/elements/rh-blockquote/docs/10-style.md @@ -53,7 +53,7 @@ also include the following optional elements: ## Theme A blockquote is available on both light and dark backgrounds, and uses [themable -tokens][/theming/color-palettes] to respond to it's color context. +tokens](/theming/customizing/) to respond to it's color context. From aa825619f5946b0366650191f61fecd593ceeccc Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 9 Jan 2025 17:12:58 -0500 Subject: [PATCH 12/16] fix(blockquote): increase/correct slotted content `font-size` --- elements/rh-blockquote/rh-blockquote.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/elements/rh-blockquote/rh-blockquote.css b/elements/rh-blockquote/rh-blockquote.css index a52a722bec..1966a0dbec 100644 --- a/elements/rh-blockquote/rh-blockquote.css +++ b/elements/rh-blockquote/rh-blockquote.css @@ -25,6 +25,7 @@ figure { } blockquote ::slotted(p) { + font-size: var(--rh-font-size-body-text-xl, 1.25rem) !important; margin: 0; margin-block-end: var(--rh-length-lg, 16px); } @@ -60,14 +61,14 @@ rh-icon { max-inline-size: none !important; } -:host([size='large']) { - font-size: var(--rh-font-size-body-text-2xl, 1.5rem); +:host([size='large']) #quote ::slotted(*) { + font-size: var(--rh-font-size-body-text-2xl, 1.5rem) !important; line-height: var(--rh-line-height-heading, 1.3); } - :host([size='large']) { @media (min-width: 768px) { - font-size: var(--rh-font-size-heading-md, 1.75rem); + :host([size='large']) #quote ::slotted(*) { + font-size: var(--rh-font-size-heading-md, 1.75rem) !important; } } From 6397b286a0f4b87f404b0eb75b3d34b26eb3da61 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 9 Jan 2025 17:15:23 -0500 Subject: [PATCH 13/16] fix(blockquote): use tag selector in CSS for quote --- elements/rh-blockquote/rh-blockquote.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/elements/rh-blockquote/rh-blockquote.css b/elements/rh-blockquote/rh-blockquote.css index 1966a0dbec..ebb83a8e49 100644 --- a/elements/rh-blockquote/rh-blockquote.css +++ b/elements/rh-blockquote/rh-blockquote.css @@ -57,17 +57,17 @@ rh-icon { margin-inline: auto; } -:host([align='center']) #quote ::slotted(*) { +:host([align='center']) blockquote ::slotted(*) { max-inline-size: none !important; } -:host([size='large']) #quote ::slotted(*) { +:host([size='large']) blockquote ::slotted(*) { font-size: var(--rh-font-size-body-text-2xl, 1.5rem) !important; line-height: var(--rh-line-height-heading, 1.3); } @media (min-width: 768px) { - :host([size='large']) #quote ::slotted(*) { + :host([size='large']) blockquote ::slotted(*) { font-size: var(--rh-font-size-heading-md, 1.75rem) !important; } } From 698334b290963b2f37374f5c05be63a4e3b6ca78 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 9 Jan 2025 17:16:15 -0500 Subject: [PATCH 14/16] fix(blockquote): target `p` tag for blockquote specifically --- elements/rh-blockquote/rh-blockquote.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/elements/rh-blockquote/rh-blockquote.css b/elements/rh-blockquote/rh-blockquote.css index ebb83a8e49..7d31dc16ba 100644 --- a/elements/rh-blockquote/rh-blockquote.css +++ b/elements/rh-blockquote/rh-blockquote.css @@ -57,17 +57,17 @@ rh-icon { margin-inline: auto; } -:host([align='center']) blockquote ::slotted(*) { +:host([align='center']) blockquote ::slotted(p) { max-inline-size: none !important; } -:host([size='large']) blockquote ::slotted(*) { +:host([size='large']) blockquote ::slotted(p) { font-size: var(--rh-font-size-body-text-2xl, 1.5rem) !important; line-height: var(--rh-line-height-heading, 1.3); } @media (min-width: 768px) { - :host([size='large']) blockquote ::slotted(*) { + :host([size='large']) blockquote ::slotted(p) { font-size: var(--rh-font-size-heading-md, 1.75rem) !important; } } From 4d6caab754c5a42667f99a6290b7707c9d7ad9ec Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 9 Jan 2025 17:17:02 -0500 Subject: [PATCH 15/16] fix(blockquote): use standard media query size --- elements/rh-blockquote/rh-blockquote.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-blockquote/rh-blockquote.css b/elements/rh-blockquote/rh-blockquote.css index 7d31dc16ba..9846a2388d 100644 --- a/elements/rh-blockquote/rh-blockquote.css +++ b/elements/rh-blockquote/rh-blockquote.css @@ -8,7 +8,7 @@ font-weight: var(--rh-font-weight-heading-regular, 300); } -@media (min-width: 700px) { +@media (min-width: 768px) { :host { font-size: var(--rh-font-size-body-text-xl, 1.25rem); } From a0bee2e1770691318b7b5de59923dcbab5195e61 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 9 Jan 2025 17:26:51 -0500 Subject: [PATCH 16/16] chore(blockquote): upgrade changeset to minor --- .changeset/thick-flowers-beam.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/thick-flowers-beam.md b/.changeset/thick-flowers-beam.md index 1317fb2ae1..0284c9481d 100644 --- a/.changeset/thick-flowers-beam.md +++ b/.changeset/thick-flowers-beam.md @@ -1,5 +1,5 @@ --- -"@rhds/elements": patch +"@rhds/elements": minor --- -``: make quote content centered when `align="center"` +``: fix center alignment, blockquote font size and update Style docs