-
Notifications
You must be signed in to change notification settings - Fork 844
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[EuiDescriptionList] New
gutterSize prop (#6175)
* Add gap prop to EuiDescriptionList type * Revert styling changes * Created gutterSize prop for EuiDescriptionList by utiilizing margins for the Title and Description based on the size passed into the component * Added documentation for the new EuiDescriptionList gutterSize prop * Updated snapshots for DescriptionList * Updated comment explaining the use of the gutterSize prop and added a CHANGELOG entry * Removed unused code * Commit snapshot file because somehow, I'm always forgetting to do that * Update src/components/description_list/description_list_description.tsx Co-authored-by: Greg Thompson <thompson.glowe@gmail.com> * Removed the EuiDescription gutterSize example. Created a combined DescriptionList example for the gutterSize, align, and compressed props. * Code clean up Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
- Loading branch information
1 parent
d40e9e9
commit 6018d7e
Showing
14 changed files
with
227 additions
and
79 deletions.
There are no files selected for viewing
This file contains 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
184 changes: 138 additions & 46 deletions
184
src-docs/src/views/description_list/description_list_styling.js
This file contains 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 |
|---|---|---|
| @@ -1,46 +1,138 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { EuiDescriptionList, EuiSpacer } from '../../../../src/components'; | ||
|
|
||
| const favoriteVideoGames = [ | ||
| { | ||
| title: 'The Elder Scrolls: Morrowind', | ||
| description: 'The opening music alone evokes such strong memories.', | ||
| }, | ||
| { | ||
| title: 'TIE Fighter', | ||
| description: | ||
| 'The sequel to XWING, join the dark side and fly for the Emporer.', | ||
| }, | ||
| { | ||
| title: 'Quake 2', | ||
| description: 'The game that made me drop out of college.', | ||
| }, | ||
| ]; | ||
| export default () => ( | ||
| <div style={{ maxWidth: '400px' }}> | ||
| <EuiDescriptionList | ||
| listItems={favoriteVideoGames} | ||
| align="center" | ||
| compressed | ||
| /> | ||
|
|
||
| <EuiSpacer size="l" /> | ||
|
|
||
| <EuiDescriptionList | ||
| listItems={favoriteVideoGames} | ||
| type="column" | ||
| align="center" | ||
| compressed | ||
| /> | ||
|
|
||
| <EuiSpacer size="l" /> | ||
|
|
||
| <EuiDescriptionList | ||
| listItems={favoriteVideoGames} | ||
| type="inline" | ||
| align="center" | ||
| compressed | ||
| /> | ||
| </div> | ||
| ); | ||
| import React, { useState } from 'react'; | ||
|
|
||
| import { | ||
| EuiDescriptionList, | ||
| EuiSpacer, | ||
| EuiButtonGroup, | ||
| EuiSwitch, | ||
| EuiTitle, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| } from '../../../../src/components'; | ||
|
|
||
| export default () => { | ||
| const favoriteVideoGames = [ | ||
| { | ||
| title: 'The Elder Scrolls: Morrowind', | ||
| description: 'The opening music alone evokes such strong memories.', | ||
| }, | ||
| { | ||
| title: 'TIE Fighter', | ||
| description: | ||
| 'The sequel to XWING, join the dark side and fly for the Emporer.', | ||
| }, | ||
| { | ||
| title: 'Quake 2', | ||
| description: 'The game that made me drop out of college.', | ||
| }, | ||
| ]; | ||
|
|
||
| const alignToggleButtons = [ | ||
| { | ||
| id: 'left', | ||
| label: 'Left', | ||
| }, | ||
| { | ||
| id: 'center', | ||
| label: 'Center', | ||
| }, | ||
| ]; | ||
|
|
||
| const [alignSelected, setAlignSelected] = useState('center'); | ||
|
|
||
| const alignOnChange = (id) => { | ||
| setAlignSelected(id); | ||
| }; | ||
|
|
||
| const gutterToggleButtons = [ | ||
| { | ||
| id: 's', | ||
| label: 'Small', | ||
| }, | ||
| { | ||
| id: 'm', | ||
| label: 'Medium', | ||
| }, | ||
| ]; | ||
|
|
||
| const [gutterSelected, setGutterSelected] = useState('m'); | ||
|
|
||
| const gutterOnChange = (id) => { | ||
| setGutterSelected(id); | ||
| }; | ||
|
|
||
| const [compressed, setCompressed] = useState(true); | ||
|
|
||
| const compressedOnChange = () => { | ||
| setCompressed(!compressed); | ||
| }; | ||
|
|
||
| return ( | ||
| <div style={{ maxWidth: '400px' }}> | ||
| <EuiFlexGroup> | ||
| <EuiFlexItem> | ||
| <EuiTitle size="xxs"> | ||
| <h3>Align options</h3> | ||
| </EuiTitle> | ||
| <EuiButtonGroup | ||
| legend="Toggle for the EuiDescription align prop" | ||
| options={alignToggleButtons} | ||
| idSelected={alignSelected} | ||
| onChange={(id) => alignOnChange(id)} | ||
| /> | ||
| </EuiFlexItem> | ||
|
|
||
| <EuiFlexItem> | ||
| <EuiTitle size="xxs"> | ||
| <h3>Row gutter sizes</h3> | ||
| </EuiTitle> | ||
| <EuiButtonGroup | ||
| legend="Toggle for the EuiDescription gutterSize prop" | ||
| options={gutterToggleButtons} | ||
| idSelected={gutterSelected} | ||
| onChange={(id) => gutterOnChange(id)} | ||
| /> | ||
| </EuiFlexItem> | ||
|
|
||
| <EuiFlexItem> | ||
| <EuiTitle size="xxs"> | ||
| <h3>Compressed</h3> | ||
| </EuiTitle> | ||
| <EuiSwitch | ||
| label="Compressed" | ||
| checked={compressed} | ||
| onChange={compressedOnChange} | ||
| /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
|
|
||
| <EuiSpacer /> | ||
|
|
||
| <EuiDescriptionList | ||
| listItems={favoriteVideoGames} | ||
| align={alignSelected} | ||
| compressed={compressed} | ||
| gutterSize={gutterSelected} | ||
| /> | ||
|
|
||
| <EuiSpacer size="l" /> | ||
|
|
||
| <EuiDescriptionList | ||
| listItems={favoriteVideoGames} | ||
| type="column" | ||
| align={alignSelected} | ||
| compressed={compressed} | ||
| gutterSize={gutterSelected} | ||
| /> | ||
|
|
||
| <EuiSpacer size="l" /> | ||
|
|
||
| <EuiDescriptionList | ||
| listItems={favoriteVideoGames} | ||
| type="inline" | ||
| align={alignSelected} | ||
| compressed={compressed} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; |
This file contains 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 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 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
Oops, something went wrong.