From 34b872602913de8abd5c2ea6426154bb9b49427b Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 28 Jan 2025 10:13:03 -0500 Subject: [PATCH] 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 {