Skip to content

Commit

Permalink
fix(search): remove global override of search styles (#718)
Browse files Browse the repository at this point in the history 
* fix(modal): make modal compatble with more class-names

* fix(search): remove global override of search styles
  • Loading branch information
@unix
unix authored Feb 7, 2022
1 parent 72855cc commit bd60b44
Show file tree
Hide file tree
Showing 9 changed files with 65 additions and 94 deletions.
55 changes: 10 additions & 45 deletions components/drawer/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ exports[`Drawer customization should be supported 1`] = `
`;
exports[`Drawer should render correctly 1`] = `
"<div class=\\"backdrop backdrop-wrapper-enter\\"><div class=\\"layer\\"></div><div class=\\"content\\"><div class=\\"wrapper right wrapper-enter\\" role=\\"dialog\\" tabindex=\\"-1\\"><div tabindex=\\"0\\" class=\\"hide-tab start\\" aria-hidden=\\"true\\"></div><h2 class=\\"\\">Drawer</h2><style>
"<div class=\\"backdrop backdrop-wrapper-enter\\"><div class=\\"layer\\"></div><div class=\\"position\\"><div class=\\"wrapper right wrapper-enter\\" role=\\"dialog\\" tabindex=\\"-1\\"><div tabindex=\\"0\\" class=\\"hide-tab start\\" aria-hidden=\\"true\\"></div><h2 class=\\"\\">Drawer</h2><style>
h2 {
line-height: 1.6;
font-weight: normal;
Expand Down Expand Up @@ -255,8 +255,7 @@ exports[`Drawer should render correctly 1`] = `
box-sizing: border-box;
text-align: center;
}
.content {
.position {
position: relative;
z-index: 1001;
outline: none;
Expand All @@ -266,15 +265,13 @@ exports[`Drawer should render correctly 1`] = `
vertical-align: middle;
display: inline-block;
}
.backdrop:before {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
content: '';
}
.layer {
position: fixed;
top: 0;
Expand All @@ -289,27 +286,23 @@ exports[`Drawer should render correctly 1`] = `
pointer-events: none;
z-index: 1000;
}
.backdrop-wrapper-enter .layer {
opacity: 0;
}
.backdrop-wrapper-enter-active .layer {
opacity: 0.25;
}
.backdrop-wrapper-leave .layer {
opacity: 0.25;
}
.backdrop-wrapper-leave-active .layer {
opacity: 0;
}
</style></div>"
`;
exports[`Drawer should work correctly with different placement 1`] = `
"<div class=\\"backdrop backdrop-wrapper-enter\\"><div class=\\"layer\\"></div><div class=\\"content\\"><div class=\\"wrapper top wrapper-enter\\" role=\\"dialog\\" tabindex=\\"-1\\"><div tabindex=\\"0\\" class=\\"hide-tab start\\" aria-hidden=\\"true\\"></div><p>Some content contained within the drawer.</p><div tabindex=\\"0\\" class=\\"hide-tab end\\" aria-hidden=\\"true\\"></div><style>
"<div class=\\"backdrop backdrop-wrapper-enter\\"><div class=\\"layer\\"></div><div class=\\"position\\"><div class=\\"wrapper top wrapper-enter\\" role=\\"dialog\\" tabindex=\\"-1\\"><div tabindex=\\"0\\" class=\\"hide-tab start\\" aria-hidden=\\"true\\"></div><p>Some content contained within the drawer.</p><div tabindex=\\"0\\" class=\\"hide-tab end\\" aria-hidden=\\"true\\"></div><style>
.wrapper {
position: fixed;
top: 0;
Expand Down Expand Up @@ -404,8 +397,7 @@ exports[`Drawer should work correctly with different placement 1`] = `
box-sizing: border-box;
text-align: center;
}
.content {
.position {
position: relative;
z-index: 1001;
outline: none;
Expand All @@ -415,15 +407,13 @@ exports[`Drawer should work correctly with different placement 1`] = `
vertical-align: middle;
display: inline-block;
}
.backdrop:before {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
content: '';
}
.layer {
position: fixed;
top: 0;
Expand All @@ -438,27 +428,23 @@ exports[`Drawer should work correctly with different placement 1`] = `
pointer-events: none;
z-index: 1000;
}
.backdrop-wrapper-enter .layer {
opacity: 0;
}
.backdrop-wrapper-enter-active .layer {
opacity: 0.25;
}
.backdrop-wrapper-leave .layer {
opacity: 0.25;
}
.backdrop-wrapper-leave-active .layer {
opacity: 0;
}
</style></div>"
`;
exports[`Drawer should work correctly with different placement 2`] = `
"<div class=\\"backdrop backdrop-wrapper-enter\\"><div class=\\"layer\\"></div><div class=\\"content\\"><div class=\\"wrapper right wrapper-enter\\" role=\\"dialog\\" tabindex=\\"-1\\"><div tabindex=\\"0\\" class=\\"hide-tab start\\" aria-hidden=\\"true\\"></div><p>Some content contained within the drawer.</p><div tabindex=\\"0\\" class=\\"hide-tab end\\" aria-hidden=\\"true\\"></div><style>
"<div class=\\"backdrop backdrop-wrapper-enter\\"><div class=\\"layer\\"></div><div class=\\"position\\"><div class=\\"wrapper right wrapper-enter\\" role=\\"dialog\\" tabindex=\\"-1\\"><div tabindex=\\"0\\" class=\\"hide-tab start\\" aria-hidden=\\"true\\"></div><p>Some content contained within the drawer.</p><div tabindex=\\"0\\" class=\\"hide-tab end\\" aria-hidden=\\"true\\"></div><style>
.wrapper {
position: fixed;
top: 0;
Expand Down Expand Up @@ -553,8 +539,7 @@ exports[`Drawer should work correctly with different placement 2`] = `
box-sizing: border-box;
text-align: center;
}
.content {
.position {
position: relative;
z-index: 1001;
outline: none;
Expand All @@ -564,15 +549,13 @@ exports[`Drawer should work correctly with different placement 2`] = `
vertical-align: middle;
display: inline-block;
}
.backdrop:before {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
content: '';
}
.layer {
position: fixed;
top: 0;
Expand All @@ -587,27 +570,23 @@ exports[`Drawer should work correctly with different placement 2`] = `
pointer-events: none;
z-index: 1000;
}
.backdrop-wrapper-enter .layer {
opacity: 0;
}
.backdrop-wrapper-enter-active .layer {
opacity: 0.25;
}
.backdrop-wrapper-leave .layer {
opacity: 0.25;
}
.backdrop-wrapper-leave-active .layer {
opacity: 0;
}
</style></div>"
`;
exports[`Drawer should work correctly with different placement 3`] = `
"<div class=\\"backdrop backdrop-wrapper-enter\\"><div class=\\"layer\\"></div><div class=\\"content\\"><div class=\\"wrapper bottom wrapper-enter\\" role=\\"dialog\\" tabindex=\\"-1\\"><div tabindex=\\"0\\" class=\\"hide-tab start\\" aria-hidden=\\"true\\"></div><p>Some content contained within the drawer.</p><div tabindex=\\"0\\" class=\\"hide-tab end\\" aria-hidden=\\"true\\"></div><style>
"<div class=\\"backdrop backdrop-wrapper-enter\\"><div class=\\"layer\\"></div><div class=\\"position\\"><div class=\\"wrapper bottom wrapper-enter\\" role=\\"dialog\\" tabindex=\\"-1\\"><div tabindex=\\"0\\" class=\\"hide-tab start\\" aria-hidden=\\"true\\"></div><p>Some content contained within the drawer.</p><div tabindex=\\"0\\" class=\\"hide-tab end\\" aria-hidden=\\"true\\"></div><style>
.wrapper {
position: fixed;
top: 0;
Expand Down Expand Up @@ -702,8 +681,7 @@ exports[`Drawer should work correctly with different placement 3`] = `
box-sizing: border-box;
text-align: center;
}
.content {
.position {
position: relative;
z-index: 1001;
outline: none;
Expand All @@ -713,15 +691,13 @@ exports[`Drawer should work correctly with different placement 3`] = `
vertical-align: middle;
display: inline-block;
}
.backdrop:before {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
content: '';
}
.layer {
position: fixed;
top: 0;
Expand All @@ -736,27 +712,23 @@ exports[`Drawer should work correctly with different placement 3`] = `
pointer-events: none;
z-index: 1000;
}
.backdrop-wrapper-enter .layer {
opacity: 0;
}
.backdrop-wrapper-enter-active .layer {
opacity: 0.25;
}
.backdrop-wrapper-leave .layer {
opacity: 0.25;
}
.backdrop-wrapper-leave-active .layer {
opacity: 0;
}
</style></div>"
`;
exports[`Drawer should work correctly with different placement 4`] = `
"<div class=\\"backdrop backdrop-wrapper-enter\\"><div class=\\"layer\\"></div><div class=\\"content\\"><div class=\\"wrapper left wrapper-enter\\" role=\\"dialog\\" tabindex=\\"-1\\"><div tabindex=\\"0\\" class=\\"hide-tab start\\" aria-hidden=\\"true\\"></div><p>Some content contained within the drawer.</p><div tabindex=\\"0\\" class=\\"hide-tab end\\" aria-hidden=\\"true\\"></div><style>
"<div class=\\"backdrop backdrop-wrapper-enter\\"><div class=\\"layer\\"></div><div class=\\"position\\"><div class=\\"wrapper left wrapper-enter\\" role=\\"dialog\\" tabindex=\\"-1\\"><div tabindex=\\"0\\" class=\\"hide-tab start\\" aria-hidden=\\"true\\"></div><p>Some content contained within the drawer.</p><div tabindex=\\"0\\" class=\\"hide-tab end\\" aria-hidden=\\"true\\"></div><style>
.wrapper {
position: fixed;
top: 0;
Expand Down Expand Up @@ -851,8 +823,7 @@ exports[`Drawer should work correctly with different placement 4`] = `
box-sizing: border-box;
text-align: center;
}
.content {
.position {
position: relative;
z-index: 1001;
outline: none;
Expand All @@ -862,15 +833,13 @@ exports[`Drawer should work correctly with different placement 4`] = `
vertical-align: middle;
display: inline-block;
}
.backdrop:before {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
content: '';
}
.layer {
position: fixed;
top: 0;
Expand All @@ -885,19 +854,15 @@ exports[`Drawer should work correctly with different placement 4`] = `
pointer-events: none;
z-index: 1000;
}
.backdrop-wrapper-enter .layer {
opacity: 0;
}
.backdrop-wrapper-enter-active .layer {
opacity: 0.25;
}
.backdrop-wrapper-leave .layer {
opacity: 0.25;
}
.backdrop-wrapper-leave-active .layer {
opacity: 0;
}
Expand Down
4 changes: 2 additions & 2 deletions components/drawer/__tests__/use-modal.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { Drawer, useModal } from 'components'
import { updateWrapper } from 'tests/utils'

export const expectDrawerIsOpened = (wrapper: ReactWrapper) => {
expect(wrapper.find('.content').length).not.toBe(0)
expect(wrapper.find('.position').length).not.toBe(0)
}

export const expectDrawerIsClosed = (wrapper: ReactWrapper) => {
expect(wrapper.find('.content').length).toBe(0)
expect(wrapper.find('.position').length).toBe(0)
}

describe('UseModal & Drawer', () => {
Expand Down
11 changes: 2 additions & 9 deletions components/modal/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ exports[`Modal customization should be supported 1`] = `
`;
exports[`Modal should render correctly 1`] = `
"<div class=\\"backdrop backdrop-wrapper-enter\\"><div class=\\"layer\\"></div><div class=\\"content\\"><div class=\\"wrapper wrapper-enter\\" role=\\"dialog\\" tabindex=\\"-1\\"><div tabindex=\\"0\\" class=\\"hide-tab\\" aria-hidden=\\"true\\"></div><h2 class=\\"\\">Modal</h2><style>
"<div class=\\"backdrop backdrop-wrapper-enter\\"><div class=\\"layer\\"></div><div class=\\"position\\"><div class=\\"wrapper wrapper-enter\\" role=\\"dialog\\" tabindex=\\"-1\\"><div tabindex=\\"0\\" class=\\"hide-tab\\" aria-hidden=\\"true\\"></div><h2 class=\\"\\">Modal</h2><style>
h2 {
line-height: 1.6;
font-weight: normal;
Expand Down Expand Up @@ -350,8 +350,7 @@ exports[`Modal should render correctly 1`] = `
box-sizing: border-box;
text-align: center;
}
.content {
.position {
position: relative;
z-index: 1001;
outline: none;
Expand All @@ -361,15 +360,13 @@ exports[`Modal should render correctly 1`] = `
vertical-align: middle;
display: inline-block;
}
.backdrop:before {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
content: '';
}
.layer {
position: fixed;
top: 0;
Expand All @@ -384,19 +381,15 @@ exports[`Modal should render correctly 1`] = `
pointer-events: none;
z-index: 1000;
}
.backdrop-wrapper-enter .layer {
opacity: 0;
}
.backdrop-wrapper-enter-active .layer {
opacity: 0.25;
}
.backdrop-wrapper-leave .layer {
opacity: 0.25;
}
.backdrop-wrapper-leave-active .layer {
opacity: 0;
}
Expand Down
12 changes: 12 additions & 0 deletions components/modal/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,18 @@ interface Props {
visible?: boolean
keyboard?: boolean
wrapClassName?: string
positionClassName?: string
backdropClassName?: string
layerClassName?: string
}

const defaultProps = {
wrapClassName: '',
keyboard: true,
disableBackdropClick: false,
positionClassName: '',
backdropClassName: '',
layerClassName: '',
}

type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
Expand All @@ -37,6 +43,9 @@ const ModalComponent: React.FC<React.PropsWithChildren<ModalProps>> = ({
wrapClassName,
onContentClick,
disableBackdropClick,
positionClassName,
backdropClassName,
layerClassName,
}: React.PropsWithChildren<ModalProps> & typeof defaultProps) => {
const portal = usePortal('modal')
const { SCALES } = useScale()
Expand Down Expand Up @@ -86,6 +95,9 @@ const ModalComponent: React.FC<React.PropsWithChildren<ModalProps>> = ({
onContentClick={onContentClick}
visible={visible}
width={SCALES.width(26)}
positionClassName={positionClassName}
backdropClassName={backdropClassName}
layerClassName={layerClassName}
{...bindings}>
<ModalWrapper visible={visible} className={wrapClassName}>
{withoutActionsChildren}
Expand Down
Loading

0 comments on commit bd60b44

Please sign in to comment.