fix tooltip styles, fix chip, button and button-icon styles (#175)

woly-ui · Jul 14, 2021 · d708604 · d708604
1 parent 3ef9e1c
commit d708604
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 46 deletions.
diff --git a/src/woly/atoms/button-icon/index.tsx b/src/woly/atoms/button-icon/index.tsx
@@ -60,6 +60,10 @@ export const ButtonIcon = styled(ButtonIconBase)`
     }
   }
 
+  &:focus {
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus-color);
+  }
+
   &[data-weight='fill'] {
     --local-shape-color: var(--woly-shape-default);
     --local-icon-color: var(--woly-shape-text-default);
@@ -84,12 +88,6 @@ export const ButtonIcon = styled(ButtonIconBase)`
       --local-icon-color: var(--woly-shape-text-active);
     }
 
-    &:focus {
-      --local-shape-color: var(--woly-shape-active);
-      --local-icon-color: var(--woly-shape-text-active);
-      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus-color);
-    }
-
     &:disabled {
       pointer-events: none;
       --local-shape-color: var(--woly-canvas-disabled);
@@ -121,12 +119,6 @@ export const ButtonIcon = styled(ButtonIconBase)`
       --local-icon-color: var(--woly-canvas-active);
     }
 
-    &:focus {
-      --local-shape-color: transparent;
-      --local-icon-color: var(--woly-canvas-active);
-      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus-color);
-    }
-
     &:disabled {
       pointer-events: none;
       --local-shape-color: var(--woly-shape-text-disabled);
@@ -165,13 +157,6 @@ export const ButtonIcon = styled(ButtonIconBase)`
       --local-border-color: var(--woly-shape-text-active);
     }
 
-    &:focus {
-      --local-shape-color: transparent;
-      --local-icon-color: var(--woly-shape-text-active);
-      --local-border-color: var(--woly-shape-text-active);
-      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus-color);
-    }
-
     &:disabled {
       pointer-events: none;
       --local-shape-color: var(--woly-shape-text-disabled);
@@ -182,9 +167,10 @@ export const ButtonIcon = styled(ButtonIconBase)`
   &[data-weight='transparent'] {
     --local-shape-color: transparent;
     --local-icon-color: var(--woly-shape-default);
+    --local-border-color: transparent;
 
     background: var(--local-shape-color);
-    border-color: var(--local-shape-color);
+    border-color: var(--local-border-color);
 
     [data-icon] > svg > path {
       fill: var(--local-icon-color);
@@ -194,19 +180,13 @@ export const ButtonIcon = styled(ButtonIconBase)`
     }
 
     &:hover {
-      --local-shape-color: transparent;
+      --local-shape-color: var(--woly-canvas-disabled);
       --local-icon-color: var(--woly-shape-hover);
     }
 
     &:active {
-      --local-shape-color: transparent;
-      --local-icon-color: var(--woly-canvas-active);
-    }
-
-    &:focus {
-      --local-shape-color: transparent;
+      --local-shape-color: var(--woly-shape-text-disabled);
       --local-icon-color: var(--woly-canvas-active);
-      box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus-color);
     }
 
     &:disabled {

diff --git a/src/woly/atoms/button/index.tsx b/src/woly/atoms/button/index.tsx
@@ -106,7 +106,7 @@ export const Button = styled(ButtonBase)`
   }
 
   &: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-color);
   }
 
   &:disabled {

diff --git a/src/woly/atoms/chip/index.tsx b/src/woly/atoms/chip/index.tsx
@@ -94,25 +94,22 @@ export const Chip = styled(ChipBase)`
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-
-    svg > path {
-      fill: var(--local-text-color);
-    }
-  }
-
-  [data-icon='chip-action-block'] {
-    --woly-component-level: 0;
-  }
-
-  [data-icon] {
     width: var(--local-icon-size);
     height: var(--local-icon-size);
+
     svg {
       width: 100%;
       height: 100%;
+      path {
+        fill: var(--local-text-color);
+      }
     }
   }
 
+  [data-icon='chip-action-block'] {
+    --woly-component-level: 0;
+  }
+
   &[data-outlined='true'] {
     --local-shape-color: transparent;
     --local-text-color: var(--woly-shape-default);

diff --git a/src/woly/molecules/tooltip/index.tsx b/src/woly/molecules/tooltip/index.tsx
@@ -47,9 +47,11 @@ const TooltipBase: React.FC<TooltipProps & Priority> = ({
       ref={ref}
       tabIndex={0}
     >
-      <div data-element>{children}</div>
-      <div role="tooltip">
-        <div data-triangle-height />
+      <div data-element="notifications" aria-labelledby="notifications-desc">
+        {children}
+      </div>
+      <div role="tooltip" id="notifications-desc">
+        <div data-triangle />
         <Surface data-priority={priority}>{content}</Surface>
       </div>
     </div>
@@ -63,7 +65,7 @@ export const Tooltip = styled(TooltipBase)`
       (1px * var(--woly-main-level)) + (1px * var(--woly-main-level) * var(--woly-component-level))
     )
   );
-  --local-triangel: min(
+  --local-triangle: min(
     var(--woly-const-m),
     calc(1px * var(--woly-component-level) * var(--woly-const-m))
   );
@@ -96,15 +98,15 @@ export const Tooltip = styled(TooltipBase)`
     opacity: 0;
 
     transition: 0.3s ease-in-out;
-    [data-triangle-height] {
+    [data-triangle] {
       position: absolute;
 
       width: 0;
       height: 0;
 
       border-color: var(--woly-background) transparent transparent transparent;
       border-style: solid;
-      border-width: var(--local-triangel);
+      border-width: var(--local-triangle);
     }
   }
   &:hover [role='tooltip'],