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

[PLAY-1388] Online Status Kit Props: Size and No Border #3563

Merged
merged 14 commits into from
Aug 13, 2024
Merged

[PLAY-1388] Online Status Kit Props: Size and No Border #3563

merged 14 commits into from
Aug 13, 2024

Conversation

kangaree
Copy link
Contributor

@kangaree kangaree commented Aug 1, 2024 •
edited
Loading

What does this PR do?

  • ✅ Add a Size prop of "sm", "md", or "lg" with a default of "sm"
  • ✅ Add a No Border prop which removes borders
  • ✅ Make borders "outer" instead of "inner" (switch from border-box to content-box)
  • ✅ Document these props
  • ✅ Set sizes when used with Avatars ('xxs', 'xs' = 'sm'. 'sm', 'md' = 'md'. 'lg', 'xl' = 'lg')
  • ✅ Position using global props instead of Sass styles
  • ✅ Update Rails Specs and Add Jest Tests

Screenshots:
Zight 2024-08-01 at 11 02 32 AM
Zight 2024-08-07 at 8 36 09 AM

How to test?

  1. Go to /kits/online_status/rails
  2. Review the size and no border examples
  3. Turn on dark mode
  4. The borders should be dark and blend into the background
  5. Go to /kits/avatar/rails
  6. The online status dot next to the avatar should grow bigger and match the Handoff (review the positioning too)
  7. Turn on dark mode and make sure the online status border is dark
  8. Repeat the above, but with react.

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.

@kangaree kangaree added the enhancement New Features, Props, & Variants (USED IN CHANGELOG) label Aug 1, 2024
@kangaree kangaree added the milano 20 MAX - Deploy this PR to a review environment via Milano label Aug 1, 2024
@kangaree kangaree marked this pull request as ready for review August 1, 2024 21:01
@kangaree kangaree requested review from a team as code owners August 1, 2024 21:01
@kangaree kangaree marked this pull request as draft August 2, 2024 12:35
@kangaree kangaree marked this pull request as ready for review August 2, 2024 18:34
@kangaree
Be more specific with size prefix so position sizes don't conflict
d27d3bc
@kangaree
Replace Sass styles with global position props
29544b0 
Position Avatar Online Status absolutely
Put on top for xxs-sm and bottom for md-xl
Use xxs 'not inset' right position for xxs-sm
Use xs and sm 'inset' right position for lg and xl

Organize by replacing cb with const onlineStatusSize
@nidaqg nidaqg added the Product Approved pending technical review, OK to merge to master label Aug 9, 2024
@nidaqg nidaqg added the Code Approved Approved by a Playbook Admin label Aug 13, 2024
@jasperfurniss jasperfurniss added this pull request to the merge queue Aug 13, 2024
Merged via the queue into master with commit 6f8248d Aug 13, 2024
6 checks passed
@jasperfurniss jasperfurniss deleted the PLAY-1388 branch August 13, 2024 13:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nidaqg nidaqg nidaqg approved these changes

@jasperfurniss jasperfurniss jasperfurniss approved these changes

Assignees

@kangaree kangaree

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
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@kangaree @jasperfurniss @nidaqg