Adjust OuiSimplifiedBreadcrumbs alignment, colors, and tailing slash

CHANGELOG.md

@@ -5,6 +5,8 @@
 ### Deprecations
 
 - Deprecate `aria-label` and `data-test-subj` of OuiSearchBar which have never been consumed despite being defined ([#1381](https://github.com/opensearch-project/oui/pull/1381))
+- Deprecate the unexported `OuiBreadcrumbsSimplified` ([#1401](https://github.com/opensearch-project/oui/pull/1401))
+
 
 ### 🛡 Security
 
@@ -17,24 +19,36 @@
 - Expand the definitions of `$ouiBreakpoints` to include `xxl` and `xxxl` ([#1387](https://github.com/opensearch-project/oui/pull/1387))
 - Remove scaling of heading elements ([#1389](https://github.com/opensearch-project/oui/pull/1389))
 - Make the space between search bar and table rows match the compressed state of the search box ([#1391](https://github.com/opensearch-project/oui/pull/1391))
+- Add CSS breakpoints to OuiBreakpointSize ([#1401](https://github.com/opensearch-project/oui/pull/1401))
+- Allow limiting the allowed breakpoints when calling `getBreakpoint()` ([#1401](https://github.com/opensearch-project/oui/pull/1401))
+- Adjust number of responsive breadcrumbs shown per breakpoint ([#1401](https://github.com/opensearch-project/oui/pull/1401))
 
 ### 🐛 Bug Fixes
 
 - 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))
+- Add methods to control the appearance of trailing and last breadcrumbs in OuiSimplifiedBreadcrumbs ([#1401](https://github.com/opensearch-project/oui/pull/1401))
+- Adjust alignments, colors, and separator in OuiSimplifiedBreadcrumbs ([#1401](https://github.com/opensearch-project/oui/pull/1401))
+- Remove the unwanted OuiBreadcrumbs focus rectangle ([#1401](https://github.com/opensearch-project/oui/pull/1401))
+- Correctly color the OuiBreadcrumbs when focused ([#1401](https://github.com/opensearch-project/oui/pull/1401))
+- Display the last breadcrumb in a nested breadcrumb as a normal breadcrumb ([#1401](https://github.com/opensearch-project/oui/pull/1401))
+- Limit allowed breakpoints to those provided by the `responsive` prop of Oui*Breadcrumbs ([#1401](https://github.com/opensearch-project/oui/pull/1401))
 
 ### 🚞 Infrastructure
 
 ### 📝 Documentation
 
 - Add a playground for OuiDatePicker ([#1380](https://github.com/opensearch-project/oui/pull/1380))
+- Add documentation for OuiSimplifiedBreadcrumbs ([#1401](https://github.com/opensearch-project/oui/pull/1401))
 
 ### 🛠 Maintenance
 
 - Move Iskander, Andrey, and Sergey to the Emeritus list ([#1394](https://github.com/opensearch-project/oui/pull/1394))
 
 ### 🪛 Refactoring
 
+- Refactor OuiSimplifiedBreadcrumbs into its own folder ([#1401](https://github.com/opensearch-project/oui/pull/1401))
+
 ### 🔩 Tests
 
 

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 = {
  .
  </p>
  ),
- props: breadcrumpProps,
+ props: breadcrumbProps,
  snippet: `<OuiBreadcrumbs
  breadcrumbs={[
  {
@@ -112,7 +126,7 @@ export const BreadcrumbsExample = {
  </p>
  </>
  ),
- props: breadcrumpProps,
+ props: breadcrumbProps,
  snippet: `<OuiBreadcrumbs
  max={4}
  breadcrumbs={breadcrumbs}
@@ -144,7 +158,7 @@ export const BreadcrumbsExample = {
  </p>
  </>
  ),
- props: breadcrumpProps,
+ props: breadcrumbProps,
  demo: <Truncate />,
  snippet: [
  `<OuiBreadcrumbs
@@ -190,7 +204,7 @@ export const BreadcrumbsExample = {
  </p>
  </>
  ),
- props: breadcrumpProps,
+ props: breadcrumbProps,
  snippet: [
  `<OuiBreadcrumbs
  responsive={false}
@@ -210,5 +224,33 @@ export const BreadcrumbsExample = {
  ],
  demo: <Responsive />,
  },
+ {
+ title: 'Simplified breadcrumbs',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: simplifiedSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: simplifiedHtml,
+ },
+ ],
+ text: (
+ <>
+ <p>
+ <strong>OuiSimplifiedBreadcrumbs</strong> are a variant of
+ OuiBreadcrumbs using a simplified appearence.
+ </p>
+ </>
+ ),
+ props: simplifiedProps,
+ snippet: [
+ `<OuiSimplifiedBreadcrumbs
+ breadcrumbs={breadcrumbs}
+/>`,
+ ],
+ demo: <Simplified />,
+ },
  ],
 };

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 (
+ <Fragment>
+ {cloneElement(children, canProps)}
+ <OuiSpacer size={spacerSize} />
+ <OuiPopover
+ panelPaddingSize="s"
+ isOpen={isPopoverOpen}
+ closePopover={() => {
+ setIsPopoverOpen(false);
+ }}
+ button={
+ <OuiButtonEmpty
+ iconType="controlsHorizontal"
+ size="xs"
+ onClick={() => {
+ setIsPopoverOpen(!isPopoverOpen);
+ }}>
+ Display toggles
+ </OuiButtonEmpty>
+ }>
+ <div>
+ <OuiFlexGroup
+ wrap={true}
+ direction="column"
+ gutterSize="s"
+ responsive={false}>
+ {canResponsive && (
+ <OuiFlexItem grow={false}>
+ <OuiSwitch
+ compressed
+ label="responsive"
+ checked={responsive}
+ onChange={(e) => setResponsive(e.target.checked)}
+ />
+ </OuiFlexItem>
+ )}
+ {canTruncate && (
+ <OuiFlexItem grow={false}>
+ <OuiSwitch
+ compressed
+ label="truncate"
+ checked={truncate}
+ onChange={(e) => setTruncate(e.target.checked)}
+ />
+ </OuiFlexItem>
+ )}
+ {canHideLastBreadCrumb && (
+ <OuiFlexItem grow={false}>
+ <OuiSwitch
+ compressed
+ label="hideLastBreadCrumb"
+ checked={hideLastBreadCrumb}
+ onChange={(e) => setHideLastBreadCrumb(e.target.checked)}
+ />
+ </OuiFlexItem>
+ )}
+ {canHideTrailingSeparator && (
+ <OuiFlexItem grow={false}>
+ <OuiSwitch
+ compressed
+ label="hideTrailingSeparator"
+ checked={hideTrailingSeparator}
+ onChange={(e) => setHideTrailingSeparator(e.target.checked)}
+ />
+ </OuiFlexItem>
+ )}
+ {canDisableTrailingLink && (
+ <OuiFlexItem grow={false}>
+ <OuiSwitch
+ compressed
+ label="disableTrailingLink"
+ checked={disableTrailingLink}
+ onChange={(e) => setDisableTrailingLink(e.target.checked)}
+ />
+ </OuiFlexItem>
+ )}
+ </OuiFlexGroup>
+ </div>
+ </OuiPopover>
+ </Fragment>
+ );
+};
+
+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',
+};

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 (
+ <DisplayBreadCrumbsToggles
+ canHideLastBreadCrumb
+ canHideTrailingSeparator
+ canDisableTrailingLink>
+ <OuiSimplifiedBreadcrumbs breadcrumbs={breadcrumbs} max={null} />
+ </DisplayBreadCrumbsToggles>
+ );
+};