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/.changeset/large-buckets-cough.md b/.changeset/large-buckets-cough.md new file mode 100644 index 0000000000..c0ee99d27c --- /dev/null +++ b/.changeset/large-buckets-cough.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: remove user-facing errors and warnings from missing attributes/values from the console 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/.changeset/thick-flowers-beam.md b/.changeset/thick-flowers-beam.md new file mode 100644 index 0000000000..6bb6a36a2d --- /dev/null +++ b/.changeset/thick-flowers-beam.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: fix `align="center"` alignment and font size. diff --git a/elements/rh-back-to-top/demo/always-visible.html b/elements/rh-back-to-top/demo/always-visible.html index 9cfedb19b5..f8a05bb8c8 100644 --- a/elements/rh-back-to-top/demo/always-visible.html +++ b/elements/rh-back-to-top/demo/always-visible.html @@ -8,13 +8,13 @@ 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; } #bottom { position: absolute; - bottom: 0; + inset-block-end: 0; } #nav { - height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)); !important; + block-size: calc(100dvh - var(--pf-demo-header-height, 4.375rem)); !important; } diff --git a/elements/rh-back-to-top/demo/color-context.html b/elements/rh-back-to-top/demo/color-context.html index a1c484a7c1..17081cf0cd 100644 --- a/elements/rh-back-to-top/demo/color-context.html +++ b/elements/rh-back-to-top/demo/color-context.html @@ -33,21 +33,21 @@ 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 { - min-height: calc(100dvh + 401px); + min-block-size: calc(100dvh + 401px); position: relative; } #bottom { position: absolute; - bottom: 0; + inset-block-end: 0; } @media (prefers-reduced-motion: reduce) { @@ -61,7 +61,7 @@ - - - - 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; 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 ff8ab98f09..b2b99f58eb 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', Helvetica, Arial, sans-serif); line-height: var(--rh-line-height-body-text, 1.5); font-weight: var(--rh-font-weight-heading-regular, 400); } -@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; } } 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-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 {