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

new expandable component #4847

Merged
merged 36 commits into from
Feb 15, 2024
Merged

new expandable component #4847

merged 36 commits into from
Feb 15, 2024

Conversation

mirnawong1
Copy link
Contributor

this pr creates completes this asana task: https://app.asana.com/0/1200099998847559/1206422502609164/f and creates an expandable component similar to notion toggles. it should:

  1. display the expanded content just looks like the other content on the page (ie no box border and no color)
  2. make the alt_header inkable like a section title

we can use the following compoent to use it:

<expandable alt_header="add your info here">
add your content here
</expandable>

@mirnawong1 mirnawong1 requested a review from a team as a code owner February 1, 2024 15:38
Copy link

vercel bot commented Feb 1, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docs-getdbt-com ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 15, 2024 4:34pm

@github-actions github-actions bot added content Improvements or additions to content size: medium This change will take up to a week to address Docs team Authored by the Docs team @dbt Labs labels Feb 1, 2024
@mirnawong1
Copy link
Contributor Author

mirnawong1 commented Feb 7, 2024

adding the add'l orange arrow color requested in the asana ticket: Recording Feb

and loom explaining here: https://www.loom.com/share/6ce68b13f2eb49b4b899dfd38ce6c3b3?sid=ccfb843d-0020-424c-9807-a38d6f734fa6

Copy link
Collaborator

@JKarlavige JKarlavige left a comment

Choose a reason for hiding this comment

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

Great work on this @mirnawong1! Just have a few small requested edits and left comments in those sections. Let me know if you have any questions with those!

website/package.json Outdated Show resolved Hide resolved
website/src/components/expandable/index.js Outdated Show resolved Hide resolved
Comment on lines 49 to 54
:local(.body) {
margin-top: 10px;
margin-left: 1em;
padding: 10px;
background-color: transparent; /* Changed from a color to transparent */
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

The content within the toggle aligns slightly more inward than the alt_header text. Can we adjust the styles to align the content with the header, similar to stripe's docs?

Also, just a heads up if we change any styles here, they will affect all elements on the page which have these classes. That means if the FAQs component is used on the same page as this expandable component, there might be conflicting styles.

It would be best to scope these styles specifically to this expandable component. Since the expandableContainer class wraps all other elements. The easiest way to scope the styles to this component is by prefixing the classes in this css with .expandableContainer, for example: .expandableContainer :local(.body). I'd recommend doing this for all css declarations in this file.

image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

thank you so much @JKarlavige ! made that change!
Screenshot 2024-02-09 at 12 57 18

website/static/js/headerLinkCopy.js Outdated Show resolved Hide resolved
@mirnawong1
Copy link
Contributor Author

thanks so much @JKarlavige ! will review this 🙏

@mirnawong1
Copy link
Contributor Author

hey @JKarlavige and @nghi-ly - ready for rereview - thank you for the feedback!

@nghi-ly
Copy link
Contributor

nghi-ly commented Feb 14, 2024

@mirnawong1 : feel free to merge!

@mirnawong1
Copy link
Contributor Author

i'm merging this now @nghi-ly and @JKarlavige ! will look to see if its possible to add the lifecycle pill to this next week

@mirnawong1 mirnawong1 merged commit fd60564 into current Feb 15, 2024
4 checks passed
@mirnawong1 mirnawong1 deleted the mwong-expandable-component branch February 15, 2024 16:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
auto update content Improvements or additions to content Docs team Authored by the Docs team @dbt Labs February-2024 size: medium This change will take up to a week to address
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants