add left and right chevrons (#5093)

canonical · Jun 4, 2024 · 44a26d9 · 44a26d9
1 parent 3fa17f5
commit 44a26d9
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 1 deletion.
diff --git a/releases.yml b/releases.yml
@@ -4,6 +4,10 @@
       url: /docs/base/typography
       status: New
       notes: "We've added the new <code>text-wrap: pretty</code> value to avoid text widows on all elements."
+    - component: Icons
+      url: /docs/patterns/icons
+      status: Updated
+      notes: "We've added left and right (<code>.p-icon--chevron-left</code> and <code>.p-icon--chevron-right</code>) variants of the chevron icon."
 - version: 4.11.0
   features:
     - component: Suru / Divider

diff --git a/scss/_patterns_icons.scss b/scss/_patterns_icons.scss
@@ -132,7 +132,15 @@
   .p-icon--chevron-up {
     transform: rotate(180deg);
   }
+  .p-icon--chevron-left {
+    transform: rotate(90deg);
+  }
+  .p-icon--chevron-right {
+    transform: rotate(-90deg);
+  }
 
+  .p-icon--chevron-left,
+  .p-icon--chevron-right,
   .p-icon--chevron-down,
   .p-icon--chevron-up {
     @extend %icon;

diff --git a/templates/docs/examples/patterns/icons/icons-dark-deprecated.html b/templates/docs/examples/patterns/icons/icons-dark-deprecated.html
@@ -12,6 +12,8 @@
   <i class="p-icon--spinner u-animation--spin is-light"></i>
   <i class="p-icon--chevron-down is-light"></i>
   <i class="p-icon--chevron-up is-light"></i>
+  <i class="p-icon--chevron-left is-light"></i>
+  <i class="p-icon--chevron-right is-light"></i>
   <i class="p-icon--close is-light"></i>
   <i class="p-icon--help is-light"></i>
   <i class="p-icon--delete is-light"></i>
@@ -40,6 +42,8 @@
   <i class="p-icon--spinner u-animation--spin"></i>
   <i class="p-icon--chevron-down"></i>
   <i class="p-icon--chevron-up"></i>
+  <i class="p-icon--chevron-left"></i>
+  <i class="p-icon--chevron-right"></i>
   <i class="p-icon--close"></i>
   <i class="p-icon--help"></i>
   <i class="p-icon--delete"></i>

diff --git a/templates/docs/examples/patterns/icons/icons-dark.html b/templates/docs/examples/patterns/icons/icons-dark.html
@@ -12,6 +12,8 @@
   <i class="p-icon--spinner u-animation--spin"></i>
   <i class="p-icon--chevron-down"></i>
   <i class="p-icon--chevron-up"></i>
+  <i class="p-icon--chevron-left"></i>
+  <i class="p-icon--chevron-right"></i>
   <i class="p-icon--close"></i>
   <i class="p-icon--help"></i>
   <i class="p-icon--delete"></i>

diff --git a/templates/docs/examples/patterns/icons/icons-light.html b/templates/docs/examples/patterns/icons/icons-light.html
@@ -11,6 +11,8 @@
 <i class="p-icon--spinner u-animation--spin"></i>
 <i class="p-icon--chevron-down"></i>
 <i class="p-icon--chevron-up"></i>
+<i class="p-icon--chevron-left"></i>
+<i class="p-icon--chevron-right"></i>
 <i class="p-icon--close"></i>
 <i class="p-icon--help"></i>
 <i class="p-icon--delete"></i>

diff --git a/templates/docs/patterns/icons/index.md b/templates/docs/patterns/icons/index.md
@@ -18,7 +18,7 @@ context:
 </section>
 {%- endmacro %}
 
-{% set standard_icons = ['plus', 'minus', 'expand', 'collapse', 'spinner', 'drag', 'close', 'help', 'delete', 'external-link', 'chevron-down', 'chevron-up', 'menu', 'code', 'copy', 'search', 'share', 'user', 'anchor', 'show', 'hide', 'error-grey', 'success-grey'] %}
+{% set standard_icons = ['plus', 'minus', 'expand', 'collapse', 'spinner', 'drag', 'close', 'help', 'delete', 'external-link', 'chevron-down', 'chevron-up', 'chevron-left', 'chevron-right', 'menu', 'code', 'copy', 'search', 'share', 'user', 'anchor', 'show', 'hide', 'error-grey', 'success-grey'] %}
 
 {% set status_icons = ['error',  'warning', 'success', 'information'] %}