diff --git a/.changeset/thick-flowers-beam.md b/.changeset/thick-flowers-beam.md new file mode 100644 index 0000000000..0284c9481d --- /dev/null +++ b/.changeset/thick-flowers-beam.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": minor +--- + +``: fix center alignment, blockquote font size and update Style docs 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
- Image of a blockquote including a quote icon, quotation text, and citation - text + A blockquote including a quote icon, quotation text, and citation text
diff --git a/elements/rh-blockquote/docs/10-style.md b/elements/rh-blockquote/docs/10-style.md index 8c25141e9f..2a199a5207 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 @@ -39,21 +39,21 @@ 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) | ## 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. @@ -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 c76d9235f5..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 @@ -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 @@ -127,7 +127,7 @@ The maximum width of a blockquote anywhere is 750px 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 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 diff --git a/elements/rh-blockquote/rh-blockquote.css b/elements/rh-blockquote/rh-blockquote.css index 7a93352e12..9846a2388d 100644 --- a/elements/rh-blockquote/rh-blockquote.css +++ b/elements/rh-blockquote/rh-blockquote.css @@ -1,14 +1,14 @@ :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); 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); } @@ -19,8 +19,15 @@ blockquote { margin: 0; } +figure { + display: block; + max-inline-size: 752px; +} + blockquote ::slotted(p) { - margin: var(--rh-length-lg, 16px) 0; + font-size: var(--rh-font-size-body-text-xl, 1.25rem) !important; + margin: 0; + margin-block-end: var(--rh-length-lg, 16px); } figcaption { @@ -35,6 +42,7 @@ figcaption p { #author { font-weight: var(--rh-font-weight-heading-bold, 700); + margin-block-start: var(--rh-space-lg, 16px); } rh-icon { @@ -45,14 +53,22 @@ rh-icon { text-align: center; } -:host([size='large']) { - font-size: var(--rh-font-size-body-text-2xl, 1.5rem); +:host([align='center']) figure { + margin-inline: auto; +} + +:host([align='center']) blockquote ::slotted(p) { + max-inline-size: none !important; +} + +: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: 700px) { - :host([size='large']) { - font-size: var(--rh-font-size-heading-md, 1.75rem); +@media (min-width: 768px) { + :host([size='large']) blockquote ::slotted(p) { + font-size: var(--rh-font-size-heading-md, 1.75rem) !important; } }