Skip to content
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.

Sign up for GitHub

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

Button: Add __next40pxDefaultSize to Markdown docs #67540

Closed
wants to merge 1 commit into from
Closed

Button: Add __next40pxDefaultSize to Markdown docs #67540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/contributors/code/coding-guidelines.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading