Skip to content

Commit 509a1d7

Browse files
treskotresko
committed
feat(zIndex): add zIndex styles
affects: @datepicker-react/styled ISSUES CLOSED: #32
1 parent 15ac2b6 commit 509a1d7

5 files changed

Lines changed: 46 additions & 21 deletions

File tree

‎docs/THEME_PROPS.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ inputCalendarIconWidth?: string
111111
inputCalendarIconHeight?: string
112112
inputCalendarIconColor?: string
113113

114+
datepickerZIndex?: ResponsiveValue<ZIndexProperty>
114115
datepickerBackground?: ResponsiveValue<BackgroundProperty<TLengthStyledSystem>>
115116
datepickerBoxShadow?: ResponsiveValue<BoxShadowProperty>
116117
datepickerPadding?: ResponsiveValue<PaddingProperty<TLengthStyledSystem>>
@@ -151,6 +152,7 @@ datepickerNextMonthButtonBottom?: ResponsiveValue<BottomProperty<TLengthStyledSy
151152
datepickerMonthsGridHeight?: ResponsiveValue<HeightProperty<TLengthStyledSystem>>
152153
datepickerMonthsGridOverflow?: ResponsiveValue<OverflowProperty>
153154

155+
dateRangeZIndex?: ResponsiveValue<ZIndexProperty>
154156
dateRangeBackground?: ResponsiveValue<BackgroundProperty<TLengthStyledSystem>>
155157
dateRangeGridTemplateColumns?: ResponsiveValue<GridTemplateColumnsProperty<TLengthStyledSystem>>
156158
dateRangeGridTemplateRows?: ResponsiveValue<GridTemplateRowsProperty<TLengthStyledSystem>>
@@ -167,4 +169,12 @@ dateRangeDatepickerWrapperBottom?: ResponsiveValue<BottomProperty<TLengthStyledS
167169
dateRangeDatepickerWrapperPosition?: ResponsiveValue<PositionProperty>
168170
dateRangeStartDateInputPadding?: ResponsiveValue<PaddingProperty<TLengthStyledSystem>>
169171
dateRangeEndDateInputPadding?: ResponsiveValue<PaddingProperty<TLengthStyledSystem>>
172+
173+
dateSingleZIndex?: ResponsiveValue<ZIndexProperty>
174+
dateSingleDatepickerWrapperTop?: ResponsiveValue<TopProperty<TLengthStyledSystem>>
175+
dateSingleDatepickerWrapperRight?: ResponsiveValue<RightProperty<TLengthStyledSystem>>
176+
dateSingleDatepickerWrapperLeft?: ResponsiveValue<LeftProperty<TLengthStyledSystem>>
177+
dateSingleDatepickerWrapperBottom?: ResponsiveValue<BottomProperty<TLengthStyledSystem>>
178+
dateSingleDatepickerWrapperPosition?: ResponsiveValue<PositionProperty>
179+
dateSingleInputPadding?: ResponsiveValue<PaddingProperty<TLengthStyledSystem>>
170180
```

‎packages/styled/src/@types/theme.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,7 @@ export interface InputTheme extends CommonTheme {
145145
}
146146

147147
export interface DatepickerTheme extends CommonTheme {
148+
datepickerZIndex?: ResponsiveValue<ZIndexProperty>
148149
datepickerBackground?: ResponsiveValue<BackgroundProperty<TLengthStyledSystem>>
149150
datepickerBoxShadow?: ResponsiveValue<BoxShadowProperty>
150151
datepickerPadding?: ResponsiveValue<PaddingProperty<TLengthStyledSystem>>
@@ -187,6 +188,7 @@ export interface DatepickerTheme extends CommonTheme {
187188
}
188189

189190
export interface DateRangeInputTheme extends CommonTheme {
191+
dateRangeZIndex?: ResponsiveValue<ZIndexProperty>
190192
dateRangeBackground?: ResponsiveValue<BackgroundProperty<TLengthStyledSystem>>
191193
dateRangeGridTemplateColumns?: ResponsiveValue<GridTemplateColumnsProperty<TLengthStyledSystem>>
192194
dateRangeGridTemplateRows?: ResponsiveValue<GridTemplateRowsProperty<TLengthStyledSystem>>
@@ -206,6 +208,7 @@ export interface DateRangeInputTheme extends CommonTheme {
206208
}
207209

208210
export interface DateSingleInputTheme extends CommonTheme {
211+
dateSingleZIndex?: ResponsiveValue<ZIndexProperty>
209212
dateSingleDatepickerWrapperTop?: ResponsiveValue<TopProperty<TLengthStyledSystem>>
210213
dateSingleDatepickerWrapperRight?: ResponsiveValue<RightProperty<TLengthStyledSystem>>
211214
dateSingleDatepickerWrapperLeft?: ResponsiveValue<LeftProperty<TLengthStyledSystem>>

‎packages/styled/src/components/DateRangeInput/DateRangeInput.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
BorderRadiusProps,
1212
color,
1313
ColorProps,
14+
zIndex,
15+
ZIndexProps,
1416
compose,
1517
} from 'styled-system'
1618
import {
@@ -37,7 +39,9 @@ import globalStyles from '../../globalStyles'
3739
interface RtlProps {
3840
rtl: boolean
3941
}
40-
const Wrapper = styled(Box)<RtlProps>`
42+
interface WrapperProps extends RtlProps, ZIndexProps {}
43+
const Wrapper = styled(Box)<WrapperProps>`
44+
${zIndex}
4145
${({rtl}) =>
4246
rtl &&
4347
css`
@@ -47,10 +51,7 @@ const Wrapper = styled(Box)<RtlProps>`
4751

4852
interface InputArrowIconProps extends OpacityProps, ColorProps, RtlProps {}
4953

50-
const composeInputArrowIconStyles = compose(
51-
color,
52-
opacity,
53-
)
54+
const composeInputArrowIconStyles = compose(color, opacity)
5455

5556
const InputArrowIcon = styled(ArrowIcon)<InputArrowIconProps>`
5657
${composeInputArrowIconStyles}
@@ -63,11 +64,7 @@ const InputArrowIcon = styled(ArrowIcon)<InputArrowIconProps>`
6364

6465
interface StyledGridProps extends BackgroundProps, BorderProps, BorderRadiusProps {}
6566

66-
const composeInputGridStyles = compose(
67-
background,
68-
border,
69-
borderRadius,
70-
)
67+
const composeInputGridStyles = compose(background, border, borderRadius)
7168

7269
const InputGrid = styled(Grid)<StyledGridProps>`
7370
${composeInputGridStyles}
@@ -161,6 +158,7 @@ function DateRangeInput({
161158
const datepickerWrapperRef = useRef<HTMLDivElement>(null)
162159
const themeContext = useContext(ThemeContext)
163160
const theme: DateRangeInputTheme = useThemeProps({
161+
dateRangeZIndex: null,
164162
dateRangeBackground: 'transparent',
165163
dateRangeGridTemplateColumns: vertical ? '1fr 24px 1fr' : '194px 39px 194px',
166164
dateRangeGridTemplateRows: 'unset',
@@ -213,7 +211,12 @@ function DateRangeInput({
213211

214212
return (
215213
<ThemeProvider theme={(theme: Record<string, unknown>) => theme || {}}>
216-
<Wrapper rtl={rtl} position="relative" ref={datepickerWrapperRef}>
214+
<Wrapper
215+
zIndex={theme.dateRangeZIndex}
216+
rtl={rtl}
217+
position="relative"
218+
ref={datepickerWrapperRef}
219+
>
217220
<InputGrid
218221
data-testid="DateRangeInputGrid"
219222
background={theme.dateRangeBackground}

‎packages/styled/src/components/DateSingleInput/DateSingleInput.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, {useRef, useEffect} from 'react'
2+
import {zIndex, ZIndexProps} from 'styled-system'
23
import styled, {css, ThemeProvider} from 'styled-components'
34
import {
45
START_DATE,
@@ -19,7 +20,9 @@ import useThemeProps from '../../hooks/useThemeProps'
1920
interface RtlProps {
2021
rtl: boolean
2122
}
22-
const Wrapper = styled(Box)<RtlProps>`
23+
interface WrapperProps extends RtlProps, ZIndexProps {}
24+
const Wrapper = styled(Box)<WrapperProps>`
25+
${zIndex}
2326
${({rtl}) =>
2427
rtl &&
2528
css`
@@ -119,6 +122,7 @@ function DateSingleInput({
119122
const ref = useRef(null)
120123
const datepickerWrapperRef = useRef<HTMLDivElement>(null)
121124
const theme: DateSingleInputTheme = useThemeProps({
125+
dateSingleZIndex: null,
122126
dateSingleInputPadding: vertical ? (rtl ? '0 32px 0 8px' : '0 8px 0 32px') : '0 44px',
123127
dateSingleDatepickerWrapperPosition: 'absolute',
124128
...getPlacement(placement, rtl),
@@ -168,7 +172,12 @@ function DateSingleInput({
168172

169173
return (
170174
<ThemeProvider theme={(theme: Record<string, unknown>) => theme || {}}>
171-
<Wrapper rtl={rtl} position="relative" ref={datepickerWrapperRef}>
175+
<Wrapper
176+
zIndex={theme.dateSingleZIndex}
177+
rtl={rtl}
178+
position="relative"
179+
ref={datepickerWrapperRef}
180+
>
172181
<Input
173182
id={inputId}
174183
ariaLabel={phrases.dateAriaLabel}

‎packages/styled/src/components/Datepicker/Datepicker.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import {
2121
HeightProps,
2222
WidthProps,
2323
width,
24+
zIndex,
25+
ZIndexProps,
2426
compose,
2527
} from 'styled-system'
2628
import {
@@ -68,6 +70,7 @@ interface StyledDatepicker
6870
BorderRadiusProps,
6971
PositionProps,
7072
WidthProps,
73+
ZIndexProps,
7174
BoxShadowProps {
7275
rtl: boolean
7376
}
@@ -78,6 +81,7 @@ const composeStyledDatepickerStyles = compose(
7881
position,
7982
boxShadow,
8083
width,
84+
zIndex,
8185
)
8286

8387
const StyledDatepicker = styled('div')<StyledDatepicker>`
@@ -109,20 +113,14 @@ const DateWrapper = styled('div')`
109113
`
110114

111115
interface CloseWrapperProps extends JustifyContentProps, DisplayProps {}
112-
const composeCloseWrapperStyles = compose(
113-
display,
114-
justifyContent,
115-
)
116+
const composeCloseWrapperStyles = compose(display, justifyContent)
116117

117118
const CloseWrapper = styled(Box)<CloseWrapperProps>`
118119
${composeCloseWrapperStyles}
119120
`
120121

121122
interface MonthGridProps extends HeightProps, OverflowProps {}
122-
const composeMonthGridStyles = compose(
123-
overflow,
124-
height,
125-
)
123+
const composeMonthGridStyles = compose(overflow, height)
126124

127125
const MonthGrid = styled(Grid)<MonthGridProps>`
128126
${composeMonthGridStyles}
@@ -209,6 +207,7 @@ function Datepicker(
209207
const monthGridRef = useRef<HTMLDivElement>(null)
210208
const themeContext = useContext(ThemeContext)
211209
const theme: DatepickerTheme = useThemeProps({
210+
datepickerZIndex: null,
212211
datepickerBackground: '#ffffff',
213212
datepickerPadding: vertical ? '16px 16px 0' : '32px',
214213
datepickerBorderRadius: '2px',
@@ -291,6 +290,7 @@ function Datepicker(
291290
position={theme.datepickerPosition}
292291
boxShadow={theme.datepickerBoxShadow}
293292
width={theme.datepickerWidth}
293+
zIndex={theme.datepickerZIndex}
294294
rtl={rtl}
295295
>
296296
{showClose && (

0 commit comments

Comments
 (0)
⚡