feat: обновлённая темизация иконок в инпутах

core-ds · Oct 15, 2021 · ab90d60 · ab90d60
2 parents eb24e2c + 529e840
commit ab90d60
Show file tree

Hide file tree

Showing 15 changed files with 154 additions and 35 deletions.
diff --git a/packages/calendar-input/src/Component.tsx b/packages/calendar-input/src/Component.tsx
@@ -30,6 +30,8 @@ import {
     dateInLimits,
 } from '@alfalab/core-components-calendar';
 
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+
 import styles from './index.module.css';
 
 export type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
@@ -339,7 +341,7 @@ export const CalendarInput = forwardRef<HTMLInputElement, CalendarInputProps>(
                     disabled={disabled}
                     readOnly={readOnly}
                     mobileMode={mobileMode === 'native' ? 'native' : 'input'}
-                    rightAddons={<span className={styles.calendarIcon} />}
+                    rightAddons={<CalendarMIcon className={styles.calendarIcon} />}
                     onKeyDown={handleInputKeyDown}
                     onChange={handleInputChange}
                     block={true}

diff --git a/packages/calendar-input/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-input/src/__snapshots__/Component.test.tsx.snap
@@ -28,9 +28,24 @@ exports[`CalendarInput Display tests should match snapshot 1`] = `
         <div
           class="addons rightAddons"
         >
-          <span
+          <svg
             class="calendarIcon"
-          />
+            fill="currentColor"
+            focusable="false"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <path
+              d="M9 12v2H7v-2h2zm0 6v-2H7v2h2zm2-6h2v2h-2v-2zm2 4h-2v2h2v-2zm4-4v2h-2v-2h2z"
+            />
+            <path
+              clip-rule="evenodd"
+              d="M6 2h2v2h8V2h2v2h3v16a3 3 0 01-3 3H6a3 3 0 01-3-3V4h3V2zm13 7H5v11a1 1 0 001 1h12a1 1 0 001-1V9z"
+              fill-rule="evenodd"
+            />
+          </svg>
         </div>
       </div>
     </div>

diff --git a/packages/calendar-input/src/index.module.css b/packages/calendar-input/src/index.module.css
@@ -2,7 +2,7 @@
 @import '../../calendar/src/vars.css';
 
 :root {
-    --calendar-input-calendar-icon: url('https://alfabank.st/icons/glyph_calendar_m_primary.svg');
+    --calendar-input-icon-color: var(--color-light-graphic-primary);
     --calendar-input-popover-border-color: var(--color-light-border-primary);
     --calendar-input-popover-border-radius: var(--border-radius-m);
 }
@@ -29,9 +29,7 @@
     width: 24px;
     height: 24px;
     display: block;
-    background: var(--calendar-input-calendar-icon);
-    background-size: cover;
-    background-position: center;
+    color: var(--calendar-input-icon-color);
 
     &:not(:only-child) {
         margin-right: var(--gap-2xs);

diff --git a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
@@ -31,9 +31,24 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
           <div
             class="addons rightAddons"
           >
-            <span
+            <svg
               class="calendarIcon"
-            />
+              fill="currentColor"
+              focusable="false"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M9 12v2H7v-2h2zm0 6v-2H7v2h2zm2-6h2v2h-2v-2zm2 4h-2v2h2v-2zm4-4v2h-2v-2h2z"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M6 2h2v2h8V2h2v2h3v16a3 3 0 01-3 3H6a3 3 0 01-3-3V4h3V2zm13 7H5v11a1 1 0 001 1h12a1 1 0 001-1V9z"
+                fill-rule="evenodd"
+              />
+            </svg>
           </div>
         </div>
       </div>
@@ -591,9 +606,24 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
             <div
               class="addons rightAddons"
             >
-              <span
+              <svg
                 class="calendarIcon"
-              />
+                fill="currentColor"
+                focusable="false"
+                height="24"
+                role="img"
+                viewBox="0 0 24 24"
+                width="24"
+              >
+                <path
+                  d="M9 12v2H7v-2h2zm0 6v-2H7v2h2zm2-6h2v2h-2v-2zm2 4h-2v2h2v-2zm4-4v2h-2v-2h2z"
+                />
+                <path
+                  clip-rule="evenodd"
+                  d="M6 2h2v2h8V2h2v2h3v16a3 3 0 01-3 3H6a3 3 0 01-3-3V4h3V2zm13 7H5v11a1 1 0 001 1h12a1 1 0 001-1V9z"
+                  fill-rule="evenodd"
+                />
+              </svg>
             </div>
           </div>
         </div>

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
@@ -240,9 +270,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 */

diff --git a/packages/themes/src/mixins/calendar-input/corp.css b/packages/themes/src/mixins/calendar-input/corp.css
@@ -0,0 +1,3 @@
+@define-mixin calendar-input-corp {
+    --calendar-input-icon-color: var(--color-light-graphic-secondary);
+}
diff --git a/packages/themes/src/mixins/calendar-input/mobile.css b/packages/themes/src/mixins/calendar-input/mobile.css
diff --git a/packages/themes/src/mixins/corp.css b/packages/themes/src/mixins/corp.css
@@ -1,9 +1,13 @@
 @import './button/corp.css';
 @import './input/corp.css';
 @import './tabs/corp.css';
+@import './calendar-input/corp.css';
+@import './select/corp.css';
 
 @define-mixin theme-corp {
     @mixin button-corp;
     @mixin input-corp;
     @mixin tabs-corp;
+    @mixin calendar-input-corp;
+    @mixin select-corp;
 }
diff --git a/packages/themes/src/mixins/mobile.css b/packages/themes/src/mixins/mobile.css
@@ -6,7 +6,6 @@
 @import './radio/mobile.css';
 @import './confirmation/mobile.css';
 @import './input/mobile.css';
-@import './calendar-input/mobile.css';
 @import './slider/mobile.css';
 @import './slider-input/mobile.css';
 
@@ -17,7 +16,6 @@
     @mixin radio-mobile;
     @mixin confirmation-mobile;
     @mixin input-mobile;
-    @mixin calendar-input-mobile;
     @mixin form-control-mobile;
     @mixin input-mobile;
     @mixin slider-mobile;

diff --git a/packages/themes/src/mixins/select/corp.css b/packages/themes/src/mixins/select/corp.css
@@ -0,0 +1,3 @@
+@define-mixin select-corp {
+    --select-arrow-color: var(--color-light-graphic-secondary);
+}