[DS-40] Fix refactored data-icon in box components (#186)

woly-ui · Aug 6, 2021 · 577f38d · 577f38d
1 parent abb6aa3
commit 577f38d
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 50 deletions.
diff --git a/src/woly/atoms/button-icon/index.tsx b/src/woly/atoms/button-icon/index.tsx
@@ -25,7 +25,9 @@ const ButtonIconBase: React.FC<Props & Priority> = ({
     type="button"
     {...p}
   >
-    <span data-icon="button-icon">{icon}</span>
+    <span data-element="icon" data-box-role="icon">
+      {icon}
+    </span>
   </button>
 );
 
@@ -47,7 +49,7 @@ export const ButtonIcon = styled(ButtonIconBase)`
   border-radius: var(--woly-rounding);
   outline: none;
 
-  [data-icon='button-icon'] {
+  [data-element='icon'] {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -71,10 +73,11 @@ export const ButtonIcon = styled(ButtonIconBase)`
     background: var(--local-shape-color);
     border-color: var(--local-shape-color);
 
-    [data-icon] > svg > path {
+    [data-element='icon'] > svg > path {
       fill: var(--local-icon-color);
     }
-    [data-icon] > svg > g {
+
+    [data-element='icon'] > svg > g {
       stroke: var(--local-icon-color);
     }
 
@@ -102,10 +105,11 @@ export const ButtonIcon = styled(ButtonIconBase)`
     background: var(--local-shape-color);
     border-color: var(--local-icon-color);
 
-    [data-icon] > svg > path {
+    [data-element='icon'] > svg > path {
       fill: var(--local-icon-color);
     }
-    [data-icon] > svg > g {
+
+    [data-element='icon'] > svg > g {
       stroke: var(--local-icon-color);
     }
 
@@ -138,10 +142,11 @@ export const ButtonIcon = styled(ButtonIconBase)`
     border-color: var(--local-border-color);
     box-shadow: var(--local-shadow);
 
-    [data-icon] > svg > path {
+    [data-element='icon'] > svg > path {
       fill: var(--local-icon-color);
     }
-    [data-icon] > svg > g {
+
+    [data-element='icon'] > svg > g {
       stroke: var(--local-icon-color);
     }
 
@@ -172,10 +177,11 @@ export const ButtonIcon = styled(ButtonIconBase)`
     background: var(--local-shape-color);
     border-color: var(--local-border-color);
 
-    [data-icon] > svg > path {
+    [data-element='icon'] > svg > path {
       fill: var(--local-icon-color);
     }
-    [data-icon] > svg > g {
+
+    [data-element='icon'] > svg > g {
       stroke: var(--local-icon-color);
     }
 

diff --git a/src/woly/atoms/button/index.tsx b/src/woly/atoms/button/index.tsx
@@ -39,13 +39,18 @@ const ButtonBase: React.FC<ButtonProps & Priority> = ({
     data-priority={priority}
     {...p}
   >
-    {icon && <span data-icon="button">{icon}</span>}
+    {icon && (
+      <span data-element="icon" data-box-role="icon">
+        {icon}
+      </span>
+    )}
     <span data-element="text">{text}</span>
   </button>
 );
 
 export const Button = styled(ButtonBase)`
   ${box}
+
   --local-text-color: var(--woly-shape-text-default);
   --local-shape-color: var(--woly-shape-default);
   --local-border-color: var(--woly-shape-default);
@@ -80,7 +85,7 @@ export const Button = styled(ButtonBase)`
     width: 100%;
   }
 
-  [data-icon='button'] {
+  [data-element='icon'] {
     --local-icon-size: var(--woly-line-height);
     display: flex;
     align-items: center;

diff --git a/src/woly/atoms/chip/index.tsx b/src/woly/atoms/chip/index.tsx
@@ -42,7 +42,7 @@ const ChipBase: React.FC<ChipProps & Priority> = ({
       data-priority={priority}
     >
       {leftIcon && (
-        <div data-icon="chip-visual-block" onClick={onClick} onKeyDown={onKeyDown}>
+        <div data-element="icon" data-box-role="icon" onClick={onClick} onKeyDown={onKeyDown}>
           {leftIcon}
         </div>
       )}
@@ -55,7 +55,11 @@ const ChipBase: React.FC<ChipProps & Priority> = ({
       >
         {text}
       </div>
-      {rightIcon && <div data-icon="chip-action-block">{rightIcon}</div>}
+      {rightIcon && (
+        <div data-element="action-icon" data-box-role="icon">
+          {rightIcon}
+        </div>
+      )}
     </div>
   );
 };
@@ -89,7 +93,7 @@ export const Chip = styled(ChipBase)`
     outline: none;
   }
 
-  [data-icon='chip-visual-block'] {
+  [data-element='icon'] {
     display: flex;
     flex-shrink: 0;
     align-items: center;
@@ -106,17 +110,18 @@ export const Chip = styled(ChipBase)`
     }
   }
 
-  [data-icon='chip-action-block'] {
+  [data-element='action-icon'] {
     --woly-component-level: 0;
   }
 
   &[data-outlined='true'] {
     --local-shape-color: transparent;
     --local-text-color: var(--woly-shape-default);
 
-    [data-icon='chip-visual-block'] > svg > path {
+    [data-element='icon'] > svg > path {
       fill: var(--woly-shape-default);
     }
+
     &:hover {
       --local-shape-color: transparent;
       --local-text-color: var(--woly-shape-hover);

diff --git a/src/woly/atoms/icon-box/index.tsx b/src/woly/atoms/icon-box/index.tsx
@@ -16,12 +16,15 @@ const IconBoxBase: React.FC<IconBoxProps & Priority> = ({
   weight = 'transparent',
 }) => (
   <div className={className} data-weight={weight} data-priority={priority}>
-    <span data-icon="icon-component">{children}</span>
+    <span data-element="icon-component" data-box-role="icon">
+      {children}
+    </span>
   </div>
 );
 
 export const IconBox = styled(IconBoxBase)`
   ${box}
+
   --local-icon-size: var(--woly-line-height);
 
   display: flex;
@@ -38,7 +41,7 @@ export const IconBox = styled(IconBoxBase)`
   border-radius: var(--woly-rounding);
   outline: none;
 
-  [data-element='icon'] {
+  [data-element='icon-component'] {
     display: flex;
     flex-shrink: 0;
     align-items: center;
@@ -60,7 +63,7 @@ export const IconBox = styled(IconBoxBase)`
     background-color: var(--local-shape-color);
     border-color: var(--local-border-color);
 
-    [data-icon='icon-component'] > svg > path {
+    [data-element='icon-component'] > svg > path {
       fill: var(--local-fill-color);
     }
   }
@@ -73,7 +76,7 @@ export const IconBox = styled(IconBoxBase)`
     background-color: var(--local-shape-color);
     border-color: var(--local-border-color);
 
-    [data-icon='icon-component'] > svg > path {
+    [data-element='icon-component'] > svg > path {
       fill: var(--local-fill-color);
     }
   }
@@ -86,7 +89,7 @@ export const IconBox = styled(IconBoxBase)`
     background-color: var(--local-shape-color);
     border-color: var(--local-border-color);
 
-    [data-icon='icon-component'] > svg > path {
+    [data-element='icon-component'] > svg > path {
       fill: var(--local-fill-color);
     }
   }
@@ -99,7 +102,7 @@ export const IconBox = styled(IconBoxBase)`
     background-color: var(--local-shape-color);
     border-color: var(--local-border-color);
 
-    [data-icon='icon-component'] > svg > path {
+    [data-element='icon-component'] > svg > path {
       fill: var(--local-fill-color);
     }
   }

diff --git a/src/woly/elements/box/index.tsx b/src/woly/elements/box/index.tsx
@@ -15,19 +15,19 @@ export const box = css`
     padding: var(--local-vertical) var(--local-horizontal);
   }
 
-  & > [data-icon]:only-child {
+  & > [data-box-role='icon']:only-child {
     padding: var(--local-vertical);
   }
 
-  & > [data-icon]:first-child:not(:only-child) {
+  & > [data-box-role='icon']:first-child:not(:only-child) {
     padding-right: 0;
     padding-left: var(--local-compensate);
   }
 
   & > :not(:first-child) {
     padding-left: var(--local-gap);
   }
-  & > [data-icon]:last-child:not(:only-child) {
+  & > [data-box-role='icon']:last-child:not(:only-child) {
     padding-right: var(--local-vertical);
     padding-left: 0;
   }

diff --git a/src/woly/elements/input-container/index.tsx b/src/woly/elements/input-container/index.tsx
@@ -26,10 +26,14 @@ const InputContainerBase: React.FC<InputContainerProps & Priority> = ({
     data-disabled={disabled}
     data-priority={priority}
   >
-    {leftIcon && <span data-icon="input">{leftIcon}</span>}
+    {leftIcon && (
+      <span data-element="icon" data-box-role="icon">
+        {leftIcon}
+      </span>
+    )}
     <div data-element="input">{children}</div>
     {rightIcon && (
-      <span {...levelDowngrade.use({ diff: 2 })} data-icon="input">
+      <span {...levelDowngrade.use({ diff: 2 })} data-element="icon" data-box-role="icon">
         {rightIcon}
       </span>
     )}
@@ -64,7 +68,7 @@ export const InputContainer = styled(InputContainerBase)`
     }
   }
 
-  [data-icon='input'] {
+  [data-element='icon'] {
     display: flex;
     align-items: center;
     justify-content: center;

diff --git a/src/woly/molecules/checkbox/index.tsx b/src/woly/molecules/checkbox/index.tsx
@@ -53,7 +53,7 @@ const CheckboxBase: React.FC<CheckboxProps & Priority> = ({
       tabIndex={tabIndex}
     >
       <span data-element="container" data-disabled={disabled} tabIndex={-1}>
-        <span data-icon="checkbox">
+        <span data-element="icon">
           <input type="checkbox" id={id} checked={checked} onChange={onChange} />
           <span data-unchecked>
             <IconFilledUnchecked />

diff --git a/src/woly/molecules/select/index.tsx b/src/woly/molecules/select/index.tsx
@@ -82,7 +82,9 @@ export const SelectBase: React.FC<SelectProps & Priority> = ({
     >
       <div data-selected={true}>
         <div data-element="text">{select}</div>
-        <span data-icon={isOpen}>{icon}</span>
+        <div data-box-role="icon">
+          <span data-element="icon">{icon}</span>
+        </div>
       </div>
       {/* В дальнейшем использовать Popover и List для создания выпадающего списка элементов */}
       <ul
@@ -141,10 +143,6 @@ export const Select = styled(SelectBase)`
     }
   }
 
-  [data-icon='true'] {
-    transform: rotate(180deg);
-  }
-
   [data-element='icon'] {
     display: flex;
     flex-shrink: 1;
@@ -162,6 +160,10 @@ export const Select = styled(SelectBase)`
     }
   }
 
+  &[data-open='true'] [data-element='icon'] {
+    transform: rotate(180deg);
+  }
+
   ul {
     position: absolute;
     z-index: 1;

diff --git a/src/woly/molecules/tabs/index.tsx b/src/woly/molecules/tabs/index.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Priority } from 'lib/types';
 import { box } from 'ui/elements/box';
+
 interface TabElementProps {
   iconLeft?: React.ReactNode;
   iconAction?: React.ReactNode;
@@ -60,9 +61,17 @@ const TabBase: React.FC<TabProps & TabElementProps & Priority> = ({
     onClick={onClick}
     tabIndex={0}
   >
-    {iconLeft && <span data-icon="link-icon">{iconLeft}</span>}
+    {iconLeft && (
+      <span data-element="link-icon" data-box-role="icon">
+        {iconLeft}
+      </span>
+    )}
     <span data-element="link-text">{text}</span>
-    {iconAction && <span data-icon="tab-action">{iconAction}</span>}
+    {iconAction && (
+      <span data-element="action-icon" data-box-role="icon">
+        {iconAction}
+      </span>
+    )}
   </div>
 );
 
@@ -103,7 +112,8 @@ export const Tab = styled(TabBase)`
     text-align: center;
   }
 
-  [data-icon] {
+  [data-element='link-icon'],
+  [data-element='action-icon'] {
     --woly-component-level: 0;
 
     display: flex;
@@ -167,7 +177,7 @@ export const Tab = styled(TabBase)`
     background: var(--local-background);
     border-right-color: var(--local-border-color);
 
-    [data-icon='link-icon'] > svg > path {
+    [data-element='link-icon'] > svg > path {
       fill: var(--local-text-color);
     }
 
@@ -215,7 +225,7 @@ export const Tab = styled(TabBase)`
       background-color: var(--local-background);
     }
 
-    [data-icon='link-icon'] > svg > path {
+    [data-element='link-icon'] > svg > path {
       fill: var(--local-text-color);
     }