feat(content-explorer): migrate subheader to pageheader

i18n/en-US.properties

@@ -472,8 +472,6 @@ be.folderState = There are no items in this folder.
 be.getVersionInfo = Get version information
 # Label for switching to grid view
 be.gridView = Switch to Grid View
-# Label for the size of columns in grid view
-be.gridView.columnSize = Column size
 # Label for decreasing the size of columns in grid view
 be.gridView.decreaseColumnSize = Decrease column size
 # Label for increasing the size of columns in grid view

src/components/grid-view/GridViewSlider.js

@@ -1,25 +1,22 @@
 // @flow
 import * as React from 'react';
-import { injectIntl } from 'react-intl';
-import type { IntlShape } from 'react-intl';
-import IconPlusThin from '../../icons/general/IconPlusThin';
-import IconMinusThin from '../../icons/general/IconMinusThin';
-import PlainButton from '../plain-button/PlainButton';
-import messages from '../../elements/common/messages';
-import { bdlGray50 } from '../../styles/variables';
+import { useIntl } from 'react-intl';
+import { Slider } from '@box/blueprint-web';
+
 import './GridViewSlider.scss';
 
+import messages from '../../elements/common/messages';
+
 type Props = {
     columnCount: number,
     gridMaxColumns: number,
     gridMinColumns: number,
-    intl: IntlShape,
     maxColumnCount: number,
     onChange: (newSliderValue: number) => void,
 };
 
-const GridViewSlider = ({ columnCount, gridMaxColumns, gridMinColumns, intl, maxColumnCount, onChange }: Props) => {
-    const { formatMessage } = intl;
+const GridViewSlider = ({ columnCount, gridMaxColumns, gridMinColumns, maxColumnCount, onChange }: Props) => {
+    const { formatMessage } = useIntl();
     const RANGE_STEP = 1;
 
     // This math is necessary since the highest value of the slider should result in
@@ -30,43 +27,21 @@ const GridViewSlider = ({ columnCount, gridMaxColumns, gridMinColumns, intl, max
 
     return (
         gridMinColumns < maxColumnCount && (
-            <div className="bdl-GridViewSlider">
-                <PlainButton
-                    className="bdl-GridViewSlider-button"
-                    onClick={() => {
-                        onChange(Math.max(RANGE_MIN, sliderValue - RANGE_STEP));
-                    }}
-                    type="button"
-                    aria-label={formatMessage(messages.gridViewDecreaseColumnSize)}
-                >
-                    <IconMinusThin color={bdlGray50} width={14} height={14} />
-                </PlainButton>
-                <input
-                    aria-label={formatMessage(messages.gridViewColumnSize)}
-                    className="bdl-GridViewSlider-range"
+            <div>
+                <Slider
+                    className="bdl-GridViewSlider"
                     max={RANGE_MAX}
                     min={RANGE_MIN}
-                    onChange={event => {
-                        onChange(event.currentTarget.valueAsNumber);
-                    }}
+                    minusButtonLabel={formatMessage(messages.gridViewDecreaseColumnSize)}
+                    onValueChange={onChange}
+                    plusButtonLabel={formatMessage(messages.gridViewIncreaseColumnSize)}
                     step={RANGE_STEP}
-                    type="range"
                     value={sliderValue}
                 />
-                <PlainButton
-                    className="bdl-GridViewSlider-button"
-                    onClick={() => {
-                        onChange(Math.min(RANGE_MAX, sliderValue + RANGE_STEP));
-                    }}
-                    type="button"
-                    aria-label={formatMessage(messages.gridViewIncreaseColumnSize)}
-                >
-                    <IconPlusThin color={bdlGray50} width={14} height={14} />
-                </PlainButton>
             </div>
         )
     );
 };
 
 export { GridViewSlider as GridViewSliderBase };
-export default injectIntl(GridViewSlider);
+export default GridViewSlider;

src/components/grid-view/GridViewSlider.scss

@@ -1,85 +1,5 @@
 @import '../../styles/variables';
 
 .bdl-GridViewSlider {
-    display: flex;
-    margin-right: 5px;
-}
-
-// mixins required since vendor prefixes cannot be mixed in a selector
-@mixin bdl-GridViewSlider-track {
-    height: 2px;
-    background: $bdl-gray-10;
-    border: none;
-    border-radius: 2px;
-}
-
-@mixin bdl-GridViewSlider-thumb {
-    width: 10px;
-    height: 10px;
-    background: $bdl-gray-80;
-    border: none;
-    border-radius: 50%;
-}
-
-.bdl-GridViewSlider-range {
-    margin-right: 7px;
-    margin-left: 7px;
-
-    /* fix for FF unable to apply focus style bug */
-    cursor: pointer;
-    appearance: none;
-
-    &::-webkit-slider-runnable-track {
-        @include bdl-GridViewSlider-track;
-    }
-
-    &::-webkit-slider-thumb {
-        @include bdl-GridViewSlider-thumb;
-
-        width: 10px;
-        margin-top: -4px;
-        appearance: none;
-    }
-
-    &::-moz-range-track {
-        @include bdl-GridViewSlider-track;
-    }
-
-    &::-moz-range-thumb {
-        @include bdl-GridViewSlider-thumb;
-    }
-
-    &::-ms-track {
-        @include bdl-GridViewSlider-track;
-
-        color: transparent;
-    }
-
-    &::-ms-fill-lower {
-        background: $bdl-gray-10;
-        border-radius: 10px;
-    }
-
-    &::-ms-fill-upper {
-        background: $bdl-gray-10;
-        border-radius: 10px;
-    }
-
-    &::-ms-thumb {
-        @include bdl-GridViewSlider-thumb;
-    }
-
-    &:focus::-ms-fill-lower {
-        background: $bdl-gray-50;
-    }
-
-    &:focus::-ms-fill-upper {
-        background: $bdl-gray-20;
-    }
-}
-
-.bdl-GridViewSlider-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    width: 112px;
 }

src/components/grid-view/__tests__/GridViewSlider.test.js

@@ -23,21 +23,4 @@ describe('components/grid-view/GridViewSlider', () => {
         const wrapper = getWrapper();
         expect(wrapper).toMatchSnapshot();
     });
-
-    test('should use aria-label prop', () => {
-        const wrapper = getWrapper();
-        expect(wrapper.find('input').prop('aria-label')).toBe('Column size');
-        expect(
-            wrapper
-                .find('PlainButton')
-                .at(0)
-                .prop('aria-label'),
-        ).toBe('Decrease column size');
-        expect(
-            wrapper
-                .find('PlainButton')
-                .at(1)
-                .prop('aria-label'),
-        ).toBe('Increase column size');
-    });
 });

