3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-07 05:12:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: use SVG for closable button in announcement bar (#5453)

Browse source
This commit is contained in:
Alexey Pyltsyn 2021-08-31 12:03:14 +03:00 • committed by GitHub
parent 3a312d964d
commit 914e204dcb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx
View file

@ -33,9 +33,7 @@ function AnnouncementBar(): JSX.Element | null {
role="banner"> role="banner">
{isCloseable && <div className={styles.announcementBarPlaceholder} />} {isCloseable && <div className={styles.announcementBarPlaceholder} />}
<div <div
className={clsx(styles.announcementBarContent, { className={styles.announcementBarContent}
[styles.announcementBarCloseable]: isCloseable,
})}
// Developer provided the HTML, so assume it's safe. // Developer provided the HTML, so assume it's safe.
// eslint-disable-next-line react/no-danger // eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{__html: content}} dangerouslySetInnerHTML={{__html: content}}
@ -50,7 +48,9 @@ function AnnouncementBar(): JSX.Element | null {
message: 'Close', message: 'Close',
description: 'The ARIA label for close button of announcement bar', description: 'The ARIA label for close button of announcement bar',
})}> })}>
<span aria-hidden="true">×</span> <svg width="14" height="14" viewBox="0 0 24 24">
<path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z" />
</svg>
</button> </button>
) : null} ) : null}
</div> </div>

4
packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css
View file

@ -28,11 +28,9 @@ html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
.announcementBarClose { .announcementBarClose {
flex: 0 0 30px; flex: 0 0 30px;
}
.announcementBarClose {
align-self: stretch; align-self: stretch;
padding: 0; padding: 0;
line-height: 0;
} }
.announcementBarContent { .announcementBarContent {