Merge pull request #454 from sitevision/ENV-307-buttons-in-pagination

ENV-307 support buttons in pagination
sitevision · Sep 9, 2024 · 5401620 · 5401620
2 parents e0ecd4e + 6bb1d22
commit 5401620
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/packages/envision-docs/src/pages/components/pagination.md b/packages/envision-docs/src/pages/components/pagination.md
@@ -68,8 +68,8 @@ Use `aria-current="page"` or `aria-current="true"` on a link to indicate that th
 
 ### Disabled
 
-An element without href attribute is considered disabled. If you must use a link, remove the href attribute
-and set the `aria-disabled="true"` and `aria-role="link"` attributes.
+Any element except button without a href attribute is considered disabled. Buttons are disabled using the disabled attribute.
+If you must use a link, remove the href attribute and set the `aria-disabled="true"` and `aria-role="link"` attributes.
 
 ```html
 <nav aria-label="Pagination example">

diff --git a/packages/envision/src/scss/pagination.scss b/packages/envision/src/scss/pagination.scss
@@ -53,21 +53,14 @@
  border-color: css-var('element-primary-background-color');
  }
 
- // env-is-disabled is deprecated
- &[href=''],
- &:not([href]),
- &.env-is-disabled {
- @include is-disabled();
+ &:hover {
+  background-color: css-var('element-primary-background-color');
+  border-color: css-var('element-primary-background-color');
+  color: css-var('element-primary-font-color');
+ z-index: 2;
  }
  }
 
- &__link:hover {
- background-color: css-var('element-primary-background-color');
- border-color: css-var('element-primary-background-color');
- color: css-var('element-primary-font-color');
- z-index: 2;
- }
-
  &--center {
  justify-content: center;
  }
@@ -96,3 +89,11 @@
  }
  }
 }
+
+a.env-pagination__link[href=''],
+.env-pagination__link:not([href]):not(:is(button)),
+button.env-pagination__link[disabled],
+.env-pagination__link.env-is-disabled {
+ // env-is-disabled is deprecated
+ @include is-disabled();
+}