feat(select): переход к темизации цвета иконки

удалена переменная --select-arrow-background, добавлена --select-arrow-color BREAKING CHANGE: удалена переменная --select-arrow-background
core-ds · Oct 8, 2021 · 112cd95 · 112cd95
1 parent adf1dfd
commit 112cd95
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 19 deletions.
diff --git a/packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap b/packages/intl-phone-input/src/__snapshots__/component.test.tsx.snap
@@ -46,9 +46,19 @@ exports[`IntlPhoneInput should match snapshot 1`] = `
                       class="flagIcon m ru"
                     />
                   </span>
-                  <span
+                  <svg
                     class="arrow"
-                  />
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                  >
+                    <path
+                      d="M12 14L6.5 8.5 5 10l7 7 7-7-1.5-1.5L12 14z"
+                    />
+                  </svg>
                 </div>
               </div>
             </div>

diff --git a/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap b/packages/select-with-tags/src/__snapshots__/component.test.tsx.snap
@@ -43,9 +43,19 @@ exports[`SelectWithTags Display tests should match snapshot 1`] = `
           <div
             class="addons rightAddons addons addons-size-xl"
           >
-            <span
+            <svg
               class="arrow"
-            />
+              fill="currentColor"
+              focusable="false"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M12 14L6.5 8.5 5 10l7 7 7-7-1.5-1.5L12 14z"
+              />
+            </svg>
           </div>
         </div>
       </div>
@@ -182,9 +192,19 @@ exports[`SelectWithTags Display tests should match snapshot with selected tags 1
           <div
             class="addons rightAddons addons addons-size-xl"
           >
-            <span
+            <svg
               class="arrow"
-            />
+              fill="currentColor"
+              focusable="false"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M12 14L6.5 8.5 5 10l7 7 7-7-1.5-1.5L12 14z"
+              />
+            </svg>
           </div>
         </div>
       </div>

diff --git a/packages/select/src/__snapshots__/Component.test.tsx.snap b/packages/select/src/__snapshots__/Component.test.tsx.snap
@@ -39,9 +39,19 @@ Object {
               <div
                 class="addons rightAddons"
               >
-                <span
+                <svg
                   class="arrow arrow"
-                />
+                  fill="currentColor"
+                  focusable="false"
+                  height="24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width="24"
+                >
+                  <path
+                    d="M12 14L6.5 8.5 5 10l7 7 7-7-1.5-1.5L12 14z"
+                  />
+                </svg>
               </div>
             </div>
           </div>
@@ -87,9 +97,19 @@ Object {
             <div
               class="addons rightAddons"
             >
-              <span
+              <svg
                 class="arrow arrow"
-              />
+                fill="currentColor"
+                focusable="false"
+                height="24"
+                role="img"
+                viewBox="0 0 24 24"
+                width="24"
+              >
+                <path
+                  d="M12 14L6.5 8.5 5 10l7 7 7-7-1.5-1.5L12 14z"
+                />
+              </svg>
             </div>
           </div>
         </div>
@@ -186,9 +206,19 @@ exports[`Select Snapshots tests should match snapshot with fatal error 1`] = `
           <div
             class="addons rightAddons"
           >
-            <span
+            <svg
               class="arrow arrow"
-            />
+              fill="currentColor"
+              focusable="false"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M12 14L6.5 8.5 5 10l7 7 7-7-1.5-1.5L12 14z"
+              />
+            </svg>
           </div>
         </div>
         <span
@@ -239,9 +269,19 @@ exports[`Select Snapshots tests should match snapshot with visibleOptions 1`] =
           <div
             class="addons rightAddons"
           >
-            <span
+            <svg
               class="arrow arrow open"
-            />
+              fill="currentColor"
+              focusable="false"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M12 14L6.5 8.5 5 10l7 7 7-7-1.5-1.5L12 14z"
+              />
+            </svg>
           </div>
         </div>
       </div>

diff --git a/packages/select/src/components/arrow/Component.tsx b/packages/select/src/components/arrow/Component.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import cn from 'classnames';
+import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
 import { ArrowProps } from '../../typings';
 
 import styles from './index.module.css';
 
 export const Arrow = ({ open, className }: ArrowProps) => (
-    <span className={cn(styles.arrow, className, { [styles.open]: open })} />
+    <ChevronDownMIcon className={cn(styles.arrow, className, { [styles.open]: open })} />
 );
diff --git a/packages/select/src/components/arrow/index.module.css b/packages/select/src/components/arrow/index.module.css
@@ -5,10 +5,8 @@
     display: block;
     width: 24px;
     height: 24px;
+    color: var(--select-arrow-color);
 
-    background: var(--select-arrow-background);
-    background-size: cover;
-    background-position: center;
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
 }
 

diff --git a/packages/select/src/vars.css b/packages/select/src/vars.css
@@ -1,6 +1,6 @@
 :root {
     --select-error-color: var(--color-light-text-negative);
-    --select-arrow-background: url('https://alfabank.st/icons/glyph_chevron-down_m.svg');
+    --select-arrow-color: var(--color-light-graphic-primary);
     --select-arrow-hover-opacity: 0.7;
 
     /* options list */