fix: Add explicit arg to initEvent in ComboBox and header SearchBar (#…

…767) * fix(combobox): Add explicit arg to initEvent * fix(combobox): Fix reset button placement and size * fix: Address spacing issues in IE11 for SearchBar * fix: Address SearchBar search icon spacing It's different depending on collapsed state or not * fix: Fix vertical spacing for icons in SearchBar * docs: Show light theme for SearchBar * fix: Make SearchBar height configurable * docs: Show configurable height for SearchBar
Workday · Jul 7, 2020 · 986838a · 986838a
1 parent 2b6d866
commit 986838a
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 41 deletions.
diff --git a/modules/_labs/combobox/react/lib/Combobox.tsx b/modules/_labs/combobox/react/lib/Combobox.tsx
@@ -100,9 +100,12 @@ const AutocompleteList = styled('ul')({
 const ResetButton = styled(IconButton)<{shouldShow: boolean}>(
   {
     width: spacing.l,
+    minWidth: spacing.l,
     height: spacing.l,
     position: 'absolute',
-    margin: 0,
+    margin: `auto ${spacing.xxxs}`,
+    top: 0,
+    bottom: 0,
     right: 0,
     padding: 0,
     zIndex: 2,
@@ -195,7 +198,7 @@ const Combobox = ({
       } else {
         // IE 11
         event = document.createEvent('Event');
-        event.initEvent('input', true);
+        event.initEvent('input', true, true);
       }
 
       inputDomElement.dispatchEvent(event);

diff --git a/modules/_labs/combobox/react/stories/stories.tsx b/modules/_labs/combobox/react/stories/stories.tsx
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import withReadme from 'storybook-readme/with-readme';
-import {action} from '@storybook/addon-actions';
 import {withKnobs} from '@storybook/addon-knobs';
 
 import Combobox, {ComboboxProps} from '../index';
@@ -28,7 +27,7 @@ class Autocomplete extends React.Component<
 
   render() {
     const autocompleteResult = (textModifier: string) => (
-      <MenuItem onClick={action(`Clicked Result ${textModifier}`)}>
+      <MenuItem onClick={() => console.log(`Clicked Result ${textModifier}`)}>
         Result{' '}
         <span>
           num<span>ber</span>
@@ -45,8 +44,6 @@ class Autocomplete extends React.Component<
         onChange={this.autocompleteCallback}
         showClearButton={this.props.showClearButton == null ? true : this.props.showClearButton}
         labelId="autocomplete-123"
-        onFocus={action('Focus')}
-        onBlur={action('Blur')}
         initialValue="Test"
       >
         <TextInput autoFocus placeholder="Autocomplete" />

diff --git a/modules/_labs/header/react/lib/parts/SearchBar.tsx b/modules/_labs/header/react/lib/parts/SearchBar.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import {CSSObject} from '@emotion/core';
-import {type, colors, spacing, spacingNumbers} from '@workday/canvas-kit-react-core';
+import {colors, spacing, spacingNumbers} from '@workday/canvas-kit-react-core';
 import {GrowthBehavior} from '@workday/canvas-kit-react-common';
 import {IconButton, IconButtonVariant} from '@workday/canvas-kit-react-button';
 import {searchIcon, xIcon} from '@workday/canvas-system-icons-web';
@@ -80,6 +80,11 @@ export interface SearchBarProps extends GrowthBehavior, React.FormHTMLAttributes
    * @default true
    */
   showClearButton?: boolean;
+  /**
+   * Height of the Search Bar in pixels
+   * @default: 40
+   */
+  height?: number;
 }
 
 export interface SearchBarState {
@@ -105,7 +110,6 @@ const formCollapsedBackground = colors.frenchVanilla100;
 
 const maxWidth = 480;
 const minWidth = 120;
-const height = 44;
 
 const SearchForm = styled('form')<
   Pick<SearchBarProps, 'isCollapsed' | 'rightAlign' | 'grow'> & Pick<SearchBarState, 'showForm'>
@@ -145,35 +149,49 @@ const SearchForm = styled('form')<
   }
 );
 
-const SearchContainer = styled('div')({
-  position: `relative`,
-  width: `100%`,
-  textAlign: 'left',
-  minHeight: height,
-  height: height, // Needed to keep IE11 vertically centered
-});
+const SearchContainer = styled('div')<Pick<SearchBarProps, 'height'>>(
+  {
+    position: `relative`,
+    display: 'flex',
+    alignItems: 'center',
+    width: `100%`,
+    textAlign: 'left',
+  },
+  ({height}) => ({
+    minHeight: height,
+    height: height, // Needed to keep IE11 vertically centered
+  })
+);
 
 const SearchCombobox = styled(Combobox)({
   width: `100%`,
 });
 
 const SearchIcon = styled(IconButton)<Pick<SearchBarProps, 'isCollapsed'> & {isHidden: boolean}>(
   ({isCollapsed, isHidden}) => {
+    const collapsedSize = 40;
+    const size = 32;
     const collapseStyles: CSSObject = isCollapsed
       ? {
-          width: spacing.xl,
-          height: spacing.xl,
+          minWidth: collapsedSize,
+          width: collapsedSize,
+          minHeight: collapsedSize,
+          height: collapsedSize,
         }
       : {
-          width: spacing.l,
-          height: spacing.l,
+          minWidth: size,
+          width: size,
+          minHeight: size,
+          height: size,
         };
 
     return {
       position: `absolute`,
-      margin: `auto ${spacing.xxs}`,
-      top: spacing.zero,
-      bottom: spacing.zero,
+      margin: isCollapsed ? `auto ${spacing.xxs}` : `auto ${spacing.xxxs}`,
+      top: 0,
+      bottom: 0,
+      left: 0,
+      padding: 0,
       zIndex: 3,
       display: isHidden ? 'none' : 'flex',
       ...collapseStyles,
@@ -195,61 +213,63 @@ const CloseButton = styled(IconButton)<
 
   return {
     position: `absolute`,
-    top: spacing.zero,
-    right: spacing.zero,
-    bottom: spacing.zero,
+    top: 0,
+    bottom: 0,
+    right: 0,
     margin: `auto ${spacing.xxs}`,
     zIndex: 3,
     ...collapseStyles,
   };
 });
 
 const SearchField = styled(FormField)<
-  Pick<SearchBarProps, 'isCollapsed' | 'grow'> & Pick<SearchBarState, 'showForm'>
->(({isCollapsed, showForm, grow}) => {
+  Pick<SearchBarProps, 'isCollapsed' | 'grow' | 'height'> & Pick<SearchBarState, 'showForm'>
+>(({isCollapsed, showForm, grow, height}) => {
   return {
     display: (isCollapsed && showForm) || !isCollapsed ? 'inline-block' : 'none',
     width: '100%',
     height: height,
     maxWidth: isCollapsed || grow ? '100%' : maxWidth,
-    marginBottom: spacingNumbers.zero,
+    marginBottom: spacing.zero,
     '> div': {
       display: 'block',
     },
   };
 });
 
 const SearchInput = styled(TextInput)<
-  Pick<SearchBarProps, 'isCollapsed' | 'grow'> & {inputColors: ReturnType<typeof getInputColors>}
->(({isCollapsed, inputColors, grow}) => {
+  Pick<SearchBarProps, 'isCollapsed' | 'grow' | 'height'> & {
+    inputColors: ReturnType<typeof getInputColors>;
+  }
+>(({isCollapsed, inputColors, grow, height}) => {
   const collapseStyles: CSSObject = isCollapsed
     ? {
-        ...type.h3,
-        fontWeight: 400,
+        fontSize: '20px',
+        lineHeight: '20px', // For ie11, line-height needs to match font-size
         paddingLeft: spacingNumbers.xl + spacingNumbers.s,
         paddingRight: spacingNumbers.xl + spacingNumbers.s,
         maxWidth: 'none',
         minWidth: 0,
         backgroundColor: `rgba(0, 0, 0, 0)`,
+        height: height,
       }
     : {
         maxWidth: grow ? '100%' : maxWidth,
         minWidth: minWidth,
         paddingLeft: spacingNumbers.xl + spacingNumbers.xxs,
         paddingRight: spacing.xl,
         backgroundColor: inputColors.background,
+        height: height,
       };
   return {
-    ...type.body,
+    fontSize: '14px',
+    lineHeight: '14px', // For ie11, line-height needs to match font-size
     boxShadow: inputColors.boxShadow,
     color: inputColors.color,
     border: 'none',
     WebkitAppearance: 'none',
     transition: 'background-color 120ms, color 120ms, box-shadow 200ms, border-color 200ms',
     zIndex: 2,
-    height: height,
-    paddingTop: spacing.xs,
-    paddingBottom: spacing.xs,
     width: '100%',
     '&::-webkit-search-cancel-button': {
       display: 'none',
@@ -279,6 +299,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
     openButtonLabel: 'Open Search',
     closeButtonLabel: 'Cancel',
     showClearButton: true,
+    height: 40,
   };
 
   private inputRef = React.createRef<HTMLInputElement>();
@@ -393,6 +414,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
       clearButtonAriaLabel,
       closeButtonLabel,
       openButtonLabel,
+      height,
       ...elemProps
     } = this.props;
 
@@ -408,7 +430,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
         showForm={this.state.showForm}
         {...elemProps}
       >
-        <SearchContainer>
+        <SearchContainer height={height}>
           <SearchIcon
             aria-label={submitLabel}
             icon={searchIcon}
@@ -436,6 +458,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
             useFieldset={false}
             isCollapsed={isCollapsed}
             showForm={this.state.showForm}
+            height={height}
           >
             <SearchCombobox
               initialValue={initialValue}
@@ -454,6 +477,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
                 placeholder={placeholder}
                 isCollapsed={isCollapsed}
                 inputColors={this.getThemeColors()}
+                height={height}
                 name="search"
               />
             </SearchCombobox>

diff --git a/modules/_labs/header/react/stories/stories.tsx b/modules/_labs/header/react/stories/stories.tsx
@@ -108,16 +108,15 @@ class SearchWithAutoComplete extends React.Component<
     );
     return (
       <SearchBar
-        {...this.props}
         autocompleteItems={Array.apply(null, Array(this.state.currentText.length))
           .map((x: any, i: string) => autocompleteResult(i))
           .splice(0, 5)}
         isCollapsed={boolean('isCollapsed', false)}
         onInputChange={this.autocompleteCallback}
         placeholder={`Search with Autocomplete`}
         grow={true}
-        searchTheme={SearchBar.Theme.Dark}
         onSubmit={this.onSubmit}
+        {...this.props}
       />
     );
   }
@@ -527,7 +526,20 @@ storiesOf('Labs|Header/React', module)
     </div>
   ))
   .add('Search Form', () => (
-    <div css={{background: 'grey', padding: '12px'}}>
-      <SearchWithAutoComplete css={{marginLeft: spacing.zero}} />
+    <div css={{display: 'flex', width: '100%'}}>
+      <div css={{flex: 1, background: colors.frenchVanilla100, padding: '12px'}}>
+        <SearchWithAutoComplete
+          css={{marginLeft: spacing.zero}}
+          searchTheme={SearchBar.Theme.Light}
+          height={48}
+        />
+      </div>
+      <div css={{flex: 1, background: colors.blueberry400, marginLeft: spacing.m, padding: '12px'}}>
+        <SearchWithAutoComplete
+          css={{marginLeft: spacing.zero}}
+          searchTheme={SearchBar.Theme.Dark}
+          height={48}
+        />
+      </div>
     </div>
   ));