-
Notifications
You must be signed in to change notification settings - Fork 3
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
Update overlay components to new theme system #209
Changes from all commits
06172b8
ef0d895
9fcdff3
6fc6e11
eeec998
26d8058
de6343f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,24 +1,32 @@ | ||
import React from "react"; | ||
import PropTypes from "prop-types"; | ||
import styled from 'styled-components' | ||
import {color, opacity, boxShadow, borders, borderColor, borderRadius, themeGet} from 'styled-system'; | ||
import { themeGet } from 'styled-system'; | ||
import { COMMON, BORDER, MISC } from "../../constants"; | ||
import ReactModal from 'react-modal'; | ||
import Box from '../box'; | ||
|
||
let isAppElementSet = false; | ||
|
||
const StyledDialog = styled(Box)` | ||
${color} | ||
${boxShadow} | ||
${borders} | ||
${borderColor} | ||
${borderRadius} | ||
const StyledDialog = styled.div` | ||
flex: auto; | ||
width: 100%; | ||
height: 100%; | ||
overflow: auto; | ||
-webkit-overflow-scrolling: touch; | ||
outline: none; | ||
|
||
min-width: ${themeGet("dialog.minWidths.minWidth")}; | ||
max-width: ${themeGet("dialog.maxWidths.maxWidth")}; | ||
min-height: ${themeGet("dialog.minHeights.minHeight")}; | ||
max-height: ${themeGet("dialog.maxHeights.maxHeight")}; | ||
padding: ${themeGet("dialog.space.p")}; | ||
background-color: ${themeGet("dialog.colors.bg")}; | ||
box-shadow: ${themeGet("dialog.shadows.boxShadow")}; | ||
|
||
${themeGet("dialog.styles")} | ||
${COMMON} | ||
${BORDER} | ||
${MISC} | ||
`; | ||
|
||
const Dialog = ({ | ||
|
@@ -70,7 +78,7 @@ const Dialog = ({ | |
display: 'flex', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
backgroundColor: `rgba(0, 0, 0, ${themeGet(`opacity.${opacity}`, opacity)(props)})`, | ||
backgroundColor: `rgba(0, 0, 0, ${opacity})`, | ||
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. we might consider allowing user-defined colors here. 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 tried that – it's actually the source of that stray polished 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. The following should work:
And obviously, you would then need to pass 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. 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. The biggest downside to this approach is the lack of access to the theme. That might require a larger rewrite. 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. Yeah the problem I had was supporting the overlay color in the theme file too. Would have to add some logic to use the prop if present, else fallback on the theme. We do this a lot inside our styled component definitions, but not in a standalone 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. Okay, yeah that's fair. Agreed on the issue then. |
||
zIndex: 1000000 | ||
}; | ||
|
||
|
@@ -168,13 +176,9 @@ Dialog.setAppElement = element => ReactModal.setAppElement(element); | |
|
||
Dialog.propTypes = { | ||
...ReactModal.propTypes, | ||
...Box.propTypes, | ||
...color.propTypes, | ||
...opacity.propTypes, | ||
...boxShadow.propTypes, | ||
...borders.propTypes, | ||
...borderColor.propTypes, | ||
...borderRadius.propTypes, | ||
...COMMON.propTypes, | ||
...BORDER.propTypes, | ||
...MISC.propTypes, | ||
appElementId: PropTypes.string | ||
}; | ||
|
||
|
@@ -192,17 +196,7 @@ Dialog.defaultProps = { | |
beforeClose: 'modal-dialog__content--before-close' | ||
}, | ||
bodyOpenClassName: 'body--modal-dialog-open', | ||
opacity: 0.6, | ||
boxShadow: 'dialog.boxShadow', | ||
minWidth: '24rem', | ||
maxWidth: '80%', | ||
minHeight: '16rem', | ||
maxHeight: '90%', | ||
pt: 'dialog.p', | ||
pb: 'dialog.p', | ||
pl: 'dialog.p', | ||
pr: 'dialog.p', | ||
bg: 'dialog.bg' | ||
opacity: 0.5 | ||
}; | ||
|
||
export default Dialog; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,48 +6,90 @@ route: /overlays/dialog | |
|
||
import { Playground, Props } from 'docz' | ||
import Dialog from './' | ||
import Button from '../../../core/components/button' | ||
import Button from '../button' | ||
import Heading from '../heading' | ||
|
||
# Dialog | ||
|
||
Opinionated wrapper around [react-modal](http://reactcommunity.org/react-modal/), | ||
an accessible modal dialog component for React. | ||
|
||
## Configuration | ||
|
||
### Setup | ||
Note you must call `Dialog.setAppElement(element)` *before* the first use of this | ||
component in your app, where `element` is your app root's html element, or its id. | ||
Alternatively, pass in the `appElementId` prop on the first use. | ||
|
||
### Opening and closing | ||
The only required prop is `isOpen`, which is a toggle for displaying the dialog. | ||
See [react-modal](http://reactcommunity.org/react-modal/) for details and general usage. | ||
|
||
Note you must call `Dialog.setAppElement(element)` *before* the first use of this | ||
component in your app, where `element` is the html element, or id thereof, of your | ||
app root. Alternatively, pass in the `appElementId` prop on the first use. | ||
Once the dialog is open, you must set `isOpen` to `false` to close it. It is | ||
recommended you do this in the `onRequestClose` handler, which by default will be | ||
called when the user presses the ESC key or clicks the overlay. | ||
|
||
### Styling | ||
|
||
`Dialog` will ignore any styles passed in via react-modal's `style` prop. Instead | ||
certain styles can be configured via styled-system props (see table below) and | ||
the rest are hard-coded opinions within the `Dialog` component. | ||
certain styles can be configured via the theme properties (see below), or their | ||
corresponding styled-system props, and the rest are hard-coded opinions within | ||
the `Dialog` component. | ||
|
||
Notable props include `opacity` for adjusting the scrim opacity, `boxShadow` for | ||
setting the dialog drop shadow, and `closeTimeoutMS` for adjusting the transition | ||
timing. Transitions are hard-coded for now. Only the timing is adjustable. | ||
Overlay opacity can be adjusted via the `opacity` prop. | ||
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. If you end up making the suggested change about user-defined colors, update this as well. |
||
|
||
## Basic usage | ||
### Transitions | ||
Transitions are hard-coded for now, although transition timing is adjustable | ||
via the `closeTimeoutMS` prop. | ||
|
||
Set `isOpen` to `true` below to trigger the dialog. There's no way to close it | ||
in docz, so refresh when you're done. | ||
## Basic usage | ||
|
||
<Playground> | ||
<Dialog isOpen={false} width="50%" height="50%" appElementId="root"> | ||
<Button block>Howdy ho</Button> | ||
</Dialog> | ||
{class Example extends React.Component { | ||
constructor(props) { | ||
super(props); | ||
this.state = { open: false }; | ||
} | ||
|
||
handleOpen() { | ||
this.setState({ open: true }); | ||
} | ||
|
||
handleClose() { | ||
this.setState({ open: false }); | ||
} | ||
|
||
render() { | ||
return ( | ||
<> | ||
<Button | ||
onClick={() => this.handleOpen()} | ||
> | ||
Open Dialog | ||
</Button> | ||
<Dialog | ||
appElementId="root" | ||
isOpen={this.state.open} | ||
onRequestClose={() => this.handleClose()} | ||
> | ||
<Heading>Hello World</Heading> | ||
</Dialog> | ||
</> | ||
); | ||
} | ||
}} | ||
</Playground> | ||
|
||
|
||
### PropTypes | ||
## PropTypes | ||
| Prop | Type | Required | Default | Description | | ||
|:-----|:-----|:---------|:--------|:------------| | ||
| appElementId | string | no | | id of app root element | | ||
| isOpen | bool | yes | | via [react-modal](http://reactcommunity.org/react-modal/#usage) | | ||
| onAfterOpen | func | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) | | ||
| onRequestClose | func | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) | | ||
| opacity | number | no | `0.5` | overlay opacity | | ||
| closeTimeoutMS | number | no | `150` | via [react-modal](http://reactcommunity.org/react-modal/#usage) | | ||
| onRequestClose | func | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) | | ||
| onAfterOpen | func | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) | | ||
| contentLabel | string | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) | | ||
| portalClassName | string | no | `modal-dialog` | via [react-modal](http://reactcommunity.org/react-modal/#usage) | | ||
| overlayClassName | object | no | `{ base: 'modal-dialog__overlay', afterOpen: 'modal-dialog__overlay--after-open', beforeClose: 'modal-dialog__overlay--before-close'}` | via [react-modal](http://reactcommunity.org/react-modal/#usage) | | ||
|
@@ -65,14 +107,42 @@ in docz, so refresh when you're done. | |
| data | object | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) | | ||
| overlayRef | func | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) | | ||
| contentRef | func | no | | via [react-modal](http://reactcommunity.org/react-modal/#usage) | | ||
| Box props | | | | see [Box](/components/box) | | ||
| minWidth | string | no | `30rem` | | | ||
| maxWidth | string | no | `80%` | | | ||
| minHeight | string | no | `40rem` | | | ||
| minHeight | string | no | `90%` | | | ||
| opacity | number | no | `0.6` | scrim opacity | | ||
| boxShadow | number or string | no | `5` | should be a key in theme shadows | | ||
| bg | string | no | `white` | dialog background | | ||
| border | string | no | | | | ||
| borderColor | string | no | | | | ||
| borderRadius | string | no | | | | ||
| `COMMON` | Style Prop | | | see [Style Props](/style-props) | | ||
| `BORDER` | Style Prop | | | see [Style Props](/style-props) | | ||
| `MISC` | Style Prop | | | see [Style Props](/style-props) | | ||
|
||
|
||
## Theming | ||
|
||
### Schema | ||
``` | ||
{ | ||
space: { | ||
p | ||
}, | ||
minWidths: { | ||
minWidth | ||
}, | ||
maxWidths: { | ||
maxWidth | ||
}, | ||
minHeights: { | ||
minHeight | ||
}, | ||
maxHeights: { | ||
maxHeight | ||
}, | ||
colors: { | ||
bg | ||
}, | ||
shadows: { | ||
boxShadow | ||
}, | ||
styles: css` | ||
... | ||
` | ||
} | ||
``` | ||
|
||
- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/dialog) | ||
- [Learn more about themeing](#) |
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.
Nothing wrong with this change, just curious about the decision behind it.
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.
ButtonIcon
was astyled(Icon)
. I've opted to stop using that syntax entirely (in favor ofstyled.div
or other built-in html elements), so I just used theIcon
component directly in the jsx. Hence needed to give it a classname to refer to it here.