src/components/grid-view/__tests__/__snapshots__/GridViewSlider.test.js.snap

@@ -1,42 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/grid-view/GridViewSlider should render() 1`] = `
-<div
-  className="bdl-GridViewSlider"
->
-  <PlainButton
-    aria-label="Decrease column size"
-    className="bdl-GridViewSlider-button"
-    onClick={[Function]}
-    type="button"
-  >
-    <IconMinusThin
-      color="#909090"
-      height={14}
-      width={14}
-    />
-  </PlainButton>
-  <input
-    aria-label="Column size"
-    className="bdl-GridViewSlider-range"
+<div>
+  <SliderRoot
+    className="bdl-GridViewSlider"
     max={6}
     min={4}
-    onChange={[Function]}
+    minusButtonLabel="Decrease column size"
+    onValueChange={[Function]}
+    plusButtonLabel="Increase column size"
     step={1}
-    type="range"
     value={3}
   />
-  <PlainButton
-    aria-label="Increase column size"
-    className="bdl-GridViewSlider-button"
-    onClick={[Function]}
-    type="button"
-  >
-    <IconPlusThin
-      color="#909090"
-      height={14}
-      width={14}
-    />
-  </PlainButton>
 </div>
 `;

src/elements/common/breadcrumbs/Breadcrumb.js

@@ -5,9 +5,10 @@
  */
 
 import * as React from 'react';
-import PlainButton from '../../../components/plain-button/PlainButton';
+import { TextButton } from '@box/blueprint-web';
 import BreadcrumbDelimiter from './BreadcrumbDelimiter';
 import type { Delimiter } from '../../../common/types/core';
+
 import './Breadcrumb.scss';
 
 type Props = {
@@ -19,9 +20,9 @@ type Props = {
 
 const Breadcrumb = ({ name = '', onClick, isLast, delimiter }: Props) => {
     const title = onClick ? (
-        <PlainButton onClick={onClick} type="button" className="bdl-Breadcrumb-title">
+        <TextButton className="bdl-Breadcrumb-title" inheritFont onClick={onClick}>
             {name}
-        </PlainButton>
+        </TextButton>
     ) : (
         <div className="bdl-Breadcrumb-title">{name}</div>
     );

src/elements/common/breadcrumbs/Breadcrumb.scss

@@ -8,14 +8,6 @@
     &:only-child {
         min-width: 64px;
     }
-
-    .be & .btn-plain {
-        color: $bdl-gray-65;
-
-        &:last-child {
-            color: $bdl-gray;
-        }
-    }
 }
 
 .be-breadcrumb-seperator {
@@ -26,6 +18,7 @@
 .bdl-Breadcrumb-title {
     width: 100%;
     overflow: hidden;
+    color: var(--text-text-on-light);
     white-space: nowrap;
     text-overflow: ellipsis;
 }

src/elements/common/breadcrumbs/BreadcrumbDelimiter.js

@@ -5,17 +5,24 @@
  */
 
 import * as React from 'react';
-import IconChevron from '../../../icons/general/IconChevron';
-import { DELIMITER_CARET, COLOR_999 } from '../../../constants';
+import { PointerChevronRight } from '@box/blueprint-web-assets/icons/Fill';
+import { Size3 } from '@box/blueprint-web-assets/tokens/tokens';
 import type { Delimiter } from '../../../common/types/core';
+import { DELIMITER_CARET, COLOR_999 } from '../../../constants';
 
 type Props = {
     delimiter?: Delimiter,
 };
 
 const BreadcrumbDelimiter = ({ delimiter }: Props) =>
     delimiter === DELIMITER_CARET ? (
-        <IconChevron className="be-breadcrumb-seperator" color={COLOR_999} direction="right" size="7px" />
+        <PointerChevronRight
+            className="be-breadcrumb-seperator"
+            color={COLOR_999}
+            height={Size3}
+            role="presentation"
+            width={Size3}
+        />
     ) : (
         <span>/</span>
     );

src/elements/common/breadcrumbs/BreadcrumbDropdown.js

@@ -5,32 +5,29 @@
  */
 
 import * as React from 'react';
-import PlainButton from '../../../components/plain-button/PlainButton';
-import DropdownMenu from '../../../components/dropdown-menu/DropdownMenu';
-import Menu from '../../../components/menu/Menu';
-import MenuItem from '../../../components/menu/MenuItem';
+import { DropdownMenu, IconButton } from '@box/blueprint-web';
+import { Ellipsis } from '@box/blueprint-web-assets/icons/Fill';
 import type { Crumb } from '../../../common/types/core';
-import './BreadcrumbDropdown.scss';
 
 type Props = {
     className: string,
     crumbs: Crumb[],
     onCrumbClick: Function,
 };
 
-const BreadcrumbDropdown = ({ crumbs, onCrumbClick, className = '' }: Props) => (
-    <DropdownMenu constrainToScrollParent>
-        <PlainButton className={`be-breadcrumbs-drop-down ${className}`} type="button">
-            ···
-        </PlainButton>
-        <Menu>
+const BreadcrumbDropdown = ({ crumbs, onCrumbClick }: Props) => (
+    <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+            <IconButton icon={Ellipsis} />
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
             {crumbs.map(({ id, name }: Crumb) => (
-                <MenuItem key={id} onClick={() => onCrumbClick(id)}>
+                <DropdownMenu.Item key={id} onClick={() => onCrumbClick(id)}>
                     {name}
-                </MenuItem>
+                </DropdownMenu.Item>
             ))}
-        </Menu>
-    </DropdownMenu>
+        </DropdownMenu.Content>
+    </DropdownMenu.Root>
 );
 
 export default BreadcrumbDropdown;