Skip to content

Commit

Permalink
fix(component): add missing z-index to components (#176)
Browse files Browse the repository at this point in the history
BREAKING CHANGE: `theme.zIndex` no longer has `theme.zIndex.dropdown`
  • Loading branch information
chanceaclark authored Aug 16, 2019
1 parent 4c93e05 commit 800d2fc
Show file tree
Hide file tree
Showing 6 changed files with 12 additions and 6 deletions.
8 changes: 3 additions & 5 deletions packages/big-design-theme/src/system/z-index.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
export interface ZIndex {
dropdown: number;
sticky: number;
fixed: number;
modalBackdrop: number;
modal: number;
popover: number;
tooltip: number;
popover: number;
}

export const zIndex: ZIndex = {
dropdown: 1000,
sticky: 1020,
fixed: 1030,
modalBackdrop: 1040,
modal: 1050,
popover: 1060,
tooltip: 1070,
tooltip: 1060,
popover: 1070,
};
1 change: 1 addition & 0 deletions packages/big-design/src/components/List/styled.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const StyledList = styled.ul<StyledList>`
outline: none;
overflow-y: scroll;
padding: ${({ theme }) => theme.spacing.xSmall} 0;
z-index: ${({ theme }) => theme.zIndex.popover};
`;

StyledList.defaultProps = { theme: defaultTheme };
Original file line number Diff line number Diff line change
Expand Up @@ -139,13 +139,15 @@ exports[`render open modal 1`] = `
position: fixed;
top: 0;
width: 100%;
z-index: 1040;
background: rgba(49,52,64,0.7);
}
.c1 {
background: #FFFFFF;
box-sizing: border-box;
position: fixed;
z-index: 1050;
height: 100%;
width: 100%;
}
Expand Down Expand Up @@ -384,12 +386,14 @@ exports[`render open modal without backdrop 1`] = `
position: fixed;
top: 0;
width: 100%;
z-index: 1040;
}
.c1 {
background: #FFFFFF;
box-sizing: border-box;
position: fixed;
z-index: 1050;
height: 100%;
width: 100%;
}
Expand Down
2 changes: 2 additions & 0 deletions packages/big-design/src/components/Modal/styled.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const StyledModal = styled.div.attrs({
position: fixed;
top: 0;
width: 100%;
z-index: ${({ theme }) => theme.zIndex.modalBackdrop};
${props =>
props.backdrop &&
Expand All @@ -29,6 +30,7 @@ export const StyledModalContent = styled(Flex)<{ variant: ModalProps['variant']
background: ${({ theme }) => theme.colors.white};
box-sizing: border-box;
position: fixed;
z-index: ${({ theme }) => theme.zIndex.modal};
${({ variant }) =>
variant === 'dialog' &&
Expand Down
1 change: 1 addition & 0 deletions packages/big-design/src/components/Tooltip/styled.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const StyledTooltip = styled.div`
background-color: ${({ theme }) => theme.colors.secondary70};
max-width: ${({ theme }) => theme.helpers.remCalc(336)};
padding: ${({ theme }) => theme.spacing.xSmall};
z-index: ${({ theme }) => theme.zIndex.tooltip};
`;

StyledTooltip.defaultProps = { theme: defaultTheme };
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/components/SideNav/SideNavMenu/styled.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const StyledNavigation = styled(Flex.Item)<Navigation>`
position: absolute;
top: 100%;
width: 100%;
z-index: ${({ theme }) => theme.zIndex.dropdown};
z-index: ${({ theme }) => theme.zIndex.sticky};
${({ theme }) => theme.breakpoints.tablet} {
border: 0;
Expand Down

0 comments on commit 800d2fc

Please sign in to comment.