-
Notifications
You must be signed in to change notification settings - Fork 831
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
[Emotion] Convert EuiBottomBar
to Emotion
#5823
Changes from 13 commits
4e1db78
0671ea5
b2acbfe
9ccab1b
91bfff4
475bc12
9b35152
d294eef
06fcd68
639b5cb
28a74d1
fd7aff7
0c84ad1
518690d
6b5722e
6b08296
99b57a1
73d8e3b
3ab6514
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,57 @@ | ||||||
/* | ||||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||||||
* or more contributor license agreements. Licensed under the Elastic License | ||||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except | ||||||
* in compliance with, at your election, the Elastic License 2.0 or the Server | ||||||
* Side Public License, v 1. | ||||||
*/ | ||||||
|
||||||
import { css, keyframes } from '@emotion/react'; | ||||||
import { euiCanAnimate } from '../../global_styling'; | ||||||
import { UseEuiTheme } from '../../services'; | ||||||
import { shade } from '../../services/color'; | ||||||
import { euiShadowFlat } from '../../themes/amsterdam/global_styling/mixins'; | ||||||
|
||||||
const euiBottomBarAppear = keyframes` | ||||||
0% { | ||||||
transform: translateY(100%); | ||||||
opacity: 0; | ||||||
} | ||||||
|
||||||
100% { | ||||||
transform: translateY(0%); | ||||||
opacity: 1; | ||||||
} | ||||||
`; | ||||||
|
||||||
export const euiBottomBarStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ | ||||||
// Base | ||||||
//Text color needs to be reapplied to properly scope the forced `colorMode` | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
euiBottomBar: css` | ||||||
${euiShadowFlat(euiTheme, undefined, colorMode)}; | ||||||
background: ${shade(euiTheme.colors.lightestShade, 0.5)}; | ||||||
color: ${euiTheme.colors.text}; | ||||||
breehall marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
${euiCanAnimate} { | ||||||
animation: ${euiBottomBarAppear} ${euiTheme.animation.slow} | ||||||
${euiTheme.animation.resistance}; | ||||||
} | ||||||
`, | ||||||
static: css``, | ||||||
cchaos marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
fixed: css` | ||||||
z-index: ${Number(euiTheme.levels.header) - 2}; | ||||||
`, | ||||||
sticky: css` | ||||||
z-index: ${Number(euiTheme.levels.header) - 2}; | ||||||
`, | ||||||
// Padding | ||||||
s: css` | ||||||
padding: ${euiTheme.size.s}; | ||||||
`, | ||||||
m: css` | ||||||
padding: ${euiTheme.size.base}; | ||||||
`, | ||||||
l: css` | ||||||
padding: ${euiTheme.size.l}; | ||||||
`, | ||||||
none: '', | ||||||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -14,12 +14,14 @@ import React, { | |
useEffect, | ||
useState, | ||
} from 'react'; | ||
import { useCombinedRefs } from '../../services'; | ||
import { useCombinedRefs, useEuiTheme } from '../../services'; | ||
import { EuiScreenReaderOnly } from '../accessibility'; | ||
import { CommonProps, ExclusiveUnion } from '../common'; | ||
import { EuiI18n } from '../i18n'; | ||
import { useResizeObserver } from '../observer/resize_observer'; | ||
import { EuiPortal } from '../portal'; | ||
import { euiBottomBarStyles } from './bottom_bar.styles'; | ||
import { EuiThemeProvider } from '../../services/theme/provider'; | ||
|
||
type BottomBarPaddingSize = 'none' | 's' | 'm' | 'l'; | ||
|
||
|
@@ -96,7 +98,7 @@ export type EuiBottomBarProps = CommonProps & | |
left?: CSSProperties['left']; | ||
}; | ||
|
||
export const EuiBottomBar = forwardRef< | ||
const _EuiBottomBar = forwardRef< | ||
HTMLElement, // type of element or component the ref will be passed to | ||
EuiBottomBarProps // what properties apart from `ref` the component accepts | ||
>( | ||
|
@@ -119,6 +121,9 @@ export const EuiBottomBar = forwardRef< | |
}, | ||
ref | ||
) => { | ||
const euiTheme = useEuiTheme(); | ||
const styles = euiBottomBarStyles(euiTheme); | ||
|
||
// Force some props if `fixed` position, but not if the user has supplied these | ||
affordForDisplacement = | ||
position !== 'fixed' ? false : affordForDisplacement; | ||
|
@@ -156,6 +161,13 @@ export const EuiBottomBar = forwardRef< | |
className | ||
); | ||
|
||
const cssStyles = [ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I added |
||
styles.euiBottomBar, | ||
styles[position], | ||
styles[paddingSize], | ||
{ position }, | ||
]; | ||
|
||
const newStyle = { | ||
left, | ||
right, | ||
|
@@ -173,11 +185,13 @@ export const EuiBottomBar = forwardRef< | |
{(screenReaderHeading: string) => ( | ||
// Though it would be better to use aria-labelledby than aria-label and not repeat the same string twice | ||
// A bug in voiceover won't list some landmarks in the rotor without an aria-label | ||
|
||
<section | ||
aria-label={ | ||
landmarkHeading ? landmarkHeading : screenReaderHeading | ||
} | ||
className={classes} | ||
css={cssStyles} | ||
ref={setRef} | ||
style={newStyle} | ||
{...rest} | ||
|
@@ -214,4 +228,16 @@ export const EuiBottomBar = forwardRef< | |
} | ||
); | ||
|
||
export const EuiBottomBar = forwardRef<HTMLElement, EuiBottomBarProps>( | ||
(props, ref) => { | ||
const BottomBar = _EuiBottomBar; | ||
return ( | ||
<EuiThemeProvider colorMode={'dark'}> | ||
<BottomBar ref={ref} {...props} /> | ||
</EuiThemeProvider> | ||
); | ||
} | ||
); | ||
Comment on lines
+231
to
+240
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you document this as a pattern for color-mode specific components in the Emotion styling wiki??? |
||
|
||
EuiBottomBar.displayName = 'EuiBottomBar'; | ||
_EuiBottomBar.displayName = 'EuiBottomBar'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
**CSS-in-JS conversions** | ||
|
||
- Converted `EuiBottomBar` to Emotion |
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.
Can these be combined?