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

[PBNTR-371] [3 of 4] Star Rating kit: add styles and animation #3566

Merged
merged 16 commits into from
Aug 13, 2024

Conversation

ElisaShapiro
Copy link
Contributor

@ElisaShapiro ElisaShapiro commented Aug 2, 2024

What does this PR do? A clear and concise description with your runway ticket url.
PBNTR-371 adds styling from star rating kit handoff to enhance interactive star rating kit (rails version creation ticket, react version creation ticket). This PR adds state managed hover styles, focus styles, adds the dark mode primary star style, and ensures that the PbEnhancedElement code for this kit was added to the new playbook-rails.js created in the recent switch to vite. It reveals the previously created rails and react interactive doc examples, and also adds an interactive star rating kit to the first form doc example.

Screenshots: Screenshots to visualize your addition/change
Rails interactive star rating kit - see selected stars, hover stars, and focus box via keyboard-tabbing
for PR rails interactive light
for PR rails interactive dark
React interactive star rating kit - see selected stars, hover stars, and focus box via keyboard-tabbing
for PR react interactive light
for PR react interactive dark
Rails interactive star rating kit on form doc example
for PR in form doc ex
Primary star in dark mode (first photo shows current production, where dark mode primary star is still $primary; second photo shows it updated to $active_dark)
for PR primary dark current
for PR primary active dark

How to test? Steps to confirm the desired behavior:

  1. Go to star rating kit in review environment (rails, react).
  2. (For Rails/React pages): Scroll down to the Interactive doc example and test it by hovering over stars, selecting a set of stars, hovering over additional stars, and making another selection. Test focus by keyboard-tabbing and keyboard-clicking with "enter" or "space" (focus will only work for Interactive doc example).
  3. (For Rails/React pages): Switch to dark mode, and retest the interactive doc example there to see dark mode styles. Scroll up to the Color Options doc example to see the new primary dark mode color.
  4. (Rails only): Go to the Form kit page, see/interact with the interactive star rating kit at the bottom of the first doc example.

Checklist:

  • LABELS Add a label: enhancement, bug, improvement, new kit, deprecated, or breaking. See Changelog & Labels for details.
  • DEPLOY I have added the milano label to show I'm ready for a review.
    - [ ] TESTS I have added test coverage to my code.

@ElisaShapiro ElisaShapiro added the enhancement New Features, Props, & Variants (USED IN CHANGELOG) label Aug 2, 2024
@ElisaShapiro ElisaShapiro self-assigned this Aug 2, 2024
@ElisaShapiro ElisaShapiro added the milano 20 MAX - Deploy this PR to a review environment via Milano label Aug 5, 2024
@ElisaShapiro ElisaShapiro added milano 20 MAX - Deploy this PR to a review environment via Milano and removed milano 20 MAX - Deploy this PR to a review environment via Milano labels Aug 6, 2024
@ElisaShapiro ElisaShapiro marked this pull request as ready for review August 7, 2024 15:14
@ElisaShapiro ElisaShapiro requested review from a team as code owners August 7, 2024 15:14
nidaqg
nidaqg previously approved these changes Aug 12, 2024
@nidaqg nidaqg added Code Approved Approved by a Playbook Admin Product Approved pending technical review, OK to merge to master labels Aug 12, 2024
@jasperfurniss jasperfurniss added this pull request to the merge queue Aug 13, 2024
Merged via the queue into master with commit 4d04b47 Aug 13, 2024
5 checks passed
@jasperfurniss jasperfurniss deleted the PBNTR-371-star-rating-interactive-animation branch August 13, 2024 13:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Code Approved Approved by a Playbook Admin enhancement New Features, Props, & Variants (USED IN CHANGELOG) milano 20 MAX - Deploy this PR to a review environment via Milano Product Approved pending technical review, OK to merge to master
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants