-
Notifications
You must be signed in to change notification settings - Fork 834
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
[Docs] Add ThemeLanguages and new Breakpoints page #5227
Merged
cchaos
merged 21 commits into
elastic:master
from
cchaos:theme_languages/setup_and_breakpoints
Oct 13, 2021
Merged
Changes from all commits
Commits
Show all changes
21 commits
Select commit
Hold shift + click to select a range
963e589
Added a ThemeSelector for optionally showing/changing content based o…
f3eccfb
Added the more options to the GuideSectionTypes
4e66fbc
Added some theme helper components like alert banners, values table, …
082a756
[Manual] Copied the outputs json version of Sass for easier consumpti…
2db22a4
Changed color utilites to output hex instead of `.css()` or `rgb`
fcb1b1c
Rearranging sidenav to promote Theme section and adding “Breakpoints”
b6e52f6
Fixes
11cb672
Revert "Added the more options to the GuideSectionTypes"
c386f09
Fixed some routing and notices
db817b5
Revert "Changed color utilites to output hex instead of `.css()` or `…
f4dd077
Cleanup
57f4d4e
Merge remote-tracking branch 'upstream/master' into theme_languages/1…
884cb28
Remove now unnecessary ts-ignore for EuiTour
be6754e
Fix heading levels
9273b2b
Fixed rendering of breakpoint value column
b8e3bf0
Detailing some of the JS breakpoint hooks available
352c9f7
automate docs sass var compilation
thompsongl 1f10e95
Merge branch 'master' into theme_languages/setup_and_breakpoints
cchaos 58a6f14
fix mobileOptions types
thompsongl 6385c6d
Merge branch 'elastic:master' into theme_languages/setup_and_breakpoints
cchaos e136566
cleanup
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,2 @@ | ||
export { ThemeProvider, ThemeContext } from './theme_context'; | ||
export { LanguageSelector } from './language_selector'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
import React, { useContext, useState } from 'react'; | ||
|
||
import { | ||
EuiButtonGroup, | ||
EuiIcon, | ||
EuiLink, | ||
EuiText, | ||
EuiTourStep, | ||
} from '../../../../src/components'; | ||
|
||
import { | ||
ThemeContext, | ||
theme_languages, | ||
THEME_LANGUAGES, | ||
} from './theme_context'; | ||
|
||
const NOTIF_STORAGE_KEY = 'js_vs_sass_notification'; | ||
|
||
export const LanguageSelector = ({ | ||
onChange, | ||
}: { | ||
onChange?: (id: string) => void; | ||
}) => { | ||
const themeContext = useContext(ThemeContext); | ||
const toggleIdSelected = themeContext.themeLanguage; | ||
const onLanguageChange = (optionId: string) => { | ||
themeContext.changeThemeLanguage(optionId as THEME_LANGUAGES['id']); | ||
onChange?.(optionId); | ||
setTourIsOpen(false); | ||
localStorage.setItem(NOTIF_STORAGE_KEY, 'dismissed'); | ||
}; | ||
|
||
const [isTourOpen, setTourIsOpen] = useState( | ||
localStorage.getItem(NOTIF_STORAGE_KEY) !== 'dismissed' | ||
); | ||
|
||
const onTourDismiss = () => { | ||
setTourIsOpen(false); | ||
localStorage.setItem(NOTIF_STORAGE_KEY, 'dismissed'); | ||
}; | ||
|
||
return ( | ||
<EuiTourStep | ||
cchaos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
content={ | ||
<EuiText style={{ maxWidth: 320 }}> | ||
<p>Select your preferred styling language with this toggle button.</p> | ||
</EuiText> | ||
} | ||
isStepOpen={isTourOpen} | ||
onFinish={onTourDismiss} | ||
step={1} | ||
stepsTotal={1} | ||
title={ | ||
<> | ||
<EuiIcon type="bell" size="s" /> Theming update | ||
</> | ||
} | ||
footerAction={<EuiLink onClick={onTourDismiss}>Got it!</EuiLink>} | ||
> | ||
<EuiButtonGroup | ||
buttonSize="m" | ||
color="accent" | ||
legend="Language selector" | ||
options={theme_languages} | ||
idSelected={toggleIdSelected} | ||
onChange={(id) => onLanguageChange(id)} | ||
/> | ||
</EuiTourStep> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ooh thanks for fixing this! The axe-devtools complaint about our sticky top bar always bugged me :) @1Copenut, do you have any extra suggestions for this region/label, or does this look good to you?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like this
role="region"
addition. It frames that control bar nicely. What do you think about spelling out the name like "EUI Documentation theme and apps" ? Users who benefit the most from aria labels may not think of this in terms of a bar, but more of what it allows them to do or learn about EUI.