fix: Update components to respect new breakpoints (#1416)

* fix: Update components to respect new breakpoints Signed-off-by: Viraj Sanghvi <[email protected]> * revert i18ntokens.json Signed-off-by: Viraj Sanghvi <[email protected]> --------- Signed-off-by: Viraj Sanghvi <[email protected]>
opensearch-project · Sep 25, 2024 · 5484bcc · 5484bcc
1 parent a6c3ca9
commit 5484bcc
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 14 deletions.
diff --git 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
@@ -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
@@ -55,7 +55,7 @@ describe('OuiHeaderLinks', () => {
     test('is rendered', () => {
       const component = render(
         <OuiHeaderLinks
-          popoverBreakpoints={['xs', 's', 'm', 'l', 'xl']}
+          popoverBreakpoints={['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']}
           popoverButtonProps={{
             iconType: 'bolt',
             className: 'customButtonClass',

diff --git a/src/components/page/page_header/_page_header_content.scss b/src/components/page/page_header/_page_header_content.scss
@@ -13,7 +13,7 @@
   width: 100%;
 }
 
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
   .ouiPageHeaderContent__rightSideItems {
     flex-direction: row-reverse;
   }

diff --git a/src/components/page/page_side_bar/_page_side_bar.scss b/src/components/page/page_side_bar/_page_side_bar.scss
@@ -30,7 +30,7 @@
   }
 }
 
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
   .ouiPageSideBar--sticky {
     @include ouiScrollBar;
     overflow-y: auto;

diff --git a/src/components/page/page_template.tsx b/src/components/page/page_template.tsx
@@ -135,7 +135,7 @@ export const OuiPageTemplate: FunctionComponent<OuiPageTemplateProps> = ({
    * 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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};