[FRNT-500] Fix border width in components (#99)

Co-authored-by: Sergey Sova <5620073+sergeysova@users.noreply.github.com>
woly-ui · May 4, 2021 · 171c8fd · 171c8fd
1 parent 2c93283
commit 171c8fd
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 24 deletions.
diff --git a/src/lib/box-styles.tsx b/src/lib/box-styles.tsx
@@ -187,7 +187,7 @@ const Frame = styled.div`
   max-width: 100%;
   padding: 1rem;
   overflow: auto;
-  border: 2px solid var(--base, rgb(246, 248, 250));
+  border: 2px solid rgb(246, 248, 250);
   border-radius: 4px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;

diff --git a/src/ui/atoms/button-floating/index.tsx b/src/ui/atoms/button-floating/index.tsx
@@ -56,7 +56,7 @@ export const ButtonFloating = styled(ButtonFloatingBase)`
   border-color: var(--woly-border, #000000);
   border-style: solid;
 
-  border-width: var(--woly-border-width, 0);
+  border-width: var(--woly-border-width);
   border-radius: 50%;
 
   cursor: pointer;

diff --git a/src/ui/atoms/button/index.tsx b/src/ui/atoms/button/index.tsx
@@ -100,7 +100,7 @@ export const Button = styled(ButtonBase)`
   }
 
   &:focus {
-    box-shadow: 0 0 0 1.5px var(--woly-focus);
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
   }
 
   &:disabled {

diff --git a/src/ui/atoms/chip/index.tsx b/src/ui/atoms/chip/index.tsx
@@ -121,7 +121,7 @@ export const Chip = styled(ChipBase)`
   }
 
   [role='button']:focus {
-    box-shadow: 0 0 0 1px var(--woly-border-focus, #9381f1);
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-border-focus, #9381f1);
   }
 
   [role='button']:hover {
@@ -158,7 +158,7 @@ export const Chip = styled(ChipBase)`
 
     border-color: var(--woly-border, transparent);
     border-style: solid;
-    border-width: var(--woly-border-width, 0);
+    border-width: var(--woly-border-width);
     border-radius: var(--woly-rounding, 3px);
 
     outline: none;
@@ -191,7 +191,7 @@ export const Chip = styled(ChipBase)`
     }
 
     &:focus {
-      box-shadow: 0 0 0 1px var(--woly-border-focus, #9381f1);
+      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-border-focus, #9381f1);
     }
   }
 ` as StyledComponent<'div', Record<string, unknown>, ChipProps & Variant>;
diff --git a/src/ui/atoms/list/index.tsx b/src/ui/atoms/list/index.tsx
@@ -56,22 +56,15 @@ const ListBase: React.FC<List & Variant> = ({
       tabIndex={tabIndex}
     >
       {list.map(({ left, right, text, id, onClick, disabled }) => (
-        <li
-          data-disabled={disabled}
-          data-type="list-item"
-          key={id}
-          onClick={onClick}
-          tabIndex={-1}
-        >
+        <li data-disabled={disabled} data-type="list-item" key={id} onClick={onClick} tabIndex={-1}>
           {left && <span data-icon="left">{left}</span>}
           <span data-text="text">{text}</span>
           {right && <span data-icon="right">{right}</span>}
         </li>
       ))}
     </ul>
   );
-}
-
+};
 
 export const List = styled(ListBase)`
   --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
@@ -122,7 +115,7 @@ export const List = styled(ListBase)`
       padding: 0 var(--local-horizontal);
     }
 
-    & > [data-text]:not(:only-child, :last-child ){
+    & > [data-text]:not(:only-child, :last-child) {
       padding-right: 0;
     }
 
@@ -176,9 +169,9 @@ export const List = styled(ListBase)`
       }
     }
   }
-  
+
   &:focus {
-      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
   }
 
   &[data-disabled='true'] {
@@ -190,7 +183,7 @@ export const List = styled(ListBase)`
     }
 
     [data-icon] {
-        --local-color: var(--woly-canvas-text-disabled);
-      }
+      --local-color: var(--woly-canvas-text-disabled);
+    }
   }
 ` as StyledComponent<'ul', Record<string, unknown>, List & Variant>;
diff --git a/src/ui/atoms/surface/index.tsx b/src/ui/atoms/surface/index.tsx
@@ -10,7 +10,7 @@ export const Surface = styled.div.attrs(map)`
   background-color: var(--woly-canvas, #ffffff);
   border-color: var(--woly-border, #000000);
   border-style: solid;
-  border-width: var(--woly-border-width, 0);
+  border-width: var(--woly-border-width);
   border-radius: var(--woly-rounding, 3px);
   box-shadow: var(--woly-box-shadow, 3px 3px 8px rgba(11, 31, 53, 0.04));
 `;
diff --git a/src/ui/atoms/tooltip/index.tsx b/src/ui/atoms/tooltip/index.tsx
@@ -88,7 +88,7 @@ export const Tooltip = styled(TooltipBase)`
     background-color: var(--woly-background, #ffffff);
     border-color: var(--woly-border, var(--woly-background, #ffffff));
     border-style: solid;
-    border-width: var(--woly-border-width, 0);
+    border-width: var(--woly-border-width);
     border-radius: var(--woly-rounding, 6px);
 
     transition: all 0.3s ease-in-out;

diff --git a/src/ui/molecules/select/index.tsx b/src/ui/molecules/select/index.tsx
@@ -158,7 +158,7 @@ export const Select = styled(SelectBase)`
     background: var(--woly-canvas, #ffffff);
     border-color: var(--woly-border, var(--woly-background, #f8f7f7));
     border-style: solid;
-    border-width: var(--woly-border-width, 1.5px);
+    border-width: var(--woly-border-width);
     border-radius: var(--woly-rounding, 3px);
     box-sizing: border-box;
     color: var(--woly-color, #000000);
@@ -183,7 +183,7 @@ export const Select = styled(SelectBase)`
     background-color: var(--woly-canvas, #ffffff);
     border-color: var(--woly-border, var(--woly-background, #f8f7f7));
     border-style: solid;
-    border-width: var(--woly-border-width, 1px);
+    border-width: var(--woly-border-width);
     border-radius: var(--woly-rounding, 3px);
     padding: 0;
     z-index: 1;