Add labels and hint blocks to fields #110

nicolechung · 2023-03-27T21:15:28Z

🚀 Description

Added label and hint named blocks to field components.

🔬 How to Test

Check out all the Field components and make sure :hint and :label have been added: https://dc754599.ember-toucan-core.pages.dev/docs/components/file-input-field

📸 Images/Videos of Functionality

changeset-bot · 2023-03-27T21:15:31Z

🦋 Changeset detected

Latest commit: 26b324f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@crowdstrike/ember-toucan-core	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2023-03-27T21:20:42Z

Preview URLs

Env: preview
Docs: https://d16531ef.ember-toucan-core.pages.dev

nicolechung · 2023-03-31T18:42:17Z

docs/components/checkbox-field/demo/base-demo.md

@@ -3,7 +3,10 @@
  @label='Label'
  @isChecked={{this.isChecked}}
  @onChange={{this.handleChange}}
-/>
+>
+  <:label>extra label info</:label>


Was not feeling super imaginative here...if anyone has any suggestions of what to put in the blocks I will do a sweep and update the content in a single commit!

You could maybe do something like what we are expecting to do - add an icon here (with no tooltip for now):

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>

oh wait...with these changes all these :named-blocks should be removed from these demos.

ynotdraw · 2023-03-31T19:07:53Z

Sorry for busting your PR again, but now I'm done moving things/renaming things!

nicolechung · 2023-04-02T23:21:45Z

Sorry for busting your PR again, but now I'm done moving things/renaming things!

Nice to see things getting reorganized tho!

simonihmig · 2023-04-03T08:16:06Z

ember-toucan-core/src/components/form/fields/checkbox-group.hbs

+      class="type-md-tight text-body-and-labels block"
+      data-label
+    >{{@label}} {{yield to="label"}}</legend>


General question: do we really want to render both the argument and the block, in case both are provided? This is not wrong per se, but maybe confusing? We could instead also give one a higher priority, and render only that:

Arg has priority:

