[CCI] Move OuiBottomBar default inline styles to the CSS file #694

SergeyMyssak · 2023-04-11T16:45:27Z

Description

Moved OuiBottomBar default inline styles to the CSS file

Issues Resolved

Check List

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

For more information on following Developer Certificate of Origin and signing off your commits, please check here.

…roject#693) Co-authored-by: Andrey Myssak <andreymyssak@gmail.com> Signed-off-by: Sergey Myssak <sergey.myssak@gmail.com>

joshuarrrr · 2023-04-11T23:19:09Z

src/components/bottom_bar/bottom_bar.tsx

+      left,
+      right,
+      bottom,


hmm... So the properties are no longer always set inline, but if these props are used the styles will be. That seems reasonable, and solves are problem in OpenSearch Dashboards. But I wonder if we should consiter getting rid of these props altogether.

I can remove them, but I believe that these properties provide us with more opportunities for customization and control over the OuiBottomBar. Additionally, removing them altogether could potentially limit our options in the future

Yeah i too like the idea of removing them, but that will be a breaking change since it changes the api of the bottom bar

Lets create a follow-up issue for this and create a separate PR so that these changes can be backported

ashwin-pc

I dont see a reason not to make this change. Would love to hear any opposing thoughts here.

joshuarrrr

Looks great! My only request is to add additional test cases or assertions to get a snapshot for when the other positional props are specified.

joshuarrrr · 2023-04-25T16:38:23Z

src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap

@@ -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"


Can we expand the bottom_bar.test.tsx test cases to also cover the other positional props (bottom, right).

BSFishy · 2023-04-25T19:28:01Z

src/components/bottom_bar/bottom_bar.tsx

+      left,
+      right,
+      bottom,


Lets create a follow-up issue for this and create a separate PR so that these changes can be backported

SergeyMyssak · 2023-04-26T16:09:16Z

Hello @joshuarrrr, @BSFishy! I found out that we have the test case for left, right, top, and bottom props:

oui/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap

Line 186 in 4dc27e7

exports[`OuiBottomBar props position props are altered 1`] = `

What you mentioned is related to the style prop, which can even contain other inline styles:

oui/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap

Line 250 in 4dc27e7

exports[`OuiBottomBar props style is customized 1`] = `

I wanted to clarify, should I add new test cases for style or it's enough?

…roject#693) (opensearch-project#694) Signed-off-by: Sergey Myssak <sergey.myssak@gmail.com> Co-authored-by: Andrey Myssak <andreymyssak@gmail.com>

