LayoutGrid - Add responsive column layout feature (HDS-5692)
#3438
+257
−14
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,26 +2,43 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only'; | |
|
|
||
| import ShwTextH2 from 'showcase/components/shw/text/h2'; | ||
| import ShwTextH3 from 'showcase/components/shw/text/h3'; | ||
| import ShwTextH4 from 'showcase/components/shw/text/h4'; | ||
| import ShwTextBody from 'showcase/components/shw/text/body'; | ||
| import ShwGrid from 'showcase/components/shw/grid'; | ||
| import ShwDivider from 'showcase/components/shw/divider'; | ||
|
|
||
| import CodeFragmentWithPlaceholderItems from '../code-fragments/with-placeholder-items'; | ||
|
|
||
| import { hash } from '@ember/helper'; | ||
|
|
||
| const SubSectionWidthManagement: TemplateOnlyComponent = <template> | ||
| <ShwTextH2>Column width management</ShwTextH2> | ||
|
|
||
| <ShwTextH3>No column min width or column width set (fluid grid layout)</ShwTextH3> | ||
|
|
||
| <ShwGrid | ||
| @columns={{1}} | ||
| @gap="1.5rem" | ||
| class="shw-layout-grid-example-tint-flex-items" | ||
| as |SG| | ||
| > | ||
| <SG.Item @label="min-width defaults to 0px"> | ||
| <CodeFragmentWithPlaceholderItems /> | ||
| </SG.Item> | ||
| </ShwGrid> | ||
|
|
||
| <ShwDivider @level={{2}} /> | ||
|
|
||
| <ShwTextH3>Column min width (fluid grid layout)</ShwTextH3> | ||
|
|
||
| <ShwTextH4>With same number of items or more than column tracks</ShwTextH4> | ||
|
|
||
| <ShwGrid | ||
| @columns={{1}} | ||
| @gap="1.5rem" | ||
| class="shw-layout-grid-example-tint-flex-items" | ||
| as |SG| | ||
| > | ||
| <SG.Item @label="250px min width columns"> | ||
| <CodeFragmentWithPlaceholderItems @columnMinWidth="250px" /> | ||
| </SG.Item> | ||
|
|
@@ -33,7 +50,16 @@ const SubSectionWidthManagement: TemplateOnlyComponent = <template> | |
| <SG.Item @label="33.33% min width columns w/ 4 items"> | ||
| <CodeFragmentWithPlaceholderItems @columnMinWidth="33.33%" /> | ||
| </SG.Item> | ||
| </ShwGrid> | ||
|
|
||
| <ShwTextH4>With fewer items than column tracks</ShwTextH4> | ||
|
|
||
| <ShwGrid | ||
| @columns={{1}} | ||
| @gap="1.5rem" | ||
| class="shw-layout-grid-example-tint-flex-items" | ||
| as |SG| | ||
| > | ||
| <SG.Item @label="33.33% min width columns w/ 2 items"> | ||
| <CodeFragmentWithPlaceholderItems | ||
| @columnCount={{2}} | ||
|
|
@@ -51,18 +77,33 @@ const SubSectionWidthManagement: TemplateOnlyComponent = <template> | |
|
|
||
| <ShwDivider @level={{2}} /> | ||
|
|
||
| <ShwTextH3>Column width (fixed grid layout)</ShwTextH3> | ||
|
|
||
| <ShwTextH4>With same number of items or more than column tracks</ShwTextH4> | ||
|
|
||
| <ShwGrid | ||
| @columns={{1}} | ||
| @gap="1.5rem" | ||
| class="shw-layout-grid-example-tint-flex-items" | ||
| as |SG| | ||
| > | ||
| <SG.Item @label="25% width columns w/ 4 items"> | ||
| <CodeFragmentWithPlaceholderItems @columnWidth="25%" /> | ||
| </SG.Item> | ||
|
|
||
| <SG.Item @label="33.33% width columns w/ 4 items"> | ||
| <CodeFragmentWithPlaceholderItems @columnWidth="33.33%" /> | ||
| </SG.Item> | ||
| </ShwGrid> | ||
|
|
||
| <ShwTextH4>With fewer items than column tracks</ShwTextH4> | ||
|
|
||
| <ShwGrid | ||
| @columns={{1}} | ||
| @gap="1.5rem" | ||
| class="shw-layout-grid-example-tint-flex-items" | ||
| as |SG| | ||
| > | ||
| <SG.Item @label="33.33% width columns w/ 2 items"> | ||
| <CodeFragmentWithPlaceholderItems | ||
| @columnCount={{2}} | ||
|
|
@@ -76,6 +117,79 @@ const SubSectionWidthManagement: TemplateOnlyComponent = <template> | |
| @columnWidth="33.33%" | ||
| /> | ||
| </SG.Item> | ||
|
|
||
| <SG.Item @label="50% width columns w/ 4 items"> | ||
| <CodeFragmentWithPlaceholderItems @columnCount={{4}} @columnWidth="50%" /> | ||
| </SG.Item> | ||
| </ShwGrid> | ||
|
|
||
| <ShwDivider @level={{2}} /> | ||
|
|
||
| <ShwTextH4>With responsive column widths</ShwTextH4> | ||
|
Contributor
There was a problem hiding this comment. do you think we should have these in a "frameless" page so we can test them? the downside would be that we can't take Percy snapshots of them so they would not be covered for visual regression testing alternatively, we could create a shared code snippet, to be used here but also in a frameless page, and we could put a link to it like I'm doing here: https://hds-showcase-git-project-solar-phase-1-main-fe-1ffc6c-hashicorp.vercel.app/foundations/theming#demo (see the link under the "demo" section) |
||
|
|
||
| <ShwTextBody>With same number of items or more than column tracks</ShwTextBody> | ||
|
|
||
| <ShwGrid | ||
| @columns={{1}} | ||
| @gap="1.5rem" | ||
| class="shw-layout-grid-example-tint-flex-items" | ||
| as |SG| | ||
| > | ||
| <SG.Item | ||
| @label="sm view = 1 column, md view = 2 columns, lg view = 3 columns, xl view = 4 columns, xxl view = 5 columns" | ||
| > | ||
| <CodeFragmentWithPlaceholderItems | ||
| @columnCount={{5}} | ||
| @columnWidth={{hash sm="100%" md="50%" lg="33.33%" xl="25%" xxl="20%"}} | ||
| /> | ||
| </SG.Item> | ||
|
|
||
| <SG.Item @label="sm view = 1 column, md & all other views = 3 columns"> | ||
| <CodeFragmentWithPlaceholderItems | ||
| @columnCount={{5}} | ||
| @columnWidth={{hash sm="100%" md="33.33%"}} | ||
| /> | ||
| </SG.Item> | ||
|
|
||
| <SG.Item | ||
| @label="sm view = 1 column, md & all other views except xxl = 3 columns, xxl = 5 columns" | ||
| > | ||
| <CodeFragmentWithPlaceholderItems | ||
| @columnCount={{5}} | ||
| @columnWidth={{hash sm="100%" md="33.33%" xxl="20%"}} | ||
| /> | ||
| </SG.Item> | ||
|
|
||
| <SG.Item | ||
| @label="sm view & all other views except xxl = 2 columns, xxl = 5 columns" | ||
| > | ||
| <CodeFragmentWithPlaceholderItems | ||
| @columnCount={{5}} | ||
| @columnWidth={{hash sm="50%" xxl="20%"}} | ||
| /> | ||
| </SG.Item> | ||
| </ShwGrid> | ||
|
|
||
| <ShwTextBody>With fewer items than column tracks</ShwTextBody> | ||
|
|
||
| <ShwGrid | ||
| @columns={{1}} | ||
| @gap="1.5rem" | ||
| class="shw-layout-grid-example-tint-flex-items" | ||
| as |SG| | ||
| > | ||
| <SG.Item @label="sm=50% md=33.33% lg=25% xl=20% xxl=16.67%"> | ||
| <CodeFragmentWithPlaceholderItems | ||
| @columnCount={{1}} | ||
| @columnWidth={{hash | ||
| sm="50%" | ||
| md="33.33%" | ||
| lg="25%" | ||
| xl="20%" | ||
| xxl="16.67%" | ||
| }} | ||
| /> | ||
| </SG.Item> | ||
| </ShwGrid> | ||
|
|
||
| <ShwDivider @level={{2}} /> | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[issue?] should this be required, with the current mobile-first approach? otherwise, with this code
this happens:
alternatively we could use somehow the width/min-width arguments, but I suspect it will make the API more complex
see what you find out, what works better