Add new directional chevron mixins for use in Article Pagination (#5253)

* Add new directional chevron mixins * Use new mixins in icon pattern
canonical · Jul 26, 2024 · 50bc600 · 50bc600
1 parent 788cc6b
commit 50bc600
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/scss/_base_icon-definitions.scss b/scss/_base_icon-definitions.scss
@@ -17,10 +17,31 @@
   background-image: vf-icon-chevron-url($color);
 }
 
+// Default chevron is the same as down chevron - points down, as in its usage
+// in accordions/dropdowns
 @mixin vf-icon-chevron-themed {
   @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
 }
 
+@mixin vf-icon-chevron-up-themed {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
+  transform: rotate(180deg);
+}
+
+@mixin vf-icon-chevron-right-themed {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
+  transform: rotate(-90deg);
+}
+
+@mixin vf-icon-chevron-down-themed {
+  @include vf-icon-chevron-themed;
+}
+
+@mixin vf-icon-chevron-left-themed {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
+  transform: rotate(90deg);
+}
+
 @mixin vf-icon-chevron-muted {
   @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--text-muted), $dark-value: vf-icon-chevron-url($colors--dark-theme--text-muted));
 }

diff --git a/scss/_patterns_article-pagination.scss b/scss/_patterns_article-pagination.scss
@@ -3,7 +3,6 @@
 @mixin vf-p-article-pagination {
   %chevron-icon {
     @extend %icon;
-    @include vf-icon-chevron-themed;
 
     content: '';
     position: absolute;
@@ -73,9 +72,9 @@
 
     &::before {
       @extend %chevron-icon;
+      @include vf-icon-chevron-left-themed;
 
       left: $sp-small;
-      transform: rotate(90deg);
     }
   }
 
@@ -95,9 +94,9 @@
 
     &::after {
       @extend %chevron-icon;
+      @include vf-icon-chevron-right-themed;
 
       right: $sp-small;
-      transform: rotate(-90deg);
     }
   }
 }
diff --git a/scss/_patterns_icons.scss b/scss/_patterns_icons.scss
@@ -130,21 +130,23 @@
 
 @mixin vf-p-icon-chevron {
   .p-icon--chevron-up {
-    transform: rotate(180deg);
-  }
-  .p-icon--chevron-left {
-    transform: rotate(90deg);
+    @include vf-icon-chevron-up-themed;
   }
   .p-icon--chevron-right {
-    transform: rotate(-90deg);
+    @include vf-icon-chevron-right-themed;
+  }
+  .p-icon--chevron-down {
+    @include vf-icon-chevron-down-themed;
+  }
+  .p-icon--chevron-left {
+    @include vf-icon-chevron-left-themed;
   }
 
-  .p-icon--chevron-left,
+  .p-icon--chevron-up,
   .p-icon--chevron-right,
   .p-icon--chevron-down,
-  .p-icon--chevron-up {
+  .p-icon--chevron-left {
     @extend %icon;
-    @include vf-icon-chevron-themed;
   }
 }