refactor: Hoist FieldTone type & default Overlay to transparent (#148)

seek-oss · Mar 22, 2019 · 364db99 · 364db99
1 parent 9d76458
commit 364db99
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 21 deletions.
diff --git a/lib/components/Button/Button.css.js b/lib/components/Button/Button.css.js
@@ -18,7 +18,6 @@ export default {
     },
 
     '.activeOverlay, .hoverOverlay, .focusOverlay': {
-      opacity: 0,
       transition: 'opacity 0.2s',
     },
     '&:active .activeOverlay': {
@@ -31,13 +30,6 @@ export default {
       opacity: 1,
     },
   },
-  '.overlay': {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
   '.content': {
     position: 'relative',
     zIndex: 1,

diff --git a/lib/components/Button/Button.css.js.d.ts b/lib/components/Button/Button.css.js.d.ts
@@ -4,6 +4,5 @@ export const activeOverlay: string;
 export const content: string;
 export const focusOverlay: string;
 export const hoverOverlay: string;
-export const overlay: string;
 export const root: string;
 export const weak: string;
diff --git a/lib/components/Checkbox/Checkbox.tsx b/lib/components/Checkbox/Checkbox.tsx
@@ -8,6 +8,7 @@ import { FieldMessage } from '../FieldMessage/FieldMessage';
 import { TickIcon } from '../icons/TickIcon/TickIcon';
 import styles from './Checkbox.css.js';
 import { useTheme } from '../private/ThemeContext';
+import { FieldTone } from '../../themes/theme';
 
 const textColorForState = (disabled: boolean, hovered: boolean) => {
   if (disabled) {
@@ -28,7 +29,7 @@ export interface CheckboxProps
   extends Required<Pick<InputProps, RequiredInputProps>>,
     Pick<InputProps, OptionalInputProps> {
   label: ReactNode;
-  tone?: 'neutral' | 'critical' | 'positive';
+  tone?: FieldTone;
   message?: ReactNode | false;
   children?: ReactNode;
 }

diff --git a/lib/components/FieldMessage/FieldMessage.tsx b/lib/components/FieldMessage/FieldMessage.tsx
@@ -4,8 +4,7 @@ import { Text, TextProps } from '../Text/Text';
 import { ErrorIcon } from '../icons/ErrorIcon/ErrorIcon';
 import { TickCircleIcon } from '../icons/TickCircleIcon/TickCircleIcon';
 import styles from './FieldMessage.css.js';
-
-type FieldTone = 'neutral' | 'critical' | 'positive';
+import { FieldTone } from '../../themes/theme';
 
 export interface FieldMessageProps extends TextProps {
   id: string;

diff --git a/lib/components/Radio/Radio.tsx b/lib/components/Radio/Radio.tsx
@@ -7,6 +7,7 @@ import { Text } from '../Text/Text';
 import { FieldMessage } from '../FieldMessage/FieldMessage';
 import styles from './Radio.css.js';
 import { useTheme } from '../private/ThemeContext';
+import { FieldTone } from '../../themes/theme';
 
 const textColorForState = (disabled: boolean, hovered: boolean) => {
   if (disabled) {
@@ -27,7 +28,7 @@ export interface RadioProps
   extends Required<Pick<InputProps, RequiredInputProps>>,
     Pick<InputProps, OptionalInputProps> {
   label: ReactNode;
-  tone?: 'neutral' | 'critical' | 'positive';
+  tone?: FieldTone;
   message?: ReactNode | false;
 }
 

diff --git a/lib/components/TextLinkRenderer/TextLinkRenderer.css.js b/lib/components/TextLinkRenderer/TextLinkRenderer.css.js
@@ -14,10 +14,7 @@ export default {
     display: 'block',
     position: 'relative',
   },
-  '.focusOverlay': {
-    opacity: 0,
-    '.root:focus ~ &': {
-      opacity: 1,
-    },
+  '.root:focus ~ .focusOverlay': {
+    opacity: 1,
   },
 };
diff --git a/lib/components/private/FieldOverlay/FieldOverlay.tsx b/lib/components/private/FieldOverlay/FieldOverlay.tsx
@@ -1,15 +1,22 @@
 import React from 'react';
 import { Overlay, OverlayProps } from '../Overlay/Overlay';
+import { BoxShadow } from '../../../themes/theme';
 
+type FieldOverlayVariant = 'focus' | 'hover';
 export interface FieldOverlayProps
   extends Pick<OverlayProps, 'backgroundColor' | 'className'> {
-  variant?: 'focus';
+  variant?: FieldOverlayVariant;
 }
 
+const boxShadowForVariant: Record<FieldOverlayVariant, BoxShadow> = {
+  focus: 'outlineFocus',
+  hover: 'borderFormAccent',
+};
+
 export const FieldOverlay = ({ variant, ...restProps }: FieldOverlayProps) => (
   <Overlay
     borderRadius="standard"
-    boxShadow={variant === 'focus' ? 'outlineFocus' : undefined}
+    boxShadow={boxShadowForVariant[variant!]}
     transition="fast"
     {...restProps}
   />

diff --git a/lib/components/private/Overlay/Overlay.css.js b/lib/components/private/Overlay/Overlay.css.js
@@ -6,5 +6,6 @@ export default {
     bottom: 0,
     left: 0,
     right: 0,
+    opacity: 0,
   },
 };
diff --git a/lib/themes/theme.d.ts b/lib/themes/theme.d.ts
@@ -9,6 +9,7 @@ type TextSize = 'standard' | 'large';
 type ResponsiveHeading = Record<Breakpoint, TextDefinition> &
   Record<'regular' | 'weak', FontWeight>;
 type ResponsiveText = Record<Breakpoint, TextDefinition>;
+export type FieldTone = 'neutral' | 'critical' | 'positive';
 
 // Spacing definitions
 interface SpacingToken {
@@ -20,6 +21,9 @@ interface SpacingToken {
   xlarge: number;
   xxlarge: number;
 }
+interface ColumnSpacingToken extends SpacingToken {
+  gutter: number;
+}
 
 // Border definitions
 type BorderWidth = 'standard' | 'large';
@@ -33,7 +37,7 @@ export interface Tokens {
   heading: Record<HeadingSize, ResponsiveHeading>;
   text: Record<TextSize, ResponsiveText>;
   rowSpacing: SpacingToken;
-  columnSpacing: SpacingToken | Record<'gutter', number>;
+  columnSpacing: ColumnSpacingToken;
   borderWidth: Record<BorderWidth, number>;
 }