feat(css-grid): add percent span prop option #10552
Conversation
|
✔️ Deploy Preview for carbon-react-next ready! 🔨 Explore the source changes: 0758d14 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/6206c7345a8e0c0008792151 😎 Browse the preview: https://deploy-preview-10552--carbon-react-next.netlify.app |
|
✔️ Deploy Preview for carbon-elements ready! 🔨 Explore the source changes: 0758d14 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/6206c734ebb70c0007690415 😎 Browse the preview: https://deploy-preview-10552--carbon-elements.netlify.app |
|
✔️ Deploy Preview for carbon-components-react ready! 🔨 Explore the source changes: 0758d14 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/6206c734c7b2c50008f1754c 😎 Browse the preview: https://deploy-preview-10552--carbon-components-react.netlify.app |
| @@ -51,6 +51,7 @@ const spanPropType = FeatureFlags.enabled('enable-css-grid') | |||
| start: PropTypes.number, | |||
| end: PropTypes.number, | |||
| }), | |||
| PropTypes.arrayOf(PropTypes.oneOf(['25%', '50%', '75%', '100%'])), | |||
There was a problem hiding this comment.
Would something like this work:
const percentSpanType = PropTypes.oneOf(['25%', '50%', '75%', '100%']);
//
? PropTypes.oneOfType([
PropTypes.bool,
PropTypes.number,
PropTypes.shape({
span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
offset: PropTypes.number,
start: PropTypes.number,
end: PropTypes.number,
}),
percentSpanType
]);Only reason why I'm curious is if we could support offsets or not with percent span 🤔
There was a problem hiding this comment.
@joshblack Great idea - I got it working! I added a new column to the offset story that uses percent-based span with offsets. Check it out and let me know what you think.
Closes #10475
Enables CSSGrid columns to span a percentage width of the parent grid
Changelog
New
spanPropTypessupport new string percent optionsTesting / Reviewing