-
Notifications
You must be signed in to change notification settings - Fork 834
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Storybook] Add stories for more components (letter P) - Part 2 #7674
Merged
mgadewoll
merged 11 commits into
elastic:main
from
mgadewoll:storybook/7481-stories-p-part-2
Apr 26, 2024
Merged
Changes from all commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
4335d9b
refactor(EuiPopover): ensure position update on prop change
mgadewoll 2fc835d
docs(storybook): add popover and related stories
mgadewoll b29ab43
add stories for EuiPortal and EuiProgress
mgadewoll ee3c402
docs(storybook): use enableFunctionToggleControls
mgadewoll 92d05d0
Merge branch 'main' into storybook/7481-stories-p-part-2
cee-chen 59f936c
[EuiInputPopover] misc cleanup
cee-chen e93475f
[EuiInputPopover] Add example that more clearly demonstrates `anchorP…
cee-chen 5023465
[EuiPopover] Improve `buffer` arg
cee-chen c01f0d6
[EuiPopover] Include `panelPaddingSize` context demo
cee-chen 55aaeb3
[EuiProgress] Match default false
cee-chen 95db072
docs(storybook): disable closePopover prop for EuiPopover story
mgadewoll File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,125 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
|
||
import React, { useState } from 'react'; | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
|
||
import { | ||
disableStorybookControls, | ||
enableFunctionToggleControls, | ||
moveStorybookControlsToCategory, | ||
} from '../../../.storybook/utils'; | ||
import { EuiFieldText } from '../form'; | ||
import { EuiInputPopover, EuiInputPopoverProps } from './input_popover'; | ||
|
||
const meta: Meta<EuiInputPopoverProps> = { | ||
title: 'Layout/EuiInputPopover', | ||
component: EuiInputPopover, | ||
args: { | ||
anchorPosition: 'downLeft', | ||
attachToAnchor: true, | ||
repositionToCrossAxis: false, | ||
display: 'block', | ||
panelPaddingSize: 's', | ||
closeOnScroll: false, | ||
ownFocus: false, | ||
disableFocusTrap: false, | ||
fullWidth: false, | ||
panelMinWidth: 0, | ||
offset: undefined, | ||
buffer: undefined, | ||
hasDragDrop: false, | ||
panelClassName: '', | ||
popoverScreenReaderText: '', | ||
}, | ||
}; | ||
moveStorybookControlsToCategory( | ||
meta, | ||
[ | ||
'attachToAnchor', | ||
'buffer', | ||
'closePopover', | ||
'disableFocusTrap', | ||
'display', | ||
'hasDragDrop', | ||
'isOpen', | ||
'offset', | ||
'onPositionChange', | ||
'ownFocus', | ||
'panelClassName', | ||
'panelPaddingSize', | ||
'popoverScreenReaderText', | ||
'repositionToCrossAxis', | ||
], | ||
'EuiPopover props' | ||
); | ||
disableStorybookControls(meta, ['input', 'inputRef']); | ||
|
||
export default meta; | ||
type Story = StoryObj<EuiInputPopoverProps>; | ||
|
||
export const Playground: Story = { | ||
args: { | ||
children: 'Popover content', | ||
isOpen: true, | ||
}, | ||
render: (args) => <StatefulInputPopover {...args} />, | ||
}; | ||
enableFunctionToggleControls(Playground, [ | ||
'closePopover', | ||
'onPanelResize', | ||
'onPositionChange', | ||
]); | ||
|
||
const StatefulInputPopover = ({ | ||
children, | ||
input, | ||
closePopover, | ||
isOpen: _isOpen, | ||
...rest | ||
}: EuiInputPopoverProps) => { | ||
const [isOpen, setOpen] = useState(_isOpen); | ||
|
||
const handleOnClose = () => { | ||
setOpen(false); | ||
closePopover?.(); | ||
}; | ||
|
||
return ( | ||
<EuiInputPopover | ||
isOpen={isOpen} | ||
closePopover={handleOnClose} | ||
input={ | ||
<EuiFieldText | ||
onFocus={() => setOpen(true)} | ||
placeholder="Focus me to toggle an input popover" | ||
aria-label="Popover attached to input element" | ||
/> | ||
} | ||
{...rest} | ||
> | ||
{children} | ||
</EuiInputPopover> | ||
); | ||
}; | ||
|
||
export const AnchorPosition: Story = { | ||
parameters: { | ||
controls: { include: ['anchorPosition', 'panelMinWidth'] }, | ||
}, | ||
args: { | ||
children: 'Popover content', | ||
isOpen: true, | ||
panelMinWidth: 500, | ||
}, | ||
render: (args) => ( | ||
<div css={{ display: 'flex', justifyContent: 'center' }}> | ||
<StatefulInputPopover {...args} /> | ||
</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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,123 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
|
||
import React, { useState } from 'react'; | ||
import { css } from '@emotion/react'; | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
|
||
import { | ||
disableStorybookControls, | ||
enableFunctionToggleControls, | ||
} from '../../../.storybook/utils'; | ||
import { EuiButton } from '../button'; | ||
import { EuiFlexGroup } from '../flex'; | ||
import { EuiText } from '../text'; | ||
|
||
import { EuiPopoverTitle } from './popover_title'; | ||
import { EuiPopoverFooter } from './popover_footer'; | ||
import { EuiPopover, EuiPopoverProps } from './popover'; | ||
|
||
const meta: Meta<EuiPopoverProps> = { | ||
title: 'Layout/EuiPopover/EuiPopover', | ||
component: EuiPopover, | ||
parameters: { | ||
layout: 'fullscreen', | ||
}, | ||
args: { | ||
isOpen: false, | ||
ownFocus: true, | ||
panelPaddingSize: 'm', | ||
buffer: 16, | ||
hasArrow: true, | ||
anchorPosition: 'downCenter', | ||
display: 'inline-block', | ||
repositionToCrossAxis: true, | ||
repositionOnScroll: false, | ||
// adding defaults for quicker/easier QA | ||
arrowChildren: '', | ||
attachToAnchor: false, | ||
hasDragDrop: false, | ||
panelClassName: '', | ||
popoverScreenReaderText: '', | ||
}, | ||
argTypes: { | ||
buffer: { control: 'number' }, // For ease of QA | ||
}, | ||
}; | ||
disableStorybookControls(meta, ['panelRef', 'popoverRef', 'closePopover']); | ||
|
||
export default meta; | ||
type Story = StoryObj<EuiPopoverProps>; | ||
|
||
export const Playground: Story = { | ||
args: { | ||
children: 'This is a popover', | ||
button: 'popover trigger', | ||
isOpen: true, | ||
}, | ||
render: (args) => <StatefulPopover {...args} />, | ||
}; | ||
enableFunctionToggleControls(Playground, ['onPositionChange']); | ||
|
||
const StatefulPopover = ({ | ||
button, | ||
closePopover, | ||
isOpen: _isOpen, | ||
...rest | ||
}: EuiPopoverProps) => { | ||
const [isOpen, setOpen] = useState(_isOpen); | ||
|
||
const handleOnClose = () => { | ||
setOpen(false); | ||
closePopover?.(); | ||
}; | ||
|
||
const trigger = ( | ||
<EuiButton onClick={() => setOpen(!isOpen)}> | ||
{button || 'trigger'} | ||
</EuiButton> | ||
); | ||
|
||
return ( | ||
<EuiFlexGroup | ||
alignItems="center" | ||
justifyContent="center" | ||
css={css` | ||
block-size: 100vh; | ||
`} | ||
> | ||
<EuiPopover | ||
isOpen={isOpen} | ||
button={trigger} | ||
closePopover={handleOnClose} | ||
{...rest} | ||
/> | ||
</EuiFlexGroup> | ||
); | ||
}; | ||
|
||
export const PanelPaddingSize: Story = { | ||
parameters: { | ||
controls: { include: ['panelPaddingSize'] }, | ||
}, | ||
args: { | ||
children: ( | ||
<> | ||
<EuiPopoverTitle>Popover title</EuiPopoverTitle> | ||
<EuiText> | ||
Panel padding size will cascade down to its child{' '} | ||
<strong>EuiPopoverTitle</strong> and <strong>EuiPopoverFooter</strong> | ||
</EuiText> | ||
<EuiPopoverFooter>Popover footer</EuiPopoverFooter> | ||
</> | ||
), | ||
button: 'popover trigger', | ||
isOpen: true, | ||
}, | ||
render: (args) => <StatefulPopover {...args} />, | ||
}; |
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 |
---|---|---|
@@ -0,0 +1,42 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
|
||
import React from 'react'; | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
|
||
import { PADDING_SIZES } from '../../global_styling'; | ||
import { EuiButton } from '../button'; | ||
import { EuiPopover } from './popover'; | ||
import { EuiPopoverFooter, EuiPopoverFooterProps } from './popover_footer'; | ||
|
||
const meta: Meta<EuiPopoverFooterProps> = { | ||
title: 'Layout/EuiPopover/EuiPopoverFooter', | ||
component: EuiPopoverFooter, | ||
decorators: [ | ||
(Story) => ( | ||
<EuiPopover isOpen button={<EuiButton>trigger</EuiButton>}> | ||
<Story /> | ||
</EuiPopover> | ||
), | ||
], | ||
argTypes: { | ||
paddingSize: { | ||
control: 'select', | ||
options: [undefined, ...PADDING_SIZES], | ||
}, | ||
}, | ||
}; | ||
|
||
export default meta; | ||
type Story = StoryObj<EuiPopoverFooterProps>; | ||
|
||
export const Playground: Story = { | ||
args: { | ||
children: 'Popover footer', | ||
}, | ||
}; |
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 |
---|---|---|
@@ -0,0 +1,42 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||
* Side Public License, v 1. | ||
*/ | ||
|
||
import React from 'react'; | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
|
||
import { PADDING_SIZES } from '../../global_styling'; | ||
import { EuiButton } from '../button'; | ||
import { EuiPopover } from './popover'; | ||
import { EuiPopoverTitle, EuiPopoverTitleProps } from './popover_title'; | ||
|
||
const meta: Meta<EuiPopoverTitleProps> = { | ||
title: 'Layout/EuiPopover/EuiPopoverTitle', | ||
component: EuiPopoverTitle, | ||
decorators: [ | ||
(Story) => ( | ||
<EuiPopover isOpen button={<EuiButton>trigger</EuiButton>}> | ||
<Story /> | ||
</EuiPopover> | ||
), | ||
], | ||
argTypes: { | ||
paddingSize: { | ||
control: 'select', | ||
options: [undefined, ...PADDING_SIZES], | ||
}, | ||
}, | ||
}; | ||
|
||
export default meta; | ||
type Story = StoryObj<EuiPopoverTitleProps>; | ||
|
||
export const Playground: Story = { | ||
args: { | ||
children: 'Popover title', | ||
}, | ||
}; |
Oops, something went wrong.
Oops, something went wrong.
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.
[not a change request, just a note for future me] I'd like to eventually add stories for
container
,insert
,repositionOnScroll
as well! I'm too lazy for now so I just added a quick story to demo howpanelPaddingSize
affects child titles & footers