issue-1831: Changes for updating link styles and disabled styles (#1858)

visual-framework · Feb 3, 2023 · d8d3f41 · d8d3f41
1 parent 8903479
commit d8d3f41
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 8 deletions.
diff --git a/components/vf-pagination/CHANGELOG.md b/components/vf-pagination/CHANGELOG.md
@@ -1,3 +1,9 @@
+### 1.1.1
+
+* Changed : Modified the vf-pagination__link class to support vf-link styles
+* Changed : Modified the style for disabled links like 'Previous' (when on 1st page) so that it does not fail contrast check. Added example to showcase this behaviour.
+* Changed : Updated the current page number style to show bold text
+
 ### 1.1.0
 
 * reduces the amount of variants to 'start again'.

diff --git a/components/vf-pagination/vf-pagination.config.yml b/components/vf-pagination/vf-pagination.config.yml
@@ -40,6 +40,33 @@ variants:
         - page_number: Next
           page_href: 'JavaScript:Void(0);'
           item_modifier: vf-pagination__item--next-page
+
+  - name: First page selected
+    context:
+      isExample: true
+      pagination__list:
+        - page_number: Previous
+          item_modifier: vf-pagination__item--previous-page disabled
+        - page_number: 1
+          item_modifier: vf-pagination__item--is-active
+        - page_number: 2
+          item_modifier: vf-pagination__link--visited
+          page_href: 'JavaScript:Void(0);'
+        - page_number: ...
+        - page_number: 17
+          page_href: 'JavaScript:Void(0);'
+        - page_number: 18
+          page_href: 'JavaScript:Void(0);'
+        - page_number: 19
+          page_href: 'JavaScript:Void(0);'
+        - page_number: ...
+        - page_number: 91
+          page_href: 'JavaScript:Void(0);'
+        - page_number: 92
+          page_href: 'JavaScript:Void(0);'
+        - page_number: Next
+          page_href: 'JavaScript:Void(0);'
+          item_modifier: vf-pagination__item--next-page
   - name: compact
     hidden: true
     status: deprecated

diff --git a/components/vf-pagination/vf-pagination.scss b/components/vf-pagination/vf-pagination.scss
@@ -25,32 +25,46 @@
 }
 
 .vf-pagination__item--is-active {
-  background-color: color(grey);
-
   .vf-pagination__label {
-    color: ui-color(white);
+    font-weight: bold;
   }
 }
 
 .vf-pagination__label,
-.vf-pagination__link {
+.vf-pagination__link{
   @include set-type(text-body--3, $custom-margin-bottom: 0);
 
-  color: color(grey);
+  color: var(--vf-color__text--primary);
   display: block;
   padding: 4px 8px;
   text-decoration: none;
 }
 
-.vf-pagination__link:hover {
-  background-color: color(grey);
-  color: ui-color(white);
+.vf-pagination__link {
+  @include inline-link;
+  color: var(--vf-color__link);
 }
 
+.vf-pagination__link--visited, .vf-pagination__link:visited { color: var(--vf-color__link--visited); }
+
+.vf-pagination__link--hover,  .vf-pagination__link:hover { color: var(--vf-color__link--hover); }
+
 .vf-pagination__item--jump-back {
   border-right: 1px solid color(grey--lightest);
 }
 
 .vf-pagination__item--jump-forward {
   border-left: 1px solid color(grey--lightest);
 }
+
+.disabled {
+  color: var(--vf-color__text--primary);
+  cursor: not-allowed;
+  pointer-events: all;
+}
+
+[disabled] {
+  color: var(--vf-color__text--primary);
+  cursor: not-allowed;
+  pointer-events: all;
+}