npm - box-ui-elements - Versions diffs - 19.0.0-beta.9 → 19.0.0 - Mend

box-ui-elements 19.0.0-beta.9 → 19.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2047) hide show

package/src/components/link/stories/LinkGroup.stories.tsx CHANGED Viewed

@@ -14,7 +14,7 @@ export const basic = () => (
 );
 export default {
-    title: 'Components|Links/LinkGroup',
+    title: 'Components/Links/LinkGroup',
     component: LinkGroup,
     parameters: {
         notes,

package/src/components/link/stories/LinkPrimaryButton.stories.tsx CHANGED Viewed

@@ -25,6 +25,7 @@ export const withCustomComponent = () => {
     // import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
     const CustomRouterLink = ({ href, children, ...rest }: RouterLinkProps) => (
+        // @ts-ignore TODO: figure out why this is giving a TS error
         <RouterLink to={href} {...rest}>
             {children}
         </RouterLink>
@@ -40,7 +41,7 @@ export const withCustomComponent = () => {
 };
 export default {
-    title: 'Components|Links/LinkPrimaryButton',
+    title: 'Components/Links/LinkPrimaryButton',
     component: LinkPrimaryButton,
     parameters: {
         notes,

package/src/components/loading-indicator/LoadingIndicator.stories.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ export const mediumSize = () => <LoadingIndicator size={LoadingIndicatorSize.MED
 export const largeSize = () => <LoadingIndicator size={LoadingIndicatorSize.LARGE} />;
 export default {
-    title: 'Components|LoadingIndicator',
+    title: 'Components/LoadingIndicator',
     component: LoadingIndicator,
     parameters: {
         notes,

package/src/components/loading-indicator/LoadingIndicatorWrapper.stories.tsx CHANGED Viewed

@@ -14,7 +14,7 @@ export const regular = () => (
 /* eslint-enable jsx-a11y/media-has-caption */
 export default {
-    title: 'Components|LoadingIndicatorWrapper',
+    title: 'Components/LoadingIndicatorWrapper',
     component: LoadingIndicatorWrapper,
     parameters: {
         notes,

package/src/components/loading-indicator/makeLoadable.tsx CHANGED Viewed

@@ -6,10 +6,8 @@ export interface MakeLoadableProps {
     loadingIndicatorProps?: LoadingIndicatorProps;
 }
-const makeLoadable = <P extends MakeLoadableProps>(
-    BaseComponent: React.ComponentType<P>,
-): React.FC<P & MakeLoadableProps> => {
-    const LoadableComponent = ({ isLoading = false, loadingIndicatorProps = {}, ...rest }: MakeLoadableProps) =>
+const makeLoadable = <P extends object>(BaseComponent: React.ComponentType<P>): React.FC<P & MakeLoadableProps> => {
+    const LoadableComponent = ({ isLoading = false, loadingIndicatorProps = {}, ...rest }: P & MakeLoadableProps) =>
         isLoading ? <LoadingIndicator {...loadingIndicatorProps} /> : <BaseComponent {...(rest as P)} />;
     LoadableComponent.displayName = `Loadable${BaseComponent.displayName || BaseComponent.name || 'Component'}`;

package/src/components/logo/Logo.stories.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ import notes from './Logo.stories.md';
 export const regular = () => <Logo title="Box" />;
 export default {
-    title: 'Components|Logo',
+    title: 'Components/Logo',
     component: Logo,
     parameters: {
         notes,

package/src/components/media/stories/Media.stories.tsx CHANGED Viewed

@@ -135,7 +135,7 @@ export const withFormElements = () => (
 );
 export default {
-    title: 'Components|Media/Media',
+    title: 'Components/Media/Media',
     component: Media,
     parameters: {
         notes,

package/src/components/media/stories/MediaBody.stories.tsx CHANGED Viewed

@@ -34,7 +34,7 @@ export const example = () => (
 );
 export default {
-    title: 'Components|Media/MediaBody',
+    title: 'Components/Media/MediaBody',
     component: MediaBody,
     parameters: {
         notes,

package/src/components/media/stories/MediaFigure.stories.tsx CHANGED Viewed

@@ -30,7 +30,7 @@ export const example = () => (
 );
 export default {
-    title: 'Components|Media/MediaFigure',
+    title: 'Components/Media/MediaFigure',
     component: MediaFigure,
     parameters: {
         notes,

package/src/components/media/stories/MediaMenu.stories.tsx CHANGED Viewed

@@ -32,7 +32,7 @@ export const example = () => (
 );
 export default {
-    title: 'Components|Media/MediaMenu',
+    title: 'Components/Media/MediaMenu',
     component: MediaMenu,
     parameters: {
         notes,

package/src/components/media-query/stories/MediaQuery.stories.js CHANGED Viewed

@@ -78,7 +78,7 @@ const DemoComponent = (props: Props) => {
 export const HigherOrderComponent = withMediaQuery(DemoComponent);
 export default {
-    title: 'Components|MediaQuery',
+    title: 'Components/MediaQuery',
     component: useMediaQuery,
     parameters: {
         notes,

package/src/components/menu/stories/Menu.stories.tsx CHANGED Viewed

@@ -95,7 +95,7 @@ export const withChildOnResize = () => {
 };
 export default {
-    title: 'Components|Menu',
+    title: 'Components/Menu',
     component: Menu,
     parameters: {
         notes,

package/src/components/menu/stories/SelectMenuLinkItem.stories.tsx CHANGED Viewed

@@ -19,7 +19,7 @@ export const basic = () => (
 );
 export default {
-    title: 'Components|SelectMenuLinkItem',
+    title: 'Components/SelectMenuLinkItem',
     component: SelectMenuLinkItem,
     parameters: {
         notes,

package/src/components/modal/Modal.scss CHANGED Viewed

@@ -1,6 +1,5 @@
 @import '../../styles/variables';
 @import '../../styles/mixins/buttons';
-@import '../../styles/constants/media-queries';
 /**************************************
  * Modal
@@ -48,6 +47,8 @@
 }
 .modal-dialog-container {
+    flex-basis: 100%;
+    width: 100%;
     margin: auto;
 }
@@ -150,77 +151,69 @@
     display: flex;
 }
-//Responsive support - triggers fullscreen mode after reaching $small-medium-screen width
-.is-responsive-web {
-    @include breakpoint($small-medium-screen) {
-        $responsive-modal-header-height: 64px;
-        $responsive-modal-actions-height: 60px;
-        .modal-title {
-            @include bdl-lineClamp(2);
-        }
-        .modal {
-            flex-direction: column;
-            padding: 0;
-        }
-        .modal-header-container {
-            position: absolute;
-            top: 0;
-            left: 0;
-            display: flex;
-            align-items: center;
-            width: 100%;
-            height: $responsive-modal-header-height;
-        }
-        .modal-header {
-            display: flex;
-            align-items: center;
-            padding: 0 16px;
-        }
-        .modal-content {
-            flex-basis: 100%;
-            margin-top: $responsive-modal-header-height;
-            margin-bottom: $responsive-modal-actions-height;
-            padding: 24px 16px 12px 16px;
-            overflow: auto;
-        }
-        .modal-dialog {
-            height: 100%;
-            padding: 0;
-            border-radius: 0;
-        }
-        .modal-close-button {
-            top: 0;
-            right: 10px;
-            display: flex;
-            align-items: center;
-            height: 100%;
-            padding: 20px 0;
-        }
-        .modal-actions {
-            position: fixed;
-            right: 0;
-            bottom: 0;
-            width: 100%;
-            height: $responsive-modal-actions-height;
-            padding: 10px 16px;
-            background-color: $white;
-        }
-        .modal-dialog-container {
-            overflow: hidden;
-        }
+@include breakpoint($small-medium-screen) {
+    $responsive-modal-header-height: 64px;
+    $responsive-modal-actions-height: 60px;
+    .modal-title {
+        @include bdl-lineClamp(2);
     }
-    .modal-dialog-container {
+    .modal {
+        flex-direction: column;
+        padding: 0;
+    }
+    .modal-header-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: $responsive-modal-header-height;
+    }
+    .modal-header {
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+    }
+    .modal-content {
         flex-basis: 100%;
+        margin-top: $responsive-modal-header-height;
+        margin-bottom: $responsive-modal-actions-height;
+        padding: 24px 16px 12px 16px;
+        overflow: auto;
+    }
+    .modal-dialog {
+        height: 100%;
+        padding: 0;
+        border-radius: 0;
+    }
+    .modal-close-button {
+        top: 0;
+        right: 10px;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding: 20px 0;
+    }
+    .modal-actions {
+        position: fixed;
+        right: 0;
+        bottom: 0;
         width: 100%;
+        height: $responsive-modal-actions-height;
+        padding: 10px 16px;
+        background-color: $white;
+    }
+    .modal-dialog-container {
+        overflow: hidden;
     }
 }

package/src/components/modal/stories/Modal.stories.js CHANGED Viewed

@@ -118,7 +118,7 @@ export const withCustomBackdropClickHandler = () => {
 };
 export default {
-    title: 'Components|Modal',
+    title: 'Components/Modal',
     component: Modal,
     parameters: {
         notes,

package/src/components/modal/stories/ModalActions.stories.js CHANGED Viewed

@@ -22,7 +22,7 @@ export const basic = () => (
 );
 export default {
-    title: 'Components|ModalActions',
+    title: 'Components/ModalActions',
     component: ModalActions,
     parameters: {
         notes,

package/src/components/modal/stories/ModalDialog.stories.js CHANGED Viewed

@@ -19,7 +19,7 @@ export const basic = () => (
 );
 export default {
-    title: 'Components|ModalDialog',
+    title: 'Components/ModalDialog',
     component: ModalDialog,
     parameters: {
         notes,

package/src/components/nav-sidebar/NavSidebar.stories.js CHANGED Viewed

@@ -46,7 +46,7 @@ export const collapsible = () => (
 );
 export default {
-    title: 'Components|NavSidebar',
+    title: 'Components/NavSidebar',
     component: NavSidebar,
     parameters: {
         notes,

package/src/components/notification/stories/Notification.stories.js CHANGED Viewed

@@ -41,7 +41,7 @@ export const error = () => (
 );
 export default {
-    title: 'Components|Notifications/Notification',
+    title: 'Components/Notifications/Notification',
     component: Notification,
     parameters: {
         notes,

package/src/components/notification/stories/NotificationsWrapper.stories.js CHANGED Viewed

@@ -57,7 +57,7 @@ export const example = () => {
 };
 export default {
-    title: 'Components|Notifications/NotificationsWrapper',
+    title: 'Components/Notifications/NotificationsWrapper',
     component: NotificationsWrapper,
     parameters: {
         notes,

package/src/components/nudge/Nudge.stories.tsx CHANGED Viewed

@@ -40,7 +40,7 @@ export const regular = () => {
 };
 export default {
-    title: 'Components|Nudge',
+    title: 'Components/Nudge',
     component: Nudge,
     parameters: {
         notes,

package/src/components/pill-cloud/PillCloud.stories.js CHANGED Viewed

@@ -40,7 +40,7 @@ export const regular = () => {
 };
 export default {
-    title: 'Components|PillCloud',
+    title: 'Components/PillCloud',
     component: PillCloud,
     parameters: {
         notes,

package/src/components/pill-selector-dropdown/PillSelector.js CHANGED Viewed

@@ -31,6 +31,10 @@ type Props = {
     getPillImageUrl?: (data: { id: string | number, [key: string]: any }) => string,
     innerRef?: React.Ref<any>,
     inputProps: Object,
+    /** Allows disabling the textarea element without disabling the whole PillSelector */
+    isInputDisabled?: boolean,
+    /** Whether to show textarea in next line when focused */
+    isInputFocusedNextLine?: boolean,
     onInput: Function,
     onRemove: Function,
     onSuggestedPillAdd?: Function,
@@ -194,6 +198,8 @@ class PillSelectorBase extends React.Component<Props, State> {
             getPillClassName,
             getPillImageUrl,
             inputProps,
+            isInputDisabled,
+            isInputFocusedNextLine,
             onInput,
             onRemove,
             onSuggestedPillAdd,
@@ -284,8 +290,10 @@ class PillSelectorBase extends React.Component<Props, State> {
                         {...rest}
                         {...inputProps}
                         autoComplete="off"
-                        className={classNames('bdl-PillSelector-input', 'pill-selector-input', className)}
-                        disabled={disabled}
+                        className={classNames('bdl-PillSelector-input', 'pill-selector-input', className, {
+                            'bdl-PillSelector-input--nextLine': isInputFocusedNextLine,
+                        })}
+                        disabled={disabled || isInputDisabled}
                         onInput={onInput}
                         placeholder={this.getNumSelected() === 0 ? placeholder : ''}
                         ref={input => {

package/src/components/pill-selector-dropdown/PillSelector.scss CHANGED Viewed

@@ -50,6 +50,10 @@
             border-color: $primary-color;
             outline: 0;
             box-shadow: none;
+            .bdl-PillSelector-input--nextLine {
+                flex: 1 1 100%;
+            }
         }
         &.show-error {

package/src/components/pill-selector-dropdown/PillSelectorDropdown.stories.js CHANGED Viewed

@@ -322,7 +322,7 @@ export const customPillStyles = () => {
 };
 export default {
-    title: 'Components|PillSelectorDropdown',
+    title: 'Components/PillSelectorDropdown',
     component: PillSelectorDropdown,
     parameters: {
         notes,

package/src/components/pill-selector-dropdown/__tests__/PillSelector.test.js CHANGED Viewed

@@ -41,6 +41,13 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
             expect(wrapper).toMatchSnapshot();
         });
+        test('should render with disabled input', () => {
+            const wrapper = shallow(<PillSelector isInputDisabled onInput={onInputStub} onRemove={onRemoveStub} />);
+            const input = wrapper.find('textarea');
+            expect(input.prop('disabled')).toBe(true);
+        });
         test('should add is-focused class when input is focused', () => {
             const wrapper = shallow(<PillSelector onInput={onInputStub} onRemove={onRemoveStub} />);
             wrapper.setState({ isFocused: true });
@@ -55,6 +62,20 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
             expect(wrapper.find('.is-focused').length).toBe(0);
         });
+        test('should add bdl-PillSelector-input--nextLine class when prop is set to true', () => {
+            const wrapper = shallow(
+                <PillSelector onInput={onInputStub} onRemove={onRemoveStub} isInputFocusedNextLine />,
+            );
+            expect(wrapper.find('.bdl-PillSelector-input--nextLine').length).toBe(1);
+        });
+        test('should not add bdl-PillSelector-input--nextLine class when prop is not given', () => {
+            const wrapper = shallow(<PillSelector onInput={onInputStub} onRemove={onRemoveStub} />);
+            expect(wrapper.find('.bdl-PillSelector-input--nextLine').length).toBe(0);
+        });
         test('should add show-error class when error is given', () => {
             const wrapper = shallow(<PillSelector error="hello" onInput={onInputStub} onRemove={onRemoveStub} />);

package/src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelector.test.js.snap CHANGED Viewed

@@ -35,7 +35,7 @@ exports[`components/pill-selector-dropdown/PillSelector render() should render d
       placeholder=""
     />
     <SuggestedPillsRow
-      selectedPillsValues={Array []}
+      selectedPillsValues={[]}
     />
     <span
       className="accessibility-hidden"

package/src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelectorDropdown.test.js.snap CHANGED Viewed

@@ -20,7 +20,7 @@ exports[`components/pill-selector-dropdown/PillSelectorDropdown render() should
       onPaste={[Function]}
       onRemove={[MockFunction]}
       placeholder=""
-      selectedOptions={Array []}
+      selectedOptions={[]}
       validator={[Function]}
       value=""
     />

package/src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelectorDropdownField.test.js.snap CHANGED Viewed

@@ -7,7 +7,7 @@ exports[`components/pill-selector-dropdown/PillSelectorDropdownField should rend
   disabled={false}
   error={null}
   inputProps={
-    Object {
+    {
       "name": undefined,
     }
   }
@@ -19,18 +19,18 @@ exports[`components/pill-selector-dropdown/PillSelectorDropdownField should rend
   onSelect={[Function]}
   parseItems={[Function]}
   placeholder=""
-  selectedOptions={Array []}
+  selectedOptions={[]}
   selectorOptions={
-    Array [
-      Object {
+    [
+      {
         "displayText": "value1",
         "value": "value1",
       },
-      Object {
+      {
         "displayText": "value2",
         "value": "value2",
       },
-      Object {
+      {
         "displayText": "value3",
         "value": "value3",
       },
@@ -65,7 +65,7 @@ exports[`components/pill-selector-dropdown/PillSelectorDropdownField should rend
   disabled={false}
   error={null}
   inputProps={
-    Object {
+    {
       "name": undefined,
     }
   }
@@ -77,8 +77,8 @@ exports[`components/pill-selector-dropdown/PillSelectorDropdownField should rend
   onSelect={[Function]}
   parseItems={[Function]}
   placeholder=""
-  selectedOptions={Array []}
-  selectorOptions={Array []}
+  selectedOptions={[]}
+  selectorOptions={[]}
   shouldClearUnmatchedInput={false}
   shouldSetActiveItemOnOpen={true}
   validator={[Function]}
@@ -92,7 +92,7 @@ exports[`components/pill-selector-dropdown/PillSelectorDropdownField should rend
   disabled={false}
   error="error"
   inputProps={
-    Object {
+    {
       "name": "pill",
     }
   }
@@ -104,8 +104,8 @@ exports[`components/pill-selector-dropdown/PillSelectorDropdownField should rend
   onSelect={[Function]}
   parseItems={[Function]}
   placeholder=""
-  selectedOptions={Array []}
-  selectorOptions={Array []}
+  selectedOptions={[]}
+  selectorOptions={[]}
   shouldClearUnmatchedInput={false}
   shouldSetActiveItemOnOpen={true}
   validator={[Function]}

package/src/components/pill-selector-dropdown/__tests__/__snapshots__/defaultDropdownRenderer.test.js.snap CHANGED Viewed

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 exports[`components/pill-selector-dropdown/defaultDropdownRenderer should render a list of data list items 1`] = `
-Array [
+[
   <DatalistItem>
     value1
   </DatalistItem>,

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

@@ -109,7 +109,7 @@ export const fixingMargins = () => (
 );
 export default {
-    title: 'Components|Buttons/PlainButton',
+    title: 'Components/Buttons/PlainButton',
     component: PlainButton,
     parameters: {
         notes,

package/src/components/plain-button/__tests__/__snapshots__/PlainButton.test.tsx.snap CHANGED Viewed

@@ -14,11 +14,11 @@ exports[`components/plain-button/PlainButton should render component correctly a
   className="btn-plain "
   onClick={
     [MockFunction] {
-      "calls": Array [
-        Array [],
+      "calls": [
+        [],
       ],
-      "results": Array [
-        Object {
+      "results": [
+        {
           "type": "return",
           "value": undefined,
         },

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

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

package/src/components/radar/RadarAnimation.stories.tsx CHANGED Viewed

@@ -64,7 +64,7 @@ export const withOffset = () => (
 );
 export default {
-    title: 'Components|RadarAnimation',
+    title: 'Components/RadarAnimation',
     component: RadarAnimation,
     parameters: {
         notes,