From 8a04b2bf7f5a7f7cca1b7b5632cfc9e68723c731 Mon Sep 17 00:00:00 2001 From: Heather Date: Fri, 10 May 2024 12:09:24 -0400 Subject: [PATCH 01/11] chore: design updates to copy code functionality --- .../MDXHighlightedCopyCodeButton.tsx | 36 +++++--- src/styles/code.scss | 87 ++++++++++--------- 2 files changed, 70 insertions(+), 53 deletions(-) diff --git a/src/components/MDXComponents/MDXHighlightedCopyCodeButton.tsx b/src/components/MDXComponents/MDXHighlightedCopyCodeButton.tsx index 7fdf4604f99..fa2a10504f9 100644 --- a/src/components/MDXComponents/MDXHighlightedCopyCodeButton.tsx +++ b/src/components/MDXComponents/MDXHighlightedCopyCodeButton.tsx @@ -1,6 +1,6 @@ -import { useState } from 'react'; +import { useState, useId } from 'react'; import { CopyToClipboard } from 'react-copy-to-clipboard'; -import { VisuallyHidden } from '@aws-amplify/ui-react'; +import { Button, VisuallyHidden } from '@aws-amplify/ui-react'; import { trackCopyClicks } from '@/utils/track'; import { prepareCopyText } from './utils/copy-code'; @@ -21,6 +21,7 @@ export const MDXHighlightedCopyCodeButton = ({ const [copied, setCopied] = useState(false); const copyText = prepareCopyText(codeString); + const highlightCodeId = useId(); const copy = () => { trackCopyClicks(copyText); @@ -30,17 +31,26 @@ export const MDXHighlightedCopyCodeButton = ({ }, 2000); }; return ( - - + +
{children} - - {copied ? 'Copied' : 'Copy'} - - - {` `} - {title} highlighted code example - - - +
+ ); }; diff --git a/src/styles/code.scss b/src/styles/code.scss index 53d05364613..f6640f51ab3 100644 --- a/src/styles/code.scss +++ b/src/styles/code.scss @@ -37,7 +37,7 @@ code:not([class]) { } .pre-wrapper { - padding: 0 var(--amplify-space-large) 0 var(--amplify-space-xs); + padding: 0 var(--amplify-space-xs); } .pre-header { @@ -70,13 +70,16 @@ code:not([class]) { -webkit-text-size-adjust: 100%; &:focus-visible { - outline: none; - box-shadow: 0 0 0 2px var(--amplify-colors-white) inset; + outline: 2px solid #fff; + outline-offset: 2px; + // box-shadow: 0 0 0 2px var(--amplify-colors-white) inset; } } .pre-code { flex: 1; + display: flex; + flex-direction: column; } .token-line { @@ -92,6 +95,12 @@ code:not([class]) { } .line-highlight { + &:first-child { + padding-top: var(--amplify-space-xxs); + } + &:last-child { + padding-bottom: var(--amplify-space-xxs); + } &:before { content: ''; position: absolute; @@ -138,46 +147,44 @@ code:not([class]) { width: 1.8rem; } -.highlight-copy-block { - all: unset; - width: 100%; - cursor: pointer; +.highlight-copy-button { + background-color: var(--amplify-colors-neutral-90); + margin-top: var(--amplify-space-xxs); + border-color: transparent; + color: #fff; + align-self: flex-start; + border-end-end-radius: 0; + border-end-start-radius: 0; + margin-inline-start: 2.8rem; position: relative; -} - -.highlight-copy-block-hint { - position: absolute; - top: 0; - right: 1.8rem; - color: white; -} - -.highlight-copy-block .highlight-c4py-block-hint { - display: none; -} - -.highlight-copy-block:focus .highlight-copy-block-hint { - display: block; -} - -.highlight-copy-block:hover .highlight-copy-block-hint { - display: block; -} - -.highlight-copy-block:focus .line-highlight::before { - background-color: var(--amplify-colors-primary-80); - - @include darkMode { - background-color: var(--amplify-colors-neutral-40); + user-select: none; + &:focus { + box-shadow: none; + } + &:focus-visible { + outline: 2px solid #fff; + &:after { + content: ''; + position: absolute; + height: 2px; + left: -1px; + right: -1px; + bottom: -1px; + background-color: var(--amplify-colors-neutral-90); + z-index: 2; + } + & + .highlight-code { + outline: 2px solid #fff; + .line-highlight:after { + background-color: #fff; + } + } } } -.highlight-copy-block:hover .line-highlight::before { - background-color: var(--amplify-colors-primary-90); - - @include darkMode { - background-color: var(--amplify-colors-primary-10); - } +.highlight-code { + position: relative; + margin-bottom: var(--amplify-space-xxs); } .code-copy { @@ -202,4 +209,4 @@ code:not([class]) { --code-copy-focus-background-color: var(--amplify-colors-neutral-20); --code-copy-focus-box-shadow: var(--amplify-colors-neutral-100); } -} \ No newline at end of file +} From 0171c393dd66dea993a11d92f653037394f0b3b7 Mon Sep 17 00:00:00 2001 From: Heather Date: Fri, 10 May 2024 12:18:04 -0400 Subject: [PATCH 02/11] add hover --- .../MDXComponents/MDXHighlightedCopyCodeButton.tsx | 8 +++++--- src/styles/code.scss | 7 ++++++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/MDXComponents/MDXHighlightedCopyCodeButton.tsx b/src/components/MDXComponents/MDXHighlightedCopyCodeButton.tsx index fa2a10504f9..295d6a7d83b 100644 --- a/src/components/MDXComponents/MDXHighlightedCopyCodeButton.tsx +++ b/src/components/MDXComponents/MDXHighlightedCopyCodeButton.tsx @@ -48,9 +48,11 @@ export const MDXHighlightedCopyCodeButton = ({ -
- {children} -
+ +
+ {children} +
+ ); }; diff --git a/src/styles/code.scss b/src/styles/code.scss index f6640f51ab3..7746807fcf5 100644 --- a/src/styles/code.scss +++ b/src/styles/code.scss @@ -72,7 +72,6 @@ code:not([class]) { &:focus-visible { outline: 2px solid #fff; outline-offset: 2px; - // box-shadow: 0 0 0 2px var(--amplify-colors-white) inset; } } @@ -185,6 +184,12 @@ code:not([class]) { .highlight-code { position: relative; margin-bottom: var(--amplify-space-xxs); + &:hover { + cursor: pointer; + .line-highlight:before { + background-color: hsla(255, 100%, 100%, 0.1); + } + } } .code-copy { From f5904e08e811fd39f7594f79a6e534523bab475e Mon Sep 17 00:00:00 2001 From: Heather Date: Fri, 10 May 2024 12:26:51 -0400 Subject: [PATCH 03/11] add hover sibling style --- src/styles/code.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/styles/code.scss b/src/styles/code.scss index 7746807fcf5..f178fc63dce 100644 --- a/src/styles/code.scss +++ b/src/styles/code.scss @@ -181,9 +181,14 @@ code:not([class]) { } } +.highlight-copy-button:has(+ .highlight-code:hover) { + background-color: hsla(255, 100%, 100%, 0.1); +} + .highlight-code { position: relative; margin-bottom: var(--amplify-space-xxs); + transition: all var(--amplify-components-button-transition-duration); &:hover { cursor: pointer; .line-highlight:before { From da1a8469992040ef822817ff9fa7282cdcece43f Mon Sep 17 00:00:00 2001 From: Heather Date: Fri, 10 May 2024 13:00:09 -0400 Subject: [PATCH 04/11] updates to css highlight colors --- src/styles/code.scss | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/src/styles/code.scss b/src/styles/code.scss index f178fc63dce..5e9da3b7b98 100644 --- a/src/styles/code.scss +++ b/src/styles/code.scss @@ -162,12 +162,13 @@ code:not([class]) { } &:focus-visible { outline: 2px solid #fff; + outline-offset: -2px; &:after { content: ''; position: absolute; height: 2px; - left: -1px; - right: -1px; + left: 1px; + right: 1px; bottom: -1px; background-color: var(--amplify-colors-neutral-90); z-index: 2; @@ -182,17 +183,27 @@ code:not([class]) { } .highlight-copy-button:has(+ .highlight-code:hover) { - background-color: hsla(255, 100%, 100%, 0.1); + background-color: hsl(211, 22%, 19%); + &:focus-visible { + &:after { + height: 4px; + bottom: -3px; + // left: -1px; + // right: -1px; + background-color: hsl(211, 22%, 19%); + } + } } .highlight-code { position: relative; margin-bottom: var(--amplify-space-xxs); - transition: all var(--amplify-components-button-transition-duration); + transition: background-color + var(--amplify-components-button-transition-duration) ease; &:hover { cursor: pointer; .line-highlight:before { - background-color: hsla(255, 100%, 100%, 0.1); + background-color: hsl(211, 22%, 19%); } } } From 20dd267ac0cddd1b65f71e199db98e407d13eeec Mon Sep 17 00:00:00 2001 From: Heather Date: Fri, 10 May 2024 13:12:19 -0400 Subject: [PATCH 05/11] darkmode, cleanup --- src/styles/code.scss | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/styles/code.scss b/src/styles/code.scss index 5e9da3b7b98..eaf872112b7 100644 --- a/src/styles/code.scss +++ b/src/styles/code.scss @@ -79,6 +79,7 @@ code:not([class]) { flex: 1; display: flex; flex-direction: column; + --highlight-code-hover-background-color: hsl(211, 22%, 19%); } .token-line { @@ -180,17 +181,23 @@ code:not([class]) { } } } + @include darkMode { + background-color: var(--amplify-colors-neutral-20); + &:focus-visible { + &:after { + background-color: var(--amplify-colors-neutral-20); + } + } + } } .highlight-copy-button:has(+ .highlight-code:hover) { - background-color: hsl(211, 22%, 19%); + background-color: var(--highlight-code-hover-background-color); &:focus-visible { &:after { height: 4px; bottom: -3px; - // left: -1px; - // right: -1px; - background-color: hsl(211, 22%, 19%); + background-color: var(--highlight-code-hover-background-color); } } } @@ -203,7 +210,7 @@ code:not([class]) { &:hover { cursor: pointer; .line-highlight:before { - background-color: hsl(211, 22%, 19%); + background-color: var(--highlight-code-hover-background-color); } } } From e531b4957eeb5471bfa571b919c64e8a3b37e57a Mon Sep 17 00:00:00 2001 From: Heather Date: Fri, 10 May 2024 13:31:00 -0400 Subject: [PATCH 06/11] update file name --- ...ightedCopyCodeButton.tsx => MDXHighlightedCode.tsx} | 10 ++++------ src/components/MDXComponents/TokenList.tsx | 6 +++--- 2 files changed, 7 insertions(+), 9 deletions(-) rename src/components/MDXComponents/{MDXHighlightedCopyCodeButton.tsx => MDXHighlightedCode.tsx} (87%) diff --git a/src/components/MDXComponents/MDXHighlightedCopyCodeButton.tsx b/src/components/MDXComponents/MDXHighlightedCode.tsx similarity index 87% rename from src/components/MDXComponents/MDXHighlightedCopyCodeButton.tsx rename to src/components/MDXComponents/MDXHighlightedCode.tsx index 295d6a7d83b..282dce77815 100644 --- a/src/components/MDXComponents/MDXHighlightedCopyCodeButton.tsx +++ b/src/components/MDXComponents/MDXHighlightedCode.tsx @@ -4,20 +4,18 @@ import { Button, VisuallyHidden } from '@aws-amplify/ui-react'; import { trackCopyClicks } from '@/utils/track'; import { prepareCopyText } from './utils/copy-code'; -interface MDXCopyCodeButtonProps { +interface MDXHighlightedCodeProps { codeId: string; codeString: string; testId?: string; - title?: string; children?: React.ReactNode; } -export const MDXHighlightedCopyCodeButton = ({ +export const MDXHighlightedCode = ({ codeString, - title, codeId, children -}: MDXCopyCodeButtonProps) => { +}: MDXHighlightedCodeProps) => { const [copied, setCopied] = useState(false); const copyText = prepareCopyText(codeString); @@ -44,7 +42,7 @@ export const MDXHighlightedCopyCodeButton = ({ {` `} - {title} highlighted code example + highlighted code example diff --git a/src/components/MDXComponents/TokenList.tsx b/src/components/MDXComponents/TokenList.tsx index 9078453bc20..c16a71dd924 100644 --- a/src/components/MDXComponents/TokenList.tsx +++ b/src/components/MDXComponents/TokenList.tsx @@ -1,6 +1,6 @@ import type { Token } from 'prism-react-renderer'; import type { TokenListProps } from './types'; -import { MDXHighlightedCopyCodeButton } from './MDXHighlightedCopyCodeButton'; +import { MDXHighlightedCode } from './MDXHighlightedCode'; import classNames from 'classnames'; type ProcessedToken = { @@ -159,7 +159,7 @@ export const TokenList = ({ .join('\n'); return ( - + ); } }); From 0beb304f6d26203fd39b1862079bf082f9b57187 Mon Sep 17 00:00:00 2001 From: Heather Date: Fri, 10 May 2024 13:46:07 -0400 Subject: [PATCH 07/11] use space token --- src/styles/code.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/code.scss b/src/styles/code.scss index eaf872112b7..9f2d1d1cbe4 100644 --- a/src/styles/code.scss +++ b/src/styles/code.scss @@ -155,7 +155,7 @@ code:not([class]) { align-self: flex-start; border-end-end-radius: 0; border-end-start-radius: 0; - margin-inline-start: 2.8rem; + margin-inline-start: var(--amplify-space-xxl); position: relative; user-select: none; &:focus { From f39bf5ff88cebe36f0797aca7b7b809a67b4654f Mon Sep 17 00:00:00 2001 From: Heather Date: Fri, 10 May 2024 14:02:18 -0400 Subject: [PATCH 08/11] fix css transition --- src/styles/code.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/styles/code.scss b/src/styles/code.scss index 9f2d1d1cbe4..b365462fc08 100644 --- a/src/styles/code.scss +++ b/src/styles/code.scss @@ -102,6 +102,8 @@ code:not([class]) { padding-bottom: var(--amplify-space-xxs); } &:before { + transition: background-color + var(--amplify-components-button-transition-duration) ease; content: ''; position: absolute; left: 0; @@ -181,6 +183,14 @@ code:not([class]) { } } } + &:hover { + background-color: var(--highlight-code-hover-background-color); + & + .highlight-code { + .line-highlight:before { + background-color: var(--highlight-code-hover-background-color); + } + } + } @include darkMode { background-color: var(--amplify-colors-neutral-20); &:focus-visible { @@ -205,8 +215,6 @@ code:not([class]) { .highlight-code { position: relative; margin-bottom: var(--amplify-space-xxs); - transition: background-color - var(--amplify-components-button-transition-duration) ease; &:hover { cursor: pointer; .line-highlight:before { From bb83f66346b7370bcc1d1580038c7ca1362c7b0f Mon Sep 17 00:00:00 2001 From: Heather Date: Fri, 10 May 2024 15:36:28 -0400 Subject: [PATCH 09/11] cleanup --- src/components/MDXComponents/MDXHighlightedCode.tsx | 3 --- src/components/MDXComponents/TokenList.tsx | 1 - src/styles/code.scss | 8 ++++++++ 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/MDXComponents/MDXHighlightedCode.tsx b/src/components/MDXComponents/MDXHighlightedCode.tsx index 282dce77815..c285f6fee22 100644 --- a/src/components/MDXComponents/MDXHighlightedCode.tsx +++ b/src/components/MDXComponents/MDXHighlightedCode.tsx @@ -5,7 +5,6 @@ import { trackCopyClicks } from '@/utils/track'; import { prepareCopyText } from './utils/copy-code'; interface MDXHighlightedCodeProps { - codeId: string; codeString: string; testId?: string; children?: React.ReactNode; @@ -13,7 +12,6 @@ interface MDXHighlightedCodeProps { export const MDXHighlightedCode = ({ codeString, - codeId, children }: MDXHighlightedCodeProps) => { const [copied, setCopied] = useState(false); @@ -35,7 +33,6 @@ export const MDXHighlightedCode = ({ aria-describedby={highlightCodeId} size="small" className="highlight-copy-button" - key={codeId} > {copied ? 'Copied' : 'Copy'} diff --git a/src/components/MDXComponents/TokenList.tsx b/src/components/MDXComponents/TokenList.tsx index c16a71dd924..9b3962ff1e5 100644 --- a/src/components/MDXComponents/TokenList.tsx +++ b/src/components/MDXComponents/TokenList.tsx @@ -160,7 +160,6 @@ export const TokenList = ({ return ( diff --git a/src/styles/code.scss b/src/styles/code.scss index b365462fc08..7e76e82566a 100644 --- a/src/styles/code.scss +++ b/src/styles/code.scss @@ -185,6 +185,9 @@ code:not([class]) { } &:hover { background-color: var(--highlight-code-hover-background-color); + &:after { + background-color: var(--highlight-code-hover-background-color); + } & + .highlight-code { .line-highlight:before { background-color: var(--highlight-code-hover-background-color); @@ -210,6 +213,11 @@ code:not([class]) { background-color: var(--highlight-code-hover-background-color); } } + &:hover { + &:after { + background-color: var(--highlight-code-hover-background-color); + } + } } .highlight-code { From a70dbd35247a6c9ccf1b4573cf17ce38d9bf52f5 Mon Sep 17 00:00:00 2001 From: Heather Date: Fri, 10 May 2024 15:49:02 -0400 Subject: [PATCH 10/11] Fix some dark mode interaction colors --- src/styles/code.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/styles/code.scss b/src/styles/code.scss index 7e76e82566a..f75c908a845 100644 --- a/src/styles/code.scss +++ b/src/styles/code.scss @@ -201,6 +201,17 @@ code:not([class]) { background-color: var(--amplify-colors-neutral-20); } } + &:hover { + background-color: var(--highlight-code-hover-background-color); + &:after { + background-color: var(--highlight-code-hover-background-color); + } + & + .highlight-code { + .line-highlight:before { + background-color: var(--highlight-code-hover-background-color); + } + } + } } } From c229fd8f99b5ea5d710deade32662e6ae586cbcd Mon Sep 17 00:00:00 2001 From: Heather Date: Mon, 13 May 2024 12:35:59 -0400 Subject: [PATCH 11/11] add icon --- src/components/Icons/IconClipboard.tsx | 21 +++++++++++++++++++ src/components/Icons/index.ts | 1 + .../MDXComponents/MDXCopyCodeButton.tsx | 4 ++-- .../MDXComponents/MDXHighlightedCode.tsx | 8 +++---- src/styles/code.scss | 6 ++++++ 5 files changed, 34 insertions(+), 6 deletions(-) create mode 100644 src/components/Icons/IconClipboard.tsx diff --git a/src/components/Icons/IconClipboard.tsx b/src/components/Icons/IconClipboard.tsx new file mode 100644 index 00000000000..a08a8ef7faf --- /dev/null +++ b/src/components/Icons/IconClipboard.tsx @@ -0,0 +1,21 @@ +import { Icon } from '@aws-amplify/ui-react'; + +export const IconClipboard = ({ ...rest }) => { + return ( + + ); +}; diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts index a492f2c55c0..d28d62f5d8b 100644 --- a/src/components/Icons/index.ts +++ b/src/components/Icons/index.ts @@ -5,6 +5,7 @@ export { IconAWS } from './IconAWS'; export { IconCheck } from './IconCheck'; export { IconCheckCircle } from './IconCheckCircle'; export { IconChevron } from './IconChevron'; +export { IconClipboard } from './IconClipboard'; export { IconDark } from './IconDark'; export { IconDiscord } from './IconDiscord'; export { IconDoubleChevron } from './IconDoubleChevron'; diff --git a/src/components/MDXComponents/MDXCopyCodeButton.tsx b/src/components/MDXComponents/MDXCopyCodeButton.tsx index 6c1e2429832..ad76cf72a58 100644 --- a/src/components/MDXComponents/MDXCopyCodeButton.tsx +++ b/src/components/MDXComponents/MDXCopyCodeButton.tsx @@ -3,7 +3,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard'; import { Button, VisuallyHidden } from '@aws-amplify/ui-react'; import { trackCopyClicks } from '@/utils/track'; import { prepareCopyText } from './utils/copy-code'; - +import { IconClipboard } from '@/components/Icons'; interface MDXCopyCodeButtonProps { codeId: string; codeString: string; @@ -38,7 +38,7 @@ export const MDXCopyCodeButton = ({ testId={testId} aria-describedby={title ? undefined : codeId} > - {copied ? 'Copied!' : 'Copy'} + {copied ? 'Copied!' : 'Copy'} {` `} {title} code example diff --git a/src/components/MDXComponents/MDXHighlightedCode.tsx b/src/components/MDXComponents/MDXHighlightedCode.tsx index c285f6fee22..7de2c4217be 100644 --- a/src/components/MDXComponents/MDXHighlightedCode.tsx +++ b/src/components/MDXComponents/MDXHighlightedCode.tsx @@ -3,7 +3,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard'; import { Button, VisuallyHidden } from '@aws-amplify/ui-react'; import { trackCopyClicks } from '@/utils/track'; import { prepareCopyText } from './utils/copy-code'; - +import { IconClipboard } from '@/components/Icons'; interface MDXHighlightedCodeProps { codeString: string; testId?: string; @@ -34,9 +34,9 @@ export const MDXHighlightedCode = ({ size="small" className="highlight-copy-button" > - - {copied ? 'Copied' : 'Copy'} - + + {copied ? 'Copied' : 'Copy'} + {` `} highlighted code example diff --git a/src/styles/code.scss b/src/styles/code.scss index f75c908a845..b5699390d3e 100644 --- a/src/styles/code.scss +++ b/src/styles/code.scss @@ -160,6 +160,7 @@ code:not([class]) { margin-inline-start: var(--amplify-space-xxl); position: relative; user-select: none; + gap: var(--amplify-space-xxs); &:focus { box-shadow: none; } @@ -215,6 +216,10 @@ code:not([class]) { } } +/* This :has selector allows us to style the .highlight-copy-button +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) { background-color: var(--highlight-code-hover-background-color); &:focus-visible { @@ -250,6 +255,7 @@ code:not([class]) { padding-block: var(--amplify-space-xxxs); color: var(--amplify-colors-white); border-radius: var(--amplify-radii-small); + gap: var(--amplify-space-xxs); &:hover { color: var(--amplify-colors-white); background-color: var(--code-copy-hover-background-color);