{{#if @label}} {{@label}} {{else}} {{yield to="label"}} {{/if}}

or block has priority:

{{#if (has-block "label")}} {{yield to="label"}} {{else}} {{@label}} {{/if}}

What do you think?

Good question, I think rendering one or the other makes sense.

@ynotdraw thoughts?

I agree on choosing one or the other but not both! I'm leaning towards block having priority for no real reason other but have 0 strong opinions.

simonihmig · 2023-04-03T08:16:34Z

ember-toucan-core/src/components/form/fields/checkbox-group.hbs

+<Form::Field as |field|>
+  <fieldset


For my understanding: what was the reason to not use <Form::Fieldset> anymore?

We need to be able to put {{yield to="label"}} and {{yield to="hint}} inside of say, the block for field.Label and the Fieldset component does not yield these subcomponents.

I'm wondering if something similar to what I'm thinking for the form/core wrapper may work here. I was hacking on this last night quite a bit and think I found something that'd work, although it's not necessarily pretty. I'm curious if @simonihmig knows if there's a way to conditionally render named blocks when you have two-levels of components (e.g., <Fieldset exposes named blocks, but then another consuming component like CheckboxGroup wants to expose those underlying named blocks as well).

You can't conditionally render named-blocks inside of a block, but you can conditionally render components. So something really ugly like 3ed2f97#diff-68aa5e5601f7498e493199aca7a867ff41712f515756a155c3f7dcf1ccd45a10 may give us the best of both worlds? Where folks can provide component arguments or named blocks or a combination of both. That's what I was hacking on last night and it seems to work, although it's definitely not the best looking thing in the world.

For this case I think it'd look something like:

Update Fieldset to yield the new blocks like you have in this PR.

<Form::Field as |field|> <fieldset aria-describedby="{{if @error field.errorId}} {{if @hint field.hintId}}" disabled={{@isDisabled}} ...attributes > {{! Use your new assert thing here instead, but just lazily posting the idea }} <legend class="type-md-tight text-body-and-labels block" data-label >{{@label}}{{yield to="label"}}</legend> {{! Use your new assert thing here instead, but just lazily posting the idea }} {{#if @hint}} <field.Hint id={{field.hintId}} data-hint>{{@hint}}{{yield to="hint"}}</field.Hint> {{/if}} <field.Control class="mt-1.5 flex flex-col space-y-2 rounded-sm p-1 {{if @error 'shadow-error-outline'}}" data-control > {{yield}} </field.Control> {{#if @error}} <field.Error id={{field.errorId}} @error={{@error}} data-error /> {{/if}} </fieldset> </Form::Field>

And then in CheckboxGroup, use helpers to determine which mix of component arguments or named blocks are being used. Map all properties over.

⚠️ You can't do this: ⚠️

<Form::Fieldset @label={{@label}} @hint={{@hint}} @error={{@error}} @isDisabled={{@isDisabled}} aria-invalid={{if @error "true"}} ...attributes > {{#if (has-block "label")}} {{yield to="label"}} {{/if}} {{#if (has-block "hint")}} {{yield to="hint"}} {{/if}} {{yield (hash CheckboxField=(component (ensure-safe-component this.CheckboxFieldComponent) name=@name onChange=this.handleInput isDisabled=@isDisabled selectedValues=@value ) ) }} </Form::Fieldset>

✅ But you could do something like this: ✅

{{#if (this.hasOnlyLabelBlock (has-block "label") (has-block "hint"))}} <Form::Fieldset @hint={{@hint}} @error={{@error}} @isDisabled={{@isDisabled}} aria-invalid={{if @error "true"}} ...attributes > <:label>{{yield to="label"}}</:label> {{yield (hash CheckboxField=(component (ensure-safe-component this.CheckboxFieldComponent) name=@name onChange=this.handleInput isDisabled=@isDisabled selectedValues=@value ) ) }} </Form::Fieldset> {{else if (this.hasHintAndLabelBlocks (has-block "label") (has-block "hint"))}} <Form::Fieldset @hint={{@hint}} @error={{@error}} @isDisabled={{@isDisabled}} aria-invalid={{if @error "true"}} ...attributes > <:label>{{yield to="label"}}</:label> <:hint>{{yield to="hint"}}</:hint> {{yield (hash CheckboxField=(component (ensure-safe-component this.CheckboxFieldComponent) name=@name onChange=this.handleInput isDisabled=@isDisabled selectedValues=@value ) ) }} </Form::Fieldset> {{else if (this.hasLabelArgAndHintBlock @label (has-block "hint"))}} <Form::Fieldset @label={{@label}} @hint={{@hint}} @error={{@error}} @isDisabled={{@isDisabled}} aria-invalid={{if @error "true"}} ...attributes > <:hint>{{yield to="hint"}}</:hint> {{yield (hash CheckboxField=(component (ensure-safe-component this.CheckboxFieldComponent) name=@name onChange=this.handleInput isDisabled=@isDisabled selectedValues=@value ) ) }} </Form::Fieldset> {{else}} <Form::Fieldset @label={{@label}} @hint={{@hint}} @error={{@error}} @isDisabled={{@isDisabled}} aria-invalid={{if @error "true"}} ...attributes > {{yield (hash CheckboxField=(component (ensure-safe-component this.CheckboxFieldComponent) name=@name onChange=this.handleInput isDisabled=@isDisabled selectedValues=@value ) ) }} </Form::Fieldset> {{/if}}

With your helpers here being:

hasOnlyLabelBlock = (hasLabel: boolean, hasHint: boolean) => hasLabel && !hasHint; hasHintAndLabelBlocks = (hasLabel: boolean, hasHint: boolean) => hasLabel && hasHint; hasLabelArgAndHintBlock = (hasLabel: boolean, hasHint: boolean) => hasLabel && hasHint;

There's also hasHintArgAndLabelBlock and hasHintArgAndLabelArg and hasOnlyLabelArg I think.

⚠️ You can't do this: ⚠️

What exactly can't we do?

Your example had

{{#if (has-block "label")}} {{yield to="label"}} {{/if}}

We can't do this?

Or is it about something like this, which is not possible? 👇

{{#if (has-block "label")}} <:label> {{yield to="label"}} </:label> {{/if}}

If that's the case, what is happening there? Does Ember refuse using any <:some-block> wrapped in {{#if}}?

Yes named blocks like :label can't be wrapped in conditionals. (Sorry, yesterday I was struggling to remember the exact details, but this is why!)

RFC issue: emberjs/rfcs#735

ynotdraw · 2023-04-04T12:47:07Z

docs/components/checkbox-field/demo/base-demo.md

@@ -3,7 +3,10 @@
  @label='Label'
  @isChecked={{this.isChecked}}
  @onChange={{this.handleChange}}
-/>
+>
+  <:label>extra label info</:label>


You could maybe do something like what we are expecting to do - add an icon here (with no tooltip for now):

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>

docs/components/checkbox-field/demo/base-demo.md

ynotdraw · 2023-04-04T12:48:20Z

docs/components/checkbox-group-field/demo/base-demo.md

+  <:default as |group|>
+    <group.CheckboxField @label='Option 1' @value='option-1' />
+    <group.CheckboxField
+      @label='Option 2'
+      @hint='Extra information about the radio'
+      @value='option-2'
+    />
+    <group.CheckboxField @label='Option 3' @value='option-3' />
+    <group.CheckboxField
+      @label='Option 4'
+      @hint='Extra information about the radio'
+      @value='option-4'
+    />
+  </:default>
+  <:label>extra label info</:label>
+  <:hint>extra hint info</:hint>


I'm wondering:

Should the named-block options go under a new section + under the UI states sections of the docs instead? I feel like they could use some extra documentation and that'd be a good way to show usage + what they look like visually. I kind of think that maybe the top-level demo can be a general use case, while maybe more "advanced" uses like this could go a bit further down the page. What do you think?

We'll also want to add documentation for these named blocks on all pages affected so that folks know they can use these!

These :label and :hint blocks are removed from this demo now (they should not have been here).

I also added :label code snippets under each ## Label section, same for :hint. I don't think they can go under UI states because folks can't see the code there...I guess they could see an icon for label or a link for hint? Seems more useful to have it under the ## Label and ## Hint sections tho (in terms of being able to copy those code snippets for consumers)

ynotdraw · 2023-04-04T12:50:25Z

packages/ember-toucan-core/src/components/form/fields/checkbox-group.hbs

+    aria-describedby="{{if @error field.errorId}} {{if @hint field.hintId}}"
+    disabled={{@isDisabled}}
+    {{! attribute aria-invalid is not supported by the element fieldset with the implicit role of group }}


Ah - so no more aria-invalid={{if @error "true"}} due to this?

Yeah I guess the linter (ember-template-lint?) doesn't catch this when we were adding it as ...attributes on a component, but now that it can tell it's a group it doesn't want you to add aria-invalid?

packages/ember-toucan-core/src/components/form/fields/checkbox.ts

test-app/tests/integration/components/file-input-field-test.gts

test-app/tests/integration/components/input-field-test.gts

ynotdraw · 2023-04-04T12:54:33Z

test-app/tests/integration/components/input-field-test.gts

+
+    assert.dom(label).hasText('Label Extra label content'); 
+    assert.dom(hint).hasText('Hint text visible here Extra hint content'); 
+


nit: is this spacing prettier would complain about? May want to save in VSCode to make sure prettier runs since it doesn't run via the CLI with gts|gjs files

Okay will give it a shot...whenever I open a gts file in my VS Code there are red lines everywhere so I just sort of assumed it wouldn't be formatting correctly.

Update - I think this did something! Will keep formatting markdown and gts/gjs files in VS Code from now on...

test-app/tests/integration/components/textarea-field-test.gts

packages/ember-toucan-core/src/components/form/fields/checkbox.hbs

nicolechung · 2023-04-05T21:25:02Z

packages/ember-toucan-core/src/-private/assert-block-or-argument-exists.ts

@@ -0,0 +1,39 @@
+import { assert } from '@ember/debug';
+
+export type AssertBlockOrArg = {


@ynotdraw new singular function / not a helper.

yay! This looks awesome to me!

ynotdraw

This is coming together really well! I think just a few docs / nit things and then it'll be good to go! 🚀

I also started playing around with this a bit for our next Form component on how we'll expose these named blocks over at 3ed2f97. We should chat about this on Monday! I'm so excited about this! Thanks for knocking this out!

ynotdraw · 2023-04-06T00:05:14Z

docs/components/checkbox-group-field/index.md

-Provide a string to `@label` to render the text into the `<legend>` of the fieldset.
+Required.
+
+Use either `@label` or `:label`.


nit: To maybe be "modern Ember" friendly or more friendly to folks new to Ember, I wonder if being a bit more verbose here would be helpful:

Suggested change

Use either `@label` or `:label`.

Use either the `@label` component argument or the `:label` named block.

ynotdraw · 2023-04-06T00:05:53Z

docs/components/checkbox-group-field/index.md

+
+Use either `@label` or `:label`.
+
+Provide a string to `@label` or components to `:label` to render the text into the `<legend>` of the fieldset.


nit: the :label named block can really take any content!

Suggested change

Provide a string to `@label` or components to `:label` to render the text into the `<legend>` of the fieldset.

Provide a string to the `@label` component argument or content to the `:label` named block to render the into the `<legend>` of the fieldset.

ynotdraw · 2023-04-06T00:06:56Z

docs/components/fieldset/demo/base-demo.md

-  <p class='text-body-and-labels text-xs m-0 italic'>~Fieldset components render
-    here!~</p>
-</Form::Fieldset>


Any reason to axe this?

ynotdraw · 2023-04-06T00:07:36Z

docs/components/fieldset/index.md

+Use either `@label` or `:label`.
+
+Provide a string to `@label` or components to `:label` to render the text into the `<legend>` of the Fieldset.


Same comments here (and all the other files!) as above, but this is looking good!

ynotdraw · 2023-04-06T00:08:16Z

docs/components/checkbox-group-field/index.md

+Use either `@hint` or `:hint`.
+
+Provide a string to `@hint` or components to `:hint` to render the text into the Hint section of the fieldset.


Similar comments in this section as the above nit, but these are also just me being nit-picky!

ynotdraw · 2023-04-06T00:16:48Z

packages/ember-toucan-core/src/components/form/fields/file-input.ts

    error?: ErrorMessage;
    files?: File[];
    hint?: string;
-    label: string;
+    label?: string;
    trigger: string;
    isDisabled?: boolean;
    multiple?: boolean;
    onChange?: (files: File[], event: FileEvent) => void;
    rootTestSelector?: string;


As an aside / not part of this PR / as a separate PR: it may be good to add JSDocs here like with our other components so that they show up in your editor!

ynotdraw · 2023-04-06T00:18:17Z

packages/ember-toucan-core/src/components/form/fields/radio.hbs

+                {{@label}}
+              {{/if}}
+            </span>
+


superrrr nit: looks like some extra spacing here that's not in the other files.

The extra line space should be removed now...I notice that this isn't fixed with pnpm format which is a bit of a bummer.

ynotdraw · 2023-04-06T00:20:43Z

packages/ember-toucan-core/src/-private/assert-block-or-argument-exists.ts

+}: AssertBlockOrArg) => {
+  if (isRequired) {
+    assert(
+      `You need either :${argName} or @${argName}`,


question: Do you think we should put @${argName} first to prompt folks to use the argument rather than the named block? Or do you think more people will use the named block version?

Not sure...

test-app/tests/integration/components/input-field-test.gts

test-app/tests/integration/components/radio-group-field-test.gts

- change label and hint block from unknown to [] for TS - added tests for label and hint blocks

@Label

Consumers should be able to, say, use @Label or :label, but not both. Same with hint - consumers should be able to use @hint or :hint, but not both.

- added more code samples in as `:default` is sometimes required (when component yields components) - Label is required, hint is not

@Label

We need to ensure users have either a @Label or :label block. Any sort of label is required. We also need to check if users have either an @arg or a block to render a component. Because we are using glint, we currently can't use normal helpers. So we have -private ones instead.

@Label

- assert checks if there is an arg or a block, and if it's required - assert warns user if they are trying to use both - has is a check to render only if a block or an arg exists (@Label versus :label)

@Label

Hopefully I included all the new related tests - there should be a @Label or :label - there should not be a @Label AND :label - didn't test for @hint/:hint as this is similar

The two helpers were doing pretty much the same thing (checking for a block or arg, or the presence of either if required). So I made this into a single function instead, and not a helper. It's not really a helper because it doesn't use the helper function.

Having a single helper helps to declutter the templates a bit.

This was breaking the sidebar navigation because an Error was being thrown on this page (assert Error).

- amend Label description with named blocks and component arg - amend Hint description with named blocks and component arg - add UI states for hint and label blocks - Add back in missing default block in the fieldset demo

ynotdraw

This looks good to me! Questions still around Fieldset though from #110 (comment). I think we can figure this out later as it seems a bit tricky due to the way named blocks work.

I also wonder if we should delete Fieldset as it's not being used at all with these changes and it'll be one more component to maintain that we're not sure if folks are going to use? I'd imagine most folks will use our checkbox-group and radio-group components alone rather than rolling their own, but who knows. If we could use the Fieldset component for both of those cases, then I'd say let's keep it, but since we cannot due to the limitations mentioned in the those comments, I'm quite tempted to say we remove it for now (can always add it back later!).

NOTE: It may be wise to add a changeset with this PR as well! Then we can cut releases more frequently 🎉. If you do end up deleting Fieldset it's probably worth selecting minor as the upgrade (as it'll technically be a breaking change in pre1.0.0 land). Otherwise a patch is probably fine since we are pre1.0.0 and it's new functionality with no breaking changes.

- remove fieldset test - remove fieldset demos and docs - remove fieldset from template registry - remove fieldset from package.json

ynotdraw · 2023-04-11T14:22:22Z

packages/ember-toucan-core/package.json

@@ -128,7 +128,6 @@
      "./components/form/fields/radio-group.js": "./dist/_app_/components/form/fields/radio-group.js",
      "./components/form/fields/radio.js": "./dist/_app_/components/form/fields/radio.js",
      "./components/form/fields/textarea.js": "./dist/_app_/components/form/fields/textarea.js",
-      "./components/form/fieldset.js": "./dist/_app_/components/form/fieldset.js",


nicolechung changed the title ~~Add labels and error blocks to fields~~ Add labels and hint blocks to fields Mar 27, 2023

nicolechung force-pushed the add_labels_and_error_blocks_to_fields branch from 72b72da to e42c891 Compare March 29, 2023 16:34

nicolechung marked this pull request as ready for review March 29, 2023 16:34

nicolechung force-pushed the add_labels_and_error_blocks_to_fields branch 2 times, most recently from 2be4131 to 92e5d2a Compare March 29, 2023 17:41

nicolechung mentioned this pull request Mar 30, 2023

Add character count like named block to input field #115

Merged

7 tasks

nicolechung force-pushed the add_labels_and_error_blocks_to_fields branch 4 times, most recently from e3971b1 to 4f62489 Compare March 31, 2023 18:34

nicolechung commented Mar 31, 2023

View reviewed changes

nicolechung requested review from ynotdraw, simonihmig and noahgelmancs and removed request for noahgelmancs March 31, 2023 18:42

simonihmig reviewed Apr 3, 2023

View reviewed changes

nicolechung force-pushed the add_labels_and_error_blocks_to_fields branch from 4f62489 to fb68fef Compare April 3, 2023 20:39

ynotdraw reviewed Apr 4, 2023

View reviewed changes

nicolechung force-pushed the add_labels_and_error_blocks_to_fields branch 2 times, most recently from e44fe00 to ffbad8b Compare April 5, 2023 14:33

ynotdraw reviewed Apr 5, 2023

View reviewed changes

packages/ember-toucan-core/src/components/form/fields/checkbox.hbs Outdated Show resolved Hide resolved

packages/ember-toucan-core/src/components/form/fields/checkbox.hbs Outdated Show resolved Hide resolved

nicolechung force-pushed the add_labels_and_error_blocks_to_fields branch from ffbad8b to 5cddee9 Compare April 5, 2023 21:14

nicolechung commented Apr 5, 2023

View reviewed changes

ynotdraw reviewed Apr 6, 2023

View reviewed changes

nicolechung added 2 commits April 10, 2023 15:56

feat: Adding label and hint blocks to field components

592be1f

docs: Label and hint blocks, update demos

6be3034

nicolechung added 13 commits April 10, 2023 15:56

fix: Field components, add test for label and hint blocks

45a6e2d

- change label and hint block from unknown to [] for TS - added tests for label and hint blocks

feat: Field components, make consumer choose arg or block

9f3d234

Consumers should be able to, say, use @Label or :label, but not both. Same with hint - consumers should be able to use @hint or :hint, but not both.

docs: Update docs with @label/:label and @hint/:hint

b26a771

- added more code samples in as `:default` is sometimes required (when component yields components) - Label is required, hint is not

feat: Add helpers to the field component backing classes

eb9c5c3

- assert checks if there is an arg or a block, and if it's required - assert warns user if they are trying to use both - has is a check to render only if a block or an arg exists (@Label versus :label)

feat: use helpers in field templates

52ace63

test: Update tests with new assertions

e800b56

Hopefully I included all the new related tests - there should be a @Label or :label - there should not be a @Label AND :label - didn't test for @hint/:hint as this is similar

fix: Adjust all Field components to use the new single helper

27e67ab

Having a single helper helps to declutter the templates a bit.

fix: Remove @Label in a field that uses a :label block

238f63d

This was breaking the sidebar navigation because an Error was being thrown on this page (assert Error).

docs: Fixes to Field components

11b3449

- amend Label description with named blocks and component arg - amend Hint description with named blocks and component arg - add UI states for hint and label blocks - Add back in missing default block in the fieldset demo

fix: Field component, test messages

a8ac90a

fix: Remove extra line space in radio field component

1e0f2fe

nicolechung mentioned this pull request Apr 10, 2023

docs: FileInput, add jsdoc #125

Merged

1 task

ynotdraw approved these changes Apr 11, 2023

View reviewed changes

nicolechung force-pushed the add_labels_and_error_blocks_to_fields branch 2 times, most recently from 906961f to 913681a Compare April 11, 2023 13:57

nicolechung added 2 commits April 11, 2023 10:01

fix: Fieldset, removed component and related files

afb5183

- remove fieldset test - remove fieldset demos and docs - remove fieldset from template registry - remove fieldset from package.json

Added Changeset for label and hint blocks in the Field components

26b324f

nicolechung force-pushed the add_labels_and_error_blocks_to_fields branch from 913681a to 26b324f Compare April 11, 2023 14:04

ynotdraw reviewed Apr 11, 2023

View reviewed changes

nicolechung requested review from simonihmig, danwenzel and noahgelmancs April 11, 2023 14:29

simonihmig approved these changes Apr 11, 2023

View reviewed changes

nicolechung removed request for danwenzel and noahgelmancs April 11, 2023 14:52

nicolechung merged commit 603f80e into main Apr 11, 2023
14 checks passed

nicolechung deleted the add_labels_and_error_blocks_to_fields branch April 11, 2023 14:53

github-actions bot mentioned this pull request Apr 11, 2023

Release Preview #127

Merged


		assert.dom(label).hasText('Label Extra label content');
		assert.dom(hint).hasText('Hint text visible here Extra hint content');

		@@ -0,0 +1,39 @@
		import { assert } from '@ember/debug';

		export type AssertBlockOrArg = {

	Use either `@label` or `:label`.
	Use either the `@label` component argument or the `:label` named block.


		Use either `@label` or `:label`.

		Provide a string to `@label` or components to `:label` to render the text into the `<legend>` of the fieldset.

	Provide a string to `@label` or components to `:label` to render the text into the `<legend>` of the fieldset.
	Provide a string to the `@label` component argument or content to the `:label` named block to render the into the `<legend>` of the fieldset.

		Use either `@hint` or `:hint`.

		Provide a string to `@hint` or components to `:hint` to render the text into the Hint section of the fieldset.

Add labels and hint blocks to fields #110

Add labels and hint blocks to fields #110

Conversation

nicolechung commented Mar 27, 2023 • edited

🚀 Description

🔬 How to Test

📸 Images/Videos of Functionality

changeset-bot bot commented Mar 27, 2023 • edited

🦋 Changeset detected

github-actions bot commented Mar 27, 2023 • edited

Preview URLs

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ynotdraw commented Mar 31, 2023

nicolechung commented Apr 2, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ynotdraw Apr 6, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ynotdraw Apr 4, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ynotdraw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ynotdraw Apr 6, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ynotdraw left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nicolechung commented Mar 27, 2023 •

edited

changeset-bot bot commented Mar 27, 2023 •

edited

github-actions bot commented Mar 27, 2023 •

edited

ynotdraw Apr 6, 2023 •

edited

ynotdraw Apr 4, 2023 •

edited

ynotdraw Apr 6, 2023 •

edited

ynotdraw left a comment •

edited