diff --git a/CHANGELOG.md b/CHANGELOG.md index c5c01cc40b4..ec22913d4b0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -131,6 +131,9 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - [Vis Colors] [Timeline] Replace `vis_type_timeline` colors with `ouiPaletteColorBlind()` ([#4366](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4366)) - [Vis Colors] Update legacy seed colors to use `ouiPaletteColorBlind()` ([#4348](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4348)) - [Console] Migrate `/lib/mappings/` module to TypeScript ([#4008](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4008)) +- [Console] Migrate `/lib/autocomplete/` module to TypeScript ([#4148](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4148)) +- [Dashboard] Restructure the `Dashboard` plugin folder to be more cohesive with the project ([#4575](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4575)) +- [Chrome] Remove breadcrumb style overrrides ([#4621](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4621)) ### 🔩 Tests diff --git a/src/core/public/_variables.scss b/src/core/public/_variables.scss index f77e2b4d275..9d8077b50ad 100644 --- a/src/core/public/_variables.scss +++ b/src/core/public/_variables.scss @@ -1,10 +1,3 @@ @import "@elastic/eui/src/global_styling/variables/header"; $osdHeaderOffset: $euiHeaderHeightCompensation; -$osdHeaderBreadcrumbBlueBackground: #b9d9eb; -$osdHeaderBreadcrumbGrayBackground: #d9e1e2; -$osdHeaderBreadcrumbCollapsedLink: #002a3a; -$osdHeaderBreadcrumbPacificSkyDarkestBackground: #163f66; -$osdHeaderBreadcrumbMidnightSkyMediumBackground: #4c636f; -$osdHeaderBreadcrumbMidnightSkyMediumLightColor: #96a0a5; -$osdHeaderBreadcrumbMidnightSkyMediumLightHoverColor: #b0b8bb; diff --git a/src/core/public/chrome/public/assets/round_filter.svg b/src/core/public/chrome/public/assets/round_filter.svg deleted file mode 100644 index 84cf3605855..00000000000 --- a/src/core/public/chrome/public/assets/round_filter.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap index 806e9982127..9068e225c8b 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap @@ -3614,19 +3614,16 @@ exports[`Header handles visibility and lock changes 1`] = ` "thrownError": null, } } - isDarkMode={false} > @@ -3634,20 +3631,19 @@ exports[`Header handles visibility and lock changes 1`] = ` breadcrumbs={ Array [ Object { - "className": "osdBreadcrumbs", "data-test-subj": "breadcrumb first last", "text": "test", }, ] } - className="euiHeaderBreadcrumbs osdHeaderBreadcrumbs" + className="euiHeaderBreadcrumbs" data-test-subj="breadcrumbs" max={10} truncate={true} > @@ -8865,19 +8861,16 @@ exports[`Header renders condensed header 1`] = ` "thrownError": null, } } - isDarkMode={false} > @@ -8885,20 +8878,19 @@ exports[`Header renders condensed header 1`] = ` breadcrumbs={ Array [ Object { - "className": "osdBreadcrumbs", "data-test-subj": "breadcrumb first", "text": "test", }, ] } - className="euiHeaderBreadcrumbs osdHeaderBreadcrumbs" + className="euiHeaderBreadcrumbs" data-test-subj="breadcrumbs" max={10} truncate={true} > diff --git a/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap index 2308839a19a..5080b23e99c 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap @@ -3,7 +3,7 @@ exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 1`] = ` @@ -15,7 +15,7 @@ exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 2`] = Array [ @@ -23,7 +23,7 @@ Array [ , diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index 0e595001480..9496b76b998 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -115,7 +115,7 @@ export function Header({ const toggleCollapsibleNavRef = createRef void }>(); const navId = htmlIdGenerator()(); const className = classnames('hide-for-sharing', 'headerGlobalNav'); - const { useExpandedHeader = true, darkMode } = branding; + const { useExpandedHeader = true } = branding; const headerTheme: EuiHeaderProps['theme'] = 'dark'; @@ -208,7 +208,6 @@ export function Header({ diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.scss b/src/core/public/chrome/ui/header/header_breadcrumbs.scss deleted file mode 100644 index 5ac333e1615..00000000000 --- a/src/core/public/chrome/ui/header/header_breadcrumbs.scss +++ /dev/null @@ -1,107 +0,0 @@ -@import "../../../../public/variables"; - -$firstBreadcrumbPolygon: polygon( - 0% 0%, - 100% 0%, - calc(100% - #{$euiSizeS}) 100%, - 0% 100% -); -$breadcrumbPolygon: polygon( - $euiSizeS 0%, - 100% 0%, - calc(100% - #{$euiSizeS}) 100%, - 0% 100% -); - -/* remove background color on autofocus for euiBreadcrumbs in Popover */ -.euiBreadcrumbs__inPopover { - .euiLink.euiLink--text:focus { - background: none; - } -} - -.osdHeaderBreadcrumbs { - /* common for both light & dark theme */ - .osdBreadcrumbs, - &--dark .osdBreadcrumbs { - clip-path: $breadcrumbPolygon; - padding: $euiSizeXS - 2.5 $euiSizeL - $euiSizeXS; - - &:first-child { - clip-path: $firstBreadcrumbPolygon; - } - } - - .osdBreadcrumbs { - background-color: $osdHeaderBreadcrumbGrayBackground; - - &:last-child { - background-color: $osdHeaderBreadcrumbBlueBackground; - } - } - - /* only light mode */ - .euiBreadcrumb__collapsedLink { - color: $osdHeaderBreadcrumbCollapsedLink; - background: $euiColorEmptyShade; - } - - .euiLink.euiLink--subdued:focus { - background: $euiColorEmptyShade; - outline: $euiSizeXS - 1 solid $osdHeaderBreadcrumbBlueBackground; - } - - /* common for dark & light mode */ - &, - &--dark { - /* - filter defines a custom filter effect by grouping atomic filter primitives! - here we are using Gaussian filter with stdDeviation for applying - border-radius on clipped background. - */ - filter: url("../../public/assets/round_filter.svg#round"); - - button { - line-height: inherit; - } - - .euiBreadcrumbSeparator { - display: none; - } - - .euiPopover__anchor { - padding: 0 $euiSizeS; - } - - .euiBreadcrumb:not(.euiBreadcrumb:last-child) { - margin-right: 0; - } - } - - /* only dark mode */ - &--dark { - .osdBreadcrumbs { - background-color: $osdHeaderBreadcrumbMidnightSkyMediumBackground; - color: $osdHeaderBreadcrumbMidnightSkyMediumLightColor; - - &:hover { - color: $osdHeaderBreadcrumbMidnightSkyMediumLightHoverColor; - } - - &:last-child { - background-color: $osdHeaderBreadcrumbPacificSkyDarkestBackground; - color: $euiColorFullShade; - } - } - - .euiBreadcrumb__collapsedLink { - color: $euiColorGhost; - background: $euiColorEmptyShade; - } - - .euiLink.euiLink--subdued:focus { - background: $euiColorEmptyShade; - outline: $euiSizeXS - 1 solid $osdHeaderBreadcrumbPacificSkyDarkestBackground; - } - } -} diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx index d95e7881cf5..2008a3f6c49 100644 --- a/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx +++ b/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx @@ -38,11 +38,7 @@ describe('HeaderBreadcrumbs', () => { it('renders updates to the breadcrumbs$ observable', () => { const breadcrumbs$ = new BehaviorSubject([{ text: 'First' }]); const wrapper = mount( - + ); expect(wrapper.find('.euiBreadcrumb')).toMatchSnapshot(); diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx index ba81b61e8bc..ca50b15d5af 100644 --- a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx +++ b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx @@ -35,18 +35,14 @@ import useObservable from 'react-use/lib/useObservable'; import { Observable } from 'rxjs'; import { ChromeBreadcrumb } from '../../chrome_service'; -import './header_breadcrumbs.scss'; - interface Props { appTitle$: Observable; breadcrumbs$: Observable; - isDarkMode?: boolean; } -export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$, isDarkMode }: Props) { +export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$ }: Props) { const appTitle = useObservable(appTitle$, 'OpenSearch Dashboards'); const breadcrumbs = useObservable(breadcrumbs$, []); - const className = isDarkMode ? 'osdHeaderBreadcrumbs--dark' : 'osdHeaderBreadcrumbs'; let crumbs = breadcrumbs; if (breadcrumbs.length === 0 && appTitle) { @@ -61,15 +57,7 @@ export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$, isDarkMode }: Props i === 0 && 'first', i === breadcrumbs.length - 1 && 'last' ), - className: classNames('osdBreadcrumbs'), })); - return ( - - ); + return ; }