box-ui-elements 15.0.0-beta.7 → 15.0.0

package/src/features/pagination/__tests__/__snapshots__/MarkerBasedPagination.test.js.snap

@@ -77,7 +77,6 @@ exports[`elements/Pagination/MarkerBasedPagination should render properly with o
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  onKeyDown={[Function]}
                   onMouseEnter={[Function]}
                   onMouseLeave={[Function]}
                   showRadar={false}
@@ -89,7 +88,6 @@ exports[`elements/Pagination/MarkerBasedPagination should render properly with o
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                     tabIndex="0"
@@ -326,7 +324,6 @@ exports[`elements/Pagination/MarkerBasedPagination should render properly with o
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  onKeyDown={[Function]}
                   onMouseEnter={[Function]}
                   onMouseLeave={[Function]}
                   showRadar={false}
@@ -338,7 +335,6 @@ exports[`elements/Pagination/MarkerBasedPagination should render properly with o
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                     tabIndex="0"
@@ -457,7 +453,6 @@ exports[`elements/Pagination/MarkerBasedPagination should render properly with o
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  onKeyDown={[Function]}
                   onMouseEnter={[Function]}
                   onMouseLeave={[Function]}
                   showRadar={false}
@@ -469,7 +464,6 @@ exports[`elements/Pagination/MarkerBasedPagination should render properly with o
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                     tabIndex="0"
@@ -560,7 +554,6 @@ exports[`elements/Pagination/MarkerBasedPagination should render properly with o
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  onKeyDown={[Function]}
                   onMouseEnter={[Function]}
                   onMouseLeave={[Function]}
                   showRadar={false}
@@ -572,7 +565,6 @@ exports[`elements/Pagination/MarkerBasedPagination should render properly with o
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                     tabIndex="0"

package/src/features/pagination/__tests__/__snapshots__/OffsetBasedPagination.test.js.snap

@@ -207,7 +207,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  onKeyDown={[Function]}
                   onMouseEnter={[Function]}
                   onMouseLeave={[Function]}
                   showRadar={false}
@@ -219,7 +218,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                     tabIndex="0"
@@ -476,7 +474,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  onKeyDown={[Function]}
                   onMouseEnter={[Function]}
                   onMouseLeave={[Function]}
                   showRadar={false}
@@ -488,7 +485,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                     tabIndex="0"
@@ -745,7 +741,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  onKeyDown={[Function]}
                   onMouseEnter={[Function]}
                   onMouseLeave={[Function]}
                   showRadar={false}
@@ -757,7 +752,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                     tabIndex="0"
@@ -955,7 +949,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  onKeyDown={[Function]}
                   onMouseEnter={[Function]}
                   onMouseLeave={[Function]}
                   showRadar={false}
@@ -967,7 +960,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                     tabIndex="0"
@@ -1058,7 +1050,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  onKeyDown={[Function]}
                   onMouseEnter={[Function]}
                   onMouseLeave={[Function]}
                   showRadar={false}
@@ -1070,7 +1061,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                     tabIndex="0"
@@ -1268,7 +1258,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  onKeyDown={[Function]}
                   onMouseEnter={[Function]}
                   onMouseLeave={[Function]}
                   showRadar={false}
@@ -1280,7 +1269,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                     tabIndex="0"
@@ -1371,7 +1359,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  onKeyDown={[Function]}
                   onMouseEnter={[Function]}
                   onMouseLeave={[Function]}
                   showRadar={false}
@@ -1383,7 +1370,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                     tabIndex="0"
@@ -1581,7 +1567,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
-                  onKeyDown={[Function]}
                   onMouseEnter={[Function]}
                   onMouseLeave={[Function]}
                   showRadar={false}
@@ -1593,7 +1578,6 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
-                    onKeyDown={[Function]}
                     onMouseEnter={[Function]}
                     onMouseLeave={[Function]}
                     tabIndex="0"

package/src/features/presence/PresenceCollaborator.js

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import isEmpty from 'lodash/isEmpty';
+import PropTypes from 'prop-types';
+import { FormattedMessage, injectIntl } from 'react-intl';
+
+import Link from '../../components/link/LinkBase';
+import messages from './messages';
+import PresenceAvatar from './PresenceAvatar';
+import { determineInteractionMessage } from './utils/presenceUtils';
+
+import './PresenceCollaborator.scss';
+
+export const renderTimestampMessage = (interactedAt, interactionType, intl) => {
+    const lastActionMessage = determineInteractionMessage(interactionType, interactedAt);
+    const timeAgo = intl.formatRelativeTime
+        ? intl.formatRelativeTime(interactedAt - Date.now())
+        : intl.formatRelative(interactedAt);
+
+    if (lastActionMessage) {
+        return (
+            <FormattedMessage
+                {...lastActionMessage}
+                values={{
+                    timeAgo,
+                }}
+            />
+        );
+    }
+    return null;
+};
+
+const PresenceCollaborator = ({ collaborator, intl, ...props }) => {
+    const { avatarUrl, id, interactedAt, interactionType, isActive, name, profileUrl } = collaborator;
+
+    return (
+        <div className="bdl-PresenceCollaborator" {...props}>
+            <PresenceAvatar avatarUrl={avatarUrl} id={id} isActive={isActive} isDropDownAvatar name={name} />
+            <div className="bdl-PresenceCollaborator-info-container">
+                <div className="bdl-PresenceCollaborator-info-name">
+                    {isEmpty(profileUrl) ? (
+                        <span>{name}</span>
+                    ) : (
+                        <Link href={profileUrl} target="_blank">
+                            {name}
+                        </Link>
+                    )}
+                </div>
+                <div className="bdl-PresenceCollaborator-info-time">
+                    {isActive ? (
+                        <FormattedMessage {...messages.activeNowText} />
+                    ) : (
+                        renderTimestampMessage(interactedAt, interactionType, intl)
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+PresenceCollaborator.propTypes = {
+    collaborator: PropTypes.shape({
+        /** Url to avatar image. If passed in, component will render the avatar image instead of the initials */
+        avatarUrl: PropTypes.string,
+        /** Users id */
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        isActive: PropTypes.bool,
+        /** Unix timestamp of when the user last interacted with the document */
+        interactedAt: PropTypes.number,
+        /** The type of interaction by the user */
+        interactionType: PropTypes.string,
+        /** User's full name */
+        name: PropTypes.string.isRequired,
+        /** Custom Profile URL */
+        profileUrl: PropTypes.string,
+    }).isRequired,
+    /* Intl object */
+    intl: PropTypes.any,
+};
+
+export { PresenceCollaborator as PresenceCollaboratorComponent };
+export default injectIntl(PresenceCollaborator);

package/src/features/presence/PresenceCollaborator.scss

@@ -0,0 +1,28 @@
+@import './styles';
+
+.bdl-PresenceCollaborator-info-container {
+    display: inline-block;
+    margin-left: 10px;
+}
+
+.bdl-PresenceCollaborator-info-name {
+    width: 180px;
+    overflow: hidden;
+    color: $bdl-gray;
+    font-size: 13px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    a {
+        color: $bdl-gray;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+.bdl-PresenceCollaborator-info-time {
+    color: $bdl-gray-62;
+    font-size: 12px;
+}

package/src/features/presence/PresenceCollaboratorsList.js

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import classnames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import { FormattedMessage, injectIntl } from 'react-intl';
+
 import Button from '../../components/button';
-import Link from '../../components/link/LinkBase';
+import PresenceCollaborator from './PresenceCollaborator';
 import messages from './messages';
-import PresenceAvatar from './PresenceAvatar';
-import { determineInteractionMessage } from './utils/presenceUtils';
+
 import './PresenceCollaboratorsList.scss';
 
 class PresenceCollaboratorsList extends React.Component<Props> {
@@ -96,57 +95,6 @@ class PresenceCollaboratorsList extends React.Component<Props> {
         </div>
     );
 
-    renderTimestampMessage = (interactedAt, interactionType) => {
-        const lastActionMessage = determineInteractionMessage(interactionType, interactedAt);
-        const { intl } = this.props;
-        const timeAgo = intl.formatRelativeTime
-            ? intl.formatRelativeTime(interactedAt - Date.now())
-            : intl.formatRelative(interactedAt);
-
-        if (lastActionMessage) {
-            return (
-                <FormattedMessage
-                    {...lastActionMessage}
-                    values={{
-                        timeAgo,
-                    }}
-                />
-            );
-        }
-        return null;
-    };
-
-    renderCollabList = () => {
-        const { collaborators } = this.props;
-        return collaborators.map(collaborator => {
-            const { avatarUrl, id, isActive, interactedAt, interactionType, name, profileUrl } = collaborator;
-
-            return (
-                <div key={id} className="bdl-PresenceCollaboratorsList-item" role="listitem">
-                    <PresenceAvatar avatarUrl={avatarUrl} id={id} isActive={isActive} isDropDownAvatar name={name} />
-                    <div className="bdl-PresenceCollaboratorsList-item-info-container">
-                        <div className="bdl-PresenceCollaboratorsList-item-info-name">
-                            {isEmpty(profileUrl) ? (
-                                <span>{name}</span>
-                            ) : (
-                                <Link href={profileUrl} target="_blank">
-                                    {name}
-                                </Link>
-                            )}
-                        </div>
-                        <div className="bdl-PresenceCollaboratorsList-item-info-time">
-                            {isActive ? (
-                                <FormattedMessage {...messages.activeNowText} />
-                            ) : (
-                                this.renderTimestampMessage(interactedAt, interactionType)
-                            )}
-                        </div>
-                    </div>
-                </div>
-            );
-        });
-    };
-
     renderActions = () => {
         const { getLinkCallback, inviteCallback } = this.props;
 
@@ -172,7 +120,7 @@ class PresenceCollaboratorsList extends React.Component<Props> {
 
     render() {
         const { isScrollableAbove, isScrollableBelow } = this.state;
-        const { getLinkCallback, inviteCallback } = this.props;
+        const { collaborators, getLinkCallback, inviteCallback } = this.props;
         const buttonsPresent = getLinkCallback || inviteCallback;
 
         const dropdownListClasses = classnames('bdl-PresenceCollaboratorsList-list', {
@@ -183,7 +131,6 @@ class PresenceCollaboratorsList extends React.Component<Props> {
         });
 
         const title = this.renderTitle();
-        const collabList = this.renderCollabList();
         const actions = this.renderActions();
 
         return (
@@ -197,7 +144,9 @@ class PresenceCollaboratorsList extends React.Component<Props> {
                     onScroll={this.throttledHandleScroll}
                     role="list"
                 >
-                    {collabList}
+                    {collaborators.map(collaborator => (
+                        <PresenceCollaborator collaborator={collaborator} key={collaborator.id} role="listitem" />
+                    ))}
                 </div>
                 {actions}
             </div>

package/src/features/presence/PresenceCollaboratorsList.scss

@@ -77,52 +77,25 @@
     /* end GROWTH-382 */
 }
 
-.bdl-PresenceCollaboratorsList-title {
-    margin-top: 0;
-    margin-bottom: 10px;
-    color: $bdl-gray;
-    font-size: 15px;
-}
-
-.bdl-PresenceCollaboratorsList-item {
+.bdl-PresenceCollaborator {
     display: flex;
     align-items: center;
     margin-top: 10px;
 }
 
-.bdl-PresenceCollaboratorsList-item-info-container {
-    display: inline-block;
-    margin-left: 10px;
-}
-
-.bdl-PresenceCollaboratorsList-item-info-name {
-    width: 180px;
-    overflow: hidden;
-    color: $bdl-gray;
-    font-size: 13px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    a {
-        color: $bdl-gray;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-}
-
-.bdl-PresenceCollaboratorsList-item-info-time {
-    color: $bdl-gray-62;
-    font-size: 12px;
-}
-
 .bdl-PresenceCollaboratorsList-list {
     max-height: 200px;
     overflow-x: hidden;
     overflow-y: auto;
 }
 
+.bdl-PresenceCollaboratorsList-title {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: $bdl-gray;
+    font-size: 15px;
+}
+
 .bdl-PresenceCollaboratorsList-actions {
     display: flex;
     justify-content: flex-end;

package/src/features/presence/__tests__/PresenceCollaborator.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { createIntl } from 'react-intl';
+import { PresenceCollaboratorComponent as PresenceCollaborator, renderTimestampMessage } from '../PresenceCollaborator';
+
+const intl = createIntl({});
+
+describe('features/presence/PresenceCollaborator', () => {
+    describe('renderTimestampMessage()', () => {
+        test('should return null when interactionType is an unkown type', () => {
+            const res = renderTimestampMessage(123, 'test1234', intl);
+            expect(res).toEqual(null);
+        });
+
+        test('should not return null when interactionType is a known type', () => {
+            const res = renderTimestampMessage(123, 'user.item_preview', intl);
+            expect(res).not.toEqual(null);
+        });
+    });
+
+    describe('render()', () => {
+        test('should correctly render a collaborator', () => {
+            const collaborator = {
+                avatarUrl: '',
+                id: '1',
+                isActive: false,
+                interactedAt: 999,
+                interactionType: 'user.item_preview',
+                name: 'e',
+            };
+
+            const wrapper = shallow(<PresenceCollaborator collaborator={collaborator} intl={intl} />);
+
+            expect(wrapper.find('.bdl-PresenceCollaborator').length).toBe(1);
+        });
+    });
+});

package/src/features/presence/__tests__/PresenceCollaboratorsList.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createIntl } from 'react-intl';
 import collaboratorList from '../__mocks__/collaborators';
+import PresenceCollaborator from '../PresenceCollaborator';
 import { PresenceCollaboratorsListComponent as PresenceCollaboratorsList } from '../PresenceCollaboratorsList';
 
 const intl = createIntl({});
@@ -132,68 +133,23 @@ describe('features/presence/PresenceCollaboratorsList', () => {
         });
     });
 
-    describe('renderTimestampMessage()', () => {
-        test('should return null when interactionType is an unkown type', () => {
-            const wrapper = shallow(<PresenceCollaboratorsList intl={intl} collaborators={collaboratorList} />, {
-                disableLifecycleMethods: true,
-            });
-            const instance = wrapper.instance();
-            const res = instance.renderTimestampMessage(123, 'test1234');
-            expect(res).toEqual(null);
-        });
-
-        test('should not return null when interactionType is a known type', () => {
-            const wrapper = shallow(<PresenceCollaboratorsList intl={intl} collaborators={collaboratorList} />, {
-                disableLifecycleMethods: true,
-            });
-            const instance = wrapper.instance();
-            const res = instance.renderTimestampMessage(123, 'user.item_preview');
-            expect(res).not.toEqual(null);
-        });
-    });
-
     describe('render()', () => {
-        test('should correctly render an empty PresenceCollaboratorsList', () => {
-            const collaborators = [];
-
-            const wrapper = shallow(<PresenceCollaboratorsList intl={intl} collaborators={collaborators} />, {
-                disableLifecycleMethods: true,
-            });
+        const wrapper = shallow(
+            <PresenceCollaboratorsList
+                intl={intl}
+                collaborators={collaboratorList}
+                getLinkCallback={() => {}}
+                inviteCallback={() => {}}
+            />,
+            { disableLifecycleMethods: true },
+        );
 
-            const instance = wrapper.instance();
-
-            const calculateOverflowSpy = jest.fn().mockReturnValue({
-                isScrollableBelow: false,
-                isScrollableAbove: false,
-            });
-            instance.calculateOverflow = calculateOverflowSpy;
-
-            expect(wrapper.find('.bdl-PresenceCollaboratorsList-list').length).toBe(1);
-            expect(wrapper.find('.bdl-PresenceCollaboratorsList-item').length).toBe(0);
-            expect(wrapper.find('.bdl-PresenceCollaboratorsList-actions').length).toBe(0);
+        test('should correctly render dropdownActions', () => {
+            expect(wrapper.find('.bdl-PresenceCollaboratorsList-actions').length).toBe(1);
         });
 
         test('should correctly render collaborators', () => {
-            const wrapper = shallow(<PresenceCollaboratorsList intl={intl} collaborators={collaboratorList} />, {
-                disableLifecycleMethods: true,
-            });
-
-            expect(wrapper.find('.bdl-PresenceCollaboratorsList-list').length).toBe(1);
-            expect(wrapper.find('.bdl-PresenceCollaboratorsList-item').length).toBe(5);
-        });
-
-        test('should correctly render dropdownActions', () => {
-            const wrapper = shallow(
-                <PresenceCollaboratorsList
-                    intl={intl}
-                    collaborators={collaboratorList}
-                    getLinkCallback={() => {}}
-                    inviteCallback={() => {}}
-                />,
-                { disableLifecycleMethods: true },
-            );
-
-            expect(wrapper.find('.bdl-PresenceCollaboratorsList-actions').length).toBe(1);
+            expect(wrapper.find(PresenceCollaborator)).toHaveLength(5);
         });
     });
 });

package/src/features/presence/__tests__/__snapshots__/Presence.test.js.snap

@@ -8,6 +8,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   onClose={[Function]}
   onOpen={[Function]}
@@ -131,6 +132,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   onClose={[Function]}
   onOpen={[Function]}
@@ -254,6 +256,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   onClose={[Function]}
   onOpen={[Function]}
@@ -300,6 +303,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   onClose={[Function]}
   onOpen={[Function]}
@@ -432,6 +436,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={true}
   onClose={[Function]}
   onOpen={[Function]}

package/src/features/presence/__tests__/__snapshots__/PresenceLink.test.js.snap

@@ -8,6 +8,7 @@ exports[`features/presence/PresenceLink render() should change the flyoutPositio
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   openOnHover={false}
   openOnHoverDelayTimeout={300}
@@ -91,6 +92,7 @@ exports[`features/presence/PresenceLink render() should correctly render collabo
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   openOnHover={false}
   openOnHoverDelayTimeout={300}
@@ -175,6 +177,7 @@ exports[`features/presence/PresenceLink render() should pass through additional
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   openOnHover={false}
   openOnHoverDelayTimeout={300}

package/src/features/query-bar/__tests__/__snapshots__/ColumnButton.test.js.snap

@@ -8,6 +8,7 @@ exports[`features/query-bar/components/ColumnButton render should render ColumnB
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   onClose={[Function]}
   onOpen={[Function]}
@@ -50,6 +51,7 @@ exports[`features/query-bar/components/ColumnButton render should render ColumnB
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   onClose={[Function]}
   onOpen={[Function]}
@@ -114,6 +116,7 @@ exports[`features/query-bar/components/ColumnButton render should render ColumnB
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   onClose={[Function]}
   onOpen={[Function]}