Skip to content

Commit eb3bc69

Browse files
aduthciampo
authored and
widoz
committed
UI: Recommend Notice component (WordPress#82685)
* UI: Recommend Notice component * Remove Notice from caution list Co-authored-by: aduth <aduth@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
1 parent 61ac49b commit eb3bc69

15 files changed

Lines changed: 124 additions & 42 deletions

File tree

‎packages/block-editor/src/components/block-visibility/viewport-visibility-info.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useSelect } from '@wordpress/data';
22
import { __, sprintf } from '@wordpress/i18n';
33
import { unseen } from '@wordpress/icons';
4-
// eslint-disable-next-line @wordpress/use-recommended-components
54
import { Notice } from '@wordpress/ui';
65
import { unlock } from '../../lock-unlock';
76
import { store as blockEditorStore } from '../../store';

‎packages/components/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
- `CheckboxControl`: Mark as not recommended for use in a WordPress environment, in favour of `CheckboxControl` from `@wordpress/ui` ([#83771](https://github.com/WordPress/gutenberg/pull/83771)).
1515
- `RadioControl`: Match the `@wordpress/ui` Radio colors ([#83270](https://github.com/WordPress/gutenberg/pull/83270)).
16+
- `Notice`: Mark as not recommended in favor of `Notice` from `@wordpress/ui` ([#82685](https://github.com/WordPress/gutenberg/pull/82685)).
1617
- `CheckboxControl`: Keep the default checkbox at 16px on narrow screens while retaining a 24px click target ([#83612](https://github.com/WordPress/gutenberg/pull/83612)).
1718
- `FormToggle`: Match the `@wordpress/ui` `Switch` track, thumb, and border colors across unchecked, checked, hover, and disabled states ([#83773](https://github.com/WordPress/gutenberg/pull/83773)).
1819
- `InputControl`, `SelectControl`, `CustomSelectControl`: Darken the field border on hover to the active stroke color used by `@wordpress/ui`. Disabled and borderless fields keep their resting border ([#83306](https://github.com/WordPress/gutenberg/pull/83306)).

‎packages/components/src/notice/stories/index.story.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import NoticeList from '../list';
77
import type { NoticeListProps } from '../types';
88

99
const meta: Meta< typeof Notice > = {
10-
tags: [ 'manifest' ],
1110
title: 'Components/@wordpress-components/Feedback/Notice',
1211
id: 'components-notice',
1312
component: Notice,
@@ -20,9 +19,9 @@ const meta: Meta< typeof Notice > = {
2019
controls: { expanded: true },
2120
docs: { canvas: { sourceState: 'shown' } },
2221
componentStatus: {
23-
status: 'recommended',
22+
status: 'not-recommended',
2423
whereUsed: 'global',
25-
notes: 'Will be superseded by [`Notice`](?path=/docs/design-system-components-notice--docs) in `@wordpress/ui`, but continue using for now.',
24+
notes: 'Use [`Notice`](?path=/docs/design-system-components-notice--docs) from `@wordpress/ui` instead.',
2625
},
2726
},
2827
};

‎packages/customize-widgets/src/components/error-boundary/index.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Component } from '@wordpress/element';
22
import { speak } from '@wordpress/a11y';
33
import { __ } from '@wordpress/i18n';
4-
// eslint-disable-next-line @wordpress/use-recommended-components -- The fallback UI renders outside the editor's notice system.
54
import { Card, CollapsibleCard, Notice, Stack, Text } from '@wordpress/ui';
65
import { useCopyToClipboard } from '@wordpress/compose';
76
import { doAction } from '@wordpress/hooks';

‎packages/edit-widgets/src/components/error-boundary/index.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Component } from '@wordpress/element';
22
import { speak } from '@wordpress/a11y';
33
import { __ } from '@wordpress/i18n';
4-
// eslint-disable-next-line @wordpress/use-recommended-components -- The fallback UI renders outside the editor's notice system.
54
import { Card, CollapsibleCard, Notice, Stack, Text } from '@wordpress/ui';
65
import { useCopyToClipboard } from '@wordpress/compose';
76
import { doAction } from '@wordpress/hooks';

‎packages/editor/src/components/error-boundary/index.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Component } from '@wordpress/element';
22
import { speak } from '@wordpress/a11y';
33
import { __ } from '@wordpress/i18n';
4-
// eslint-disable-next-line @wordpress/use-recommended-components -- The fallback UI renders outside the editor's notice system.
54
import { Card, CollapsibleCard, Notice, Stack, Text } from '@wordpress/ui';
65
import { select } from '@wordpress/data';
76
import { useCopyToClipboard } from '@wordpress/compose';

‎packages/eslint-plugin/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
- `use-recommended-components`: Recommend `Checkbox`, `CheckboxControl`, and `CheckboxGroup` from `@wordpress/ui`, and flag `CheckboxControl` from `@wordpress/components` ([#83771](https://github.com/WordPress/gutenberg/pull/83771)).
1212
- `use-recommended-components`: Update the "Use with caution" entry from `LinkButton` to `ButtonLink` to match the renamed `@wordpress/ui` component ([#83789](https://github.com/WordPress/gutenberg/pull/83789)).
13+
- Update `use-recommended-components` rule to mark `Notice` from `@wordpress/ui` as recommended, and to prefer it over `@wordpress/components` `Notice` ([#82685](https://github.com/WordPress/gutenberg/pull/82685)).
1314
- Update `use-recommended-components` rule to prefer `Badge` from `@wordpress/ui` over the private `@wordpress/components` `Badge`. ([#82379](https://github.com/WordPress/gutenberg/pull/82379))
1415
- `use-recommended-components`: Allow `inertValue` from `@wordpress/ui` ([#83871](https://github.com/WordPress/gutenberg/pull/83871)).
1516

‎packages/eslint-plugin/rules/use-recommended-components.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const ALLOWLIST = {
3939
'KeyboardShortcutDescription',
4040
'KeyboardShortcutDisplay',
4141
'Link',
42+
'Notice',
4243
'RangeCalendar',
4344
'SearchableChipSelect',
4445
'SearchableChipSelectControl',
@@ -69,7 +70,6 @@ const ALLOWLIST = {
6970
'Drawer',
7071
'IconButton',
7172
'Menu',
72-
'Notice',
7373
'Popover',
7474
'Radio',
7575
'RadioGroup',
@@ -132,6 +132,7 @@ const DENYLIST = {
132132
'For use cases not covered by `Stack` from `@wordpress/ui`, write your own CSS instead.',
133133
__experimentalInputControl:
134134
'Use `InputControl` from `@wordpress/ui` instead. See migration guide in the lint rule documentation.',
135+
Notice: 'Use `Notice` from `@wordpress/ui` instead.',
135136
ResponsiveWrapper: 'Use the CSS `aspect-ratio` property instead.',
136137
TabPanel: 'Use `Tabs` from `@wordpress/ui` instead.',
137138
TabbableContainer: '{{ name }} is planned for deprecation.',

‎packages/ui/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
- `Spinner`: Show a trackless half-circle like the `Button` loading indicator, with a `color` prop that accepts any CSS color value and defaults to weak neutral foreground. Keep the arc visible in forced-colors mode ([#83775](https://github.com/WordPress/gutenberg/pull/83775)).
2222
- Native text inputs and textareas use at least 16px below 600px to avoid iOS Safari zoom. Prefix and suffix text on `Input` match that size. Select and combobox trigger text stay at the `md` font size. ([#82764](https://github.com/WordPress/gutenberg/pull/82764))
2323
- `Menu`: Add development-only checks against nesting `Group` and `RadioGroup` within each other, and document how to label radio groups ([#83792](https://github.com/WordPress/gutenberg/pull/83792)).
24+
- `Notice`: Mark as recommended for use ([#82685](https://github.com/WordPress/gutenberg/pull/82685)).
2425
- `Autocomplete`, `Combobox`, `SearchableSelect`, `SearchableChipSelect`, `SearchableSelectControl`, and `SearchableChipSelectControl` add `ItemLabel` and `ItemDescription` subcomponents. Searchable selection items also accept an optional `description` string ([#83493](https://github.com/WordPress/gutenberg/pull/83493)).
2526

2627
### Bug Fixes

‎packages/ui/src/notice/stories/index.story.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const meta: Meta< typeof Notice.Root > = {
66
title: 'Components/@wordpress-ui/Notice',
77
id: 'design-system-components-notice',
88
component: Notice.Root,
9+
tags: [ 'manifest' ],
910
subcomponents: {
1011
'Notice.Title': Notice.Title,
1112
'Notice.Description': Notice.Description,
@@ -22,9 +23,8 @@ const meta: Meta< typeof Notice.Root > = {
2223
},
2324
},
2425
componentStatus: {
25-
status: 'use-with-caution',
26+
status: 'recommended',
2627
whereUsed: 'global',
27-
notes: 'Not yet recommended for use alongside components from `@wordpress/components`, pending review of style consistency with `@wordpress/components`. See [WordPress/gutenberg#76135](https://github.com/WordPress/gutenberg/issues/76135).',
2828
},
2929
},
3030
};

0 commit comments

Comments
 (0)