Correct Chip, ButtonItem color usage and heights (#1298)

* Correct Chip, ButtonItem color usage and heights
* Added ChipButton aria-seleted="false" support

Co-authored-by: mdodgelooker <[email protected]>

Author: Luke Bowerman

CHANGELOG.md

@@ -9,9 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added `xxxxxlarge` to sizes to support updated type ramp.
+- `ChipButton` introduced for limited use cases
 - `ActionListControlBar` component
 - `useActionListSelectManager` hook
-- Added `xxxxxlarge` to sizes to support updated type ramp.
 
 ### Fixed
 
@@ -28,6 +29,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `DialogHeader` presentation fix for IE11
 - `Space` presentation fix for IE11 (also affects consumers)
 - `Tree` correct React warning about nested buttons by changing `TreeItem` back to `div` with `role="button`
+- `ButtonSet` & `ButtonGroup` heights corrected to stay at `36px`
+- `ActionList` updated documentation to include info on control bar behavior
 
 ### Changed
 
@@ -38,7 +41,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Remove arrow from `Tooltip`, `Popover` and `Menu` by default
 - Updates to how we apply colors to `ButtonOutline` and `ButtonTransparent` to be more inline with design spec
 - `neutral` intent color is now defaults to `charcoal500`
-- `ActionList` updated documentation to include info on control bar behavior
+- Correlates use of color for `Chip`, `ButtonToggle` & `ButtonSet`
+- Consolidated `inputHeight` location and usage suite-wide
+- `InputChipsBase` updated to use styled() wrapped for Chip margin overrides
+
+### Removed
+
+- `Chip` removed most prop support
 
 ## [0.9.9] - 2020-08-02
 

packages/components/src/Button/ButtonGroup.tsx

@@ -67,10 +67,6 @@ export const ButtonGroup = styled(ButtonGroupLayout)`
     &[aria-pressed='false']:not(:hover) {
       background: ${({ theme }) => theme.colors.background};
     }
-
-    &[aria-pressed='true'] {
-      border-color: ${({ theme }) => theme.colors.keyAccent};
-    }
   }
   &.wrapping {
     margin: -${({ theme }) => theme.space.xxxsmall};

packages/components/src/Button/ButtonItem.tsx

@@ -30,15 +30,13 @@ import {
   CompatibleHTMLProps,
   space,
   SpaceProps,
-  typography,
-  TypographyProps,
   omitStyledProps,
 } from '@looker/design-tokens'
+import { inputHeight } from '../Form/Inputs/height'
 import { ButtonSetContext } from './ButtonSetContext'
 
 export interface ButtonItemProps
   extends SpaceProps,
-    TypographyProps,
     Omit<CompatibleHTMLProps<HTMLButtonElement>, 'type' | 'aria-pressed'> {
   value?: string
 }
@@ -86,8 +84,6 @@ const ButtonLayout = forwardRef(
 
 ButtonLayout.displayName = 'ButtonLayout'
 
-export const buttonItemHeight = 36
-
 export const ButtonItem = styled(ButtonLayout)`
   align-items: center;
   background: transparent;
@@ -96,15 +92,19 @@ export const ButtonItem = styled(ButtonLayout)`
   cursor: pointer;
   display: inline-flex;
   font-size: ${({ theme }) => theme.fontSizes.small};
-  height: ${buttonItemHeight}px;
+  height: ${inputHeight};
   justify-content: center;
   margin: 0;
   padding: 0 ${({ theme }) => theme.space.small};
   transition: background ${({ theme }) => theme.transitions.durationQuick} ease;
   user-select: none;
 
-  &[aria-pressed='false']:not([disabled]):hover {
-    background: ${({ theme }) => theme.colors.keySubtle};
+  ${space}
+
+  &:active,
+  &:focus,
+  &:hover {
+    background: ${({ theme }) => theme.colors.keyAccent};
   }
 
   &:focus {
@@ -114,20 +114,20 @@ export const ButtonItem = styled(ButtonLayout)`
 
   &[disabled] {
     color: ${(props) => props.theme.colors.text1};
+
+    &:hover {
+      background: inherit;
+    }
     cursor: default;
   }
 
   &[aria-pressed='true'] {
-    background: ${({ theme }) => theme.colors.keyAccent};
-    border-color: ${({ theme }) => theme.colors.keyAccent};
+    background: ${({ theme }) => theme.colors.keySubtle};
     color: ${({ theme }) => theme.colors.key};
-    text-shadow: -0.025ex 0 currentColor, 0.025ex 0 currentColor;
 
     &[disabled] {
+      background: ${({ theme }) => theme.colors.keySubtle};
       color: ${({ theme }) => theme.colors.keyFocus};
     }
   }
-
-  ${space}
-  ${typography}
 `

packages/components/src/Button/ButtonSet.tsx

@@ -35,10 +35,11 @@ import React, {
 } from 'react'
 import styled from 'styled-components'
 import { CompatibleHTMLProps } from '@looker/design-tokens'
+import { inputHeightNumber } from '../Form/Inputs/height'
 import { simpleLayoutCSS, SimpleLayoutProps } from '../Layout/utils/simple'
 import { useForkedRef } from '../utils'
 import { ButtonSetCallback, ButtonSetContext } from './ButtonSetContext'
-import { ButtonItem, buttonItemHeight } from './ButtonItem'
+import { ButtonItem } from './ButtonItem'
 
 export interface ButtonSetOption {
   value: string
@@ -108,7 +109,7 @@ export const ButtonSetLayout = forwardRef(
           const firstItem = node.childNodes[0] as HTMLElement
           const rowHeight = firstItem
             ? firstItem.getBoundingClientRect().height
-            : buttonItemHeight
+            : inputHeightNumber
           if (height >= rowHeight * 2) {
             setIsWrapping(true)
           } else {

packages/components/src/Button/ButtonToggle.tsx

@@ -26,7 +26,8 @@
 
 import React, { forwardRef, MouseEvent, Ref } from 'react'
 import styled from 'styled-components'
-import { ButtonItem, buttonItemHeight } from './ButtonItem'
+import { inputHeight } from '../Form/Inputs/height'
+import { ButtonItem } from './ButtonItem'
 import {
   ButtonGroupOrToggleBaseProps,
   ButtonSet,
@@ -76,7 +77,7 @@ export const ButtonToggle = styled(ButtonToggleLayout)`
 
   ${ButtonItem} {
     border-left: solid 1px ${({ theme }) => theme.colors.ui2};
-    height: ${buttonItemHeight}px;
+    height: calc(${inputHeight} - 2px);
 
     &:last-child {
       border-bottom-right-radius: ${({ theme }) => theme.radii.medium};
@@ -106,17 +107,17 @@ export const ButtonToggle = styled(ButtonToggleLayout)`
       repeating-linear-gradient(
         180deg,
         transparent,
-        transparent 35px,
-        ${({ theme }) => theme.colors.ui2} 35px,
-        ${({ theme }) => theme.colors.ui2} ${buttonItemHeight}px
+        transparent calc(${inputHeight} - 3px),
+        ${({ theme }) => theme.colors.ui2} calc(${inputHeight} - 3px),
+        ${({ theme }) => theme.colors.ui2} calc(${inputHeight} - 2px)
       );
 
     /* prevents items in the last row from growing */
     &::after {
       border-left: 1px solid ${({ theme }) => theme.colors.ui2};
       content: '';
       flex-grow: 100;
-      height: ${buttonItemHeight}px;
+      height: calc(${inputHeight} - 2px);
     }
 
     ${ButtonItem} {

packages/components/src/Button/__snapshots__/ButtonGroup.test.tsx.snap

@@ -30,8 +30,10 @@ exports[`ButtonGroup controlled 1`] = `
   user-select: none;
 }
 
-.c3[aria-pressed='false']:not([disabled]):hover {
-  background: #F3F2FF;
+.c3:active,
+.c3:focus,
+.c3:hover {
+  background: #E8E5FF;
 }
 
 .c3:focus {
@@ -44,14 +46,17 @@ exports[`ButtonGroup controlled 1`] = `
   cursor: default;
 }
 
+.c3[disabled]:hover {
+  background: inherit;
+}
+
 .c3[aria-pressed='true'] {
-  background: #E8E5FF;
-  border-color: #E8E5FF;
+  background: #F3F2FF;
   color: #6C43E0;
-  text-shadow: -0.025ex 0 currentColor,0.025ex 0 currentColor;
 }
 
 .c3[aria-pressed='true'][disabled] {
+  background: #F3F2FF;
   color: #9785F2;
 }
 
@@ -85,10 +90,6 @@ exports[`ButtonGroup controlled 1`] = `
   background: #FFFFFF;
 }
 
-.c1 .c2[aria-pressed='true'] {
-  border-color: #E8E5FF;
-}
-
 .c1.wrapping {
   margin: -0.125rem;
 }

packages/components/src/Button/__snapshots__/ButtonToggle.test.tsx.snap

@@ -30,8 +30,10 @@ exports[`ButtonToggle controlled 1`] = `
   user-select: none;
 }
 
-.c3[aria-pressed='false']:not([disabled]):hover {
-  background: #F3F2FF;
+.c3:active,
+.c3:focus,
+.c3:hover {
+  background: #E8E5FF;
 }
 
 .c3:focus {
@@ -44,14 +46,17 @@ exports[`ButtonToggle controlled 1`] = `
   cursor: default;
 }
 
+.c3[disabled]:hover {
+  background: inherit;
+}
+
 .c3[aria-pressed='true'] {
-  background: #E8E5FF;
-  border-color: #E8E5FF;
+  background: #F3F2FF;
   color: #6C43E0;
-  text-shadow: -0.025ex 0 currentColor,0.025ex 0 currentColor;
 }
 
 .c3[aria-pressed='true'][disabled] {
+  background: #F3F2FF;
   color: #9785F2;
 }
 
@@ -80,7 +85,7 @@ exports[`ButtonToggle controlled 1`] = `
 
 .c1 .c2 {
   border-left: solid 1px #DEE1E5;
-  height: 36px;
+  height: calc(36px - 2px);
 }
 
 .c1 .c2:last-child {
@@ -98,7 +103,7 @@ exports[`ButtonToggle controlled 1`] = `
 }
 
 .c1.wrapping {
-  background-image: linear-gradient( 0deg,#FFFFFF 0,#FFFFFF 1px,transparent 1px,transparent 100% ),repeating-linear-gradient( 180deg,transparent,transparent 35px,#DEE1E5 35px,#DEE1E5 36px );
+  background-image: linear-gradient( 0deg,#FFFFFF 0,#FFFFFF 1px,transparent 1px,transparent 100% ),repeating-linear-gradient( 180deg,transparent,transparent calc(36px - 3px),#DEE1E5 calc(36px - 3px),#DEE1E5 calc(36px - 2px) );
 }
 
 .c1.wrapping::after {
@@ -108,7 +113,7 @@ exports[`ButtonToggle controlled 1`] = `
   -webkit-flex-grow: 100;
   -ms-flex-positive: 100;
   flex-grow: 100;
-  height: 36px;
+  height: calc(36px - 2px);
 }
 
 .c1.wrapping .c2 {