Css in js/mixins#16
Merged
thompsongl merged 16 commits intothompsongl:css-in-js/mixinsfrom Apr 12, 2022
Merged
Conversation
added 14 commits
April 8, 2022 10:32
- Added one `useEuiShadow` that accepts t-shirt sizes - Added `SHADOW_SIZE` and `_EuiShadowSizes` global types of t-shirt sizes - Simplified docs section to loop through t-shirt sizes - Consolidated `shadowOpacity` into `getShadowColor`
…tyles` component styles and added docs
…uiColorPaletteInnerBorder`
9 tasks
thompsongl
reviewed
Apr 11, 2022
| */ | ||
| export const mixinSlightShadowActiveStyles = mixinSlightShadowHoverStyles; | ||
| export const useSlightShadowActiveStyles = useSlightShadowHoverStyles; | ||
| export const useEuiShadow = ( |
Owner
There was a problem hiding this comment.
Note: Create a non-hook version
thompsongl
reviewed
Apr 11, 2022
thompsongl
reviewed
Apr 11, 2022
thompsongl
reviewed
Apr 11, 2022
| // Just overflow and scrollbars | ||
| export const mixinYScrollStyles = (euiTheme: UseEuiTheme['euiTheme']) => ` | ||
| ${mixinScrollBarStyles(euiTheme)} | ||
| // TODO: How do we use Emotion to output the CSS class utilities instead? |
Owner
There was a problem hiding this comment.
I think we could do it with <Global />. Something like
<Global
styles={css`
.euiYScroll { ${euiYScroll()} }
.euiXScroll { ${euiXScroll()} }
`}
/>
thompsongl
reviewed
Apr 11, 2022
| @media screen and (prefers-reduced-motion: no-preference) { | ||
| ${content} | ||
| // One hook to rule them all | ||
| export const useEuiOverflowScroll = ( |
Owner
|
Merging this now and I'll follow up with making non-hook versions of the 2 new hooks |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
The main portion here is that instead of hooks/functions for each separate shadow, I wanted to create a single hook that took a shadow size (t-shirt style) and optional
color. Also changing naming pattern to removeStyleandmixinand just ensure we use theeuiprefix.I also shifted around a bunch of the scroll/overflow function/mixin docs.
You can read through my commits.