Move OuiBottomBar default inline styles to the CSS file (opensearch-p…

…roject#693) Co-authored-by: Andrey Myssak <[email protected]> Signed-off-by: Sergey Myssak <[email protected]>
SergeyMyssak · Apr 11, 2023 · 4dc27e7 · 4dc27e7
1 parent 9a2b1cd
commit 4dc27e7
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 17 deletions.
diff --git a/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap b/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap
@@ -6,7 +6,6 @@ Array [
     aria-label="aria-label"
     class="ouiBottomBar ouiBottomBar--fixed ouiBottomBar--paddingMedium testClass1 testClass2"
     data-test-subj="test subject string"
-    style="left:0;right:0;bottom:0"
   >
     <h2
       class="ouiScreenReaderOnly"
@@ -29,7 +28,6 @@ Array [
   <section
     aria-label="Page level controls"
     class="ouiBottomBar ouiBottomBar--fixed ouiBottomBar--paddingMedium"
-    style="left:0;right:0;bottom:0"
   >
     <h2
       class="ouiScreenReaderOnly"
@@ -50,7 +48,6 @@ exports[`OuiBottomBar props bodyClassName is rendered 1`] = `
 <section
   aria-label="Page level controls"
   class="ouiBottomBar ouiBottomBar--fixed ouiBottomBar--paddingMedium"
-  style="left: 0px; right: 0px; bottom: 0px;"
 >
   <h2
     class="ouiScreenReaderOnly"
@@ -65,7 +62,6 @@ Array [
   <section
     aria-label="This should have been label"
     class="ouiBottomBar ouiBottomBar--fixed ouiBottomBar--paddingMedium"
-    style="left:0;right:0;bottom:0"
   >
     <h2
       class="ouiScreenReaderOnly"
@@ -87,7 +83,6 @@ Array [
   <section
     aria-label="Page level controls"
     class="ouiBottomBar ouiBottomBar--fixed ouiBottomBar--paddingLarge"
-    style="left:0;right:0;bottom:0"
   >
     <h2
       class="ouiScreenReaderOnly"
@@ -109,7 +104,6 @@ Array [
   <section
     aria-label="Page level controls"
     class="ouiBottomBar ouiBottomBar--fixed ouiBottomBar--paddingMedium"
-    style="left:0;right:0;bottom:0"
   >
     <h2
       class="ouiScreenReaderOnly"
@@ -131,7 +125,6 @@ Array [
   <section
     aria-label="Page level controls"
     class="ouiBottomBar ouiBottomBar--fixed"
-    style="left:0;right:0;bottom:0"
   >
     <h2
       class="ouiScreenReaderOnly"
@@ -153,7 +146,6 @@ Array [
   <section
     aria-label="Page level controls"
     class="ouiBottomBar ouiBottomBar--fixed ouiBottomBar--paddingSmall"
-    style="left:0;right:0;bottom:0"
   >
     <h2
       class="ouiScreenReaderOnly"
@@ -175,7 +167,6 @@ Array [
   <section
     aria-label="Page level controls"
     class="ouiBottomBar ouiBottomBar--fixed ouiBottomBar--paddingMedium"
-    style="left:0;right:0;bottom:0"
   >
     <h2
       class="ouiScreenReaderOnly"
@@ -219,7 +210,6 @@ Array [
   <section
     aria-label="Page level controls"
     class="ouiBottomBar ouiBottomBar--static ouiBottomBar--paddingMedium"
-    style="left:0;right:0;bottom:0"
   >
     <h2
       class="ouiScreenReaderOnly"
@@ -241,7 +231,6 @@ Array [
   <section
     aria-label="Page level controls"
     class="ouiBottomBar ouiBottomBar--sticky ouiBottomBar--paddingMedium"
-    style="left:0;right:0;bottom:0"
   >
     <h2
       class="ouiScreenReaderOnly"
@@ -263,7 +252,7 @@ Array [
   <section
     aria-label="Page level controls"
     class="ouiBottomBar ouiBottomBar--fixed ouiBottomBar--paddingMedium"
-    style="left:12px;right:0;bottom:0"
+    style="left:12px"
   >
     <h2
       class="ouiScreenReaderOnly"
@@ -285,7 +274,6 @@ Array [
   <section
     aria-label="Page level controls"
     class="ouiBottomBar ouiBottomBar--fixed ouiBottomBar--paddingMedium"
-    style="left:0;right:0;bottom:0"
   >
     <h2
       class="ouiScreenReaderOnly"

diff --git a/src/components/bottom_bar/_bottom_bar.scss b/src/components/bottom_bar/_bottom_bar.scss
@@ -10,6 +10,10 @@
  */
 
 .ouiBottomBar {
+  bottom: 0;
+  left: 0;
+  right: 0;
+
   @include ouiBottomShadowFlat($ouiShadowColorLarge);
   background: $ouiHeaderDarkBackgroundColor;
   color: $ouiColorGhost;

diff --git a/src/components/bottom_bar/bottom_bar.tsx b/src/components/bottom_bar/bottom_bar.tsx
@@ -132,9 +132,9 @@ export const OuiBottomBar = forwardRef<
       bodyClassName,
       landmarkHeading,
       usePortal = true,
-      left = 0,
-      right = 0,
-      bottom = 0,
+      left,
+      right,
+      bottom,
       top,
       style,
       ...rest

diff --git a/src/components/page/__snapshots__/page_template.test.tsx.snap b/src/components/page/__snapshots__/page_template.test.tsx.snap
@@ -1098,7 +1098,6 @@ exports[`OuiPageTemplate with bottomBar is rendered 1`] = `
     <section
       aria-label="Page level controls"
       class="ouiBottomBar ouiBottomBar--sticky"
-      style="left:0;right:0;bottom:0"
     >
       <h2
         class="ouiScreenReaderOnly"