Automattic Components: Add form label to package

[jeyip]

• Related to Automattic Components: Add select dropdown to package #79255
• Tracking issue https://github.com/Automattic/martech/issues/2023

To avoid creating another dependency on a non-packaged Calypso component, we want to migrate the dropdown we're using to @automattic/components

We're migrating the form label component because it is a dependency for the dropdown component, and is necessary to render said dropdown.

The entirety of the migration is a 4 step process that creates easily digestible ( and revertible ) PRs to work with. See https://github.com/Automattic/martech/issues/2028. Unfortunately, this process also eliminates the git history from migrated files unless the 4 steps are condensed into a single one. I don't have a great answer to this, but the tradeoff, to me, is worth the added safety of more understandable, compact, iterative pull requests.

Proposed Changes

Adds the form label calypso component into the @automattic/components package

Screenshots

Testing Instructions

Note:
I initially had issues running storybook ( missing dependencies, odd runtime errors, etc. ). I had to blow away npm modules before it behaved as expected

• At the root of the Calypso directory, run yarn storybook:start
• Ensure that the form label component renders properly

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 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-ajp-p2)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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.

[chriskmnds]

Thanks again for thinking about these dependencies and resolving as you go.

• My comment in the other PR also applies here. I don't think we should be replicating stuff without plan to deprecate and remove the original.

• Concerning "form label", I fail to see this sitting in the root of @automattc/components. I can see there is a forms folder already, should we move and export this from there perhaps?

I can see there is a forms folder already, should we move and export this from there perhaps?

Speaking of which, I'm guessing the entirety of client/components/forms/* should gradually migrate under there. For this change, I'd also consider updating @automattc/components/forms README to match a little closer to client/components/forms/* and mention the components living under?

[jeyip]

My #79257 (review) also applies here. I don't think we should be replicating stuff without plan to deprecate and remove the original.

#79257 (comment)

Concerning "form label", I fail to see this sitting in the root of @automattc/components. I can see there is a forms folder already, should we move and export this from there perhaps?

Good observation -- will do this tomorrow. 👍

[jeyip]

Concerning "form label", I fail to see this sitting in the root of @automattc/components. I can see there is a forms folder already, should we move and export this from there perhaps?

Resolved in c34fa67

Speaking of which, I'm guessing the entirety of client/components/forms/* should gradually migrate under there.

I agree with this 👍

For this change, I'd also consider updating @automattc/components/forms README to match a little closer to client/components/forms/* and mention the components living under?

Resolved in 52e43fa

Form label shim is in this PR. Currently drafting up testing notes #80350

[ddc22]

LGTM 🚢
Minor ignorable comment :D

[ddc22]

Non essential.
Maybe add the Button Label as a dynamic arg.

[jeyip]

Hey thanks for chiming in Dehan -- I thought about doing so, but wasn't sure how to accomplish this without adding it to Default.args below.

The issue with adding it to Default.args is that the label is then shown as a "Control", which I believe mistakenly implies that it might be a prop that FormLabel accepts.

If I'm wrong about this though, definitely let me know and I'm happy to include it in a follow-up PR 🙂