Homepage layout fix (opensearch-project#1472)

* simplify homepage card list by replacing OuiFlex component with CSS grid Signed-off-by: kgcreative <[email protected]> * simplify layout on homepage Signed-off-by: kgcreative <[email protected]> * clean up class properties Signed-off-by: kgcreative <[email protected]> * fix lint errors Signed-off-by: kgcreative <[email protected]> * update changelog Signed-off-by: kgcreative <[email protected]> --------- Signed-off-by: kgcreative <[email protected]>
kgcreative · Dec 12, 2024 · 147fd1c · 147fd1c
1 parent 57ba43c
commit 147fd1c
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 139 deletions.
diff --git 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)
 

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -344,22 +344,20 @@ 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
-  }
+.guideHomePage__benefitsContainer,
+.guideHomePage__featuredComponents {
+  display: grid;
+  gap: $ouiSizeL; // sass-lint:disable-line no-misspelled-properties
+  padding-left: $ouiSizeL;
+  padding-right: $ouiSizeL;
+}
 
-  @include ouiBreakpoint('l') {
-    flex-basis: 30% !important; // sass-lint:disable-line no-important
-  }
+.guideHomePage__benefitsContainer {
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
 
-  @include ouiBreakpoint('xl') {
-    flex-basis: 22% !important; // sass-lint:disable-line no-important
-  }
+.guideHomePage__featuredComponents {
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 
 .guideHomePage__illustration {

diff --git 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';
@@ -85,127 +84,101 @@ export const HomeView = () => (
           </OuiFlexItem>
         </OuiFlexGroup>
       </OuiPanel>
-      <OuiSpacer size="xxl" />
-      <OuiFlexGrid columns={3}>
-        <OuiFlexItem>
-          <OuiCard
-            icon={<OuiIcon size="l" type="accessibility" />}
-            layout="horizontal"
-            display="plain"
-            titleSize="xs"
-            title="Accessible to everyone"
-            description="Uses high contrast, color-blind safe palettes and tested with most
+      <OuiSpacer size="xl" />
+      <div className="guideHomePage__benefitsContainer">
+        <OuiCard
+          icon={<OuiIcon size="l" type="accessibility" />}
+          layout="horizontal"
+          display="plain"
+          titleSize="xs"
+          title="Accessible to everyone"
+          description="Uses high contrast, color-blind safe palettes and tested with most
         assistive technology."
-          />
-        </OuiFlexItem>
-        <OuiFlexItem>
-          <OuiCard
-            icon={<OuiIcon size="l" type="controlsHorizontal" />}
-            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."
-          />
-        </OuiFlexItem>
-        <OuiFlexItem>
-          <OuiCard
-            icon={<OuiIcon size="l" type="documentEdit" />}
-            layout="horizontal"
-            display="plain"
-            titleSize="xs"
-            title="Well documented and tested"
-            description="Code is friendly to the novice and expert alike."
-          />
-        </OuiFlexItem>
-      </OuiFlexGrid>
-      <OuiSpacer size="xxl" />
-      <OuiFlexGroup
-        gutterSize="l"
-        wrap
-        responsive={false}
-        justifyContent="spaceBetween">
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/navigation/button"
-            textAlign="left"
-            image={imageButtons}
-            title="Buttons"
-            description="Buttons for every usage you might need"
-          />
-        </OuiFlexItem>
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/display/card"
-            textAlign="left"
-            image={imageCards}
-            title="Cards"
-            description="Cards like these help you make repeatable content more presentable"
-          />
-        </OuiFlexItem>
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/layout/flex"
-            textAlign="left"
-            image={imageFlexgrid}
-            title="Flexible layouts"
-            description="Create layouts by using flex groups, grids, and items"
-          />
-        </OuiFlexItem>
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/forms/form-layouts"
-            textAlign="left"
-            image={imageForms}
-            title="Forms"
-            description="Input tags, layouts, and validation for your forms"
-          />
-        </OuiFlexItem>
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/display/icons"
-            textAlign="left"
-            image={imageIcons}
-            title="Icons"
-            description="Our SVG icon library gives you full control over size and color"
-          />
-        </OuiFlexItem>
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/layout/page"
-            textAlign="left"
-            image={imagePages}
-            title="Pages"
-            description="Layout your whole application page with this component and its series of child components"
-          />
-        </OuiFlexItem>
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/tabular-content/tables"
-            textAlign="left"
-            image={imageTables}
-            title="Tables"
-            description="Build tables from individual components or high level wrappers"
-          />
-        </OuiFlexItem>
-        <OuiFlexItem grow={false} className="guideHomePage__blockformCard">
-          <OuiCard
-            hasBorder
-            href="#/display/text"
-            textAlign="left"
-            image={imageText}
-            title="Text"
-            description="Simple HTML text like paragraphs and lists are wrapped in a single text component for styling"
-          />
-        </OuiFlexItem>
-      </OuiFlexGroup>
+        />
+        <OuiCard
+          icon={<OuiIcon size="l" type="controlsHorizontal" />}
+          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."
+        />
+        <OuiCard
+          icon={<OuiIcon size="l" type="documentEdit" />}
+          layout="horizontal"
+          display="plain"
+          titleSize="xs"
+          title="Well documented and tested"
+          description="Code is friendly to the novice and expert alike."
+        />
+      </div>
+      <OuiSpacer size="xl" />
+      <div className="guideHomePage__featuredComponents">
+        <OuiCard
+          hasBorder
+          href="#/navigation/button"
+          textAlign="left"
+          image={imageButtons}
+          title="Buttons"
+          description="Buttons for every usage you might need"
+        />
+        <OuiCard
+          hasBorder
+          href="#/display/card"
+          textAlign="left"
+          image={imageCards}
+          title="Cards"
+          description="Cards like these help you make repeatable content more presentable"
+        />
+        <OuiCard
+          hasBorder
+          href="#/layout/flex"
+          textAlign="left"
+          image={imageFlexgrid}
+          title="Flexible layouts"
+          description="Create layouts by using flex groups, grids, and items"
+        />
+        <OuiCard
+          hasBorder
+          href="#/forms/form-layouts"
+          textAlign="left"
+          image={imageForms}
+          title="Forms"
+          description="Input tags, layouts, and validation for your forms"
+        />
+        <OuiCard
+          hasBorder
+          href="#/display/icons"
+          textAlign="left"
+          image={imageIcons}
+          title="Icons"
+          description="Our SVG icon library gives you full control over size and color"
+        />
+        <OuiCard
+          hasBorder
+          href="#/layout/page"
+          textAlign="left"
+          image={imagePages}
+          title="Pages"
+          description="Layout your whole application page with this component and its series of child components"
+        />
+        <OuiCard
+          hasBorder
+          href="#/tabular-content/tables"
+          textAlign="left"
+          image={imageTables}
+          title="Tables"
+          description="Build tables from individual components or high level wrappers"
+        />
+        <OuiCard
+          hasBorder
+          href="#/display/text"
+          textAlign="left"
+          image={imageText}
+          title="Text"
+          description="Simple HTML text like paragraphs and lists are wrapped in a single text component for styling"
+        />
+      </div>
 
       <OuiSpacer size="xl" />
       <div>