* Remove beta badge accent color (#99) Signed-off-by: Matt Provost <provomat@amazon.com> Signed-off-by: Matt Provost <provomat@amazon.com> * OUI combo box refine (#183) * Added a prop clearOnBlur Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> * Added example for prop clearOnBlur Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> --------- Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> * Update Comment List Docs (#252) Signed-off-by: Matt Provost <provomat@amazon.com> * Updated the section Collapsable Nav (#330) Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> Co-authored-by: Sean Neumann <1413295+seanneumann@users.noreply.github.com> * Updated the kibana to opensearch_dashboards (#343) Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> * Updated the section drag and drop (#514) Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> Co-authored-by: Sean Neumann <1413295+seanneumann@users.noreply.github.com> * Update @svgr/core and @svgr/plugin-svgo (#594) (#649) Signed-off-by: Andrey Myssak <andreymyssak@gmail.com> Co-authored-by: Sergey Myssak <sergey.myssak@gmail.com> * Migrate from faker to @faker-js/faker (#594) (#655) Signed-off-by: Andrey Myssak <andreymyssak@gmail.com> Co-authored-by: Sergey Myssak <sergey.myssak@gmail.com> * Bump @faker-js/faker to v8 (#594) (#768) Signed-off-by: Andrey Myssak <andreymyssak@gmail.com> * change beta to experimental (#383) Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> Co-authored-by: Sean Neumann <1413295+seanneumann@users.noreply.github.com> * Normalize interlink URL usage (#698) (#720) Signed-off-by: Sergey Myssak <sergey.myssak@gmail.com> Co-authored-by: Andrey Myssak <andreymyssak@gmail.com> * [CCI] Add `useDeprecatedPropWarning` and align with `deprecated` hoc (#762) * Add useDeprecatedPropWarning and align with deprecated hoc (#761) Co-authored-by: Andrey Myssak <andreymyssak@gmail.com> Signed-off-by: Sergey Myssak <sergey.myssak@gmail.com> * Add multiple props to useDeprecatedPropWarning and pass getMessage to deprecatedComponentWarning (#761) Co-authored-by: Andrey Myssak <andreymyssak@gmail.com> Signed-off-by: Sergey Myssak <sergey.myssak@gmail.com> * Use ExclusiveUnion in interfaces (#761) Co-authored-by: Andrey Myssak <andreymyssak@gmail.com> Signed-off-by: Sergey Myssak <sergey.myssak@gmail.com> --------- Signed-off-by: Sergey Myssak <sergey.myssak@gmail.com> Co-authored-by: Andrey Myssak <andreymyssak@gmail.com> * Update the default branch (#584) (#798) Signed-off-by: Andrey Myssak <andreymyssak@gmail.com> Co-authored-by: Sergey Myssak <sergey.myssak@gmail.com> * [OuiComboBox] Add docs for icon and revise example for clearOnBlur (#806) Signed-off-by: Miki <miki@amazon.com> * Updated bug issue template (#764) * Update bug issue template Signed-off-by: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz> * Add spacing Signed-off-by: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz> --------- Signed-off-by: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz> * Move OuiBottomBar default inline styles to the CSS file (#693) (#694) Signed-off-by: Sergey Myssak <sergey.myssak@gmail.com> Co-authored-by: Andrey Myssak <andreymyssak@gmail.com> * [CCI] Update react-window and react-virtualized-auto-sizer dependencies (#652) * Update react-window (#594) * Update react-virtualized-auto-sizer (#594) Co-authored-by: Sergey Myssak <sergey.myssak@gmail.com> Signed-off-by: Andrey Myssak <andreymyssak@gmail.com> --------- Signed-off-by: Andrey Myssak <andreymyssak@gmail.com> Co-authored-by: Sergey Myssak <sergey.myssak@gmail.com> * Update dropzone (#594) (#651) Signed-off-by: Andrey Myssak <andreymyssak@gmail.com> Co-authored-by: Sergey Myssak <sergey.myssak@gmail.com> * Updated the section Beta badge (#338) Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> * Add props and examples for the combobox (#660) Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> * Updated the links in the section Markdown Format (#365) Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> * Update Notification event page (#549) Signed-off-by: manasvinibs <manasvis@amazon.com> Co-authored-by: Sean Neumann <1413295+seanneumann@users.noreply.github.com> * Updated the content in the section Messages and loading (#350) Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> * Updated the content in the section suggest (#347) Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> * Update affiliation of Andrey and Sergey (#794) Signed-off-by: Matt Provost <provomat@amazon.com> * [CCI] Update dependencies (#716) * Update dependencies (#594) Co-authored-by: Sergey Myssak <sergey.myssak@gmail.com> Signed-off-by: Andrey Myssak <andreymyssak@gmail.com> * Bump @axe-core/puppeteer to v4.6.1 and puppeteer to v19.11.1 Signed-off-by: Andrey Myssak <andreymyssak@gmail.com> * Bump react-window, tabbable and rimraf patch versions Signed-off-by: Andrey Myssak <andreymyssak@gmail.com> * Bump @svgr/core, @svgr/plugin-svgo and @svgr/plugin-jsx to v8 Signed-off-by: Andrey Myssak <andreymyssak@gmail.com> --------- Signed-off-by: Andrey Myssak <andreymyssak@gmail.com> Co-authored-by: Sergey Myssak <sergey.myssak@gmail.com> * Replace @elastic/datemath with @opensearch/datemath (#204) * Replace @elastic/datemath with @opensearch/datemath Signed-off-by: Matt Provost <provomat@amazon.com> * Clean up Signed-off-by: Matt Provost <provomat@amazon.com> --------- Signed-off-by: Matt Provost <provomat@amazon.com> * Bump semver to 7.5.3 (#855) * Bump semver to 7.5.3 Signed-off-by: Matt Provost <provomat@amazon.com> * Add resolution to eslint plugin Signed-off-by: Matt Provost <provomat@amazon.com> --------- Signed-off-by: Matt Provost <provomat@amazon.com> * Remove Split button from OUI docs (#805) (#812) Signed-off-by: Sergey Myssak <sergey.myssak@gmail.com> Co-authored-by: Andrey Myssak <andreymyssak@gmail.com> * Updated the text in the section ErrorBoundary (#366) Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> * Docs site changes (#96) * first change Signed-off-by: Kroosh Crusius <kroosh@amazon.com> * undoing first change Signed-off-by: Kroosh Crusius <kroosh@amazon.com> * making a sample change to test commit success or failure Signed-off-by: Kroosh Crusius <kroosh@amazon.com> * undoes sample change for testing Signed-off-by: Kroosh Crusius <kroosh@amazon.com> * minor changes for tone, deleted references to starter projects as they are not maintained by OSD Signed-off-by: Kroosh Crusius <kroosh@amazon.com> * Delete OUI.iml Removing as included accidentally. * Delete oui.iml Removing as included accidentally. * Update getting_started.md Updated link to node version manager to avoid redirect --------- Signed-off-by: Kroosh Crusius <kroosh@amazon.com> * Update getting_started.md to remove elastic reference and other changes (#502) Signed-off-by: manasvinibs <manasvis@amazon.com> * Removed GitHub column from all the tables (#371) Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> * Updated the content and Icons in the section CssUtilityClasses (#368) Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> * Delete Kibana reference in commands (#535) * Delete kibana reference in commands Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * Change the tgz naming to opensearch Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * Updated doc site link and github reference Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> * Change URL to only include domain Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> --------- Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> Co-authored-by: Sean Neumann <1413295+seanneumann@users.noreply.github.com> * fixed invalid link in FAQ.md (#751) Signed-off-by: Aigerim Suleimenova <aigerim.suleimenova27@gmail.com> --------- Signed-off-by: Matt Provost <provomat@amazon.com> Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> Signed-off-by: Andrey Myssak <andreymyssak@gmail.com> Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com> Signed-off-by: Sergey Myssak <sergey.myssak@gmail.com> Signed-off-by: Miki <miki@amazon.com> Signed-off-by: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz> Signed-off-by: manasvinibs <manasvis@amazon.com> Signed-off-by: Kroosh Crusius <kroosh@amazon.com> Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com> Signed-off-by: Aigerim Suleimenova <aigerim.suleimenova27@gmail.com> Co-authored-by: Matt Provost <provomat@amazon.com> Co-authored-by: Abhishek Reddy <62020972+AbhishekReddy1127@users.noreply.github.com> Co-authored-by: Sean Neumann <1413295+seanneumann@users.noreply.github.com> Co-authored-by: Andrey Myssak <40265277+andreymyssak@users.noreply.github.com> Co-authored-by: Sergey Myssak <sergey.myssak@gmail.com> Co-authored-by: Ashwin P Chandran <ashwinpc1993@gmail.com> Co-authored-by: Andrey Myssak <andreymyssak@gmail.com> Co-authored-by: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz> Co-authored-by: Manasvini B Suryanarayana <manasvis@amazon.com> Co-authored-by: Kroosh <kroosh@amazon.com> Co-authored-by: Qingyang(Abby) Hu <abigailhu2000@gmail.com> Co-authored-by: Aigerim Suleimenova <aigerim.suleimenova27@gmail.com>

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

4dc27e7

…roject#693) Co-authored-by: Andrey Myssak <andreymyssak@gmail.com> Signed-off-by: Sergey Myssak <sergey.myssak@gmail.com>

SergeyMyssak requested review from seanneumann, AMoo-Miki, rednaksi91, KrooshalUX, BSFishy and bandinib-amzn as code owners April 11, 2023 16:45

joshuarrrr reviewed Apr 11, 2023

View reviewed changes

joshuarrrr added the CCI College Contributor Initiative label Apr 13, 2023

SergeyMyssak changed the title ~~[CCI] Move OuiBottomBar default inline styles to the CSS file (#693)~~ [CCI] Move OuiBottomBar default inline styles to the CSS file Apr 14, 2023

ashwin-pc approved these changes Apr 14, 2023

View reviewed changes

ashwin-pc assigned ashwin-pc and BSFishy Apr 14, 2023

joshuarrrr reviewed Apr 25, 2023

View reviewed changes

BSFishy approved these changes Apr 25, 2023

View reviewed changes

joshuarrrr approved these changes Apr 28, 2023

View reviewed changes

bandinib-amzn approved these changes May 1, 2023

View reviewed changes

rednaksi91 approved these changes May 2, 2023

View reviewed changes

rednaksi91 merged commit 99d61c0 into opensearch-project:main May 2, 2023

SergeyMyssak mentioned this pull request May 4, 2023

[CCI] Move OuiBottomBar default inline styles to the CSS file #693

Closed

AMoo-Miki mentioned this pull request Jul 2, 2023

[Manual][backport 1.x] Several changes #872

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[CCI] Move OuiBottomBar default inline styles to the CSS file #694

[CCI] Move OuiBottomBar default inline styles to the CSS file #694

SergeyMyssak commented Apr 11, 2023 •

edited

Loading

joshuarrrr Apr 11, 2023

SergeyMyssak Apr 14, 2023

ashwin-pc Apr 14, 2023

BSFishy Apr 25, 2023

ashwin-pc left a comment

joshuarrrr left a comment

joshuarrrr Apr 25, 2023

BSFishy Apr 25, 2023

SergeyMyssak commented Apr 26, 2023

[CCI] Move OuiBottomBar default inline styles to the CSS file #694

[CCI] Move OuiBottomBar default inline styles to the CSS file #694

Conversation

SergeyMyssak commented Apr 11, 2023 • edited Loading

Description

Issues Resolved

Check List

joshuarrrr Apr 11, 2023

Choose a reason for hiding this comment

SergeyMyssak Apr 14, 2023

Choose a reason for hiding this comment

ashwin-pc Apr 14, 2023

Choose a reason for hiding this comment

BSFishy Apr 25, 2023

Choose a reason for hiding this comment

ashwin-pc left a comment

Choose a reason for hiding this comment

joshuarrrr left a comment

Choose a reason for hiding this comment

joshuarrrr Apr 25, 2023

Choose a reason for hiding this comment

BSFishy Apr 25, 2023

Choose a reason for hiding this comment

SergeyMyssak commented Apr 26, 2023

SergeyMyssak commented Apr 11, 2023 •

edited

Loading