From 065f61a39b45f90eaf9a1928bec35f58c8731eb6 Mon Sep 17 00:00:00 2001 From: Miki Date: Fri, 13 Sep 2024 14:30:58 -0700 Subject: [PATCH] Add methods to control the appearence of trailing and last breadcumbs in OuiSimplifiedBreadcrumbs Also: * Adjust alignments, colors, and separator in OuiSimplifiedBreadcrumbs * Add documentation for OuiSimplifiedBreadcrumbs * Add CSS breakpoints to OuiBreakpointSize Signed-off-by: Miki --- CHANGELOG.md | 1 + .../views/breadcrumbs/breadcrumbs_example.js | 54 ++++++- .../display_breadcrumbs_toggles.js | 148 ++++++++++++++++++ .../breadcrumbs/simplified_breadcrumbs.js | 82 ++++++++++ .../breadcrumbs/_breadcrumbs_simplified.scss | 85 ---------- src/components/breadcrumbs/_index.scss | 2 +- src/components/breadcrumbs/breadcrumbs.tsx | 2 + src/components/breadcrumbs/index.ts | 5 +- .../simplified_breadcrumbs/_index.scss | 6 + .../_simplified_breadcrumbs.scss | 87 ++++++++++ .../simplified_breadcrumbs/index.ts | 9 ++ .../simplified_breadcrumbs.test.tsx} | 4 +- .../simplified_breadcrumbs.tsx} | 99 +++++++----- src/services/breakpoint.test.ts | 48 +++++- src/services/breakpoint.ts | 4 +- 15 files changed, 500 insertions(+), 136 deletions(-) create mode 100644 src-docs/src/views/breadcrumbs/display_breadcrumbs_toggles.js create mode 100644 src-docs/src/views/breadcrumbs/simplified_breadcrumbs.js delete mode 100644 src/components/breadcrumbs/_breadcrumbs_simplified.scss create mode 100644 src/components/breadcrumbs/simplified_breadcrumbs/_index.scss create mode 100644 src/components/breadcrumbs/simplified_breadcrumbs/_simplified_breadcrumbs.scss create mode 100644 src/components/breadcrumbs/simplified_breadcrumbs/index.ts rename src/components/breadcrumbs/{breadcrumbs_simplified.test.tsx => simplified_breadcrumbs/simplified_breadcrumbs.test.tsx} (96%) rename src/components/breadcrumbs/{breadcrumbs_simplified.tsx => simplified_breadcrumbs/simplified_breadcrumbs.tsx} (74%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7ad211a9e5..9bb56bbcae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ - Fix `compressed` styling of OuiDatePickerRange ([#1380](https://github.com/opensearch-project/oui/pull/1380)) - Make OuiSearchBar consume a provided `className` ([#1381](https://github.com/opensearch-project/oui/pull/1381)) +- Adjust OuiSimplifiedBreadcrumbs alignment, colors, and tailing slash ([#1401](https://github.com/opensearch-project/oui/pull/1401)) ### 🚞 Infrastructure diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js index ed5a327a02..d290981748 100644 --- a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js +++ b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js @@ -16,7 +16,11 @@ import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; -import { OuiCode, OuiBreadcrumbs } from '../../../../src/components'; +import { + OuiCode, + OuiBreadcrumbs, + OuiSimplifiedBreadcrumbs, +} from '../../../../src/components'; import { BreadcrumbResponsiveMaxCount, BreadcrumbProps } from './props'; import Breadcrumbs from './breadcrumbs'; @@ -35,12 +39,22 @@ import Max from './max'; const maxSource = require('!!raw-loader!./max'); const maxHtml = renderToHtml(Max); -const breadcrumpProps = { +import Simplified from './simplified_breadcrumbs'; +const simplifiedSource = require('!!raw-loader!./simplified_breadcrumbs'); +const simplifiedHtml = renderToHtml(Simplified); + +const breadcrumbProps = { OuiBreadcrumbs, OuiBreadcrumb: BreadcrumbProps, OuiBreadcrumbResponsiveMaxCount: BreadcrumbResponsiveMaxCount, }; +const simplifiedProps = { + OuiSimplifiedBreadcrumbs, + OuiBreadcrumb: BreadcrumbProps, + OuiBreadcrumbResponsiveMaxCount: BreadcrumbResponsiveMaxCount, +}; + export const BreadcrumbsExample = { title: 'Breadcrumbs', sections: [ @@ -73,7 +87,7 @@ export const BreadcrumbsExample = { .

), - props: breadcrumpProps, + props: breadcrumbProps, snippet: ` ), - props: breadcrumpProps, + props: breadcrumbProps, snippet: ` ), - props: breadcrumpProps, + props: breadcrumbProps, demo: , snippet: [ ` ), - props: breadcrumpProps, + props: breadcrumbProps, snippet: [ `, }, + { + title: 'Simplified breadcrumbs', + source: [ + { + type: GuideSectionTypes.JS, + code: simplifiedSource, + }, + { + type: GuideSectionTypes.HTML, + code: simplifiedHtml, + }, + ], + text: ( + <> +

+ OuiSimplifiedBreadcrumbs are a variant of + OuiBreadcrumbs using a simplified appearence. +

+ + ), + props: simplifiedProps, + snippet: [ + ``, + ], + demo: , + }, ], }; diff --git a/src-docs/src/views/breadcrumbs/display_breadcrumbs_toggles.js b/src-docs/src/views/breadcrumbs/display_breadcrumbs_toggles.js new file mode 100644 index 0000000000..a3bc761e2a --- /dev/null +++ b/src-docs/src/views/breadcrumbs/display_breadcrumbs_toggles.js @@ -0,0 +1,148 @@ +/* + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +import React, { cloneElement, useState, Fragment } from 'react'; +import PropTypes from 'prop-types'; + +import { + OuiFlexGroup, + OuiSwitch, + OuiFlexItem, + OuiButtonEmpty, + OuiPopover, + OuiSpacer, +} from '../../../../src/components'; + +export const DisplayBreadCrumbsToggles = ({ + canResponsive, + canTruncate, + canHideLastBreadCrumb, + canHideTrailingSeparator, + canDisableTrailingLink, + children, + spacerSize, +}) => { + const [responsive, setResponsive] = useState(false); + const [truncate, setTruncate] = useState(true); + const [hideLastBreadCrumb, setHideLastBreadCrumb] = useState(false); + const [hideTrailingSeparator, setHideTrailingSeparator] = useState(false); + const [disableTrailingLink, setDisableTrailingLink] = useState(false); + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + + const canProps = {}; + if (canResponsive) canProps.responsive = responsive; + if (canTruncate) canProps.truncate = truncate; + if (canHideLastBreadCrumb) canProps.hideLastBreadCrumb = hideLastBreadCrumb; + if (canHideTrailingSeparator) + canProps.hideTrailingSeparator = hideTrailingSeparator; + if (canDisableTrailingLink) + canProps.disableTrailingLink = disableTrailingLink; + + return ( + + {cloneElement(children, canProps)} + + { + setIsPopoverOpen(false); + }} + button={ + { + setIsPopoverOpen(!isPopoverOpen); + }}> + Display toggles + + }> +
+ + {canResponsive && ( + + setResponsive(e.target.checked)} + /> + + )} + {canTruncate && ( + + setTruncate(e.target.checked)} + /> + + )} + {canHideLastBreadCrumb && ( + + setHideLastBreadCrumb(e.target.checked)} + /> + + )} + {canHideTrailingSeparator && ( + + setHideTrailingSeparator(e.target.checked)} + /> + + )} + {canDisableTrailingLink && ( + + setDisableTrailingLink(e.target.checked)} + /> + + )} + +
+ + + ); +}; + +DisplayBreadCrumbsToggles.propTypes = { + canResponsive: PropTypes.bool, + canTruncate: PropTypes.bool, + canHideLastBreadCrumb: PropTypes.bool, + canHideTrailingSeparator: PropTypes.bool, + canDisableTrailingLink: PropTypes.bool, + spacerSize: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']), +}; + +DisplayBreadCrumbsToggles.defaultProps = { + canResponsive: true, + canTruncate: true, + canHideLastBreadCrumb: false, + canHideTrailingSeparator: false, + canDisableTrailingLink: false, + spacerSize: 'l', +}; diff --git a/src-docs/src/views/breadcrumbs/simplified_breadcrumbs.js b/src-docs/src/views/breadcrumbs/simplified_breadcrumbs.js new file mode 100644 index 0000000000..bb752338f1 --- /dev/null +++ b/src-docs/src/views/breadcrumbs/simplified_breadcrumbs.js @@ -0,0 +1,82 @@ +/* + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +import React from 'react'; + +import { OuiSimplifiedBreadcrumbs } from '../../../../src/components'; + +import { DisplayBreadCrumbsToggles } from './display_breadcrumbs_toggles'; + +export default () => { + const breadcrumbs = [ + { + text: 'Universe', + href: '#', + }, + { + text: 'Observable Universe', + href: '#', + }, + { + text: 'Pisces–Cetus Supercluster Complex', + href: '#', + }, + { + text: 'Laniakea Supercluster', + href: '#', + }, + { + text: 'Virgo Cluster', + href: '#', + }, + { + text: 'Local Group', + href: '#', + }, + { + text: 'Local Bubble', + href: '#', + }, + { + text: 'Local Interstellar Cloud', + href: '#', + }, + { + text: 'Milky Way Galaxy', + href: '#', + }, + { + text: 'Orion Arm', + href: '#', + }, + { + text: 'Solar System', + href: '#', + }, + { + text: 'Geospace', + href: '#', + }, + { + text: 'Earth', + href: '#', + }, + ]; + + return ( + + + + ); +}; diff --git a/src/components/breadcrumbs/_breadcrumbs_simplified.scss b/src/components/breadcrumbs/_breadcrumbs_simplified.scss deleted file mode 100644 index 4f6a40a9cf..0000000000 --- a/src/components/breadcrumbs/_breadcrumbs_simplified.scss +++ /dev/null @@ -1,85 +0,0 @@ -/*! - * SPDX-License-Identifier: Apache-2.0 - * - * The OpenSearch Contributors require contributions made to - * this file be licensed under the Apache-2.0 license or a - * compatible open source license. - * - * Modifications Copyright OpenSearch Contributors. See - * GitHub history for details. - */ - -.ouiSimplifiedBreadcrumbs { - @include ouiFontSizeS; - margin-bottom: -$ouiSizeXS; /* 1 */ - display: flex; - align-items: center; - flex-wrap: wrap; - min-width: 0; // Ensure it shrinks if the window is narrow - margin-left: 0; -} - -.ouiSimplifiedBreadcrumb { - display: inline-block; - color: $ouiLinkColor !important; // sass-lint:disable-line no-important - margin-right: $ouiBreadcrumbSpacing; -} - -.ouiSimplifiedBreadcrumb--collapsed { - flex-shrink: 0; - color: $ouiBreadcrumbCollapsedLink !important; // sass-lint:disable-line no-important - vertical-align: top !important; // sass-lint:disable-line no-important -} - -.ouiSimplifiedBreadcrumb__collapsedLink:hover { - color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important -} - -.ouiSimplifiedBreadcrumbs--truncate { - white-space: nowrap; - flex-wrap: nowrap; - - .ouiSimplifiedBreadcrumb:not(.ouiSimplifiedBreadcrumb--collapsed) { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; // overflow hidden causes misalignment of links and slashes, this fixes that - } - - .ouiSimplifiedBreadcrumbWrapper:not(.ouiSimplifiedBreadcrumbWrapper--collapsed) { - max-width: $ouiBreadcrumbTruncateWidth; - overflow: hidden; - text-overflow: ellipsis; - - &.ouiSimplifiedBreadcrumbWrapper--last { - max-width: none; - } - } -} - -.ouiSimplifiedBreadcrumb--truncate { - @include ouiTextTruncate; - max-width: 100%; - text-align: center; - vertical-align: top; // overflow hidden causes misalignment of links and slashes, this fixes that -} - -.ouiSimplifiedBreadcrumbWrapper--truncate { - max-width: $ouiBreadcrumbTruncateWidth; -} - -.ouiBreadcrumbSeparator { - flex-shrink: 0; - display: inline-block; - margin-right: $ouiBreadcrumbSpacing; - width: 2px; - height: $ouiSize; - transform: translateY(-1px) rotate(15deg); - background: $ouiColorLightShade; - color: $ouiColorDisabledText; -} - -.euiLink.euiSimplifiedBreadcrumb { - line-height: inherit; - font-weight: inherit; -} \ No newline at end of file diff --git a/src/components/breadcrumbs/_index.scss b/src/components/breadcrumbs/_index.scss index b5b018e0de..e555e908df 100644 --- a/src/components/breadcrumbs/_index.scss +++ b/src/components/breadcrumbs/_index.scss @@ -11,4 +11,4 @@ @import 'variables'; @import 'breadcrumbs'; -@import 'breadcrumbs_simplified'; +@import 'simplified_breadcrumbs/index'; diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx index 63fc7acf17..c9914591a4 100644 --- a/src/components/breadcrumbs/breadcrumbs.tsx +++ b/src/components/breadcrumbs/breadcrumbs.tsx @@ -319,6 +319,8 @@ export const OuiBreadcrumbs: FunctionComponent = ({ ); }; +// ToDo: OuiBreadcrumbsSimplified has never been exported out the component's folder. Perhaps it should be deprecated +// and removed. export const OuiBreadcrumbsSimplified: FunctionComponent = ({ breadcrumbs, className, diff --git a/src/components/breadcrumbs/index.ts b/src/components/breadcrumbs/index.ts index 718732d269..cbccf98ec4 100644 --- a/src/components/breadcrumbs/index.ts +++ b/src/components/breadcrumbs/index.ts @@ -35,4 +35,7 @@ export { OuiBreadcrumbResponsiveMaxCount, } from './breadcrumbs'; -export { OuiSimplifiedBreadcrumbs } from './breadcrumbs_simplified'; +export { + OuiSimplifiedBreadcrumbs, + OuiSimplifiedBreadcrumbsProps, +} from './simplified_breadcrumbs'; diff --git a/src/components/breadcrumbs/simplified_breadcrumbs/_index.scss b/src/components/breadcrumbs/simplified_breadcrumbs/_index.scss new file mode 100644 index 0000000000..2c1e6c01d1 --- /dev/null +++ b/src/components/breadcrumbs/simplified_breadcrumbs/_index.scss @@ -0,0 +1,6 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +@import 'simplified_breadcrumbs'; diff --git a/src/components/breadcrumbs/simplified_breadcrumbs/_simplified_breadcrumbs.scss b/src/components/breadcrumbs/simplified_breadcrumbs/_simplified_breadcrumbs.scss new file mode 100644 index 0000000000..9cf5acc099 --- /dev/null +++ b/src/components/breadcrumbs/simplified_breadcrumbs/_simplified_breadcrumbs.scss @@ -0,0 +1,87 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +.ouiSimplifiedBreadcrumbs { + @include ouiFontSizeS; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: $ouiSizeS; // sass-lint:disable-line no-misspelled-properties + min-width: 0; // Ensure it shrinks if the window is narrow + margin-left: 0; + + .ouiLink.euiLink--text:focus { + animation: none; + background: none; + } + + &--truncate { + white-space: nowrap; + flex-wrap: nowrap; + + .ouiSimplifiedBreadcrumb:not(.ouiSimplifiedBreadcrumb--collapsed), + .ouiSimplifiedBreadcrumbWrapper:not(.ouiSimplifiedBreadcrumbWrapper--collapsed) { + width: 100%; + max-width: fit-content; + overflow: hidden; + text-overflow: ellipsis; + } + + .ouiSimplifiedBreadcrumbWrapper:not(.ouiSimplifiedBreadcrumbWrapper--collapsed) { + &.ouiSimplifiedBreadcrumbWrapper--last { + max-width: none; + } + } + } +} + +.ouiSimplifiedBreadcrumb { + display: block; + + &.ouiLink { + line-height: inherit; + font-weight: inherit; + + &[class*='ouiLink--']:focus { + // .ouiLink uses a rule with !important + background-color: unset !important; // sass-lint:disable-line no-important + animation: none !important; // sass-lint:disable-line no-important + } + } + + &--collapsed { + flex-shrink: 0; + color: $ouiBreadcrumbCollapsedLink !important; // sass-lint:disable-line no-important + vertical-align: top !important; // sass-lint:disable-line no-important + + &:hover { + color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important + } + } + + &--truncate { + @include ouiTextTruncate; + max-width: 100%; + text-align: center; + vertical-align: top; // overflow hidden causes misalignment of links and slashes, this fixes that + } +} + +.ouiSimplifiedBreadcrumbWrapper--truncate { + max-width: $ouiBreadcrumbTruncateWidth; +} + +.ouiBreadcrumbSeparator { + flex-shrink: 0; + width: 8px; // The width of the SVG's bounding box + color: $ouiColorDisabledText; + height: $ouiFontSizeXS; // One size smaller the font size used by .ouiSimplifiedBreadcrumbs +} diff --git a/src/components/breadcrumbs/simplified_breadcrumbs/index.ts b/src/components/breadcrumbs/simplified_breadcrumbs/index.ts new file mode 100644 index 0000000000..e15fd21a51 --- /dev/null +++ b/src/components/breadcrumbs/simplified_breadcrumbs/index.ts @@ -0,0 +1,9 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +export { + OuiSimplifiedBreadcrumbs, + OuiSimplifiedBreadcrumbsProps, +} from './simplified_breadcrumbs'; diff --git a/src/components/breadcrumbs/breadcrumbs_simplified.test.tsx b/src/components/breadcrumbs/simplified_breadcrumbs/simplified_breadcrumbs.test.tsx similarity index 96% rename from src/components/breadcrumbs/breadcrumbs_simplified.test.tsx rename to src/components/breadcrumbs/simplified_breadcrumbs/simplified_breadcrumbs.test.tsx index 306f47db8b..3f8adf32e0 100644 --- a/src/components/breadcrumbs/breadcrumbs_simplified.test.tsx +++ b/src/components/breadcrumbs/simplified_breadcrumbs/simplified_breadcrumbs.test.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { render } from 'enzyme'; -import { requiredProps } from '../../test'; -import { OuiSimplifiedBreadcrumbs } from './breadcrumbs_simplified'; +import { requiredProps } from '../../../test'; +import { OuiSimplifiedBreadcrumbs } from './simplified_breadcrumbs'; const breadcrumbs = [ { diff --git a/src/components/breadcrumbs/breadcrumbs_simplified.tsx b/src/components/breadcrumbs/simplified_breadcrumbs/simplified_breadcrumbs.tsx similarity index 74% rename from src/components/breadcrumbs/breadcrumbs_simplified.tsx rename to src/components/breadcrumbs/simplified_breadcrumbs/simplified_breadcrumbs.tsx index bacdf8267e..964e82dad5 100644 --- a/src/components/breadcrumbs/breadcrumbs_simplified.tsx +++ b/src/components/breadcrumbs/simplified_breadcrumbs/simplified_breadcrumbs.tsx @@ -18,23 +18,33 @@ import React, { } from 'react'; import classNames from 'classnames'; -import { OuiI18n } from '../i18n'; -import { OuiInnerText } from '../inner_text'; -import { OuiLink } from '../link'; -import { OuiPopover } from '../popover'; -import { OuiIcon } from '../icon'; -import { throttle } from '../../services'; -import { OuiBreakpointSize, getBreakpoint } from '../../services/breakpoint'; +import { OuiI18n } from '../../i18n'; +import { OuiInnerText } from '../../inner_text'; +import { OuiLink } from '../../link'; +import { OuiPopover } from '../../popover'; +import { OuiIcon } from '../../icon'; +import { throttle } from '../../../services'; +import { OuiBreakpointSize, getBreakpoint } from '../../../services/breakpoint'; import { OuiBreadcrumbResponsiveMaxCount, OuiBreadcrumb, OuiBreadcrumbsProps, -} from './breadcrumbs'; +} from '../breadcrumbs'; + +export type OuiSimplifiedBreadcrumbsProps = OuiBreadcrumbsProps & { + hideTrailingSeparator?: boolean; + disableTrailingLink?: boolean; + hideLastBreadCrumb?: boolean; +}; const responsiveDefault: OuiBreadcrumbResponsiveMaxCount = { xs: 1, s: 2, m: 4, + l: 6, + xl: 8, + xxl: 10, + xxxl: 12, }; const limitBreadcrumbs = ( @@ -77,12 +87,11 @@ const limitBreadcrumbs = ( const ellipsisButton = ( {(ariaLabel: string) => ( setIsPopoverOpen(!isPopoverOpen)}> @@ -105,6 +114,9 @@ const limitBreadcrumbs = ( breadcrumbs={overflowBreadcrumbs} responsive={false} truncate={false} + hideLastBreadCrumb={false} + hideTrailingSeparator={false} + disableTrailingLink={false} max={0} /> @@ -121,14 +133,26 @@ const limitBreadcrumbs = ( return [...breadcrumbsAtStart, ...breadcrumbsAtEnd]; }; -const OuiBreadcrumbSeparator = () =>
; - -export const OuiSimplifiedBreadcrumbs: FunctionComponent = ({ +const OuiBreadcrumbSeparator = () => ( + // preserveAspectRatio is none so we can stretch it vertically and keep the width fixed + + + +); + +export const OuiSimplifiedBreadcrumbs: FunctionComponent = ({ breadcrumbs, className, responsive = responsiveDefault, truncate = true, max = 5, + hideTrailingSeparator, + disableTrailingLink, + hideLastBreadCrumb, ...rest }) => { const [currentBreakpoint, setCurrentBreakpoint] = useState( @@ -162,17 +186,15 @@ export const OuiSimplifiedBreadcrumbs: FunctionComponent = ...breadcrumbRest } = breadcrumb; - const isFirstBreadcrumb = index === 0; - const isLastBreadcrumb = index === breadcrumbs.length - 1; + const breadcrumbsLength = breadcrumbs.length; + const isLastBreadcrumb = index === breadcrumbsLength - 1; - const breadcrumbWrapperClasses = classNames( - 'ouiSimplifiedBreadcrumbWrapper', - { - 'ouiSimplifiedBreadcrumbWrapper--first': isFirstBreadcrumb, - 'ouiSimplifiedBreadcrumbWrapper--last': isLastBreadcrumb, - 'ouiSimplifiedBreadcrumbWrapper--truncate': truncate, - } - ); + if (isLastBreadcrumb && hideLastBreadCrumb) return null; + + const isFirstBreadcrumb = index === 0; + // If hideLastBreadCrumb, the trailing breadcrumb would be the one before the last + const isTrailingBreadcrumb = + index >= breadcrumbsLength - (hideLastBreadCrumb ? 2 : 1); const breadcrumbClasses = classNames( 'ouiSimplifiedBreadcrumb', @@ -184,7 +206,7 @@ export const OuiSimplifiedBreadcrumbs: FunctionComponent = ); const link = - !href && !onClick ? ( + !(href || onClick) || (isTrailingBreadcrumb && disableTrailingLink) ? ( {(ref, innerText) => ( = {(ref, innerText) => ( = ); - const breadcrumbWallClasses = classNames('ouiSimplifiedBreadcrumbWall', { - 'ouiSimplifiedBreadcrumbWall--single': - isFirstBreadcrumb && isLastBreadcrumb, - }); - - const wrapper =
{link}
; const wall = isFirstBreadcrumb ? ( -
{wrapper}
+
+ {link} +
) : ( - wrapper + link ); - const separator = ; + const separator = + hideTrailingSeparator && isTrailingBreadcrumb ? null : ( + + ); return ( @@ -246,9 +270,8 @@ export const OuiSimplifiedBreadcrumbs: FunctionComponent = // First, calculate the responsive max value const responsiveMax = - responsive && responsiveObject[currentBreakpoint as OuiBreakpointSize] - ? responsiveObject[currentBreakpoint as OuiBreakpointSize] - : null; + (responsive && responsiveObject[currentBreakpoint as OuiBreakpointSize]) || + null; // Second, if both max and responsiveMax are set, use the smaller of the two. Otherwise, use the one that is set. const calculatedMax: OuiBreadcrumbsProps['max'] = diff --git a/src/services/breakpoint.test.ts b/src/services/breakpoint.test.ts index dca7478d3c..85e5597d3b 100644 --- a/src/services/breakpoint.test.ts +++ b/src/services/breakpoint.test.ts @@ -36,6 +36,8 @@ import { } from './breakpoint'; const CUSTOM_BREAKPOINTS: OuiBreakpoints = { + xxxl: 2100, + xxl: 1800, xl: 1400, l: 1078, m: 812, @@ -60,6 +62,12 @@ describe('getBreakpoint', () => { it("should return 'xl' for 1400", () => { expect(getBreakpoint(1400)).toBe('xl'); }); + it("should return 'xxl' for 1800", () => { + expect(getBreakpoint(1800)).toBe('xxl'); + }); + it("should return 'xxxl' for 2100", () => { + expect(getBreakpoint(2100)).toBe('xxxl'); + }); }); describe('with custom breakpoints', () => { @@ -78,8 +86,14 @@ describe('getBreakpoint', () => { it("should return 'l' for 1200", () => { expect(getBreakpoint(1200, CUSTOM_BREAKPOINTS)).toBe('l'); }); - it("should return 'xl' for 1400", () => { - expect(getBreakpoint(1400, CUSTOM_BREAKPOINTS)).toBe('xl'); + it("should return 'xl' for 1500", () => { + expect(getBreakpoint(1500, CUSTOM_BREAKPOINTS)).toBe('xl'); + }); + it("should return 'xxl' for 2000", () => { + expect(getBreakpoint(2000, CUSTOM_BREAKPOINTS)).toBe('xxl'); + }); + it("should return 'xxxl' for 3000", () => { + expect(getBreakpoint(3000, CUSTOM_BREAKPOINTS)).toBe('xxxl'); }); }); }); @@ -101,6 +115,12 @@ describe('isWithinMaxBreakpoint', () => { it("should return 'true' for 'xl' and 1400", () => { expect(isWithinMaxBreakpoint(1400, 'xl')).toBe(true); }); + it("should return 'true' for 'xxl' and 1800", () => { + expect(isWithinMaxBreakpoint(1800, 'xxl')).toBe(true); + }); + it("should return 'true' for 'xxxl' and 2100", () => { + expect(isWithinMaxBreakpoint(2100, 'xxxl')).toBe(true); + }); }); describe('with custom breakpoints', () => { @@ -122,6 +142,14 @@ describe('isWithinMaxBreakpoint', () => { it("should return 'true' for 'xl' and 1400", () => { expect(isWithinMaxBreakpoint(1400, 'xl', CUSTOM_BREAKPOINTS)).toBe(true); }); + it("should return 'true' for 'xxl' and 1800", () => { + expect(isWithinMaxBreakpoint(1800, 'xxl', CUSTOM_BREAKPOINTS)).toBe(true); + }); + it("should return 'true' for 'xxxl' and 2100", () => { + expect(isWithinMaxBreakpoint(2100, 'xxxl', CUSTOM_BREAKPOINTS)).toBe( + true + ); + }); }); describe('with max as a number', () => { @@ -147,6 +175,12 @@ describe('isWithinMaxBreakpoint', () => { it("should return 'true' for 'xl' and 1400", () => { expect(isWithinBreakpoints(1400, ['xl'])).toBe(true); }); + it("should return 'true' for 'xxl' and 1800", () => { + expect(isWithinBreakpoints(1800, ['xxl'])).toBe(true); + }); + it("should return 'true' for 'xxxl' and 2100", () => { + expect(isWithinBreakpoints(2100, ['xxxl'])).toBe(true); + }); }); describe('with custom breakpoints', () => { @@ -172,6 +206,16 @@ describe('isWithinMaxBreakpoint', () => { true ); }); + it("should return 'true' for 'xxl' and 1800", () => { + expect(isWithinBreakpoints(1800, ['xxl'], CUSTOM_BREAKPOINTS)).toBe( + true + ); + }); + it("should return 'true' for 'xxxl' and 2100", () => { + expect(isWithinBreakpoints(2100, ['xxxl'], CUSTOM_BREAKPOINTS)).toBe( + true + ); + }); }); describe('with multiple sizes', () => { diff --git a/src/services/breakpoint.ts b/src/services/breakpoint.ts index 92bc6bec46..6f21b4013d 100644 --- a/src/services/breakpoint.ts +++ b/src/services/breakpoint.ts @@ -30,7 +30,7 @@ import { keysOf } from '../components/common'; -export type OuiBreakpointSize = 'xs' | 's' | 'm' | 'l' | 'xl'; +export type OuiBreakpointSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'; export type OuiBreakpoints = { /** @@ -40,6 +40,8 @@ export type OuiBreakpoints = { }; export const BREAKPOINTS: OuiBreakpoints = { + xxxl: 1920, + xxl: 1680, xl: 1200, l: 992, m: 768,