-
Notifications
You must be signed in to change notification settings - Fork 843
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[EuiStepsHorizontal] Create
size prop to generate smaller step circ…
…les for horizontal steps (#6928) * [EuiStepsHorizontal] Add size prop that generates a smaller step circle for horizontal steps * [EuiStepsHorizontal] Add documentation for new size prop * [EuiStepsHorizontal] Update snapshot test and add new test for size prop * Changelog * Whoops! Wrong changelog number * Update src/components/steps/step_horizontal.styles.ts Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> * [PR Feedback] Make the internal step size and inset generation flexible. * Update upcoming_changelogs/6928.md Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --------- Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
- Loading branch information
Showing
10 changed files
with
179 additions
and
45 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
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,30 +1,67 @@ | ||
| import React from 'react'; | ||
| import React, { useState } from 'react'; | ||
|
|
||
| import { | ||
| EuiStepsHorizontal, | ||
| EuiStepsHorizontalProps, | ||
| EuiStepsHorizontalSizes, | ||
| EuiButtonGroup, | ||
| EuiTitle, | ||
| EuiSpacer, | ||
| } from '../../../../src/components'; | ||
|
|
||
| const horizontalSteps: EuiStepsHorizontalProps['steps'] = [ | ||
| { | ||
| title: 'Completed step 1', | ||
| status: 'complete', | ||
| onClick: () => {}, | ||
| }, | ||
| { | ||
| title: 'Selected step 2', | ||
| status: 'current', | ||
| onClick: () => {}, | ||
| }, | ||
| { | ||
| title: 'Incomplete step 3 which will wrap to the next line', | ||
| onClick: () => {}, | ||
| }, | ||
| { | ||
| title: 'Disabled step 4', | ||
| status: 'disabled', | ||
| onClick: () => {}, | ||
| }, | ||
| ]; | ||
| export default () => { | ||
| const horizontalSteps: EuiStepsHorizontalProps['steps'] = [ | ||
| { | ||
| title: 'Completed step 1', | ||
| status: 'complete', | ||
| onClick: () => {}, | ||
| }, | ||
| { | ||
| title: 'Selected step 2', | ||
| status: 'current', | ||
| onClick: () => {}, | ||
| }, | ||
| { | ||
| title: 'Incomplete step 3 which will wrap to the next line', | ||
| onClick: () => {}, | ||
| }, | ||
| { | ||
| title: 'Disabled step 4', | ||
| status: 'disabled', | ||
| onClick: () => {}, | ||
| }, | ||
| ]; | ||
|
|
||
| export default () => <EuiStepsHorizontal steps={horizontalSteps} />; | ||
| const sizeButtons = [ | ||
| { | ||
| id: 's', | ||
| label: 'Small', | ||
| }, | ||
| { | ||
| id: 'm', | ||
| label: 'Medium', | ||
| }, | ||
| ]; | ||
|
|
||
| const [toggleSize, setToggleSize] = useState<EuiStepsHorizontalSizes>('m'); | ||
|
|
||
| const sizeOnChange = (optionId: EuiStepsHorizontalSizes) => { | ||
| setToggleSize(optionId); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <EuiTitle size="xxs"> | ||
| <h3>Step Size</h3> | ||
| </EuiTitle> | ||
| <EuiSpacer size="s" /> | ||
| <EuiButtonGroup | ||
| legend="Horizontal step size toggle" | ||
| options={sizeButtons} | ||
| idSelected={toggleSize} | ||
| onChange={(id) => sizeOnChange(id as EuiStepsHorizontalSizes)} | ||
| /> | ||
| <EuiStepsHorizontal steps={horizontalSteps} size={toggleSize} /> | ||
| </> | ||
| ); | ||
| }; |
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
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.