From 5484bcc1fd9e6ee5e9b2160196f1ea6808095b3e Mon Sep 17 00:00:00 2001 From: Viraj Sanghvi Date: Wed, 25 Sep 2024 13:24:07 -0700 Subject: [PATCH] fix: Update components to respect new breakpoints (#1416) * fix: Update components to respect new breakpoints Signed-off-by: Viraj Sanghvi * revert i18ntokens.json Signed-off-by: Viraj Sanghvi --------- Signed-off-by: Viraj Sanghvi --- CHANGELOG.md | 29 +++++++++++++++++++ .../guidelines/colors/_color_section.scss | 2 +- .../header/header_links/header_links.test.tsx | 2 +- .../page_header/_page_header_content.scss | 2 +- .../page/page_side_bar/_page_side_bar.scss | 2 +- src/components/page/page_template.tsx | 2 +- src/components/search_bar/_search_bar.scss | 2 +- src/components/table/_responsive.scss | 2 +- src/components/table/_table.scss | 2 +- src/global_styling/mixins/_header.scss | 4 +-- .../global_styling/mixins/_header.scss | 4 +-- .../v9/global_styling/mixins/_header.scss | 4 +-- 12 files changed, 43 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6bac992e61..9d21b5726e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,35 @@ ### Deprecations + +### 🛡 Security + + +### 📈 Features/Enhancements + + +### 🐛 Bug Fixes +- Update components to respect new breakpoints + +### 🚞 Infrastructure + + +### 📝 Documentation + + +### 🛠 Maintenance + + +### 🪛 Refactoring + + +### 🔩 Tests + + +## [`1.13.0`](https://github.com/opensearch-project/oui/tree/1.13) + +### 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)) diff --git a/src-docs/src/views/guidelines/colors/_color_section.scss b/src-docs/src/views/guidelines/colors/_color_section.scss index a77993b4df..3c0d3b73cb 100644 --- a/src-docs/src/views/guidelines/colors/_color_section.scss +++ b/src-docs/src/views/guidelines/colors/_color_section.scss @@ -9,7 +9,7 @@ * GitHub history for details. */ -@include ouiBreakpoint('m', 'l', 'xl') { +@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') { .guideColorsPage__stickySlider { position: sticky; top: $ouiHeaderHeightCompensation; diff --git a/src/components/header/header_links/header_links.test.tsx b/src/components/header/header_links/header_links.test.tsx index d3762dd469..f3e7c079b0 100644 --- a/src/components/header/header_links/header_links.test.tsx +++ b/src/components/header/header_links/header_links.test.tsx @@ -55,7 +55,7 @@ describe('OuiHeaderLinks', () => { test('is rendered', () => { const component = render( = ({ * Full height ~madness~ logic */ const canFullHeight = - useIsWithinBreakpoints(['m', 'l', 'xl']) && + useIsWithinBreakpoints(['m', 'l', 'xl', 'xxl', 'xxxl']) && (template === 'default' || template === 'empty'); const fullHeightClass = { 'oui-fullHeight': fullHeight && canFullHeight }; const yScrollClass = { 'oui-yScroll': fullHeight && canFullHeight }; diff --git a/src/components/search_bar/_search_bar.scss b/src/components/search_bar/_search_bar.scss index f20d8d5b93..4926750bba 100644 --- a/src/components/search_bar/_search_bar.scss +++ b/src/components/search_bar/_search_bar.scss @@ -13,7 +13,7 @@ min-width: calc($ouiFormMaxWidth / 2); } -@include ouiBreakpoint('m', 'l', 'xl') { +@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') { .ouiSearchBar__filtersHolder { // Helps with flex-wrapping max-width: calc(100% - #{$ouiSize}); diff --git a/src/components/table/_responsive.scss b/src/components/table/_responsive.scss index 2c2aa02a88..5ce87e10e1 100644 --- a/src/components/table/_responsive.scss +++ b/src/components/table/_responsive.scss @@ -21,7 +21,7 @@ } } -@include ouiBreakpoint('m', 'l', 'xl') { +@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') { .ouiTableRowCell--hideForDesktop { // must come last to override any special cases // sass-lint:disable-block no-important display: none !important; diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index e8dd67a6e6..70497c1b51 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -33,7 +33,7 @@ } // Compressed styles not for mobile -@include ouiBreakpoint('m', 'l', 'xl') { +@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') { .ouiTable--compressed { .ouiTableCellContent { @include ouiFontSizeXS; diff --git a/src/global_styling/mixins/_header.scss b/src/global_styling/mixins/_header.scss index 2dd794c2c8..25e48cb363 100644 --- a/src/global_styling/mixins/_header.scss +++ b/src/global_styling/mixins/_header.scss @@ -22,7 +22,7 @@ height: calc(100% - #{$headerHeight}); } - @include ouiBreakpoint('m', 'l', 'xl') { + @include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') { .ouiPageSideBar--sticky { max-height: calc(100vh - #{$headerHeight}); top: #{$headerHeight}; @@ -47,7 +47,7 @@ height: calc(100% - #{$headerHeight}); } - @include euiBreakpoint('m', 'l', 'xl') { + @include euiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') { .euiPageSideBar--sticky { max-height: calc(100vh - #{$headerHeight}); top: #{$headerHeight}; diff --git a/src/themes/oui-next/global_styling/mixins/_header.scss b/src/themes/oui-next/global_styling/mixins/_header.scss index 2dd794c2c8..25e48cb363 100644 --- a/src/themes/oui-next/global_styling/mixins/_header.scss +++ b/src/themes/oui-next/global_styling/mixins/_header.scss @@ -22,7 +22,7 @@ height: calc(100% - #{$headerHeight}); } - @include ouiBreakpoint('m', 'l', 'xl') { + @include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') { .ouiPageSideBar--sticky { max-height: calc(100vh - #{$headerHeight}); top: #{$headerHeight}; @@ -47,7 +47,7 @@ height: calc(100% - #{$headerHeight}); } - @include euiBreakpoint('m', 'l', 'xl') { + @include euiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') { .euiPageSideBar--sticky { max-height: calc(100vh - #{$headerHeight}); top: #{$headerHeight}; diff --git a/src/themes/v9/global_styling/mixins/_header.scss b/src/themes/v9/global_styling/mixins/_header.scss index 2dd794c2c8..25e48cb363 100644 --- a/src/themes/v9/global_styling/mixins/_header.scss +++ b/src/themes/v9/global_styling/mixins/_header.scss @@ -22,7 +22,7 @@ height: calc(100% - #{$headerHeight}); } - @include ouiBreakpoint('m', 'l', 'xl') { + @include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') { .ouiPageSideBar--sticky { max-height: calc(100vh - #{$headerHeight}); top: #{$headerHeight}; @@ -47,7 +47,7 @@ height: calc(100% - #{$headerHeight}); } - @include euiBreakpoint('m', 'l', 'xl') { + @include euiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') { .euiPageSideBar--sticky { max-height: calc(100vh - #{$headerHeight}); top: #{$headerHeight};