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

Added images and examples in Menu and Snackbar also made a Snackbar C… #855

Closed
wants to merge 1 commit into from

Conversation

Zsclarx
Copy link

@Zsclarx Zsclarx commented Dec 7, 2024

PR Title:

Add new Snackbar component, update snackbar documentation and update menu documentation with checkbox-type menus


Description:

This PR introduces the following changes:

  1. Snackbar Component: A new Snackbar component has been added to the /lib directory, with multiple variants:
    • Simple snackbar with just a message
    • Snackbar with an action button
    • Focused snackbar with descriptions.
  2. Menu Documentation: Updated the Menu component documentation to include a new Checkbox Menu type, showcasing how checkboxes can be used within a menu.

Issue Addressed:

Addresses issue #261


Before/After Screenshots:

Basic Snackbar:

Basic Snackbar

Snackbar with Action:

Snackbar with Action

Focused Snackbar:

Focused Snackbar


Changelog:

  • Description:
    • Added a new Snackbar component with variants for simple snackbars, snackbars with actions, and focused snackbars.
    • Updated the Menu documentation to include a new Checkbox Menu type, illustrating how checkboxes can be integrated into a menu.
    • The Snackbar documentation has been updated to provide examples and descriptions for each type of snackbar.
  • Products Impact: None (internal update)
  • Addresses: #261 (Add examples and existing component variations to Snackbars and Menus pages #261), links to relevant consumer product issues (if applicable).
  • Components:
    • Snackbar (new component) (documentation update)
    • Menu (documentation update to include checkbox menu type)
  • Breaking: No
  • Impacts a11y: Yes, the changes improve accessibility by enhancing focus management in snackbars and providing a clearer example of checkbox-based menus for better interaction.
  • Guidance: Consumers should update their usage of snackbars to adopt the new variants and refer to the updated documentation for implementing checkbox menus.

Steps to Test:

  1. Check out the new Snackbar component in /lib.
  2. Verify that the component supports the three types of snackbars (simple, with actions, and focused) as described in the documentation.
  3. Review the updated documentation at /docs/pages/snackbar.vue to ensure the examples are working as expected.
  4. Check the updated Menu documentation at /docs/pages/menu.vue to ensure that the Checkbox Menu examples are correct and showcase checkbox-based interactions properly.
  5. Ensure that accessibility features (keyboard navigation, screen reader support) are functional in the updated examples.

Optional Implementation Notes:

  • High-level Implementation:
    • The Snackbar component was added to the /lib directory with configurable props to control the type (simple, action-based, or focused).
    • The documentation for the Menu component has been updated to show an example of how a checkbox-style menu can be integrated. This provides users with guidance on using checkboxes within a menu structure.
    • Updated Snackbar documentation includes new examples and configurations, making it easier for users to implement snackbars in different styles.
  • Tech-debt items: No significant tech-debt introduced, but future improvements could include adding more customization options to snackbars or extending the checkbox menu functionality.

Testing Checklist:

  • Contributor has fully tested the PR manually
  • Before/after screenshots for front-end changes are included
  • Critical code paths are covered by unit tests
  • The change is described in the changelog section above

Reviewer Guidance:

  • Is the code clean and well-commented?
  • Are there tests for this change?
  • Are all UI components LTR and RTL compliant (if applicable)?
  • Does the Snackbar component support all three variants (simple, with actions, focused)?
  • Is the updated Menu documentation clear and functional for users who want to implement checkbox menus?

Comments:

  • Let me know if you need further details or any changes to the documentation.

Final Note:

This PR enhances the design system by adding flexibility to the Snackbar component and improving the Snackbar and Menu documentation with examples for checkbox-based menus. These changes will help users better implement snackbars and menus with enhanced functionality and accessibility.

@MisRob
Copy link
Member

MisRob commented Dec 9, 2024

I'm sorry for trouble @Zsclarx, however before adding new components we usually go through the specification process, so I will close this. I posted some guidance for you here #261 (comment) that will help to prevent these kinds of situations.

@MisRob MisRob closed this Dec 9, 2024
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