Skip to content
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

feat(tailwind): first version of RefInput to show REF as radiogroup and REF_ARRAY as checkboxgroup #4585

Open
wants to merge 11 commits into
base: master
Choose a base branch
from

Conversation

mswertz
Copy link
Member

@mswertz mswertz commented Dec 30, 2024

What are the main changes you did

  • created first InputRef to enable Form to work for REF and REF_ARRAY

How to test

  • see the test pages -> either 'Ref' or 'Form'
  • see e2e test

N.B. future enhancement could be to use a nested table to allow users who don't know what they are looking for to find what they want.

@mswertz mswertz marked this pull request as draft December 30, 2024 16:14
@mswertz mswertz changed the title feat: first version of RefArrayInput feat(tailwind): first version of RefArrayInput Dec 30, 2024
@mswertz mswertz marked this pull request as ready for review December 31, 2024 22:29
@mswertz mswertz changed the title feat(tailwind): first version of RefArrayInput feat(tailwind): first version of RefInput to show REF as radiogroup and REF_ARRAY as checkboxgroup Jan 2, 2025
@mswertz mswertz mentioned this pull request Jan 10, 2025
8 tasks
Copy link
Contributor

@davidruvolo51 davidruvolo51 left a comment

Choose a reason for hiding this comment

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

I'm curious to see how this component overlaps/interacts with the listbox component. I think the data flows are similar. I have a few suggestions, but some of my comments might be beyond this PR and be specific to the TW implementation overall.

apps/metadata-utils/src/types.ts Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

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

At some point, it might be good to refactor this component. There is a lot of JS code in this file and we could move a lot of this to custom utility classes or variants. We could also see if some of the other button components could be merged or become a variant of the base "button" component.

Copy link
Contributor

Choose a reason for hiding this comment

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

Perhaps this component could become a variant of the base button component? There is some overlap between the two and it might be better to integrate the text version as an option.

We might want to rethink the button component anyways. Ideally, there should be a few button styles that correspond to page hierarchy.

  • Primary action: a button to indicate the action that has the highest priority (e.g., submit form). Depending on the theme, this usually has a filled background that is the primary theme color.
  • Secondary action: a button that indicates additional actions (e.g., cancel, discard changes, etc.). This is sometimes the inverted primary theme color.
  • Text: This is used for styling buttons as links or other text elements. It should not have a background style and it should behave as a hyperlink element (text decoration or underline)

apps/tailwind-components/components/form/FieldInput.vue Outdated Show resolved Hide resolved
apps/tailwind-components/components/input/Search.vue Outdated Show resolved Hide resolved
apps/tailwind-components/types/types.ts Outdated Show resolved Hide resolved
apps/tailwind-components/pages/input/Search.story.vue Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants