box-ui-elements 14.0.0 → 14.1.0-beta.11

package/src/components/plain-button/PlainButton.stories.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { boolean } from '@storybook/addon-knobs';
 
+import Icon from '../../icons/general/IconCopy';
+import * as vars from '../../styles/variables';
+
 import PlainButton from './PlainButton';
 import { ButtonType } from '../button';
 import notes from './PlainButton.stories.md';
@@ -13,8 +16,100 @@ export const regular = () => (
 
 export const disabled = () => <PlainButton isDisabled>Click Here</PlainButton>;
 
+export const fixingMargins = () => (
+    <>
+        <div style={{ backgroundColor: vars.bdlLightBlue20, display: 'inline-block' }}>
+            <PlainButton>
+                <Icon />
+            </PlainButton>
+        </div>
+        <p>By default the PlainButton component has margins set to 0.</p>
+
+        <style>
+            {`
+                .bdl-SpecialButtonBug {
+                    margin: 8px;
+                }
+            `}
+        </style>
+        <p style={{ backgroundColor: vars.bdlWatermelonRed10, display: 'inline-block' }}>
+            <PlainButton className="bdl-SpecialButtonBug">
+                <Icon />
+            </PlainButton>
+        </p>
+        <p>
+            The layout jumps on hover if margin overrides are not set for the :active and :hover states.
+            <pre>
+                <code>
+                    {`
+            .bdl-SpecialButtonBug {
+                margin: $bdl-grid-unit*2;
+            }
+                `}
+                </code>
+            </pre>
+        </p>
+        <style>
+            {`
+                .bdl-SpecialButtonFix,
+                .bdl-SpecialButtonFix:hover,
+                .bdl-SpecialButtonFix:active {
+                    margin: 8px;
+                }
+            `}
+        </style>
+        <p style={{ backgroundColor: vars.bdlGreenLight10, display: 'inline-block' }}>
+            <PlainButton className="bdl-SpecialButtonFix">
+                <Icon />
+            </PlainButton>
+        </p>
+        <p>
+            Workaround - use bdl-Button-margins mixin to define margins.
+            <pre>
+                <code>
+                    {`
+            .bdl-SpecialButtonFix {
+                @include bdl-Button-margins($bdl-grid-unit*2);
+            }
+                `}
+                </code>
+            </pre>
+        </p>
+        <style>
+            {`
+                .bdl-SpecialButtonFix2,
+                .bdl-SpecialButtonFix2:hover,
+                .bdl-SpecialButtonFix2:active {
+                    margin: 8px 12px 0 16px;
+                }
+            `}
+        </style>
+        <p style={{ backgroundColor: vars.bdlGreenLight10, display: 'inline-block' }}>
+            <PlainButton className="bdl-SpecialButtonFix2">
+                <Icon />
+            </PlainButton>
+        </p>
+        <p>
+            You can set all 4 margins inline using shorthand property syntax.
+            <pre>
+                <code>
+                    {`
+            .bdl-SpecialButtonFix2 {
+                @include bdl-Button-margins($bdl-grid-unit*2 $bdl-grid-unit*3 0 $bdl-grid-unit*4);
+            }
+                `}
+                </code>
+            </pre>
+        </p>
+        <p>
+            <b>Why not fix this?</b> We will eventually, but since this behavior is relied upon in many places it is a
+            breaking change that needs to be rolled out strategically.
+        </p>
+    </>
+);
+
 export default {
-    title: 'Components|PlainButton',
+    title: 'Components|Buttons/PlainButton',
     component: PlainButton,
     parameters: {
         notes,

package/src/components/plain-button/__tests__/PlainButton.stories.test.tsx

@@ -1,5 +1,5 @@
 describe('components/plain-button/PlainButton', () => {
-    test.each([['components-plainbutton--regular'], ['components-plainbutton--disabled']])(
+    test.each(['components-buttons-plainbutton--regular', 'components-buttons-plainbutton--disabled'])(
         'looks visually correct when using story %s',
         async id => {
             const image = await BoxVisualTestUtils.takeScreenshot(id);

package/src/components/primary-button/PrimaryButton.stories.tsx

@@ -20,7 +20,7 @@ export const loading = () => <PrimaryButton isLoading>Click Here</PrimaryButton>
 export const disabled = () => <PrimaryButton isDisabled>Click Here</PrimaryButton>;
 
 export default {
-    title: 'Components|PrimaryButton',
+    title: 'Components|Buttons/PrimaryButton',
     component: PrimaryButton,
     parameters: {
         notes,

package/src/components/primary-button/__tests__/PrimaryButton.stories.test.tsx

@@ -1,5 +1,5 @@
 describe('components/primary-button/PrimaryButton', () => {
-    test.each([['components-primarybutton--regular'], ['components-primarybutton--disabled']])(
+    test.each(['components-buttons-primarybutton--regular', 'components-buttons-primarybutton--disabled'])(
         'looks visually correct when using story %s',
         async id => {
             const image = await BoxVisualTestUtils.takeScreenshot(id);

package/src/components/radio/__tests__/RadioGroup.stories.test.tsx

@@ -1,5 +1,5 @@
 describe('components/radio/RadioButton', () => {
-    const RADIOGROUP_STORY = 'components-radio-radiogroup--example';
+    const RADIOGROUP_STORY = 'components-radio-radiogroup--basic';
     test(`looks visually correct when using story ${RADIOGROUP_STORY}`, async () => {
         const image = await BoxVisualTestUtils.takeScreenshot(RADIOGROUP_STORY);
         return expect(image).toMatchImageSnapshot();

package/src/components/select-field/SelectField.scss

@@ -27,6 +27,7 @@
     display: flex;
     align-items: center;
     white-space: nowrap;
+    border-radius: 0;
 }
 
 .select-option.is-clear-option {
@@ -54,7 +55,9 @@
 .bdl-SelectFieldDropdown {
     z-index: 4;
     min-width: 100%;
+    margin-top: $bdl-grid-unit * 2;
     overflow-x: hidden;
+    border-radius: $bdl-border-radius-size-med;
 }
 
 .bdl-SelectField-optionText {

package/src/components/select-field/SingleSelectField.md

@@ -230,3 +230,34 @@ const handleChange = selectedOption => {
     />
 </Label>
 ```
+
+Search Input
+
+```
+initialState = {
+    selectedValue: 'b',
+};
+
+const options = [
+    { displayText: 'Option A', value: 'a' },
+    { displayText: 'Option B', value: 'b' },
+    { displayText: 'Option C', value: 'c' },
+    { displayText: 'Option D', value: 'd' },
+    { displayText: 'Option E', value: 'e' },
+];
+
+const handleChange = selectedOption => {
+    setState({
+        selectedValue: selectedOption.value,
+    });
+};
+
+<Label text="Single select field">
+    <SingleSelectField
+        onChange={ handleChange }
+        options={ options }
+        selectedValue={ state.selectedValue }
+        shouldShowSearchInput
+    />
+</Label>
+```

package/src/components/selector-dropdown/SelectorDropdown.scss

@@ -1,4 +1,5 @@
 @import '../../styles/variables';
+@import '../../styles/mixins/overlay';
 
 /**************************************
  * Selector Dropdown
@@ -8,6 +9,10 @@
     position: relative;
     z-index: 3; /* increase z-index based on max-height of dropdown wrapper */
 
+    .overlay {
+        @include bdl-Overlay-container;
+    }
+
     .overlay-wrapper,
     .overlay {
         display: block;

package/src/components/selector-dropdown/SelectorDropdown.stories.js

@@ -0,0 +1,16 @@
+// @flow
+import * as React from 'react';
+
+import SelectorDropdownExamples from '../../../examples/src/SelectorDropdownExamples';
+import SelectorDropdown from './SelectorDropdown';
+import notes from './SelectorDropdown.stories.md';
+
+export const basic = () => <SelectorDropdownExamples />;
+
+export default {
+    title: 'Components|SelectorDropdown',
+    component: SelectorDropdown,
+    parameters: {
+        notes,
+    },
+};

package/src/components/selector-dropdown/{README.md → SelectorDropdown.stories.md}

@@ -1,15 +1,6 @@
-### Description
-
 This component requires a selector component (input text field or wrapper containing an input)
 that receives `inputProps` as a prop and spreads it onto the `input` element.
 It renders the specified children as options in a dropdown.
 
 The component handles opening and closing the dropdown, updating the active option,
 keyboard handling, and aria attributes necessary for a [combobox widget](https://www.w3.org/TR/wai-aria/roles#combobox).
-
-### Examples
-```
-const SelectorDropdownExamples = require('examples').SelectorDropdownExamples;
-
-<SelectorDropdownExamples />
-```

package/src/components/selector-dropdown/__tests__/SelectorDropdown.stories.test.js

@@ -0,0 +1,6 @@
+describe('components/select/Select', () => {
+    test.each(['components-selectordropdown--basic'])('looks visually correct when using story %s', async id => {
+        const image = await BoxVisualTestUtils.takeScreenshotAfterInput(id, '.SelectorDropdown input', 'focus');
+        return expect(image).toMatchImageSnapshot();
+    });
+});

package/src/components/tab-view/Tabs.scss

@@ -58,6 +58,7 @@
         line-height: 40px;
         letter-spacing: .035em;
         border-bottom: 1px solid $bdl-gray-10;
+        border-radius: 0;
 
         &.single-tab-showing {
             width: 100%;

package/src/components/text-area/TextArea.js

@@ -26,6 +26,8 @@ type Props = {
     /** Label displayed for the text area */
     label: React.Node,
     textareaRef?: Function, // @TODO: eventually rename to innerRef for consistancy across all form elements
+    /** A CSS class for the tooltip's tether element component */
+    tooltipTetherClassName?: string,
 };
 
 const TextArea = ({
@@ -39,6 +41,7 @@ const TextArea = ({
     isResizable,
     label,
     textareaRef,
+    tooltipTetherClassName,
     ...rest
 }: Props) => {
     const hasError = !!error;
@@ -67,6 +70,7 @@ const TextArea = ({
                 <Tooltip
                     isShown={hasError}
                     position={errorTooltipPosition || 'bottom-left'}
+                    tetherElementClassName={tooltipTetherClassName}
                     text={error || ''}
                     theme="error"
                 >

package/src/components/text-area/__tests__/TextArea.test.js

@@ -69,6 +69,17 @@ describe('components/text-area/TextArea', () => {
         expect(tooltip.prop('isShown')).toBe(false);
     });
 
+    test('should render Tooltip with tetherElementClassName', () => {
+        const className = 'tether-element-class-name';
+        const wrapper = shallow(<TextArea error="error" label="label" tooltipTetherClassName={className} />);
+        const tetherEl = wrapper
+            .find('Tooltip')
+            .dive()
+            .find('TetherComponent');
+
+        expect(tetherEl.prop('className')).toBe(className);
+    });
+
     test('should not show optional text when hideOptionalLabel is true', () => {
         const wrapper = shallow(<TextArea label="label" hideOptionalLabel />);
         expect(wrapper).toMatchSnapshot();

package/src/components/text-area/__tests__/__snapshots__/TextArea.test.js.snap

@@ -18,7 +18,7 @@ exports[`components/text-area/TextArea should not show optional text when hideOp
       theme="error"
     >
       <textarea
-        aria-errormessage="errorMessage19"
+        aria-errormessage="errorMessage22"
         aria-invalid={false}
         style={
           Object {
@@ -29,7 +29,7 @@ exports[`components/text-area/TextArea should not show optional text when hideOp
     </Tooltip>
     <span
       className="accessibility-hidden"
-      id="errorMessage19"
+      id="errorMessage22"
       role="alert"
     />
   </Label>
@@ -46,7 +46,7 @@ exports[`components/text-area/TextArea should render text area with description
   >
     <div
       className="text-area-description"
-      id="description24"
+      id="description27"
     >
       some description
     </div>
@@ -60,8 +60,8 @@ exports[`components/text-area/TextArea should render text area with description
       theme="error"
     >
       <textarea
-        aria-describedby="description24"
-        aria-errormessage="errorMessage23"
+        aria-describedby="description27"
+        aria-errormessage="errorMessage26"
         aria-invalid={false}
         style={
           Object {
@@ -72,7 +72,7 @@ exports[`components/text-area/TextArea should render text area with description
     </Tooltip>
     <span
       className="accessibility-hidden"
-      id="errorMessage23"
+      id="errorMessage26"
       role="alert"
     />
   </Label>
@@ -97,7 +97,7 @@ exports[`components/text-area/TextArea should show optional text when hideOption
       theme="error"
     >
       <textarea
-        aria-errormessage="errorMessage21"
+        aria-errormessage="errorMessage24"
         aria-invalid={false}
         style={
           Object {
@@ -108,7 +108,7 @@ exports[`components/text-area/TextArea should show optional text when hideOption
     </Tooltip>
     <span
       className="accessibility-hidden"
-      id="errorMessage21"
+      id="errorMessage24"
       role="alert"
     />
   </Label>

package/src/components/text-input/TextInput.js

@@ -35,6 +35,8 @@ type Props = {
     /** Label displayed for the text input */
     label: React.Node,
     labelTooltip?: React.Node,
+    /** A CSS class for the tooltip's tether element component */
+    tooltipTetherClassName?: string,
 };
 
 const TextInput = ({
@@ -51,6 +53,7 @@ const TextInput = ({
     isValid,
     label,
     labelTooltip,
+    tooltipTetherClassName,
     ...rest
 }: Props) => {
     const hasError = !!error;
@@ -79,7 +82,13 @@ const TextInput = ({
                         {description}
                     </div>
                 )}
-                <Tooltip isShown={hasError} position={errorPosition || 'middle-right'} text={error || ''} theme="error">
+                <Tooltip
+                    isShown={hasError}
+                    position={errorPosition || 'middle-right'}
+                    tetherElementClassName={tooltipTetherClassName}
+                    text={error || ''}
+                    theme="error"
+                >
                     <input ref={inputRef} required={isRequired} {...ariaAttrs} {...rest} />
                 </Tooltip>
                 {isLoading && !isValid && <LoadingIndicator className="text-input-loading" />}

package/src/components/text-input/__tests__/TextInput.test.js

@@ -78,6 +78,17 @@ describe('components/text-input/TextInput', () => {
         expect(tooltip.prop('isShown')).toBe(false);
     });
 
+    test('should render Tooltip with tetherElementClassName', () => {
+        const className = 'tether-element-class-name';
+        const wrapper = shallow(<TextInput error="error" label="label" tooltipTetherClassName={className} />);
+        const tetherEl = wrapper
+            .find('Tooltip')
+            .dive()
+            .find('TetherComponent');
+
+        expect(tetherEl.prop('className')).toBe(className);
+    });
+
     test('should render text input with description', () => {
         const wrapper = shallow(<TextInput description="some description" />);
 

package/src/components/thumbnail-card/ThumbnailCard.scss

@@ -9,7 +9,7 @@
     max-width: $thumbnail-card-max-width;
     height: 200px;
     border: $thumbnail-card-border solid $bdl-gray-10;
-    border-radius: 8px;
+    border-radius: $bdl-border-radius-size-large;
     box-shadow: 0 5px 10px 0 rgba(198, 198, 198, .2);
 }
 

package/src/components/time-input/__tests__/TimeInput.stories.test.tsx

@@ -1,4 +1,5 @@
-import puppeteer from 'puppeteer';
+// @ts-ignore flow import
+import { DEFAULT_FORMAT_DEBOUNCE } from '../../../constants';
 
 describe('components/time-input/TimeInput', () => {
     const INPUT_SELECTOR = 'input';
@@ -18,15 +19,13 @@ describe('components/time-input/TimeInput', () => {
         ${TIMEINPUT_STORIES[1]} | ${'abcde'}      | ${'shows an error for invalid input after blur'}
         ${TIMEINPUT_STORIES[1]} | ${''}           | ${'shows default time for empty input after blur'}
     `('$testCase for story $storyId', async ({ storyId, input }) => {
-        const browser = await puppeteer.launch();
-        const page = await browser.newPage();
-        await page.goto(`http://localhost:6061/iframe.html?id=${storyId}`);
+        const page = await BoxVisualTestUtils.gotoStory(storyId);
         await page.waitForSelector(INPUT_SELECTOR);
         await BoxVisualTestUtils.clearInput(INPUT_SELECTOR, page);
         await page.type(INPUT_SELECTOR, input);
-        await page.$eval(INPUT_SELECTOR, element => (element as HTMLInputElement).blur());
+        await BoxVisualTestUtils.blurInput(INPUT_SELECTOR);
+
         const image = await page.screenshot();
-        await browser.close();
         return expect(image).toMatchImageSnapshot();
     });
 
@@ -39,15 +38,12 @@ describe('components/time-input/TimeInput', () => {
         ${TIMEINPUT_STORIES[1]} | ${'134525'}    | ${'shows an error for invalid input after change'}
         ${TIMEINPUT_STORIES[1]} | ${''}          | ${'shows default time for empty input after change'}
     `('$testCase for story $storyId', async ({ storyId, input }) => {
-        const browser = await puppeteer.launch();
-        const page = await browser.newPage();
-        await page.goto(`http://localhost:6061/iframe.html?id=${storyId}`);
+        const page = await BoxVisualTestUtils.gotoStory(storyId);
         await page.waitForSelector(INPUT_SELECTOR);
         await BoxVisualTestUtils.clearInput(INPUT_SELECTOR, page);
         await page.type(INPUT_SELECTOR, input);
-        await BoxVisualTestUtils.sleep();
+        await BoxVisualTestUtils.sleep(DEFAULT_FORMAT_DEBOUNCE * 1.1);
         const image = await page.screenshot();
-        await browser.close();
         return expect(image).toMatchImageSnapshot();
     });
 });