Skip to content

fix: use semantic elements #341

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.

Sign up for GitHub

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

Merged
merged 5 commits into from
Apr 5, 2023
Merged

fix: use semantic elements #341

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ea857f2
fix: use semantic element
mfranzke Mar 27, 2023
4de42e8
style: overwrite standard button styles
mfranzke Mar 27, 2023
54e4c13
Update index.scss
mfranzke Mar 28, 2023
d249c9c
refactor: using a button instead of just an SVG
mfranzke Mar 28, 2023
229a178
More button styles
pomber Apr 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/mdx/src/mini-editor/editor-frame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ function TabsContainer({
)}
{showFrameButtons ? <FrameButtons /> : <div />}
{tabs.map(({ title, active, style }) => (
<div
<button
key={title}
title={title}
data-ch-tab={panel}
Expand Down Expand Up @@ -198,9 +198,10 @@ function TabsContainer({
),
}}
onClick={onTabClick && (() => onTabClick(title))}
type="button"
>
<TabTitle title={title} />
</div>
</button>
))}
<div style={{ flex: 1, minWidth: "0.8em" }} />
{button}
Expand Down
15 changes: 15 additions & 0 deletions packages/mdx/src/mini-editor/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@
color: rgba(255, 255, 255, 0.5);
min-width: 0;
border-bottom: 1px solid;
border-left: 1px solid transparent;
border-top: 1px solid transparent;
}

.ch-editor-tab-active {
Expand Down Expand Up @@ -102,4 +104,17 @@
min-width: 1.5em;
min-height: 1.5em;
margin-right: 0.8em;

&[type="button"] {
background-color: transparent;
border: 1px solid transparent;
color: inherit;
}

svg {
width: 1.5em;
height: 1.5em;
min-width: 1.5em;
min-height: 1.5em;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

I can see that the copy button is also used with other classes like .ch-code-button.
While you can copy these reset styles into the appropriate scss file, another option would be to add the styles directly yo the button on the copy-buton.tsx file. Something like this:

<button
  style={{
    background: "none",
    border: 0,
    color: "inherit",
    fontSize: "inherit",
    padding: 0,
    ...style,
  }}
  ...

}
50 changes: 27 additions & 23 deletions packages/mdx/src/smooth-code/copy-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ export function CopyButton({
const [copied, setCopied] = React.useState(false)

return (
<svg
<button
type="button"
className={className}
style={style}
onClick={() => {
copyToClipboard(content)
Expand All @@ -21,30 +23,32 @@ export function CopyButton({
setCopied(false)
}, 1200)
}}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<title>Copy</title>
<svg
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>Copy</title>

{copied ? (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 13l4 4L19 7"
/>
) : (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.6px"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
/>
)}
</svg>
{copied ? (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 13l4 4L19 7"
/>
) : (
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.6px"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
/>
)}
</svg>
</button>
)
}

Expand Down