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

Add custom styles for details-based dropdowns #5545

Merged
merged 4 commits into from
Feb 14, 2024
Merged

Conversation

parlough
Copy link
Member

@parlough parlough commented Feb 14, 2024

Adds interaction styles and spacing to the details summary as well as spacing to the contents.

An example of how this effects on a details usage on hover at https://dart-dev--pr5545-feat-details-styling-imoer7pa.web.app/language/isolates#complete-example:

Hovering over the summary of a details dropdown

Contributes to #5382 which will use <details> as a replacement in some cases.

@dart-github-bot
Copy link
Collaborator

dart-github-bot commented Feb 14, 2024

Visit the preview URL for this PR (updated for commit 490db64):

https://dart-dev--pr5545-feat-details-styling-imoer7pa.web.app

@parlough
Copy link
Member Author

parlough commented Feb 14, 2024

Reassigning to Marya since it's relevant to other work she's reviewing. Thanks!

@MaryaBelanger This is to make the details-based dropdowns look a bit less cramped and have a more accessible interaction style. Especially since in the iterables codelab I added one for hint and solution.

Copy link
Contributor

@MaryaBelanger MaryaBelanger left a comment

Choose a reason for hiding this comment

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

Nice, very subtle but makes a huge difference. Thanks!

@parlough parlough merged commit 096e43a into main Feb 14, 2024
8 checks passed
@parlough parlough deleted the feat/details-styling branch February 14, 2024 18:06
atsansone pushed a commit to atsansone/site-www that referenced this pull request Feb 20, 2024
Adds interaction styles and spacing to the details summary as well as
spacing to the contents.

An example of how this effects on a details usage on hover at `/language/isolates#complete-example`:

<img width="984" alt="Hovering over the summary of a details dropdown"
src="https://github.com/dart-lang/site-www/assets/18372958/8264ff11-cbea-4d51-8de2-f38b21b9a4e9">


Contributes to dart-lang#5382 which
will use `<details>` as a replacement in some cases.
atsansone pushed a commit to atsansone/site-www that referenced this pull request Mar 22, 2024
Adds interaction styles and spacing to the details summary as well as
spacing to the contents.

An example of how this effects on a details usage on hover at `/language/isolates#complete-example`:

<img width="984" alt="Hovering over the summary of a details dropdown"
src="https://github.com/dart-lang/site-www/assets/18372958/8264ff11-cbea-4d51-8de2-f38b21b9a4e9">


Contributes to dart-lang#5382 which
will use `<details>` as a replacement in some cases.
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