Skip to content

[WNMGDS-3350] Remove form components table #3566

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.

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

Merged
merged 7 commits into from
May 8, 2025

Conversation

jack-ryan-nava-pbc
Copy link
Collaborator

@jack-ryan-nava-pbc jack-ryan-nava-pbc commented May 6, 2025

Summary

  • Ticket
  • We attempt to render an additional styling table for form components, however there is no component named "form" in the Tokens lists (or in the design system, it is a pattern) so we are unable to render any additional form styling tables.
  • This ticket removes all mentions of <ComponentThemeOptions componentname="form" /> in our MDX files, and the associated text providing context for those tables.
  • I also took the liberty to add a little message for when no additional styling variables exist for a given component.

How to test

  1. Search for <ComponentThemeOptions componentname="form" /> in the codebase. There should be 0 results.
  2. Fire up the doc site locally, and add <ComponentThemeOptions componentname="form" /> to a random MDX page. You should see the message No variables available for component: "form". Happy to discuss whether this is needed or not.

Checklist

  • Prefixed the PR title with the Jira ticket number as [WNMGDS-####] Title or [NO-TICKET] if this is unticketed work.
  • Selected appropriate Type (only one) label for this PR, if it is a breaking change, label should only be Type: Breaking
  • Selected appropriate Impacts, multiple can be selected.
  • Selected appropriate release milestone

@jack-ryan-nava-pbc jack-ryan-nava-pbc added the Type: Fixed Indicates an unexpected problem or unintended behavior label May 6, 2025
@jack-ryan-nava-pbc jack-ryan-nava-pbc self-assigned this May 6, 2025
@jack-ryan-nava-pbc jack-ryan-nava-pbc added the Impacts: Documentation Indicates that this item relates to documentation label May 6, 2025
@jack-ryan-nava-pbc jack-ryan-nava-pbc added this to the 12.3.0 milestone May 6, 2025
Copy link
Collaborator

@tamara-corbalt tamara-corbalt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Just one non-blocking question

{componentVariables.length > 0
? componentOptions
: `No variables available for component: "${componentname}".`}
</section>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This logic makes sense to me, although I'm not sure how much value the fallback message adds for the end user. Would it make more sense to return null early if componentVariables.length === 0 to avoid rendering anything at all?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was between that option and the above code. I think my intent here is to signal something to us devs that this isn't working as expected, and that's because the ComponentThemeOption component is often rendered below another heading that provides context, and if this is the only thing there, then it makes sense to alert the devs and have them remove the whole section.

But maybe I'm over thinking it and should make it simpler?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hear you—that makes sense. I don’t have strong feelings about this, so feel free to disregard, but I wonder if there’s a way to split the difference? Maybe return early if it's empty, but issue a console.warn in development?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, yeah that is the pattern we use for downstream packages. I guess it doesn't make sense to do it a different way for ourselves, but I'm just trying to make sure we don't miss anything, and burying it in the console feels like a way to miss it... I'll go with your suggestion for consistency and maybe I'm over thinking it. Thanks @tamara-corbalt !

@@ -71,8 +71,18 @@ const ComponentThemeOptions = ({ theme, componentname }: ComponentThemeOptionsPr
</Table>
);

if (!componentVariables || componentVariables.length == 0) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jack-ryan-nava-pbc can you please add a check for whether the environment is production? I don't think we should be adding a console warning in that case.

@jack-ryan-nava-pbc jack-ryan-nava-pbc merged commit a4cdc87 into main May 8, 2025
1 check passed
@jack-ryan-nava-pbc jack-ryan-nava-pbc deleted the jryan/wnmgds-3350-form-components-table branch May 8, 2025 15:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Impacts: Documentation Indicates that this item relates to documentation Type: Fixed Indicates an unexpected problem or unintended behavior
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants