From 143a5e5a9d539ff5d3992c977086a93044c1af61 Mon Sep 17 00:00:00 2001 From: kgcreative <3443142+kgcreative@users.noreply.github.com> Date: Fri, 6 Dec 2024 15:53:07 -0800 Subject: [PATCH 1/5] simplify homepage card list by replacing OuiFlex component with CSS grid Signed-off-by: kgcreative <3443142+kgcreative@users.noreply.github.com> --- src-docs/src/components/guide_components.scss | 20 +-- src-docs/src/views/home/home_view.js | 152 ++++++++---------- 2 files changed, 70 insertions(+), 102 deletions(-) diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index 79b7c46aeb..4bc42796f6 100644 --- a/src-docs/src/components/guide_components.scss +++ b/src-docs/src/components/guide_components.scss @@ -344,22 +344,10 @@ body { } } -.guideHomePage__blockformCard { - min-width: 200px; - flex-basis: 100% !important; - - // sass-lint:disable-block mixins-before-declarations - @include ouiBreakpoint('s', 'm') { - flex-basis: 45% !important; // sass-lint:disable-line no-important - } - - @include ouiBreakpoint('l') { - flex-basis: 30% !important; // sass-lint:disable-line no-important - } - - @include ouiBreakpoint('xl') { - flex-basis: 22% !important; // sass-lint:disable-line no-important - } +.guideHomePage__blockformContainer { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: $ouiSizeL; } .guideHomePage__illustration { diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js index fa86cfe2d0..362351a0c2 100644 --- a/src-docs/src/views/home/home_view.js +++ b/src-docs/src/views/home/home_view.js @@ -120,92 +120,72 @@ export const HomeView = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ + + + + + + + +
From 2dee8750cee93c24cfcc6ae75e495934c82ca1df Mon Sep 17 00:00:00 2001 From: kgcreative <3443142+kgcreative@users.noreply.github.com> Date: Mon, 9 Dec 2024 12:36:48 -0800 Subject: [PATCH 2/5] simplify layout on homepage Signed-off-by: kgcreative <3443142+kgcreative@users.noreply.github.com> --- src-docs/src/components/guide_components.scss | 12 +++- src-docs/src/views/home/home_view.js | 64 +++++++++---------- 2 files changed, 40 insertions(+), 36 deletions(-) diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index 4bc42796f6..33b614a72e 100644 --- a/src-docs/src/components/guide_components.scss +++ b/src-docs/src/components/guide_components.scss @@ -344,7 +344,17 @@ body { } } -.guideHomePage__blockformContainer { +.guideHomePage__benefitsContainer, .guideHomePage__featuredComponents { + padding-left: $ouiSizeL; + padding-right: $ouiSizeL; +} +.guideHomePage__benefitsContainer { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: $ouiSizeL; +} + +.guideHomePage__featuredComponents { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: $ouiSizeL; diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js index 362351a0c2..3d9ab83345 100644 --- a/src-docs/src/views/home/home_view.js +++ b/src-docs/src/views/home/home_view.js @@ -85,42 +85,36 @@ export const HomeView = () => ( - - - - } - layout="horizontal" - display="plain" - titleSize="xs" - title="Accessible to everyone" - description="Uses high contrast, color-blind safe palettes and tested with most + +
+ } + layout="horizontal" + display="plain" + titleSize="xs" + title="Accessible to everyone" + description="Uses high contrast, color-blind safe palettes and tested with most assistive technology." - /> - - - } - layout="horizontal" - display="plain" - titleSize="xs" - title="Flexible and composable" - description="Configurable enough to meet the needs of a wide array of contexts while maintaining brand and low-level consistency." - /> - - - } - layout="horizontal" - display="plain" - titleSize="xs" - title="Well documented and tested" - description="Code is friendly to the novice and expert alike." - /> - - - -
+ /> + } + layout="horizontal" + display="plain" + titleSize="xs" + title="Flexible and composable" + description="Configurable enough to meet the needs of a wide array of contexts while maintaining brand and low-level consistency." + /> + } + layout="horizontal" + display="plain" + titleSize="xs" + title="Well documented and tested" + description="Code is friendly to the novice and expert alike." + /> +
+ +
Date: Mon, 9 Dec 2024 12:39:46 -0800 Subject: [PATCH 3/5] clean up class properties Signed-off-by: kgcreative <3443142+kgcreative@users.noreply.github.com> --- src-docs/src/components/guide_components.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index 33b614a72e..79afb39ee6 100644 --- a/src-docs/src/components/guide_components.scss +++ b/src-docs/src/components/guide_components.scss @@ -345,19 +345,17 @@ body { } .guideHomePage__benefitsContainer, .guideHomePage__featuredComponents { - padding-left: $ouiSizeL; - padding-right: $ouiSizeL; + display: grid; + gap: $ouiSizeL; + padding-left: $ouiSizeL; + padding-right: $ouiSizeL; } .guideHomePage__benefitsContainer { - display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: $ouiSizeL; } .guideHomePage__featuredComponents { - display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: $ouiSizeL; } .guideHomePage__illustration { From e22f57b10f5d95988f36ee62664826fa6f7a7d5c Mon Sep 17 00:00:00 2001 From: kgcreative <3443142+kgcreative@users.noreply.github.com> Date: Mon, 9 Dec 2024 13:16:41 -0800 Subject: [PATCH 4/5] fix lint errors Signed-off-by: kgcreative <3443142+kgcreative@users.noreply.github.com> --- src-docs/src/components/guide_components.scss | 6 ++++-- src-docs/src/views/home/home_view.js | 1 - 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index 79afb39ee6..5782b15355 100644 --- a/src-docs/src/components/guide_components.scss +++ b/src-docs/src/components/guide_components.scss @@ -344,12 +344,14 @@ body { } } -.guideHomePage__benefitsContainer, .guideHomePage__featuredComponents { +.guideHomePage__benefitsContainer, +.guideHomePage__featuredComponents { display: grid; - gap: $ouiSizeL; + gap: $ouiSizeL; // sass-lint:disable-line no-misspelled-properties padding-left: $ouiSizeL; padding-right: $ouiSizeL; } + .guideHomePage__benefitsContainer { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js index 3d9ab83345..9735647dbb 100644 --- a/src-docs/src/views/home/home_view.js +++ b/src-docs/src/views/home/home_view.js @@ -29,7 +29,6 @@ import { OuiTitle, OuiPanel, OuiIcon, - OuiFlexGrid, OuiPageContent, OuiPageContentBody, } from '../../../../src/components'; From 33d4a5e95a5d58d15a156f5fe5da8d81e93e803c Mon Sep 17 00:00:00 2001 From: kgcreative <3443142+kgcreative@users.noreply.github.com> Date: Mon, 9 Dec 2024 13:44:12 -0800 Subject: [PATCH 5/5] update changelog Signed-off-by: kgcreative <3443142+kgcreative@users.noreply.github.com> --- CHANGELOG.md | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2fd198314f..8c8be5dc42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,9 +8,7 @@ ### 📈 Features/Enhancements -- Add vertical oriented button group ([#755](https://github.com/opensearch-project/oui/pull/755)) -- Add sparkleFilled icon ([#1452](https://github.com/opensearch-project/oui/pull/1452)) -- Update colors v9 theme ([#1460](https://github.com/opensearch-project/oui/pull/1460)) + ### 🐛 Bug Fixes @@ -19,7 +17,7 @@ ### 📝 Documentation - - Update figma link to latest v2 ([#1456](https://github.com/opensearch-project/oui/pull/1456)) + - Refactor OUI Documentation homepage layout ([#1472](https://github.com/opensearch-project/oui/pull/1472)) ### 🛠 Maintenance @@ -30,6 +28,15 @@ ### 🔩 Tests +## [`1.18.0`](https://github.com/opensearch-project/oui/tree/1.18) + +### 📈 Features/Enhancements +- Add vertical oriented button group ([#755](https://github.com/opensearch-project/oui/pull/755)) +- Add sparkleFilled icon ([#1452](https://github.com/opensearch-project/oui/pull/1452)) +- Update colors v9 theme ([#1460](https://github.com/opensearch-project/oui/pull/1460)) + +### 📝 Documentation +- Update figma link to latest v2 ([#1456](https://github.com/opensearch-project/oui/pull/1456)) ## [`1.17.0`](https://github.com/opensearch-project/oui/tree/1.17)