From 979c78fa6f146efb20c028ccd26c7e9059af7776 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Fri, 10 Jan 2025 11:19:38 -0500 Subject: [PATCH 1/5] fix(blockquote): fix center alignment, enforce blockquote font size and update Style docs (#2112) * fix(blockquote): override potential `max-width` for quote content * chore(blockquote): add changeset * fix(blockquote): use logical properties * fix(blockquote): update quote and author spacing * docs(blockquote): update maximum width size With direction from Marionne * feat(blockquote): limit width to 752px per docs * docs(blockquote): remove "Image of" at start of alt text * docs(blockquote): remove a11y note about `aria-label` * fix(blockquote): use standard media query size * docs(blockquote): re-add content to sizes table * docs(blockquote): fix and update themable tokens link on Style page * fix(blockquote): increase/correct slotted content `font-size` * fix(blockquote): use tag selector in CSS for quote * fix(blockquote): target `p` tag for blockquote specifically * fix(blockquote): use standard media query size * chore(blockquote): upgrade changeset to minor --- .changeset/thick-flowers-beam.md | 5 ++ elements/rh-blockquote/docs/00-overview.md | 3 +- elements/rh-blockquote/docs/10-style.md | 40 ++++++------ elements/rh-blockquote/docs/20-guidelines.md | 64 +++++++++---------- .../rh-blockquote/docs/40-accessibility.md | 1 - elements/rh-blockquote/rh-blockquote.css | 32 +++++++--- 6 files changed, 82 insertions(+), 63 deletions(-) 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..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 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; } } From 34b872602913de8abd5c2ea6426154bb9b49427b Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 28 Jan 2025 10:13:03 -0500 Subject: [PATCH 2/5] fix(pagination): Colors, right to left demo, and logical properties (#2116) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(pagination): make bg of open variants transparent * fix(pagination): fallback colors for public and private variables * fix(pagination): use logical properties * fix(pagination): fix RTL demo layout * fix(pagination): wrap all pagination demos with `` * fix(pagination): remove fallbacks to RHDS color tokens * chore(pagination): add changeset * docs(pagination): add docs about colors + surface * chore(pagination): downgrade changeset to patch Co-authored-by: Benny Powers - עם ישראל חי! * docs(pagination): update changeset description Co-authored-by: Benny Powers - עם ישראל חי! * docs(pagination): reword `rh-surface` requirement terminology, add alert note * docs(pagination): update 30-code.md --------- Co-authored-by: Benny Powers - עם ישראל חי! --- .changeset/dry-icons-love.md | 5 ++ elements/rh-pagination/demo/compact.html | 5 +- elements/rh-pagination/demo/many-pages.html | 51 ++++++++++--------- .../demo/no-numeric-control.html | 21 ++++---- .../rh-pagination/demo/open-compact-size.html | 5 +- elements/rh-pagination/demo/open-compact.html | 5 +- elements/rh-pagination/demo/open.html | 21 ++++---- elements/rh-pagination/demo/overflow.html | 21 ++++---- .../rh-pagination/demo/rh-pagination.html | 21 ++++---- .../rh-pagination/demo/right-to-left.html | 16 ++---- elements/rh-pagination/demo/size-compact.html | 5 +- elements/rh-pagination/demo/size.html | 21 ++++---- elements/rh-pagination/docs/30-code.md | 10 ++++ .../rh-pagination/rh-pagination-lightdom.css | 19 ++++--- elements/rh-pagination/rh-pagination.css | 38 +++++++------- 15 files changed, 145 insertions(+), 119 deletions(-) create mode 100644 .changeset/dry-icons-love.md create mode 100644 elements/rh-pagination/docs/30-code.md diff --git a/.changeset/dry-icons-love.md b/.changeset/dry-icons-love.md new file mode 100644 index 0000000000..b2aa525fc9 --- /dev/null +++ b/.changeset/dry-icons-love.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: improves layouts for non-left-to-right languages diff --git a/elements/rh-pagination/demo/compact.html b/elements/rh-pagination/demo/compact.html index 518933b26b..ba751c92ad 100644 --- a/elements/rh-pagination/demo/compact.html +++ b/elements/rh-pagination/demo/compact.html @@ -1,4 +1,4 @@ -
+
  1. 1
    2. @@ -8,11 +8,12 @@
  2. 5
 -
+ diff --git a/elements/rh-pagination/demo/many-pages.html b/elements/rh-pagination/demo/many-pages.html index 3e00340a95..71902a0647 100644 --- a/elements/rh-pagination/demo/many-pages.html +++ b/elements/rh-pagination/demo/many-pages.html @@ -1,27 +1,29 @@ - -
    -
  1. 1
    2. -
  2. 2
    3. -
  3. 3
    4. -
  4. 4
    5. -
  5. 5
    6. -
  6. 6
    7. -
  7. 7
    8. -
  8. 8
    9. -
  9. 9
    10. -
  10. 10
    11. -
  11. 11
    12. -
  12. 12
    13. -
  13. 13
    14. -
  14. 14
    15. -
  15. 15
    16. -
  16. 16
    17. -
  17. 17
    18. -
  18. 18
    19. -
  19. 19
    20. -
  20. 20
    21. -
- + + +
    +
  1. 1
    2. +
  2. 2
    3. +
  3. 3
    4. +
  4. 4
    5. +
  5. 5
    6. +
  6. 6
    7. +
  7. 7
    8. +
  8. 8
    9. +
  9. 9
    10. +
  10. 10
    11. +
  11. 11
    12. +
  12. 12
    13. +
  13. 13
    14. +
  14. 14
    15. +
  15. 15
    16. +
  16. 16
    17. +
  17. 17
    18. +
  18. 18
    19. +
  19. 19
    20. +
  20. 20
    21. +
+ +

Paginators with many pages must overflow.

@@ -35,5 +37,6 @@ diff --git a/elements/rh-pagination/demo/no-numeric-control.html b/elements/rh-pagination/demo/no-numeric-control.html index 9f9cf63e8b..428ff40dfe 100644 --- a/elements/rh-pagination/demo/no-numeric-control.html +++ b/elements/rh-pagination/demo/no-numeric-control.html @@ -1,12 +1,14 @@ - -
    -
  1. 1
    2. -
  2. 2
    3. -
  3. 3
    4. -
  4. 4
    5. -
  5. 5
    6. -
- + + +
    +
  1. 1
    2. +
  2. 2
    3. +
  3. 3
    4. +
  4. 4
    5. +
  5. 5
    6. +
+ + @@ -17,6 +19,7 @@ diff --git a/elements/rh-pagination/demo/open-compact-size.html b/elements/rh-pagination/demo/open-compact-size.html index 80e12d10d0..f46e2769e3 100644 --- a/elements/rh-pagination/demo/open-compact-size.html +++ b/elements/rh-pagination/demo/open-compact-size.html @@ -1,4 +1,4 @@ -
+
  1. 1
    2. @@ -8,7 +8,7 @@
  2. 5
 -
+ @@ -19,5 +19,6 @@ diff --git a/elements/rh-pagination/demo/open-compact.html b/elements/rh-pagination/demo/open-compact.html index d9c3927896..e8d397f972 100644 --- a/elements/rh-pagination/demo/open-compact.html +++ b/elements/rh-pagination/demo/open-compact.html @@ -1,4 +1,4 @@ -
+
  1. 1
    2. @@ -8,7 +8,7 @@
  2. 5
 -
+ @@ -19,5 +19,6 @@ diff --git a/elements/rh-pagination/demo/open.html b/elements/rh-pagination/demo/open.html index 3eb347eda8..6958b4a069 100644 --- a/elements/rh-pagination/demo/open.html +++ b/elements/rh-pagination/demo/open.html @@ -1,15 +1,18 @@ - -
    -
  1. 1
    2. -
  2. 2
    3. -
  3. 3
    4. -
  4. 4
    5. -
  5. 5
    6. -
- + + +
    +
  1. 1
    2. +
  2. 2
    3. +
  3. 3
    4. +
  4. 4
    5. +
  5. 5
    6. +
+ + diff --git a/elements/rh-pagination/demo/overflow.html b/elements/rh-pagination/demo/overflow.html index 5ff1958ada..f7dd63ba28 100644 --- a/elements/rh-pagination/demo/overflow.html +++ b/elements/rh-pagination/demo/overflow.html @@ -1,12 +1,14 @@ - -
    -
  1. 1
    2. -
  2. 2
    3. -
  3. 3
    4. -
  4. 4
    5. -
  5. 5
    6. -
- + + +
    +
  1. 1
    2. +
  2. 2
    3. +
  3. 3
    4. +
  4. 4
    5. +
  5. 5
    6. +
+ +

Paginators with 5 or fewer pages should not overflow, meaning all links should be visible. Once a paginator has more than 5 pages, then it must overflow, meaning some links will be hidden. @@ -43,6 +45,7 @@ diff --git a/elements/rh-pagination/demo/right-to-left.html b/elements/rh-pagination/demo/right-to-left.html index 8b8ad08748..5b42961f58 100644 --- a/elements/rh-pagination/demo/right-to-left.html +++ b/elements/rh-pagination/demo/right-to-left.html @@ -1,4 +1,4 @@ -

+

צריך להיראות יותר טוב

עבור לדף @@ -10,23 +10,13 @@
  • 5
    •  -
    + - - - diff --git a/elements/rh-pagination/demo/size-compact.html b/elements/rh-pagination/demo/size-compact.html index fb4ecea95b..6a74645e9c 100644 --- a/elements/rh-pagination/demo/size-compact.html +++ b/elements/rh-pagination/demo/size-compact.html @@ -1,4 +1,4 @@ -
    +
    1. 1
      2. @@ -8,7 +8,7 @@
    2. 5
     -
    + @@ -19,5 +19,6 @@ diff --git a/elements/rh-pagination/demo/size.html b/elements/rh-pagination/demo/size.html index 4b5dd4e59b..7e37053b16 100644 --- a/elements/rh-pagination/demo/size.html +++ b/elements/rh-pagination/demo/size.html @@ -1,15 +1,18 @@ - -
      -
    1. 1
      2. -
    2. 2
      3. -
    3. 3
      4. -
    4. 4
      5. -
    5. 5
      6. -
    -     + + +
      +
    1. 1
      2. +
    2. 2
      3. +
    3. 3
      4. +
    4. 4
      5. +
    5. 5
      6. +
    +     +     diff --git a/elements/rh-pagination/docs/30-code.md b/elements/rh-pagination/docs/30-code.md new file mode 100644 index 0000000000..268a0f9dcd --- /dev/null +++ b/elements/rh-pagination/docs/30-code.md @@ -0,0 +1,10 @@ +### Displaying correct pagination colors + +In order for pagination to be styled correctly, each `` must be wrapped in a container element which supports the `color-palette` attribute, such as the [`` element](/elements/surface). + + +

    Developer note

    + + The requirement to wrap ``s with color palette containers could be relaxed in the future with advancements in browser themeing APIs. + +     diff --git a/elements/rh-pagination/rh-pagination-lightdom.css b/elements/rh-pagination/rh-pagination-lightdom.css index 90740c573e..0f772d466e 100644 --- a/elements/rh-pagination/rh-pagination-lightdom.css +++ b/elements/rh-pagination/rh-pagination-lightdom.css @@ -22,11 +22,11 @@ rh-pagination li > a { display: grid; font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-body-text-xl, 1.25rem); - height: var(--_link-size); + block-size: var(--_link-size); place-content: center; position: relative; text-decoration: none; - width: var(--_link-size); + inline-size: var(--_link-size); } rh-pagination[size='sm'] li > a { @@ -51,7 +51,7 @@ rh-pagination li > a[aria-current]:after { inset-inline-start: -1px; position: absolute; inset-block-start: -1px; - width: 104%; + inline-size: 104%; } rh-pagination li > a:hover:after, @@ -105,8 +105,8 @@ rh-pagination:is([overflow='start'], [overflow='both']) li:first-child { rh-pagination:is([overflow='end'], [overflow='both']) li:last-child:before, rh-pagination:is([overflow='start'], [overflow='both']) li:first-child:after { content: '…'; - width: var(--_link-size); - height: var(--_link-size); + inline-size: var(--_link-size); + block-size: var(--_link-size); padding-inline-end: 4px; display: flex; align-items: center; @@ -121,10 +121,6 @@ rh-pagination:is([overflow='start'], [overflow='both']) li:first-child:after { * OPEN VARIANT *****************************************************************************/ -rh-pagination[variant|='open'] { - --_list-a-bg-color: transparent; -} - rh-pagination[variant|='open'] li > a:hover:after, rh-pagination[variant|='open'] li > a:focus:before, rh-pagination[variant|='open'] li > a:focus:after, @@ -134,7 +130,10 @@ rh-pagination[variant|='open'] li > a[aria-current]:after { inset-block-end: -1px; } +rh-pagination[variant|='open'] li > a { + --_list-a-bg-color: transparent; +} + rh-pagination[variant|='open'] li > a[aria-current] { - background-color: var(--_list-a-bg-color); border-color: transparent; /* NOTE: Keep active/hover borders in-line */ } diff --git a/elements/rh-pagination/rh-pagination.css b/elements/rh-pagination/rh-pagination.css index b8b8d532d5..09c1ab0243 100644 --- a/elements/rh-pagination/rh-pagination.css +++ b/elements/rh-pagination/rh-pagination.css @@ -2,7 +2,7 @@ --_stepper-size: var(--rh-length-3xl, 48px); display: block; - min-height: 4em; + min-block-size: 4em; } :host([size='sm']) { @@ -55,39 +55,39 @@ .visually-hidden { border: 0; clip: rect(0, 0, 0, 0); - height: 1px; + block-size: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; - width: 1px; + inline-size: 1px; } @container pagination (min-width: 344px) { .xxs-visually-hidden { border: 0; clip: rect(0, 0, 0, 0); - height: 1px; + block-size: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; - width: 1px; + inline-size: 1px; } } @container pagination (min-width: 768px) { .sm-visually-visible { clip: auto; - height: auto; + block-size: auto; margin: 0; overflow: visible; padding: 0; position: static; white-space: normal; - width: auto; + inline-size: auto; } } @@ -112,11 +112,11 @@ svg { display: grid; font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif); font-size: var(--rh-font-size-heading-xs, 1.25rem); - height: var(--_stepper-size); + block-size: var(--_stepper-size); place-content: center; position: relative; text-decoration: none; - width: var(--_stepper-size); + inline-size: var(--_stepper-size); } .stepper:focus { @@ -131,10 +131,10 @@ svg { .stepper:focus:after { border-block-start-style: solid; content: ''; - left: -1px; + inset-inline-start: -1px; position: absolute; - top: -1px; - width: 104%; + inset-block-start: -1px; + inline-size: 104%; } .stepper:hover:after, @@ -149,7 +149,7 @@ svg { } .stepper svg { - height: 14px; + block-size: 14px; } :is(#next, #last) svg, @@ -173,8 +173,8 @@ svg { } input { - height: var(--rh-length-2xl, 32px); - width: var(--rh-length-4xl, 64px); + block-size: var(--rh-length-2xl, 32px); + inline-size: var(--rh-length-4xl, 64px); font-size: var(--rh-font-size-body-text-md, 1rem); background: var(--rh-color-surface-lightest, #ffffff); border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle); @@ -212,7 +212,7 @@ input:invalid:focus { #numeric-end { display: block; - width: 100%; + inline-size: 100%; } #numeric { @@ -223,13 +223,13 @@ input:invalid:focus { gap: 0.5em; margin-block: 0; margin-inline: 0 var(--rh-space-lg, 16px); - min-height: var(--_stepper-size); - width: 100%; + min-block-size: var(--_stepper-size); + inline-size: 100%; } #numeric input { align-self: stretch; - height: auto; + block-size: auto; } #numeric a { From 93891232bbd8fec524483039d47169e4ae8c66b9 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Sun, 9 Feb 2025 03:33:18 -0500 Subject: [PATCH 3/5] chore(blockquote): correct changeset level (#2137) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(blockquote): correct changeset level * chore(blockquote): update changeset Co-authored-by: Benny Powers - עם ישראל חי! --------- Co-authored-by: Benny Powers - עם ישראל חי! --- .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 0284c9481d..6bb6a36a2d 100644 --- a/.changeset/thick-flowers-beam.md +++ b/.changeset/thick-flowers-beam.md @@ -1,5 +1,5 @@ --- -"@rhds/elements": minor +"@rhds/elements": patch --- -``: fix center alignment, blockquote font size and update Style docs +``: fix `align="center"` alignment and font size. From 5c16a8722228f9555aec28361bbb68bbcc7a669c Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Mon, 10 Feb 2025 10:15:33 -0500 Subject: [PATCH 4/5] feat(dialog): use native HTML dialog element (#2078) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(dialog): use native `` element Related to #1865. * chore(dialog): add changeset * fix(dialog): update color values to use new semantic tokens * fix(dialog): make surface wrap only dialog/modal * docs(dialog): update a11y docs around focus and focus order * fix(dialog): add `accessible-label` to the `no-headings.html` demo * fix(dialog): update content in `no-header-content.html` demo * fix(dialog): horizontally center dialogs with `variant`/`width` attributes * fix(dialog): position top / modal width variants sizing * fix(dialog): add `rh-*` elements to list of focusable selectors. * fix(dialog): update close button spacing/height/width. * fix(dialog): re-add `--rh-dialog-close-button-color` * fix(dialog): decrease close button size, fix video modal close button color * fix(dialog): add close button color variable to icon declaration * fix(dialog): remove `trapFocus();` function See: https://github.com/RedHat-UX/red-hat-design-system/pull/2078/files#r1877655958 * chore(dialog): update changeset wording about overlay Co-authored-by: Benny Powers - עם ישראל חי! * fix(dialog): add `href` to `rh-cta` host Co-authored-by: Benny Powers - עם ישראל חי! * fix(dialog): add `href` to `rh-cta` host Co-authored-by: Benny Powers - עם ישראל חי! * docs(dialog): update accessible name wording on a11y page Co-authored-by: Benny Powers - עם ישראל חי! * docs(dialog): a11y accessible label wording Co-authored-by: Benny Powers - עם ישראל חי! * docs(dialog): tweak accessible label fallback text wording Co-authored-by: Benny Powers - עם ישראל חי! * docs(dialog): spelling fix Co-authored-by: Benny Powers - עם ישראל חי! * docs(dialog): a11y name jsdoc wording Co-authored-by: Benny Powers - עם ישראל חי! * fix(dialog): add `href` to CTA host's in all demos * docs(dialog): add and improve JSDoc formatting * refactor(dialog): use IDREF's for styling shadowdom * docs(dialog): a11y focus order and a11y name content * fix(dialog): only `sticky` the header when there's enough space * fix(dialog): add surface background color to close button * fix(dialog): add padding to sticky `#header` * fix(dialog): add space to bottom of `#header` * fix(dialog): prevent header space from covering body content * docs(dialog): update demo wording Co-authored-by: Benny Powers - עם ישראל חי! * fix(dialog): remove `#onKeyDown` from `disconnectedCallback()` Co-authored-by: Benny Powers - עם ישראל חי! * docs(dialog): add extra note on `overlay` depreciation to changeset * fix(dialog): ensure `#body` paragraph spacing is correct * fix(dialog): remove `closeOnOutsideClick` static * refactor(dialog): remove `@bound` from `onClick()` method * fix(dialog): remove outdated tab/shift+tab methods * refactor(dialog): remove `@bound` from public methods * fix(dialog): simplify color-palette logic * fix(dialog): allow `sm`/`md`/`lg` variants for video dialogs * docs(dialog): update images and some content, remove old images * docs(dialog): fix relative link * refactor(dialog): rename `offset` vars to be private * fix(dialog): update font family variable fallbacks * docs(dialog): fix video dialog image and remove old images --------- Co-authored-by: Benny Powers - עם ישראל חי! Co-authored-by: marionnegp --- .changeset/large-gifts-promise.md | 5 + .changeset/loud-coins-shake.md | 21 ++ elements/rh-dialog/demo/color-context.html | 4 +- elements/rh-dialog/demo/events.html | 4 +- elements/rh-dialog/demo/lots-of-content.html | 4 +- .../rh-dialog/demo/no-header-content.html | 8 +- elements/rh-dialog/demo/no-headings.html | 17 +- elements/rh-dialog/demo/rh-dialog.html | 4 +- elements/rh-dialog/docs/10-style.md | 101 +----- elements/rh-dialog/docs/20-guidelines.md | 319 ++++++++---------- elements/rh-dialog/docs/40-accessibility.md | 55 ++- .../dialog-a11y-keyboard-interactions.png | Bin 91728 -> 0 bytes .../dialog-a11y-keyboard-interactions.svg | 65 ++++ .../docs/dialog-a11y-touch-targets.png | Bin 70535 -> 0 bytes .../docs/dialog-a11y-touch-targets.svg | 32 ++ elements/rh-dialog/docs/dialog-anatomy.png | Bin 71297 -> 0 bytes elements/rh-dialog/docs/dialog-anatomy.svg | 43 +++ .../docs/dialog-behavior-tab-order.svg | 1 - .../rh-dialog/docs/dialog-best-practice-1.png | Bin 110987 -> 0 bytes .../rh-dialog/docs/dialog-best-practice-2.png | Bin 68826 -> 0 bytes .../rh-dialog/docs/dialog-best-practice-3.png | Bin 66807 -> 0 bytes ...log-best-practice-number-of-buttons-do.svg | 29 ++ ...g-best-practice-number-of-buttons-dont.svg | 31 ++ .../dialog-best-practice-reading-time-do.svg | 34 ++ ...dialog-best-practice-reading-time-dont.svg | 56 +++ ...ialog-best-practice-unclear-context-do.svg | 29 ++ ...log-best-practice-unclear-context-dont.svg | 29 ++ .../docs/dialog-best-practices-1.svg | 1 - .../docs/dialog-best-practices-2.svg | 1 - .../docs/dialog-best-practices-3.svg | 1 - .../docs/dialog-breakpoint-large.png | Bin 68697 -> 0 bytes .../docs/dialog-breakpoint-large.svg | 27 ++ .../docs/dialog-breakpoint-small.png | Bin 84508 -> 0 bytes .../docs/dialog-breakpoint-small.svg | 50 +++ .../rh-dialog/docs/dialog-configuration.png | Bin 98808 -> 0 bytes .../docs/dialog-confirmation-destructive.png | Bin 66223 -> 0 bytes .../dialog-confirmation-non-destructive.png | Bin 65733 -> 0 bytes elements/rh-dialog/docs/dialog-error.png | Bin 80149 -> 0 bytes .../docs/dialog-interaction-state-active.png | Bin 67739 -> 0 bytes .../docs/dialog-interaction-state-active.svg | 44 +++ .../docs/dialog-interaction-state-focus.png | Bin 66695 -> 0 bytes .../docs/dialog-interaction-state-focus.svg | 30 ++ .../docs/dialog-interaction-state-hover.png | Bin 66708 -> 0 bytes .../docs/dialog-interaction-state-hover.svg | 43 +++ .../docs/dialog-keyboard-interactions.png | Bin 91628 -> 0 bytes elements/rh-dialog/docs/dialog-overflow.png | Bin 247553 -> 0 bytes elements/rh-dialog/docs/dialog-overflow.svg | 34 ++ elements/rh-dialog/docs/dialog-passive.png | Bin 68761 -> 0 bytes .../docs/dialog-patterns-video-player.png | Bin 0 -> 138575 bytes .../docs/dialog-placement-center.png | Bin 69256 -> 0 bytes .../rh-dialog/docs/dialog-placement-top.png | Bin 71639 -> 0 bytes .../docs/dialog-responsive-desktop-video.svg | 1 - .../docs/dialog-responsive-desktop.svg | 1 - .../docs/dialog-responsive-dialog-video.svg | 1 - .../docs/dialog-responsive-mobile.svg | 58 ---- .../docs/dialog-responsive-tablet-video.svg | 1 - .../docs/dialog-responsive-tablet.svg | 1 - .../docs/dialog-space-breakpoint-large.png | Bin 78303 -> 0 bytes .../docs/dialog-space-breakpoint-large.svg | 56 +++ .../docs/dialog-space-breakpoint-small.png | Bin 62444 -> 0 bytes .../docs/dialog-space-breakpoint-small.svg | 56 +++ .../docs/dialog-spacing-desktop-video.svg | 1 - .../rh-dialog/docs/dialog-spacing-desktop.svg | 1 - .../rh-dialog/docs/dialog-spacing-mobile.svg | 1 - .../rh-dialog/docs/dialog-style-content.svg | 1 - .../docs/dialog-style-size-mobile-1.svg | 1 - .../docs/dialog-style-size-mobile.png | Bin 14873 -> 0 bytes .../docs/dialog-style-size-mobile.svg | 1 - .../docs/dialog-style-video-player.svg | 1 - .../rh-dialog/docs/dialog-style-video.svg | 1 - elements/rh-dialog/docs/dialog-style.svg | 1 - .../rh-dialog/docs/dialog-theme-light.png | Bin 65733 -> 0 bytes .../rh-dialog/docs/dialog-theme-light.svg | 29 ++ .../rh-dialog/docs/dialog-touch-targets.png | Bin 102875 -> 0 bytes elements/rh-dialog/docs/dialog-usage-size.svg | 1 - .../rh-dialog/docs/dialog-video-player.png | Bin 142827 -> 0 bytes .../rh-dialog/docs/dialog-width-fixed.png | Bin 127639 -> 0 bytes .../rh-dialog/docs/dialog-width-fixed.svg | 27 ++ elements/rh-dialog/docs/dialog-width-full.png | Bin 98535 -> 0 bytes elements/rh-dialog/docs/dialog-width-full.svg | 27 ++ elements/rh-dialog/docs/overview.png | Bin 65733 -> 95844 bytes elements/rh-dialog/rh-dialog.css | 308 ++++++++++------- elements/rh-dialog/rh-dialog.ts | 172 +++++----- 83 files changed, 1274 insertions(+), 596 deletions(-) create mode 100644 .changeset/large-gifts-promise.md create mode 100644 .changeset/loud-coins-shake.md delete mode 100644 elements/rh-dialog/docs/dialog-a11y-keyboard-interactions.png create mode 100644 elements/rh-dialog/docs/dialog-a11y-keyboard-interactions.svg delete mode 100755 elements/rh-dialog/docs/dialog-a11y-touch-targets.png create mode 100644 elements/rh-dialog/docs/dialog-a11y-touch-targets.svg delete mode 100755 elements/rh-dialog/docs/dialog-anatomy.png create mode 100644 elements/rh-dialog/docs/dialog-anatomy.svg delete mode 100644 elements/rh-dialog/docs/dialog-behavior-tab-order.svg delete mode 100755 elements/rh-dialog/docs/dialog-best-practice-1.png delete mode 100755 elements/rh-dialog/docs/dialog-best-practice-2.png delete mode 100755 elements/rh-dialog/docs/dialog-best-practice-3.png create mode 100644 elements/rh-dialog/docs/dialog-best-practice-number-of-buttons-do.svg create mode 100644 elements/rh-dialog/docs/dialog-best-practice-number-of-buttons-dont.svg create mode 100644 elements/rh-dialog/docs/dialog-best-practice-reading-time-do.svg create mode 100644 elements/rh-dialog/docs/dialog-best-practice-reading-time-dont.svg create mode 100644 elements/rh-dialog/docs/dialog-best-practice-unclear-context-do.svg create mode 100644 elements/rh-dialog/docs/dialog-best-practice-unclear-context-dont.svg delete mode 100644 elements/rh-dialog/docs/dialog-best-practices-1.svg delete mode 100644 elements/rh-dialog/docs/dialog-best-practices-2.svg delete mode 100644 elements/rh-dialog/docs/dialog-best-practices-3.svg delete mode 100755 elements/rh-dialog/docs/dialog-breakpoint-large.png create mode 100644 elements/rh-dialog/docs/dialog-breakpoint-large.svg delete mode 100755 elements/rh-dialog/docs/dialog-breakpoint-small.png create mode 100644 elements/rh-dialog/docs/dialog-breakpoint-small.svg delete mode 100755 elements/rh-dialog/docs/dialog-configuration.png delete mode 100755 elements/rh-dialog/docs/dialog-confirmation-destructive.png delete mode 100755 elements/rh-dialog/docs/dialog-confirmation-non-destructive.png delete mode 100755 elements/rh-dialog/docs/dialog-error.png delete mode 100755 elements/rh-dialog/docs/dialog-interaction-state-active.png create mode 100644 elements/rh-dialog/docs/dialog-interaction-state-active.svg delete mode 100755 elements/rh-dialog/docs/dialog-interaction-state-focus.png create mode 100644 elements/rh-dialog/docs/dialog-interaction-state-focus.svg delete mode 100755 elements/rh-dialog/docs/dialog-interaction-state-hover.png create mode 100644 elements/rh-dialog/docs/dialog-interaction-state-hover.svg delete mode 100755 elements/rh-dialog/docs/dialog-keyboard-interactions.png delete mode 100755 elements/rh-dialog/docs/dialog-overflow.png create mode 100644 elements/rh-dialog/docs/dialog-overflow.svg delete mode 100755 elements/rh-dialog/docs/dialog-passive.png create mode 100644 elements/rh-dialog/docs/dialog-patterns-video-player.png delete mode 100755 elements/rh-dialog/docs/dialog-placement-center.png delete mode 100755 elements/rh-dialog/docs/dialog-placement-top.png delete mode 100644 elements/rh-dialog/docs/dialog-responsive-desktop-video.svg delete mode 100644 elements/rh-dialog/docs/dialog-responsive-desktop.svg delete mode 100644 elements/rh-dialog/docs/dialog-responsive-dialog-video.svg delete mode 100644 elements/rh-dialog/docs/dialog-responsive-mobile.svg delete mode 100644 elements/rh-dialog/docs/dialog-responsive-tablet-video.svg delete mode 100644 elements/rh-dialog/docs/dialog-responsive-tablet.svg delete mode 100755 elements/rh-dialog/docs/dialog-space-breakpoint-large.png create mode 100644 elements/rh-dialog/docs/dialog-space-breakpoint-large.svg delete mode 100755 elements/rh-dialog/docs/dialog-space-breakpoint-small.png create mode 100644 elements/rh-dialog/docs/dialog-space-breakpoint-small.svg delete mode 100644 elements/rh-dialog/docs/dialog-spacing-desktop-video.svg delete mode 100644 elements/rh-dialog/docs/dialog-spacing-desktop.svg delete mode 100644 elements/rh-dialog/docs/dialog-spacing-mobile.svg delete mode 100644 elements/rh-dialog/docs/dialog-style-content.svg delete mode 100644 elements/rh-dialog/docs/dialog-style-size-mobile-1.svg delete mode 100644 elements/rh-dialog/docs/dialog-style-size-mobile.png delete mode 100644 elements/rh-dialog/docs/dialog-style-size-mobile.svg delete mode 100644 elements/rh-dialog/docs/dialog-style-video-player.svg delete mode 100644 elements/rh-dialog/docs/dialog-style-video.svg delete mode 100644 elements/rh-dialog/docs/dialog-style.svg delete mode 100755 elements/rh-dialog/docs/dialog-theme-light.png create mode 100644 elements/rh-dialog/docs/dialog-theme-light.svg delete mode 100755 elements/rh-dialog/docs/dialog-touch-targets.png delete mode 100644 elements/rh-dialog/docs/dialog-usage-size.svg delete mode 100755 elements/rh-dialog/docs/dialog-video-player.png delete mode 100755 elements/rh-dialog/docs/dialog-width-fixed.png create mode 100644 elements/rh-dialog/docs/dialog-width-fixed.svg delete mode 100755 elements/rh-dialog/docs/dialog-width-full.png create mode 100644 elements/rh-dialog/docs/dialog-width-full.svg diff --git a/.changeset/large-gifts-promise.md b/.changeset/large-gifts-promise.md new file mode 100644 index 0000000000..37735ee28b --- /dev/null +++ b/.changeset/large-gifts-promise.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: Aligned CSS variable naming with privacy conventions by prefixing the undocumented `--offset`, `--offset-top`, and `--offset-right` variables with an underscore, marking them as private (`--_offset`, `--_offset-top`, `--_offset-right`). diff --git a/.changeset/loud-coins-shake.md b/.changeset/loud-coins-shake.md new file mode 100644 index 0000000000..9843d0c0d8 --- /dev/null +++ b/.changeset/loud-coins-shake.md @@ -0,0 +1,21 @@ +--- +"@rhds/elements": minor +--- + +``: Dialog now uses the native HTML `` element internally. + +Note: the `overlay` CSS shadow part is now deprecated in favor of the `--rh-dialog-backdrop-background-color` CSS custom property. It will still work, but you can expect the `overlay` part to be removed in a future version + +Before: + +```css +rh-dialog::part(overlay) { ... } +``` + +After: + +```css +rh-dialog { + --rh-dialog-backdrop-background-color: ghostwhite; +} +``` diff --git a/elements/rh-dialog/demo/color-context.html b/elements/rh-dialog/demo/color-context.html index 90af9cf496..3ae29689c3 100644 --- a/elements/rh-dialog/demo/color-context.html +++ b/elements/rh-dialog/demo/color-context.html @@ -16,9 +16,7 @@

    Color Context

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    - - Learn more - + Call to Action     Open Dialog diff --git a/elements/rh-dialog/demo/events.html b/elements/rh-dialog/demo/events.html index f3e55d7310..2eb0eeb718 100644 --- a/elements/rh-dialog/demo/events.html +++ b/elements/rh-dialog/demo/events.html @@ -6,9 +6,7 @@

    Modal dialog with a header

    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    - - Learn more - + Call to Action     Open
    diff --git a/elements/rh-dialog/demo/lots-of-content.html b/elements/rh-dialog/demo/lots-of-content.html index 195cb5df64..3088f0f683 100644 --- a/elements/rh-dialog/demo/lots-of-content.html +++ b/elements/rh-dialog/demo/lots-of-content.html @@ -57,9 +57,7 @@

    Modal with a header with a truly excessive super duper long ti

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    - - Learn more - + Call to Action - - - - diff --git a/elements/rh-back-to-top/demo/position-sticky.html b/elements/rh-back-to-top/demo/position-sticky.html deleted file mode 100644 index eb26e2dcb5..0000000000 --- a/elements/rh-back-to-top/demo/position-sticky.html +++ /dev/null @@ -1,100 +0,0 @@ -
    - -
    -
    -
    -

    Back to Top Demo

    -

    Scroll down or press tab to show back to top link.

    -

    Back to top link will stay above the footer

    -
    -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis tellus nec erat sodales ultrices. Morbi fringilla, purus ut cursus volutpat, dui ipsum varius massa, a lobortis mauris mi et justo. Integer lobortis sed magna in aliquet. Pellentesque suscipit elit enim, in consectetur metus tincidunt eu. In quam dolor, bibendum ac lorem et, blandit lacinia lorem. Praesent bibendum magna vel finibus facilisis. Cras eleifend est sed nisi malesuada, vitae varius sem venenatis. Nam maximus ligula bibendum quam porttitor tempor. Cras in lacus in lacus consectetur placerat lobortis ac velit. Pellentesque venenatis leo sit amet neque commodo pulvinar. Integer quis nulla ac eros luctus scelerisque. Pellentesque interdum sapien eros. Integer id velit sed eros fringilla porttitor.

    -

    Integer sit amet ultricies felis. Pellentesque consectetur metus lacus, vitae ultricies augue imperdiet non. Phasellus consectetur sapien elit, at blandit sapien scelerisque at. Sed congue venenatis sem nec ultrices. Aenean vel nunc semper, auctor lacus id, imperdiet ipsum. Aliquam gravida ultricies auctor. Suspendisse potenti.

    -

    Maecenas volutpat nisi lacus, sed facilisis sapien porta eget. Fusce interdum euismod faucibus. Curabitur sit amet lorem eu massa rutrum tempor vitae vitae urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ultricies lacinia nisl, sed pharetra tortor porttitor vitae. Donec tincidunt lectus vitae quam volutpat malesuada. Nunc felis orci, commodo vitae euismod non, vestibulum vel mauris. Quisque vel ipsum non dolor faucibus porttitor. Aenean porttitor sollicitudin elit, sit amet dictum ante dapibus vitae.

    -

    Nam imperdiet id ipsum sit amet congue. Sed nisl felis, pharetra in convallis varius, pretium a sem. Duis tincidunt luctus ipsum, a vestibulum nulla pharetra eget. In varius pellentesque lorem sed viverra. Phasellus ut leo pellentesque, finibus urna quis, elementum sapien. Nunc lacinia risus tortor, sit amet hendrerit dui vehicula ornare. Phasellus porttitor hendrerit mauris, vel euismod elit posuere ut.

    -

    Nullam tristique egestas ligula vitae interdum. Aliquam erat volutpat. Morbi gravida, enim eget convallis efficitur, risus ante sagittis magna, a viverra dolor felis a velit. Sed blandit semper nulla eu congue. Etiam gravida iaculis diam, ut vehicula tortor consectetur et. Mauris vitae tincidunt est. Phasellus sit amet nulla leo. Phasellus luctus et libero non mollis. Pellentesque efficitur, massa non vehicula auctor, risus dui vehicula sem, at aliquet elit justo et nibh. Ut sodales lectus vitae lacus aliquam, quis pharetra ante viverra. Aliquam tristique, mi non egestas viverra, nunc turpis malesuada lectus, vitae malesuada enim ante et arcu. Nullam interdum nulla et purus molestie interdum. Nulla et eros porttitor, dignissim sapien nec, ornare augue.

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis tellus nec erat sodales ultrices. Morbi fringilla, purus ut cursus volutpat, dui ipsum varius massa, a lobortis mauris mi et justo. Integer lobortis sed magna in aliquet. Pellentesque suscipit elit enim, in consectetur metus tincidunt eu. In quam dolor, bibendum ac lorem et, blandit lacinia lorem. Praesent bibendum magna vel finibus facilisis. Cras eleifend est sed nisi malesuada, vitae varius sem venenatis. Nam maximus ligula bibendum quam porttitor tempor. Cras in lacus in lacus consectetur placerat lobortis ac velit. Pellentesque venenatis leo sit amet neque commodo pulvinar. Integer quis nulla ac eros luctus scelerisque. Pellentesque interdum sapien eros. Integer id velit sed eros fringilla porttitor.

    - Focusable element -
    - Back to top -
    -
    - -
    - - - - diff --git a/elements/rh-back-to-top/demo/rh-back-to-top.html b/elements/rh-back-to-top/demo/rh-back-to-top.html index b9ac78563b..aef4d645cf 100644 --- a/elements/rh-back-to-top/demo/rh-back-to-top.html +++ b/elements/rh-back-to-top/demo/rh-back-to-top.html @@ -1,7 +1,18 @@
    +

    Scroll down to reveal the back to top element

    Back to top
    + + diff --git a/elements/rh-back-to-top/demo/scroll-distance.html b/elements/rh-back-to-top/demo/scroll-distance.html index 4336f65b05..6ea5fe1ac5 100644 --- a/elements/rh-back-to-top/demo/scroll-distance.html +++ b/elements/rh-back-to-top/demo/scroll-distance.html @@ -12,22 +12,22 @@ main { display: block; scroll-behavior: smooth; - max-height: calc(100dvh - var(--pf-demo-header-height)) !important; + max-block-size: calc(100dvh - var(--pf-demo-header-height)) !important; } #nav { - height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important; + block-size: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important; } #overflow { /* scroll distance set to 50px */ - min-height: calc(100dvh + 51px); + min-block-size: calc(100dvh + 51px); position: relative; } #bottom { position: absolute; - bottom: 0; + inset-block-end: 0; } @media (prefers-reduced-motion: reduce) { @@ -41,7 +41,7 @@ - - - - - diff --git a/elements/rh-back-to-top/rh-back-to-top.ts b/elements/rh-back-to-top/rh-back-to-top.ts index 09b2a99d1a..3fbe0ce78e 100644 --- a/elements/rh-back-to-top/rh-back-to-top.ts +++ b/elements/rh-back-to-top/rh-back-to-top.ts @@ -3,8 +3,6 @@ import { customElement } from 'lit/decorators/custom-element.js'; import { property } from 'lit/decorators/property.js'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { Logger } from '@patternfly/pfe-core/controllers/logger.js'; - import '@rhds/elements/rh-icon/rh-icon.js'; import styles from './rh-back-to-top.css'; @@ -40,8 +38,6 @@ export class RhBackToTop extends LitElement { #scrollElement?: Element | Window; - #logger = new Logger(this); - get #rootNode(): Document | ShadowRoot { const root = this.getRootNode(); if (root instanceof Document || root instanceof ShadowRoot) { @@ -55,14 +51,8 @@ export class RhBackToTop extends LitElement { super.connectedCallback(); this.#addScrollListener(); - // warn if missing href attribute - if (!this.href) { - this.#logger.warn(`missing href attribute text fragment`); - } - // warn if missing hash in href attribute if (this.href && this.href.charAt(0) !== '#') { this.href = `#${this.href}`; - this.#logger.warn(`missing hash in href attribute text fragment`); } } @@ -96,8 +86,8 @@ export class RhBackToTop extends LitElement { #addScrollListener() { this.#removeScrollListener(); + // scrollable-selector attribute cannot be empty: if (this.scrollableSelector?.trim() === '') { - this.#logger.error(`scrollable-selector attribute cannot be empty`); return; } @@ -105,7 +95,6 @@ export class RhBackToTop extends LitElement { if (this.#scrollSpy && this.scrollableSelector) { const scrollableElement = this.#rootNode.querySelector(this.scrollableSelector); if (!scrollableElement) { - this.#logger.error(`unable to find element with selector ${this.scrollableSelector}`); return; } this.#scrollElement = scrollableElement;