(Follow up) Figma > form input group
Description
Related to #845 (closed).
Outstanding issues related to form input changes in Figma:
I wonder if it could be problematic that the Prefix/ suffix and the Default button look very similar but perform different functions and behave differently. The Prefix is not clickable, it's text appended to the input that can be copied but not clicked, and it's not actionable. Maybe we could make the fill one step darker for the Prefix and suffix?
For this effort I'm not as concerned about the design as I am just getting the component in place in Figma. I think it'd be better to create a followup on the styling. I'm in agreement though that it should be evaluated.
It feels a bit odd to have buttons as a prefix. Text prefix and a color picker makes sense, but we generally have buttons on the right of the input. Should we limit the usage of buttons to the suffix and only keep the color picker and text prefix for the prefix? When I saw the example with the search where you used a tertiary button prefix to show the search icon, that felt odd. We have search buttons on the right of the input usually, shouldn't the search icon just be an icon and not a button? Wdyt?
For this, Taurie Davis had found a few examples where a button was a prefix. Search in particular has several variations, one of which does include the button prefix that impacts the search query. If anything, I could see removing the confirm and danger options, but leave default buttons here.
Oh right, we have the recent search results button as a prefix on the left from the input. I agree, the confirm and danger options for the prefix could be removed. I can't think of a specific use case for them. Confirm and danger could work as suffix though. We can add it to the guidelines that these button variants should be used as suffix to better align with our buttons guidelines. Wdyt? We should update the text in the suffix buttons to say "confirm" and "danger" to reflect the button variant. Can you give me edit access to this branch or do I need to create a new branch if I want to make changes?
For the button labels, those are consistent with the button text in the main component. I think changing them here means that the text would reset if you changed variants. It's something I want to address in the main file and have it propagate to where these are used, but the label has to be the same for all buttons to do so. Are you ok with tabling this for now?
Figma file
Checklist
Make sure the following are completed before closing the issue:
-
Assignee: Design in your working file. When applicable, follow our structure, building, and annotation guidelines. If you have any questions, reach out to a FE/UX Foundations designer. -
Assignee: Update the link to the working file in the issue description. -
Assignee: Ask a FE/UX Foundations designer to review your design (ensure they have edit permissions in Figma). -
Reviewer: Review and approve assignee’s design. Specific design questions can be addressed with comments in Figma. Comment in this issue when the content is less specific to the design or requires greater visibility. -
Reviewer: Assign to a Figma maintainer for final review (make sure they have edit permissions in Figma). -
Maintainer: Review and approve assignee’s changes. -
Maintainer: Add the changes or additions to the target file. For example, you’d copy a final chart design from the working file and paste into the related location in the Data Visualization file. -
Ensure that all styles and components now belong to the target file. -
For changes to the Component Library file, view the components in the Assets panel to ensure they align with our asset library structure guidelines.
-
-
Maintainer: When applicable, publish any library changes along with a clear commit message. -
Assignee: Move your working file to the shared Figma project: -
For Component Library changes, move your file to the Component archive project. -
For all other changes, move your file to the Misc archive project. -
If you’re a community contributor, we ask that you transfer ownership of your draft file to the maintainer so they can move it to our archive, along with its version history and comments.
-
-
Assignee (or Maintainer, for community contributions): If it’s a new pattern or a significant change, add an agenda item to the next UX weekly call to inform the team. -
Assignee: When applicable, create an MR in this repository and apply the "component-guideline" template to create or update the component’s documentation page. If you do not have capacity, create an issue in this repository using the "Component documentation" issue template. Bring the issue to your team planning session for prioritization and scheduling. Mark the new issue as related to this one. -
Assignee: When applicable, create an issue in GitLab UI using the "Component" issue template to build or update the component code. Bring the issue to your team planning session for prioritization and scheduling. Mark the new issue as related to this one. -
Assignee: 🎉 Congrats, you made it! You can now close this issue.