Skip to content

Commit

Permalink
Button: Add __next40pxDefaultSize to Markdown docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@mirka
mirka committed Dec 3, 2024
1 parent 635a6e2 commit e26bbb6
Show file tree
Hide file tree
Showing 43 changed files with 115 additions and 82 deletions.
1 change: 1 addition & 0 deletions docs/contributors/code/coding-guidelines.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default function Notice( { children, onRemove } ) {
<div className="components-notice">
<div className="components-notice__content">{ children }</div>
<Button
__next40pxDefaultSize
className="components-notice__dismiss"
icon={ check }
label={ __( 'Dismiss this notice' ) }
Expand Down
4 changes: 2 additions & 2 deletions docs/explanations/architecture/modularity.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ npm install @wordpress/components
import { Button } from '@wordpress/components';

function MyApp() {
return <Button>Nice looking button</Button>;
return <Button __next40pxDefaultSize>Nice looking button</Button>;
}
```

Expand All @@ -51,7 +51,7 @@ wp_register_script( 'myscript', 'pathtomyscript.js', array ('wp-components', "re
const { Button } = wp.components;

function MyApp() {
return <Button>Nice looking button</Button>;
return <Button __next40pxDefaultSize>Nice looking button</Button>;
}
```

Expand Down
20 changes: 12 additions & 8 deletions docs/how-to-guides/data-basics/3-building-an-edit-form.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { Button } from '@wordpress/components';
import { decodeEntities } from '@wordpress/html-entities';

const PageEditButton = () => (
<Button variant="primary">
<Button variant="primary" __next40pxDefaultSize>
Edit
</Button>
)
Expand Down Expand Up @@ -69,10 +69,10 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
label='Page title:'
/>
<div className="form-buttons">
<Button onClick={ onSaveFinished } variant="primary">
<Button onClick={ onSaveFinished } variant="primary" __next40pxDefaultSize>
Save
</Button>
<Button onClick={ onCancel } variant="tertiary">
<Button onClick={ onCancel } variant="tertiary" __next40pxDefaultSize>
Cancel
</Button>
</div>
Expand All @@ -95,6 +95,7 @@ function PageEditButton({ pageId }) {
<Button
onClick={ openModal }
variant="primary"
__next40pxDefaultSize
>
Edit
</Button>
Expand Down Expand Up @@ -246,10 +247,10 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
onChange={ handleChange }
/>
<div className="form-buttons">
<Button onClick={ onSaveFinished } variant="primary">
<Button onClick={ onSaveFinished } variant="primary" __next40pxDefaultSize>
Save
</Button>
<Button onClick={ onCancel } variant="tertiary">
<Button onClick={ onCancel } variant="tertiary" __next40pxDefaultSize>
Cancel
</Button>
</div>
Expand Down Expand Up @@ -298,7 +299,7 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
<div className="my-gutenberg-form">
{/* ... */}
<div className="form-buttons">
<Button onClick={ handleSave } variant="primary">
<Button onClick={ handleSave } variant="primary" __next40pxDefaultSize>
Save
</Button>
{/* ... */}
Expand Down Expand Up @@ -426,7 +427,7 @@ function EditPageForm( { pageId, onSaveFinished } ) {
return (
// ...
<div className="form-buttons">
<Button onClick={ handleSave } variant="primary" disabled={ ! hasEdits || isSaving }>
<Button onClick={ handleSave } variant="primary" disabled={ ! hasEdits || isSaving } __next40pxDefaultSize>
{ isSaving ? (
<>
<Spinner/>
Expand All @@ -438,6 +439,7 @@ function EditPageForm( { pageId, onSaveFinished } ) {
onClick={ onCancel }
variant="tertiary"
disabled={ isSaving }
__next40pxDefaultSize
>
Cancel
</Button>
Expand Down Expand Up @@ -470,7 +472,7 @@ function PageEditButton( { pageId } ) {
const closeModal = () => setOpen( false );
return (
<>
<Button onClick={ openModal } variant="primary">
<Button onClick={ openModal } variant="primary" __next40pxDefaultSize>
Edit
</Button>
{ isOpen && (
Expand Down Expand Up @@ -525,6 +527,7 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
onClick={ handleSave }
variant="primary"
disabled={ ! hasEdits || isSaving }
__next40pxDefaultSize
>
{ isSaving ? (
<>
Expand All @@ -537,6 +540,7 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
onClick={ onCancel }
variant="tertiary"
disabled={ isSaving }
__next40pxDefaultSize
>
Cancel
</Button>
Expand Down
6 changes: 5 additions & 1 deletion docs/how-to-guides/data-basics/4-building-a-create-page-form.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function CreatePageButton() {
const closeModal = () => setOpen( false );
return (
<>
<Button onClick={ openModal } variant="primary">
<Button onClick={ openModal } variant="primary" __next40pxDefaultSize>
Create a new Page
</Button>
{ isOpen && (
Expand Down Expand Up @@ -103,6 +103,7 @@ function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving, onCanc
onClick={ onSave }
variant="primary"
disabled={ !hasEdits || isSaving }
__next40pxDefaultSize
>
{ isSaving ? (
<>
Expand All @@ -115,6 +116,7 @@ function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving, onCanc
onClick={ onCancel }
variant="tertiary"
disabled={ isSaving }
__next40pxDefaultSize
>
Cancel
</Button>
Expand Down Expand Up @@ -364,6 +366,7 @@ function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving, onCanc
onClick={ onSave }
variant="primary"
disabled={ !hasEdits || isSaving }
__next40pxDefaultSize
>
{ isSaving ? (
<>
Expand All @@ -376,6 +379,7 @@ function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving, onCanc
onClick={ onCancel }
variant="tertiary"
disabled={ isSaving }
__next40pxDefaultSize
>
Cancel
</Button>
Expand Down
8 changes: 4 additions & 4 deletions docs/how-to-guides/data-basics/5-adding-a-delete-button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { Button } from '@wordpress/components';
import { decodeEntities } from '@wordpress/html-entities';

const DeletePageButton = () => (
<Button variant="primary">
<Button variant="primary" __next40pxDefaultSize>
Delete
</Button>
)
Expand Down Expand Up @@ -85,7 +85,7 @@ const DeletePageButton = ({ pageId }) => {
const { deleteEntityRecord } = useDispatch( coreDataStore );
const handleDelete = () => deleteEntityRecord( 'postType', 'page', pageId );
return (
<Button variant="primary" onClick={ handleDelete }>
<Button variant="primary" onClick={ handleDelete } __next40pxDefaultSize>
Delete
</Button>
);
Expand All @@ -108,7 +108,7 @@ const DeletePageButton = ({ pageId }) => {
[ pageId ]
)
return (
<Button variant="primary" onClick={ handleDelete } disabled={ isDeleting }>
<Button variant="primary" onClick={ handleDelete } disabled={ isDeleting } __next40pxDefaultSize>
{ isDeleting ? (
<>
<Spinner />
Expand Down Expand Up @@ -431,7 +431,7 @@ function DeletePageButton( { pageId } ) {
);

return (
<Button variant="primary" onClick={ handleDelete } disabled={ isDeleting }>
<Button variant="primary" onClick={ handleDelete } disabled={ isDeleting } __next40pxDefaultSize>
{ isDeleting ? (
<>
<Spinner />
Expand Down
2 changes: 1 addition & 1 deletion docs/how-to-guides/platform/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Usage in React:
import { Button } from '@wordpress/components';

function MyApp() {
return <Button>Hello Button</Button>;
return <Button __next40pxDefaultSize>Hello Button</Button>;
}
```

Expand Down
1 change: 1 addition & 0 deletions docs/reference-guides/data/data-core-customize-widgets.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ const ExampleComponent = () => {
setIsInserterOpened( ! isOpen );
setIsOpen( ! isOpen );
} }
__next40pxDefaultSize
>
{ __( 'Open/close inserter' ) }
</Button>
Expand Down
13 changes: 10 additions & 3 deletions docs/reference-guides/data/data-core-notices.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ const ExampleComponent = () => {
explicitDismiss: true,
} )
}
__next40pxDefaultSize
>
{ __(
'Generate an snackbar error notice with explicit dismiss button.'
Expand Down Expand Up @@ -114,6 +115,7 @@ const ExampleComponent = () => {
isDismissible: false,
} )
}
__next40pxDefaultSize
>
{ __( 'Generate a notice that cannot be dismissed.' ) }
</Button>
Expand Down Expand Up @@ -147,6 +149,7 @@ const ExampleComponent = () => {
return (
<Button
onClick={ () => createNotice( 'success', __( 'Notice message' ) ) }
__next40pxDefaultSize
>
{ __( 'Generate a success notice!' ) }
</Button>
Expand Down Expand Up @@ -199,6 +202,7 @@ const ExampleComponent = () => {
icon: '🔥',
} )
}
__next40pxDefaultSize
>
{ __( 'Generate a snackbar success notice!' ) }
</Button>
Expand Down Expand Up @@ -245,6 +249,7 @@ const ExampleComponent = () => {
},
} )
}
__next40pxDefaultSize
>
{ __( 'Generates a warning notice with onDismiss callback' ) }
</Button>
Expand Down Expand Up @@ -285,10 +290,10 @@ export const ExampleComponent = () => {
<li key={ notice.id }>{ notice.content }</li>
) ) }
</ul>
<Button onClick={ () => removeAllNotices() }>
<Button onClick={ () => removeAllNotices() } __next40pxDefaultSize>
{ __( 'Clear all notices', 'woo-gutenberg-products-block' ) }
</Button>
<Button onClick={ () => removeAllNotices( 'snackbar' ) }>
<Button onClick={ () => removeAllNotices( 'snackbar' ) } __next40pxDefaultSize>
{ __(
'Clear all snackbar notices',
'woo-gutenberg-products-block'
Expand Down Expand Up @@ -334,11 +339,12 @@ const ExampleComponent = () => {
isDismissible: false,
} )
}
__next40pxDefaultSize
>
{ __( 'Generate a notice' ) }
</Button>
{ notices.length > 0 && (
<Button onClick={ () => removeNotice( notices[ 0 ].id ) }>
<Button onClick={ () => removeNotice( notices[ 0 ].id ) } __next40pxDefaultSize>
{ __( 'Remove the notice' ) }
</Button>
) }
Expand Down Expand Up @@ -384,6 +390,7 @@ const ExampleComponent = () => {
onClick={ () =>
removeNotices( notices.map( ( { id } ) => id ) )
}
__next40pxDefaultSize
>
{ __( 'Clear all notices' ) }
</Button>
Expand Down
2 changes: 2 additions & 0 deletions docs/reference-guides/slotfills/plugin-document-setting-panel.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ const Example = () => {
'plugin-document-setting-panel-demo/custom-panel'
);
} }
__next40pxDefaultSize
>
Toggle Panels
</Button>
Expand Down Expand Up @@ -92,6 +93,7 @@ const Example = () => {
'plugin-document-setting-panel-demo/custom-panel'
);
} }
__next40pxDefaultSize
>
Toggle Panels
</Button>
Expand Down
2 changes: 1 addition & 1 deletion docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const PluginSidebarMoreMenuItemTest = () => {
] }
onChange={ ( newSelect ) => setSelect( newSelect ) }
/>
<Button variant="primary">
<Button variant="primary" __next40pxDefaultSize>
{ __( 'Primary Button' ) }{ ' ' }
</Button>
</PanelBody>
Expand Down
2 changes: 1 addition & 1 deletion docs/reference-guides/slotfills/plugin-sidebar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const PluginSidebarExample = () => {
] }
onChange={ ( newSelect ) => setSelect( newSelect ) }
/>
<Button variant="primary">{ __( 'Primary Button' ) } </Button>
<Button variant="primary" __next40pxDefaultSize>{ __( 'Primary Button' ) } </Button>
</PanelBody>
</PluginSidebar>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/global-styles/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { useGlobalStylesReset } from '@wordpress/block-editor';
function MyComponent() {
const [ canReset, reset ] = useGlobalStylesReset();

return canReset ? <Button onClick={ () => reset() }>Reset</Button> : null;
return canReset ? <Button onClick={ () => reset() } __next40pxDefaultSize>Reset</Button> : null;
}
```

Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/inspector-popover-header/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const MyPostDatePopover = () => {
<Button
onClick={ onToggle }
aria-expanded={ isOpen }
__next40pxDefaultSize
>
Select post date
</Button>
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/link-control/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,7 @@ If passed, children are rendered after the input.
label={ __( 'Submit' ) }
icon={ keyboardReturn }
className="block-editor-link-control__search-submit"
__next40pxDefaultSize
/>
</HStack>
</LinkControlSearchInput>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/media-upload/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ function MyMediaUploader() {
allowedTypes={ ALLOWED_MEDIA_TYPES }
value={ mediaId }
render={ ( { open } ) => (
<Button onClick={ open }>Open Media Library</Button>
<Button onClick={ open } __next40pxDefaultSize>Open Media Library</Button>
) }
/>
</MediaUploadCheck>
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/publish-date-time-picker/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const MyDateTimePicker = () => {
<Button
onClick={ onToggle }
aria-expanded={ isOpen }
__next40pxDefaultSize
>
Select post date
</Button>
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/url-popover/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class MyURLPopover extends Component {

return (
<>
<Button onClick={ this.openURLPopover }>Edit URL</Button>
<Button onClick={ this.openURLPopover } __next40pxDefaultSize>Edit URL</Button>
{ isVisible && (
<URLPopover
onClose={ this.closeURLPopover }
Expand All @@ -80,6 +80,7 @@ class MyURLPopover extends Component {
icon={ keyboardReturn }
label={ __( 'Apply' ) }
type="submit"
__next40pxDefaultSize
/>
</form>
</URLPopover>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/warning/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ All of the following are optional.

```js
<Warning
actions={ [ <Button onClick={ fixIssue }>{ __( 'Fix issue' ) }</Button> ] }
actions={ [ <Button onClick={ fixIssue } __next40pxDefaultSize>{ __( 'Fix issue' ) }</Button> ] }
secondaryActions={ [
{
title: __( 'Get help' ),
Expand Down
Loading

0 comments on commit e26bbb6

Please sign in to comment.