-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adjust OuiSimplifiedBreadcrumbs alignment, colors, and tailing slash (#…
…1401) * Add methods to control the appearance of trailing and last breadcrumbs in OuiSimplifiedBreadcrumbs Also: * Adjust alignments, colors, and separator in OuiSimplifiedBreadcrumbs * Add documentation for OuiSimplifiedBreadcrumbs * Add CSS breakpoints to OuiBreakpointSize Signed-off-by: Miki <miki@amazon.com> * Remove the unwanted OuiBreadcrumbs focus rectangle Also: * Correctly color the OuiBreadcrumbs when focused * Display the last breadcrumb in a nested breadcrumb as a normal breadcrumb Signed-off-by: Miki <miki@amazon.com> * Update changelog for #1401 Signed-off-by: Miki <miki@amazon.com> * Allow limiting the allowed breakpoints when calling `getBreakpoint()` Also: * Limit allowed breakpoints to those provided by the `responsive` prop of Oui*Breadcrumbs Signed-off-by: Miki <miki@amazon.com> * Adjust number of responsive breadcrumbs shown per breakpoint Signed-off-by: Miki <miki@amazon.com> * Update snapshots Signed-off-by: Miki <miki@amazon.com> --------- Signed-off-by: Miki <miki@amazon.com> (cherry picked from commit fd5b78a) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md
- Loading branch information
1 parent
2c91d14
commit a771059
Showing
20 changed files
with
1,694 additions
and
1,061 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
148 changes: 148 additions & 0 deletions
148
src-docs/src/views/breadcrumbs/display_breadcrumbs_toggles.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; |
Oops, something went wrong.