diff --git a/README.md b/README.md index f162ab1..bfb7151 100644 --- a/README.md +++ b/README.md @@ -44,17 +44,18 @@ Wrap your cells in `Grid`. Pretty simple. Props: -* `columns`: The [grid-template-columns] CSS property. When a number is passed +- `columns`: The [grid-template-columns] CSS property. When a number is passed it is a shorthand to specify the number of columns. Default is `12`. -* `gap`: The [grid-gap] CSS property. Default is `"8px"`. -* `minRowHeight`: Minimum height of each row. Default is `"20px"`. -* `height`: The [height] CSS property. Default is `"auto"`. -* `flow`: The [grid-auto-flow] CSS property. Default is `"row"`. -* `rows`: The [grid-template-rows] CSS property. When a number is passed +- `gap`: The [grid-gap] CSS property. Default is `"8px"`. +- `minRowHeight`: Minimum height of each row. Default is `"20px"`. +- `height`: The [height] CSS property. Default is `"auto"`. +- `flow`: The [grid-auto-flow] CSS property. Default is `"row"`. +- `rows`: The [grid-template-rows] CSS property. When a number is passed it is a shorthand to specify the number of columns. Not provided by default. -* `areas`: The [grid-template-areas] CSS property. Pass an array of strings, e.g. `["a a", "b c"]`. Not provided by default. -* `justifyContent`: The [justify-content] CSS property. Not provided by default. -* `alignContent`: The [align-content] CSS property. Not provided by default. +- `areas`: The [grid-template-areas] CSS property. Pass an array of strings, e.g. `["a a", "b c"]`. Not provided by default. +- `justifyContent`: The [justify-content] CSS property. Not provided by default. +- `alignContent`: The [align-content] CSS property. Not provided by default. +- `is`: The tag property. Default is `"div"` ### `Cell` @@ -62,13 +63,14 @@ A cell. Not too much to say... Props: -* `width`: Cell width in units, default is `1`. -* `height`: Cell height in units, default is `1`. -* `left`: The [grid-column-start] CSS property. Not provided by default. -* `top`: The [grid-row-start] CSS property. Not provided by default. -* `middle`: Vertically align the contents of the cell. Default is `false`. -* `center`: Horizontally align the text contents of the cell. Default is `false`. -* `area`: The [grid-area] CSS property. Not provided by default. +- `width`: Cell width in units, default is `1`. +- `height`: Cell height in units, default is `1`. +- `left`: The [grid-column-start] CSS property. Not provided by default. +- `top`: The [grid-row-start] CSS property. Not provided by default. +- `middle`: Vertically align the contents of the cell. Default is `false`. +- `center`: Horizontally align the text contents of the cell. Default is `false`. +- `area`: The [grid-area] CSS property. Not provided by default. +- `is`: The tag property. Default is `"section"` ## browser support @@ -81,7 +83,7 @@ You can use CSS grid _soon_ if you have to support the latest version of modern ![Can I use?](website/caniuse.png) [website]: https://styled-css-grid.js.org/ -[CSS grid]: https://mdn.io/CSS_Grid_Layout +[css grid]: https://mdn.io/CSS_Grid_Layout [styled-components]: https://github.com/styled-components/styled-components [grid-auto-flow]: https://mdn.io/grid-auto-flow [grid-row-start]: https://mdn.io/grid-row-start diff --git a/lib/Cell.js b/lib/Cell.js index 8153ddb..93b3fd5 100644 --- a/lib/Cell.js +++ b/lib/Cell.js @@ -1,7 +1,10 @@ import styled from "styled-components"; import PropTypes from "prop-types"; +import tag from "clean-tag"; -const Cell = styled.section` +const Cell = styled(tag.section).attrs({ + blacklist: ["width", "height", "top", "left", "middle", "center", "area"] +})` height: 100%; min-width: 0; align-content: space-around; @@ -32,7 +35,8 @@ Cell.propTypes = { left: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), middle: PropTypes.bool, center: PropTypes.bool, - area: PropTypes.string + area: PropTypes.string, + is: PropTypes.string }; export default Cell; diff --git a/lib/Grid.js b/lib/Grid.js index 68c3d0b..907c828 100644 --- a/lib/Grid.js +++ b/lib/Grid.js @@ -1,5 +1,6 @@ import styled from "styled-components"; import PropTypes from "prop-types"; +import tag from "clean-tag"; const autoRows = ({ minRowHeight = "20px" }) => `minmax(${minRowHeight}, auto)`; @@ -12,7 +13,19 @@ const flow = ({ flow = "row" }) => flow; const formatAreas = areas => areas.map(area => `"${area}"`).join(" "); -const Grid = styled.div` +const Grid = styled(tag.div).attrs({ + blacklist: [ + "columns", + "gap", + "height", + "minRowHeight", + "flow", + "rows", + "areas", + "justifyContent", + "alignContent" + ] +})` display: grid; height: ${({ height = "auto" }) => height}; grid-auto-flow: ${flow}; @@ -36,7 +49,8 @@ Grid.propTypes = { rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), areas: PropTypes.arrayOf(PropTypes.string), justifyContent: PropTypes.string, - alignContent: PropTypes.string + alignContent: PropTypes.string, + is: PropTypes.string }; export default Grid; diff --git a/package.json b/package.json index 34fafed..3b43fcc 100644 --- a/package.json +++ b/package.json @@ -8,15 +8,8 @@ "repository": "https://github.com/azz/styled-css-grid", "author": "Lucas Azzola", "license": "MIT", - "files": [ - "dist" - ], - "keywords": [ - "grid", - "css", - "react", - "styled-components" - ], + "files": ["dist"], + "keywords": ["grid", "css", "react", "styled-components"], "scripts": { "lint": "eslint .", "prettier": "prettier --write \"{lib,website,scripts}/*.js\"", @@ -32,7 +25,8 @@ "styled-components": "^2" }, "dependencies": { - "prop-types": "^15.6.0" + "prop-types": "^15.6.0", + "clean-tag": "^1.0.4" }, "devDependencies": { "babel-core": "^6.25.0", diff --git a/yarn.lock b/yarn.lock index 8f485fa..803c00f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -940,6 +940,14 @@ circular-json@^0.3.1: version "0.3.3" resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66" +clean-tag@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/clean-tag/-/clean-tag-1.0.4.tgz#9b407b306fadce114e6dffa774e7b61bdfc0c190" + dependencies: + html-tags "^2.0.0" + react ">=16.0.0" + styled-system ">=1.1 || >=2.0" + cli-cursor@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5" @@ -1886,6 +1894,10 @@ html-encoding-sniffer@^1.0.1: dependencies: whatwg-encoding "^1.0.1" +html-tags@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b" + http-proxy@^1.8.1: version "1.16.2" resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742" @@ -3309,6 +3321,15 @@ react-test-renderer@next: fbjs "^0.8.9" object-assign "^4.1.0" +react@>=16.0.0: + version "16.4.1" + resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32" + dependencies: + fbjs "^0.8.16" + loose-envify "^1.1.0" + object-assign "^4.1.1" + prop-types "^15.6.0" + react@next: version "16.0.0-beta.2" resolved "https://registry.yarnpkg.com/react/-/react-16.0.0-beta.2.tgz#340bbaa28c8678499353586cf46d096438dee561" @@ -3975,6 +3996,12 @@ styled-components@^2.1.1: stylis "^3.2.1" supports-color "^3.2.3" +"styled-system@>=1.1 || >=2.0": + version "2.2.9" + resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-2.2.9.tgz#1a9a2187b1856b4a385ed65a1daff771a253f3d9" + dependencies: + prop-types "^15.6.0" + stylis@^3.2.1: version "3.2.8" resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.8.tgz#9b23a3e06597f7944a3d9ae880d5796248b8784f"