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.

Sign up for GitHub

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

Jump to bottom

Button Toggle #665

Closed
LibbyUX opened this issue Aug 22, 2024 · 6 comments · Fixed by #671
Closed

Button Toggle #665

LibbyUX opened this issue Aug 22, 2024 · 6 comments · Fixed by #671
Assignees
@bhushankhope
Labels
app: design system storybook HRA Design System Storybook for global consistency across HRA products atomic design: molecule A set of component atoms that make a larger component ⚙️ hra-ds: new 🆕 A new component being added to the HRA Design System Storybook
Milestone
Develop: Storyboo...

Comments

@LibbyUX
Copy link
Contributor

LibbyUX commented Aug 22, 2024 •
edited
Loading

Button Toggle

Angular Material Button Toggle in HRA styles:

  • We will need exclusive select and multi-select functionality for this button
    • Single-select needed for future versions of CDE and Atlas Apps
    • Multi-select needed for future versions of EUI
    • More UIs will use a segmented button eventually

Resources

image

image
@LibbyUX LibbyUX added app: design system storybook HRA Design System Storybook for global consistency across HRA products product team: developers ⚙️ hra-ds: new 🆕 A new component being added to the HRA Design System Storybook atomic design: molecule A set of component atoms that make a larger component labels Aug 22, 2024
@bhushankhope bhushankhope self-assigned this Aug 22, 2024
@LibbyUX
Copy link
Contributor Author

LibbyUX commented Aug 23, 2024

@bhushankhope & I caught up just now about the need for this to occasionally have a fill behavior within certain containers. I also noticed I needed a medium sizes component. This component will always be designed in a container with a minimum width, so it responds correctly for users.

Please see updated:

image

Examples

FTU

image

CDE

image

@bhushankhope
Copy link
Contributor

@LibbyUX updated the styles. Please review here

@LibbyUX LibbyUX linked a pull request Aug 26, 2024 that will close this issue
Design system button toggle #671
Merged
@LibbyUX
Copy link
Contributor Author

LibbyUX commented Sep 5, 2024

@bhushankhope - Katy would prefer us hide the checkmark icon for this component. Can you please update in the design system? I have edited the design system repo & components file for this request.

  • Mentioning @bherr2 & @axdanbol for visibility on this design system update request.
Screenshot 2024-09-05 at 12 51 19 PM Screenshot 2024-09-05 at 12 50 55 PM

@bhushankhope
Copy link
Contributor

@LibbyUX Working on it. Thanks

@bhushankhope
Copy link
Contributor

@LibbyUX please review. Thanks
Link

@LibbyUX LibbyUX mentioned this issue Sep 23, 2024
Open
@LibbyUX
Copy link
Contributor Author

LibbyUX commented Oct 17, 2024

Superseded by #775

@LibbyUX LibbyUX closed this as completed Oct 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@bhushankhope bhushankhope

Labels
app: design system storybook HRA Design System Storybook for global consistency across HRA products atomic design: molecule A set of component atoms that make a larger component ⚙️ hra-ds: new 🆕 A new component being added to the HRA Design System Storybook
Projects
None yet
Milestone
Develop: Storybook Design System
Development

Successfully merging a pull request may close this issue.

Design system button toggle hubmapconsortium/hra-ui
2 participants
@bhushankhope @LibbyUX