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

chore: update design/functionality of copying highlighted code snippets #7570

Merged
merged 11 commits into from May 14, 2024

Conversation

hbuchel
Copy link
Contributor

@hbuchel hbuchel commented May 10, 2024

Description of changes:

Makes some adjustments to the MDXCode highlight code copy functionality, namely:

  • Removes the button element surrounding the highlighted code as it causes normal copy/paste functionality to break
  • Adds new button element above the highlighted code, updates its accessible name "Copy highlighted code example" and supplies an aria-describedby to associate the highlighted code to the copy button
  • Wraps the highlighted code in the same CopyToClipboard functionality so mouse users can still click on the code to copy
  • Adds some additional focus/hover styling to make the whole highlighted block/button look connected when hovering or focusing on the highlighted code.

Preview: https://updatemdxcopycodefunction.d2bfwhpcsj9awv.amplifyapp.com/react/build-a-backend/add-aws-services/deletion-backup-resources/#enabling-backups-for-dynamodb-tables

Before

After

Related GitHub issue #, if available:

Instructions

If this PR should not be merged upon approval for any reason, please submit as a DRAFT

Which product(s) are affected by this PR (if applicable)?

  • amplify-cli
  • amplify-ui
  • amplify-studio
  • amplify-hosting
  • amplify-libraries

Which platform(s) are affected by this PR (if applicable)?

  • JS
  • Swift
  • Android
  • Flutter
  • React Native

Please add the product(s)/platform(s) affected to the PR title

Checks

  • Does this PR conform to the styleguide?

  • Does this PR include filetypes other than markdown or images? Please add or update unit tests accordingly.

  • Are any files being deleted with this PR? If so, have the needed redirects been created?

  • Are all links in MDX files using the MDX link syntax rather than HTML link syntax?

    ref: MDX: [link](https://docs.amplify.aws/)
    HTML: <a href="https://docs.amplify.aws/">link</a>

When this PR is ready to merge, please check the box below

  • Ready to merge

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

@hbuchel hbuchel requested a review from renebrandel May 10, 2024 19:49
@hbuchel hbuchel marked this pull request as ready for review May 13, 2024 16:40
@hbuchel hbuchel requested a review from a team as a code owner May 13, 2024 16:40
that is preceding the .highlight-code block so that interaction between
them looks "connected", i.e. the hover style on one triggers the
hover style on the other */
.highlight-copy-button:has(+ .highlight-code:hover) {
Copy link
Member

Choose a reason for hiding this comment

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

nice!!

@hbuchel hbuchel merged commit 4d708ed into main May 14, 2024
10 checks passed
@hbuchel hbuchel deleted the UpdateMDXCopyCodeFunction branch May 14, 2024 16:26
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.

None yet

3 participants