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

Create new ButtonIcon component #10447

Closed
blesildaramirez opened this issue Sep 18, 2024 · 0 comments
Closed

Create new ButtonIcon component #10447

blesildaramirez opened this issue Sep 18, 2024 · 0 comments
Assignees
@blesildaramirez
Labels
Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days. UI/UX Issues affecting the user interface/user experience
Milestone
3.5.0 LTS

Comments

@blesildaramirez
Copy link
Contributor

blesildaramirez commented Sep 18, 2024 •
edited
Loading

This component will be used in cases where we need a button that only displays an icon. Additionally, it should be flexible enough to handle scenarios where only an icon is displayed, such as when integrating with our existing DropdownActions component which is using MenuButton from @headlessui/vue.

Key Features:

  1. Icon-Only Button: The component should support rendering a button that contains only an icon. It should accept handlers to perform actions when interacted via click or keypress events.
  2. Icon-Only: The component should work seamlessly with DropdownActions, allowing it to display just the icon without affecting the semantic display of the menu actions button.
  3. Accessibility: The component should implement basic accessibility features, such as adding aria-label for buttons that only contain icons.
  4. Styling: Apply proper styling based on the state of the button. It should follow the same styling as PkpButton component.
  5. Props:
    • icon (required): Prop to pass to the Icon component's value.
    • ariaLabel (optional): A string for the aria-label attribute for accessibility.
@blesildaramirez blesildaramirez added Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days. UI/UX Issues affecting the user interface/user experience labels Sep 18, 2024
@blesildaramirez blesildaramirez self-assigned this Sep 18, 2024
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 19, 2024
@blesildaramirez
pkp/pkp-lib#10447 Add ButtonIcon component
85f869b
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 19, 2024
@blesildaramirez
pkp/pkp-lib#10447 Add ButtonIcon component
7885461
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 20, 2024
@blesildaramirez
pkp/pkp-lib#10447 Add ButtonIcon component
d5a0b79
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 20, 2024
@blesildaramirez
pkp/pkp-lib#10447 Add Copy icon and remove fixed width and height on …
acc3b79 
…Expand and History icons
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 20, 2024
@blesildaramirez
pkp/pkp-lib#10447 Update ButtonIcon style and props, provide document…
cfb65de 
…ation
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 20, 2024
@blesildaramirez
pkp/pkp-lib#10447 Update DropdownActions component to use ButtonIcon
a633c5c
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 23, 2024
@blesildaramirez
pkp/pkp-lib#10447 Add ButtonIcon component
f80c805
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 23, 2024
@blesildaramirez
pkp/pkp-lib#10447 Add Copy icon and remove fixed width and height on …
37c6f50 
…Expand and History icons
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 23, 2024
@blesildaramirez
pkp/pkp-lib#10447 Update ButtonIcon style and props, provide document…
5bedfd4 
…ation
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 23, 2024
@blesildaramirez
pkp/pkp-lib#10447 Update DropdownActions component to use ButtonIcon
a0369e2
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 23, 2024
@blesildaramirez
pkp/pkp-lib#10447 Adjust button size for ButtonIcon component
482ef1e
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 23, 2024
@blesildaramirez
pkp/pkp-lib#10447 Remove prop enlarged icon for ButtonIcon component
2c5295c
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 24, 2024
@blesildaramirez
pkp/pkp-lib#10447 Add ButtonIcon component
cfbb93c
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 24, 2024
@blesildaramirez
pkp/pkp-lib#10447 Add Copy icon and remove fixed width and height on …
b491a9f 
…Expand and History icons
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 24, 2024
@blesildaramirez
pkp/pkp-lib#10447 Update ButtonIcon style and props, provide document…
ba7ad52 
…ation
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 24, 2024
@blesildaramirez
pkp/pkp-lib#10447 Update DropdownActions component to use ButtonIcon
1045a03
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 24, 2024
@blesildaramirez
pkp/pkp-lib#10447 Adjust button size for ButtonIcon component
4ada9df
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 24, 2024
@blesildaramirez
pkp/pkp-lib#10447 Remove prop enlarged icon for ButtonIcon component
188b091
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 24, 2024
@blesildaramirez
pkp/pkp-lib#10447 Update how button is clicked in DropdownActions sto…
ed87e00 
…ry for ellipsis/icon only mode
blesildaramirez added a commit to pkp/ui-library that referenced this issue Sep 24, 2024
@blesildaramirez
pkp/pkp-lib#10447 Create new ButtonIcon component (#413)
c927175 
* pkp/pkp-lib#i10447 Add new icons to Icon Gallery

* pkp/pkp-lib#10447 Add ButtonIcon component

* pkp/pkp-lib#10447 Add Copy icon and remove fixed width and height on Expand and History icons

* pkp/pkp-lib#10447 Update ButtonIcon style and props, provide documentation

* pkp/pkp-lib#10447 Update DropdownActions component to use ButtonIcon

* pkp/pkp-lib#10447 Adjust button size for ButtonIcon component

* pkp/pkp-lib#10447 Remove prop enlarged icon for ButtonIcon component

* pkp/pkp-lib#10447 Update how button is clicked in DropdownActions story for ellipsis/icon only mode
@blesildaramirez blesildaramirez added this to the 3.5.0 LTS milestone Sep 24, 2024
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 26, 2024
@blesildaramirez
pkp/pkp-lib#10447 Adjust button size in ButtonIcon component
69ee9de
blesildaramirez added a commit to pkp/ui-library that referenced this issue Sep 26, 2024
@blesildaramirez
pkp/pkp-lib#10447 Adjust button size in ButtonIcon component (#416)
3ef7800
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@blesildaramirez blesildaramirez

Labels
Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days. UI/UX Issues affecting the user interface/user experience
Projects
None yet
Milestone
3.5.0 LTS
Development

No branches or pull requests
1 participant
@blesildaramirez