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

feat(Disclosure): creating an Disclosure component #2859

Merged
merged 54 commits into from
Jun 26, 2024
Merged

Conversation

LinKCoding
Copy link
Contributor

@LinKCoding LinKCoding commented Apr 12, 2024

Overview

Adding a Disclosure component to replace the current AccordionDeprecated component.

PR Checklist

Testing Instructions

  1. Click on the preview link
  2. Go to the path=/docs/molecules-disclosure--disclosure
  3. Read through the documentation
  4. Change around the props in the Code Playground example
    (Mono)
  5. Go to the Mono Preview and visit admin/portal
  6. Check that the "Business Admin Users" section renders a Disclosure (aka Accordion) and loads the users upon expanding (and collapsing)
    (Monolith)
  7. Nothing really, check that the Preview works?
  8. ...
  9. Profit!

Don't make me tap the sign.

PR Links and Envs

Repository PR Link PR Env
Monolith Monolith PR Monolith Env
Mono PR Mono PR Portal Env

@LinKCoding LinKCoding changed the title feat(Accordion): creating an Accordion component feat(Disclosure): creating an Disclosure component May 7, 2024
Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looking great!! left a couple comments for semantic type things but this is looking really nice

packages/gamut/src/Disclosure/elements.tsx Outdated Show resolved Hide resolved
packages/gamut/src/Disclosure/types.ts Outdated Show resolved Hide resolved
@LinKCoding LinKCoding marked this pull request as ready for review June 13, 2024 13:14
@LinKCoding LinKCoding requested a review from a team as a code owner June 13, 2024 13:14
@LinKCoding
Copy link
Contributor Author

Going to leave this PR in limbo for the time being since we need to work on refactoring list/expandedrow to accommodate Disclosure. However, all styling and feedback is addressed and should be reviewed.

Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is looking great! only point of feedback is it looks like the Disclosure animates on open but "snaps" shut. i remember having some similar issues when developing the ExpandableList row so maybe you can steal some styles from there. nice work!!

Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wonderful!! sounds great on VO and looks great too. holding on ✅ for the animations only

expanded: { height: 'auto' },
collapsed: { height: 0 },
}}
transition={{ duration: 0.5, ease: 'easeInOut' }}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this seems a little slow - you could double check with stacey but i think we'd want it to match List (0.2, or timingValues.medium / 1000 if you wanna be fancy!)

@@ -0,0 +1,23 @@
import { motion } from 'framer-motion';

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

love this!!! starting to think we need more gamut documentation on our animations (not in this PR but maybe another ticket for the backlog ✨ )

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, you're right -- I'll cut a ticket!

Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥 🔥 🔥

@codecademydev
Copy link
Collaborator

📬Published Alpha Packages:

@codecademy/gamut@55.22.7-alpha.c7b611.0
@codecademy/gamut-kit@0.6.419-alpha.c7b611.0
@codecademy/styleguide@66.26.2-alpha.c7b611.0

@codecademydev
Copy link
Collaborator

🚀 Styleguide deploy preview ready!

https://6679dd5f33e46c36ecf1fd6d--gamut-preview.netlify.app

Deploy Logs

@LinKCoding LinKCoding added the Ship It :shipit: Automerge this PR when possible label Jun 26, 2024
@codecademydev codecademydev merged commit a45825f into main Jun 26, 2024
18 of 20 checks passed
@codecademydev codecademydev removed the Ship It :shipit: Automerge this PR when possible label Jun 26, 2024
@codecademydev codecademydev deleted the kl-gm-562 branch June 26, 2024 18:42
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.

3 participants