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-694] SkeletonLoading User Component and Filter Component doc examples #4014

Merged
merged 7 commits into from
Dec 19, 2024

Conversation

ElisaShapiro
Copy link
Contributor

@ElisaShapiro ElisaShapiro commented Dec 16, 2024

What does this PR do? A clear and concise description with your runway ticket url.
PBNTR-694 requests the addition of two doc examples as outlined in the handoff here to the React SkeletonLoading beta kit - one demonstrating the use of the SkeletonLoading kit as an interim loading state for our User kit in two ways, the second for the Filter kit (also in two ways).

The goal for this kit is that using the SkeletonLoading kit and other code, we can mimic the shape of our other components and set a loading state for them accordingly. These doc examples demonstrate to devs how to use the SkeletonLoading kit + other Playbook kits as building blocks to construct loading interims.

This PR also contains a small update adding the correct Dark Mode styles to the containing cards in the Height & Width doc example (just needed to carry {...props} through). See third screenshot below.

Screenshots: Screenshots to visualize your addition/change
User Component doc example
user component piece by piece doc ex
Filter Component doc example
filter component piece by piece doc ex
Height & Width doc example dark mode update
height and width dark mode

How to test? Steps to confirm the desired behavior:

  1. Go to the SkeletonLoading kit page.
  2. Scroll down to the User Component Example doc example, see two versions of the User kit in an interim loading state.
  3. Scroll down to the Filter Component Example doc example, see two versions of the Filter kit in an interim loading state.

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 milano 20 MAX - Deploy this PR to a review environment via Milano improvement This is used when your PR contains library upgrades or doc/site improvements. (USED IN CHANGELOG)) minor Semver Target labels Dec 16, 2024
@ElisaShapiro ElisaShapiro self-assigned this Dec 16, 2024
@ElisaShapiro ElisaShapiro marked this pull request as ready for review December 17, 2024 17:09
@ElisaShapiro ElisaShapiro requested a review from a team as a code owner December 17, 2024 17:09
@nidaqg nidaqg added the Code Approved Approved by a Playbook Admin label Dec 17, 2024
@Amax1296 Amax1296 added the Product Approved pending technical review, OK to merge to master label Dec 18, 2024
@jasperfurniss jasperfurniss merged commit bd9f07c into master Dec 19, 2024
9 checks passed
@jasperfurniss jasperfurniss deleted the PBNTR-694-skeleton-loading-kit-doc-examples branch December 19, 2024 13:32
Copy link

You merged this pr to master branch:
- Ruby Gem: 14.10.0.pre.rc.16
- NPM: 14.10.0-rc.16

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 improvement This is used when your PR contains library upgrades or doc/site improvements. (USED IN CHANGELOG)) milano 20 MAX - Deploy this PR to a review environment via Milano minor Semver Target Product Approved pending technical review, OK to merge to master
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants