-
Notifications
You must be signed in to change notification settings - Fork 2k
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
Devdocs: WordPress components gallery #45523
Merged
Merged
Changes from all commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
9208545
WIP: WordPress components gallery
sarayourfriend 2327baf
Update type definition depdency version
sarayourfriend c03f81b
Fix linting errors
sarayourfriend 11261d8
Fit name of new page on one line
sarayourfriend d7ded5f
Update client/devdocs/design/wordpress-components-gallery/autocomplet…
sarayourfriend 3d7982d
Make autocomplete match real-world examples
sarayourfriend 8b9879b
Rename default exports to be more descriptive
sarayourfriend 6f63ff4
Remove importing of WP components styles
sarayourfriend 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
17 changes: 17 additions & 0 deletions
17
client/devdocs/design/wordpress-components-gallery/alignment-matrix-control.tsx
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,17 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React, { useState } from 'react'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components'; | ||
|
||
const AlignmentMatrixControlExample = () => { | ||
const [ alignment, setAlignment ] = useState( 'center center' ); | ||
|
||
return <AlignmentMatrixControl value={ alignment } onChange={ setAlignment } />; | ||
}; | ||
|
||
export default AlignmentMatrixControlExample; |
16 changes: 16 additions & 0 deletions
16
client/devdocs/design/wordpress-components-gallery/angle-picker-control.tsx
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,16 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React, { useState } from 'react'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { AnglePickerControl } from '@wordpress/components'; | ||
|
||
const AnglePickerControlExample = () => { | ||
const [ angle, setAngle ] = useState(); | ||
return <AnglePickerControl value={ angle } onChange={ setAngle } />; | ||
}; | ||
|
||
export default AnglePickerControlExample; |
21 changes: 21 additions & 0 deletions
21
client/devdocs/design/wordpress-components-gallery/animate.tsx
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,21 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React from 'react'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { Animate, Notice } from '@wordpress/components'; | ||
|
||
const AnimateExample = () => ( | ||
<Animate type="loading"> | ||
{ ( { className } ) => ( | ||
<Notice className={ className } status="success"> | ||
<p>Loading animation</p> | ||
</Notice> | ||
) } | ||
</Animate> | ||
); | ||
|
||
export default AnimateExample; |
58 changes: 58 additions & 0 deletions
58
client/devdocs/design/wordpress-components-gallery/autocomplete.tsx
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,58 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React, { useState } from 'react'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { Autocomplete, __experimentalInputControl as InputControl } from '@wordpress/components'; | ||
|
||
const autocompleters = [ | ||
{ | ||
name: 'fruit', | ||
// The prefix that triggers this completer | ||
triggerPrefix: '~', | ||
// The option data | ||
options: [ | ||
{ visual: '🍎', name: 'Apple', id: 1 }, | ||
{ visual: '🍊', name: 'Orange', id: 2 }, | ||
{ visual: '🍇', name: 'Grapes', id: 3 }, | ||
], | ||
// Returns a label for an option like "🍊 Orange" | ||
getOptionLabel: ( option ) => ( | ||
<span> | ||
<span>{ option.visual }</span> | ||
{ option.name } | ||
</span> | ||
), | ||
// Declares that options should be matched by their name | ||
getOptionKeywords: ( option ) => [ option.name ], | ||
// Declares that the Grapes option is disabled | ||
isOptionDisabled: ( option ) => option.name === 'Grapes', | ||
// Declares completions should be inserted as abbreviations | ||
getOptionCompletion: ( option ) => <abbr title={ option.name }>{ option.visual }</abbr>, | ||
}, | ||
]; | ||
|
||
const AutocompleteExample = () => { | ||
const [ value, setValue ] = useState( '' ); | ||
return ( | ||
<div> | ||
<Autocomplete record={ value } onChange={ setValue } completers={ autocompleters }> | ||
{ ( { isExpanded, listBoxId, activeId, onKeyDown } ) => ( | ||
<InputControl | ||
onKeyDown={ onKeyDown } | ||
aria-autocomplete="list" | ||
aria-expanded={ isExpanded } | ||
aria-owns={ listBoxId } | ||
aria-activedescendant={ activeId } | ||
/> | ||
) } | ||
</Autocomplete> | ||
<p>Type ~ for triggering the autocomplete.</p> | ||
</div> | ||
); | ||
}; | ||
|
||
export default AutocompleteExample; |
17 changes: 17 additions & 0 deletions
17
client/devdocs/design/wordpress-components-gallery/base-control.tsx
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,17 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React from 'react'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { BaseControl } from '@wordpress/components'; | ||
|
||
const BaseControlExample = () => ( | ||
<BaseControl id="textarea-1" label="Text" help="Enter some text"> | ||
<textarea id="textarea-1" /> | ||
</BaseControl> | ||
); | ||
|
||
export default BaseControlExample; |
29 changes: 29 additions & 0 deletions
29
client/devdocs/design/wordpress-components-gallery/box-control.tsx
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,29 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React, { useState } from 'react'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { __experimentalBoxControl as BoxControl } from '@wordpress/components'; | ||
|
||
const { __Visualizer: Visualizer } = BoxControl; | ||
|
||
const BoxControlExample = () => { | ||
const [ values, setValues ] = useState( { | ||
top: '50px', | ||
left: '10%', | ||
right: '10%', | ||
bottom: '50px', | ||
} ); | ||
|
||
return ( | ||
<> | ||
<BoxControl values={ values } onChange={ setValues } /> | ||
<Visualizer values={ values } /> | ||
</> | ||
); | ||
}; | ||
|
||
export default BoxControlExample; |
25 changes: 25 additions & 0 deletions
25
client/devdocs/design/wordpress-components-gallery/button-group.tsx
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,25 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React from 'react'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { Button, ButtonGroup } from '@wordpress/components'; | ||
|
||
const ButtonGroupExample = () => { | ||
const style = { margin: '0 4px' }; | ||
return ( | ||
<ButtonGroup> | ||
<Button isPrimary style={ style }> | ||
Button 1 | ||
</Button> | ||
<Button isPrimary style={ style }> | ||
Button 2 | ||
</Button> | ||
</ButtonGroup> | ||
); | ||
}; | ||
|
||
export default ButtonGroupExample; |
60 changes: 60 additions & 0 deletions
60
client/devdocs/design/wordpress-components-gallery/button.tsx
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,60 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React from 'react'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { more } from '@wordpress/icons'; | ||
import { Button as InnerButton, Flex, FlexItem } from '@wordpress/components'; | ||
|
||
const Button = ( props: InnerButton.Props ) => ( | ||
<FlexItem> | ||
<InnerButton { ...props } /> | ||
</FlexItem> | ||
); | ||
|
||
const ButtonExample = () => { | ||
return ( | ||
<div style={ { padding: '20px' } }> | ||
<h2>Small Buttons</h2> | ||
<Flex gap={ 2 }> | ||
<Button isSmall>Button</Button> | ||
<Button isPrimary isSmall> | ||
Primary Button | ||
</Button> | ||
<Button isSecondary isSmall> | ||
Secondary Button | ||
</Button> | ||
<Button isTertiary isSmall> | ||
Tertiary Button | ||
</Button> | ||
<Button isSmall icon={ more } /> | ||
<Button isSmall isPrimary icon={ more } /> | ||
<Button isSmall isSecondary icon={ more } /> | ||
<Button isSmall isTertiary icon={ more } /> | ||
<Button isSmall isPrimary icon={ more }> | ||
Icon & Text | ||
</Button> | ||
</Flex> | ||
|
||
<h2>Regular Buttons</h2> | ||
<Flex gap={ 4 }> | ||
<Button>Button</Button> | ||
<Button isPrimary>Primary Button</Button> | ||
<Button isSecondary>Secondary Button</Button> | ||
<Button isTertiary>Tertiary Button</Button> | ||
<Button icon={ more } /> | ||
<Button isPrimary icon={ more } /> | ||
<Button isSecondary icon={ more } /> | ||
<Button isTertiary icon={ more } /> | ||
<Button isPrimary icon={ more }> | ||
Icon & Text | ||
</Button> | ||
</Flex> | ||
</div> | ||
); | ||
}; | ||
|
||
export default ButtonExample; |
42 changes: 42 additions & 0 deletions
42
client/devdocs/design/wordpress-components-gallery/card.tsx
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 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React from 'react'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { | ||
Button, | ||
Card, | ||
CardBody, | ||
CardFooter, | ||
CardDivider, | ||
CardHeader, | ||
FlexBlock, | ||
FlexItem, | ||
} from '@wordpress/components'; | ||
|
||
const CardExample = () => ( | ||
<Card isElevated> | ||
<CardHeader isShady={ false }> | ||
<FlexBlock>Header: Code is Poetry</FlexBlock> | ||
<FlexItem> | ||
<Button isLink>Dismiss</Button> | ||
</FlexItem> | ||
</CardHeader> | ||
|
||
<CardBody>...</CardBody> | ||
<CardDivider /> | ||
<CardBody>...</CardBody> | ||
|
||
<CardFooter isShady={ false }> | ||
<FlexBlock>Footer: Code is Poetry</FlexBlock> | ||
<FlexItem> | ||
<Button isPrimary>Action</Button> | ||
</FlexItem> | ||
</CardFooter> | ||
</Card> | ||
); | ||
|
||
export default CardExample; |
23 changes: 23 additions & 0 deletions
23
client/devdocs/design/wordpress-components-gallery/checkbox-control.tsx
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,23 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React, { useState } from 'react'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { CheckboxControl } from '@wordpress/components'; | ||
|
||
const CheckboxControlExample = () => { | ||
const [ isChecked, setChecked ] = useState( false ); | ||
|
||
return ( | ||
<CheckboxControl | ||
label="Example Checkbox Control" | ||
checked={ isChecked } | ||
onChange={ setChecked } | ||
/> | ||
); | ||
}; | ||
|
||
export default CheckboxControlExample; |
27 changes: 27 additions & 0 deletions
27
client/devdocs/design/wordpress-components-gallery/clipboard-button.tsx
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,27 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React, { useState } from 'react'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { ClipboardButton } from '@wordpress/components'; | ||
|
||
const ClipboardButtonExample = () => { | ||
const [ isCopied, setCopied ] = useState( false ); | ||
|
||
const text = 'Code is Poetry'; | ||
return ( | ||
<ClipboardButton | ||
text={ text } | ||
isPrimary | ||
onCopy={ () => setCopied( true ) } | ||
onFinishCopy={ () => setCopied( false ) } | ||
> | ||
{ isCopied ? 'Copied!' : `Copy "${ text }"` } | ||
</ClipboardButton> | ||
); | ||
}; | ||
|
||
export default ClipboardButtonExample; |
29 changes: 29 additions & 0 deletions
29
client/devdocs/design/wordpress-components-gallery/color-palette.tsx
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,29 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import React, { useState } from 'react'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { ColorPalette } from '@wordpress/components'; | ||
|
||
const ColorPaletteExample = () => { | ||
const colors: ColorPalette.Color[] = [ | ||
{ name: 'red', color: '#f00' }, | ||
{ name: 'white', color: '#fff' }, | ||
{ name: 'blue', color: '#00f' }, | ||
]; | ||
|
||
const [ color, setColor ] = useState( colors[ 0 ] ); | ||
|
||
return ( | ||
<ColorPalette | ||
colors={ colors } | ||
value={ color } | ||
onChange={ ( maybeColor ) => maybeColor && setColor( maybeColor ) } | ||
/> | ||
); | ||
}; | ||
|
||
export default ColorPaletteExample; |
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 sure why I'm unable to make this work by typing
~
😉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.
Yes, it doesn't seem to work, I think it's potentially one of the things that is broken 😱
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.
Maybe it's something related to how its popover works? But we can investigate in another PR, I don't consider that a blocker 😉