feat(content-explorer): update breadcrumb style and comments

box · Feb 7, 2025 · 35abcab · 35abcab
1 parent b594e9e
commit 35abcab
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 21 deletions.
diff --git a/i18n/en-US.properties b/i18n/en-US.properties
@@ -86,6 +86,8 @@ be.boxEditBlacklistedError = This file cannot be opened locally
 be.boxEditErrorBlockedByPolicy = Local editing of this content has been disabled based on an access policy
 # Message shown telling user how to install Box Tools
 be.boxToolsInstallMessage = Install {boxTools} to open this file on your desktop
+# Aria label for describing "breadcrumb"
+be.breadcrumb.breadcrumbLabel = Breadcrumb
 # Label for cancel action.
 be.cancel = Cancel
 # Label for choose action.

diff --git a/src/components/grid-view/GridViewSlider.js b/src/components/grid-view/GridViewSlider.js
@@ -41,5 +41,4 @@ const GridViewSlider = ({ columnCount, gridMaxColumns, gridMinColumns, maxColumn
     );
 };
 
-export { GridViewSlider as GridViewSliderBase };
 export default GridViewSlider;
diff --git a/src/components/grid-view/__tests__/GridViewSlider.test.js b/src/components/grid-view/__tests__/GridViewSlider.test.js
@@ -1,21 +1,10 @@
 import * as React from 'react';
 
-import { GridViewSliderBase as GridViewSlider } from '../GridViewSlider';
-
-const intl = {
-    formatMessage: message => message.defaultMessage,
-};
+import GridViewSlider from '../GridViewSlider';
 
 const getWrapper = () =>
     shallow(
-        <GridViewSlider
-            columnCount={4}
-            gridMaxColumns={7}
-            gridMinColumns={2}
-            intl={intl}
-            maxColumnCount={4}
-            onChange={() => {}}
-        />,
+        <GridViewSlider columnCount={4} gridMaxColumns={7} gridMinColumns={2} maxColumnCount={4} onChange={() => {}} />,
     );
 
 describe('components/grid-view/GridViewSlider', () => {

diff --git a/src/elements/common/breadcrumbs/Breadcrumb.scss b/src/elements/common/breadcrumbs/Breadcrumb.scss
@@ -21,4 +21,8 @@
     color: var(--text-text-on-light);
     white-space: nowrap;
     text-overflow: ellipsis;
+
+    &:not(:last-child) {
+        color: var(--text-text-on-light-tertiary);
+    }
 }
diff --git a/src/elements/common/breadcrumbs/BreadcrumbDelimiter.js b/src/elements/common/breadcrumbs/BreadcrumbDelimiter.js
@@ -6,9 +6,9 @@
 
 import * as React from 'react';
 import { PointerChevronRight } from '@box/blueprint-web-assets/icons/Fill';
-import { Size3 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Gray50, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
 import type { Delimiter } from '../../../common/types/core';
-import { DELIMITER_CARET, COLOR_999 } from '../../../constants';
+import { DELIMITER_CARET } from '../../../constants';
 
 type Props = {
     delimiter?: Delimiter,
@@ -18,7 +18,7 @@ const BreadcrumbDelimiter = ({ delimiter }: Props) =>
     delimiter === DELIMITER_CARET ? (
         <PointerChevronRight
             className="be-breadcrumb-seperator"
-            color={COLOR_999}
+            color={Gray50}
             height={Size3}
             role="presentation"
             width={Size3}

diff --git a/src/elements/common/breadcrumbs/BreadcrumbDropdown.js b/src/elements/common/breadcrumbs/BreadcrumbDropdown.js
@@ -9,6 +9,8 @@ import { DropdownMenu, IconButton } from '@box/blueprint-web';
 import { Ellipsis } from '@box/blueprint-web-assets/icons/Fill';
 import type { Crumb } from '../../../common/types/core';
 
+import messages from '../messages';
+
 type Props = {
     className: string,
     crumbs: Crumb[],
@@ -18,7 +20,7 @@ type Props = {
 const BreadcrumbDropdown = ({ crumbs, onCrumbClick }: Props) => (
     <DropdownMenu.Root>
         <DropdownMenu.Trigger>
-            <IconButton icon={Ellipsis} />
+            <IconButton aria-label={messages.breadcrumbLabel.defaultMessage} icon={Ellipsis} />
         </DropdownMenu.Trigger>
         <DropdownMenu.Content>
             {crumbs.map(({ id, name }: Crumb) => (

diff --git a/src/elements/common/breadcrumbs/Breadcrumbs.js b/src/elements/common/breadcrumbs/Breadcrumbs.js
@@ -110,5 +110,4 @@ const Breadcrumbs = ({ rootId, crumbs, onCrumbClick, delimiter, isSmall = false
     );
 };
 
-export { Breadcrumbs as BreadcrumbsBase };
 export default Breadcrumbs;
diff --git a/src/elements/common/breadcrumbs/__tests__/Breadcrumbs.test.js b/src/elements/common/breadcrumbs/__tests__/Breadcrumbs.test.js
@@ -1,9 +1,9 @@
 // @flow
 import { shallow } from 'enzyme';
-import { BreadcrumbsBase } from '../Breadcrumbs';
+import Breadcrumbs from '../Breadcrumbs';
 
 describe('Breadcrumbs', () => {
-    const getWrapper = (props = {}) => shallow(BreadcrumbsBase(props));
+    const getWrapper = (props = {}) => shallow(Breadcrumbs(props));
 
     test('should render "All Files" breadcrumb in localized string', () => {
         const crumbs = [{ id: '0', name: 'All Files' }];

diff --git a/src/elements/common/messages.js b/src/elements/common/messages.js
@@ -682,6 +682,11 @@ const messages = defineMessages({
         description: 'Message shown when folder items are still fetching.',
         defaultMessage: 'Please wait while the items load...',
     },
+    breadcrumbLabel: {
+        id: 'be.breadcrumb.breadcrumbLabel',
+        description: 'Aria label for describing "breadcrumb"',
+        defaultMessage: 'Breadcrumb',
+    },
     errorBreadcrumb: {
         id: 'be.errorBreadcrumb',
         description: 'Default label for signifying error in the sub header.',
-Original file line number
+Diff line change
@@ Expand Up @@
         );
     };
-    export { GridViewSlider as GridViewSliderBase };
     export default GridViewSlider;