DS Site: Add `@wordpress/components` reference #103738

mirka · 2025-05-27T12:58:46Z

Proposed Changes

Adds the package reference for @wordpress/components to the DS site.

Based on the component audit we did as a group in late 2024, I updated and verified all the links and information, and edited the content to be relevant to consumers from A8C.

Why are these changes being made?

To provide basic usage guidance on @wordpress/components components as we work on the new components library.

Testing Instructions

yarn && cd apps/design-system-docs and yarn start.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

matticbot · 2025-05-27T12:58:58Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-147388

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-147388&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-147388&env=a8c-for-agencies

matticbot · 2025-05-27T13:07:49Z

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

# Conflicts: # apps/design-system-docs/package.json

github-actions · 2025-06-06T16:52:44Z

Design System Reference Site Preview:

https://bf3ad454-preview.a8cds.workers.dev

(Latest commit: 998308b)

matticbot · 2025-06-06T16:58:38Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

design-system-docs
help-center
notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug ds-wp-components on your sandbox.

mirka · 2025-06-06T17:04:44Z

apps/design-system-docs/docs/components/packages/wp-components/data.ts

Please excuse the raw markdown output for the notes column in this MVP 😇

Related: I similarly needed to format raw Markdown in #103561 and opted to include react-markdown as used elsewhere in the project. Can be a future item.

aduth

Nice 👍 LGTM

aduth · 2025-06-09T19:31:06Z

apps/design-system-docs/docs/components/packages/wp-components/data.ts

Related: I similarly needed to format raw Markdown in #103561 and opted to include react-markdown as used elsewhere in the project. Can be a future item.

aduth · 2025-06-09T19:39:20Z

apps/design-system-docs/docs/components/packages/wp-components/icon-link/index.tsx

+	if ( ! href ) {
+		return null;
+	}


Nit: IMO, it'd make more sense to have WPComponentsTable avoid rendering IconLink if the link is empty, rather than handling that here.

Fixed in 5280683 👍

aduth · 2025-06-09T19:45:22Z

apps/design-system-docs/docs/components/packages/wp-components/status-indicator.tsx

+	return (
+		<Tooltip text={ statuses.find( ( s ) => s.value === status )?.label }>


Since we're using the corresponding statuses value 3 times, maybe we ought to assign a variable?

Suggested change

return (

<Tooltip text={ statuses.find( ( s ) => s.value === status )?.label }>

const { label, icon } = statuses.find( ( s ) => s.value === status )!;

return (

<Tooltip text={ label }>

Good catch, fixed in 998308b.

aduth · 2025-06-09T19:46:31Z

apps/design-system-docs/docs/components/packages/wp-components/status-indicator.tsx

+		<Tooltip text={ statuses.find( ( s ) => s.value === status )?.label }>
+			<div
+				className={ styles[ 'status-indicator' ] }
+				aria-label={ statuses.find( ( s ) => s.value === status )?.label }


Is it necessary to have both text= and aria-label= ? Is the Tooltip not already handling the accessible name / description?

Great question. Short answer is yes, we need both here because Tooltip only applies an accessible description on focus, and screen readers can read this icon without it being focused.

The long answer is more interesting. At some point we discovered that a tooltip probably shouldn't be adding an accessible string by default. That was reported up to Ariakit, and now Ariakit doesn't do that anymore (ariakit/ariakit#3242). We haven't been able to propagate those new defaults to Gutenberg itself yet though, due to back compat (WordPress/gutenberg#66021).

DS Site: Add @wordpress/components reference

35fa2f6

mirka self-assigned this May 27, 2025

mirka added the Documentation label May 27, 2025

mirka added 9 commits June 6, 2025 03:22

Add more components

a897f27

Fix attribute error on clip-path

8e15db9

Add text wrap in table

a768547

Add more components

60c4bd7

Add more components

9b4b299

Add more components

49a83a6

Add more components

1ca1e20

Add more components

7ff9748

Add remaining components

6f8b672

mirka changed the title ~~[WIP] DS Site: Add @wordpress/components reference~~ DS Site: Add @wordpress/components reference Jun 6, 2025

mirka added 2 commits June 7, 2025 01:40

Merge branch 'trunk' into ds-wp-components

7c8f912

# Conflicts: # apps/design-system-docs/package.json

Skip rendering for SSG

8598d6a

mirka marked this pull request as ready for review June 6, 2025 16:52

Add note to Notice

de707f8

mirka commented Jun 6, 2025

View reviewed changes

mirka requested a review from a team June 6, 2025 17:05

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 6, 2025

aduth approved these changes Jun 9, 2025

View reviewed changes

mirka added 2 commits June 10, 2025 07:57

Handle undefined Figma link at table level

5280683

Optimize value finding for status indicator

998308b

mirka merged commit ec3277f into trunk Jun 9, 2025
11 of 12 checks passed

mirka deleted the ds-wp-components branch June 9, 2025 23:37

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 9, 2025

		return (
		<Tooltip text={ statuses.find( ( s ) => s.value === status )?.label }>

DS Site: Add @wordpress/components reference #103738

DS Site: Add @wordpress/components reference #103738

Uh oh!

Conversation

mirka commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

matticbot commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented May 27, 2025

Uh oh!

github-actions bot commented Jun 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Jun 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mirka Jun 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aduth left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

DS Site: Add `@wordpress/components` reference #103738

DS Site: Add `@wordpress/components` reference #103738

mirka commented May 27, 2025 •

edited

Loading

matticbot commented May 27, 2025 •

edited

Loading

github-actions bot commented Jun 6, 2025 •

edited

Loading

matticbot commented Jun 6, 2025 •

edited

Loading

mirka Jun 6, 2025 •

edited

Loading