button toggle states (#1593)

Update hover state for button toggles and groups to distinguish from toggle states

Author: jhardy

packages/components/src/Button/ButtonItem.tsx

@@ -24,7 +24,7 @@
 
  */
 
-import React, { forwardRef, MouseEvent, Ref, useContext } from 'react'
+import React, { forwardRef, MouseEvent, Ref, useContext, useState } from 'react'
 import styled from 'styled-components'
 import {
   CompatibleHTMLProps,
@@ -39,17 +39,30 @@ export interface ButtonItemProps
   extends SpaceProps,
     Omit<CompatibleHTMLProps<HTMLButtonElement>, 'type' | 'aria-pressed'> {
   value?: string
+  focusVisible?: boolean
 }
 
 const ButtonLayout = forwardRef(
   (
-    { children, onClick, value, ...props }: ButtonItemProps,
+    { children, onClick, value, onBlur, onKeyUp, ...props }: ButtonItemProps,
     ref: Ref<HTMLButtonElement>
   ) => {
     const { disabled, value: contextValue, onItemClick } = useContext(
       ButtonSetContext
     )
 
+    const [isFocusVisible, setFocusVisible] = useState(false)
+
+    const handleOnKeyUp = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      setFocusVisible(true)
+      onKeyUp && onKeyUp(event)
+    }
+
+    const handleOnBlur = (event: React.FocusEvent<HTMLButtonElement>) => {
+      setFocusVisible(false)
+      onBlur && onBlur(event)
+    }
+
     function handleClick(e: MouseEvent<HTMLButtonElement>) {
       onClick && onClick(e)
       if (!e.defaultPrevented) {
@@ -67,23 +80,31 @@ const ButtonLayout = forwardRef(
       : false
 
     return (
-      <button
-        type="button"
+      <ButtonOuter
         aria-pressed={selected}
         ref={ref}
         onClick={handleClick}
         value={itemValue}
         disabled={disabled}
+        focusVisible={isFocusVisible}
+        onKeyUp={handleOnKeyUp}
+        onBlur={handleOnBlur}
         {...omitStyledProps(props)}
       >
         {children}
-      </button>
+      </ButtonOuter>
     )
   }
 )
 
 ButtonLayout.displayName = 'ButtonLayout'
 
+const ButtonOuter = styled.button<ButtonItemProps>`
+  ${(props) =>
+    props.focusVisible &&
+    `box-shadow: 0 0 0.5px 1px ${props.theme.colors.keyFocus}`}
+`
+
 export const ButtonItem = styled(ButtonLayout)`
   align-items: center;
   background: transparent;
@@ -105,11 +126,11 @@ export const ButtonItem = styled(ButtonLayout)`
   &:active,
   &:focus,
   &:hover {
-    background: ${({ theme }) => theme.colors.keyAccent};
+    background: ${({ theme }) => theme.colors.neutralSubtle};
+    color: ${({ theme }) => theme.colors.text5};
   }
 
   &:focus {
-    box-shadow: 0 0 0.5px 1px ${({ theme }) => theme.colors.keyFocus};
     outline: none;
   }
 

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

@@ -34,11 +34,11 @@ exports[`ButtonGroup controlled 1`] = `
 .c3:active,
 .c3:focus,
 .c3:hover {
-  background: #E8E5FF;
+  background: #FBFBFC;
+  color: #262D33;
 }
 
 .c3:focus {
-  box-shadow: 0 0 0.5px 1px #9785F2;
   outline: none;
 }
 
@@ -107,23 +107,20 @@ exports[`ButtonGroup controlled 1`] = `
   <button
     aria-pressed="false"
     class="c2 c3"
-    type="button"
     value="Apples"
   >
     Apples
   </button>
   <button
     aria-pressed="false"
     class="c2 c3"
-    type="button"
     value="Oranges"
   >
     Oranges
   </button>
   <button
     aria-pressed="true"
     class="c2 c3"
-    type="button"
     value="Bananas"
   >
     Bananas

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

@@ -34,11 +34,11 @@ exports[`ButtonToggle controlled 1`] = `
 .c3:active,
 .c3:focus,
 .c3:hover {
-  background: #E8E5FF;
+  background: #FBFBFC;
+  color: #262D33;
 }
 
 .c3:focus {
-  box-shadow: 0 0 0.5px 1px #9785F2;
   outline: none;
 }
 
@@ -146,23 +146,20 @@ exports[`ButtonToggle controlled 1`] = `
   <button
     aria-pressed="false"
     class="c2 c3"
-    type="button"
     value="Apples"
   >
     Apples
   </button>
   <button
     aria-pressed="false"
     class="c2 c3"
-    type="button"
     value="Oranges"
   >
     Oranges
   </button>
   <button
     aria-pressed="true"
     class="c2 c3"
-    type="button"
     value="Bananas"
   >
     Bananas