search

square / maker

Maker Design System by Square
https://square.github.io/maker/styleguide/latest-stable/
Other
63 stars 14 forks source link

feat: add `shape` property to `MPill` #527

Closed berwyn closed 1 year ago

berwyn commented 1 year ago

Describe the problem this PR addresses

We have a project where we'd like to use MPill to present informational items, however we'd like to be able to customise the shape of the pill.

Describe the changes in this PR

This PR adds the shape property, accepting either a single shape or a tuple of two shapes to use on each endcap.

Other information

I've implemented this with the ::before and ::after pseudo-elements but I'm not overly fond of this implementation. That being said, I couldn't think of a better way to do it without manually clip-pathing the entire capsule uniquely for every pair of shapes.

There's also an ancillary change to let Webpack process style tags with the lang explicitly set to postcss. This doesn't have any actual changes on the build, but fixes syntax highlighting and context-aware tools in editors like VSCode using Volar.

github-actions[bot] commented 1 year ago

Deployed Styleguide and Lab.

Notes
  1. Links may take a few minutes to update after PR is opened or commit is pushed.
  2. Links may become invalidated after PR is merged or closed.
  3. Links for all releases and open PRs can be found on the Maker Deploys page.

github-actions[bot] commented 1 year ago

📊 Package size report   0.9%↑

File Before After
components/Pill/script.js 2.8 kB 35%↑3.8 kB
components/Pill/styles.css 370 B 1,210%↑4.8 kB
Total (Includes all files) 1.8 MB 0.9%↑1.8 MB
Tarball size 345.0 kB 0.9%↑348.1 kB
Unchanged files | File | Size | | ----------------------------------------------------------------------------------- | --------: | | `components/Accordion/index.js` | `46 B` | | `components/Accordion/script.js` | `5.2 kB` | | `components/Accordion/styles.css` | `235 B` | | `components/ActionBar/index.js` | `46 B` | | `components/ActionBar/script.js` | `14.6 kB` | | `components/ActionBar/styles.css` | `5.7 kB` | | `components/Badge/index.js` | `46 B` | | `components/Badge/script.js` | `5.9 kB` | | `components/Badge/styles.css` | `1.8 kB` | | `components/Blade/index.js` | `46 B` | | `components/Blade/script.js` | `7.0 kB` | | `components/Blade/styles.css` | `868 B` | | `components/BlockFormControlLayout/index.js` | `46 B` | | `components/BlockFormControlLayout/script.js` | `1.8 kB` | | `components/BlockFormControlLayout/styles.css` | `264 B` | | `components/Button/index.js` | `46 B` | | `components/Button/script.js` | `9.2 kB` | | `components/Button/styles.css` | `7.1 kB` | | `components/Calendar/index.js` | `46 B` | | `components/Calendar/script.js` | `7.4 kB` | | `components/Calendar/styles.css` | `2.1 kB` | | `components/Card/index.js` | `46 B` | | `components/Card/script.js` | `3.6 kB` | | `components/Card/styles.css` | `832 B` | | `components/Checkbox/index.js` | `46 B` | | `components/Checkbox/script.js` | `3.9 kB` | | `components/Checkbox/styles.css` | `1.5 kB` | | `components/Choice/index.js` | `46 B` | | `components/Choice/script.js` | `5.7 kB` | | `components/Choice/styles.css` | `2.2 kB` | | `components/Container/index.js` | `46 B` | | `components/Container/script.js` | `4.9 kB` | | `components/Container/styles.css` | `1.2 kB` | | `components/Dialog/index.js` | `46 B` | | `components/Dialog/script.js` | `9.1 kB` | | `components/Dialog/styles.css` | `1.5 kB` | | `components/Divider/index.js` | `46 B` | | `components/Divider/script.js` | `2.7 kB` | | `components/Divider/styles.css` | `189 B` | | `components/Icon/index.js` | `46 B` | | `components/Icon/script.js` | `3.1 kB` | | `components/Icon/styles.css` | `188 B` | | `components/Image/index.js` | `46 B` | | `components/Image/script.js` | `7.1 kB` | | `components/Image/styles.css` | `756 B` | | `components/ImageUploader/index.js` | `46 B` | | `components/ImageUploader/script.js` | `10.9 kB` | | `components/ImageUploader/styles.css` | `2.1 kB` | | `components/InlineFormControlLayout/index.js` | `46 B` | | `components/InlineFormControlLayout/script.js` | `2.5 kB` | | `components/InlineFormControlLayout/styles.css` | `315 B` | | `components/Input/index.js` | `46 B` | | `components/Input/script.js` | `4.3 kB` | | `components/Input/styles.css` | `2.7 kB` | | `components/Link/index.js` | `46 B` | | `components/Link/script.js` | `3.1 kB` | | `components/Link/styles.css` | `220 B` | | `components/Loading/index.js` | `46 B` | | `components/Loading/script.js` | `2.2 kB` | | `components/Loading/styles.css` | `1.2 kB` | | `components/Menu/index.js` | `46 B` | | `components/Menu/script.js` | `10.7 kB` | | `components/Menu/styles.css` | `4.2 kB` | | `components/Modal/index.js` | `46 B` | | `components/Modal/script.js` | `11.3 kB` | | `components/Modal/styles.css` | `1.1 kB` | | `components/Notice/index.js` | `46 B` | | `components/Notice/script.js` | `4.6 kB` | | `components/Notice/styles.css` | `1.1 kB` | | `components/Pill/index.js` | `46 B` | | `components/PinInput/index.js` | `46 B` | | `components/PinInput/script.js` | `6.3 kB` | | `components/PinInput/styles.css` | `1.5 kB` | | `components/Popover/index.js` | `46 B` | | `components/Popover/script.js` | `10.9 kB` | | `components/Popover/styles.css` | `518 B` | | `components/ProgressBar/index.js` | `46 B` | | `components/ProgressBar/script.js` | `3.5 kB` | | `components/ProgressBar/styles.css` | `1.2 kB` | | `components/ProgressCircle/index.js` | `46 B` | | `components/ProgressCircle/script.js` | `4.0 kB` | | `components/ProgressCircle/styles.css` | `760 B` | | `components/Radio/index.js` | `46 B` | | `components/Radio/script.js` | `3.6 kB` | | `components/Radio/styles.css` | `1.5 kB` | | `components/Row/index.js` | `46 B` | | `components/Row/script.js` | `2.5 kB` | | `components/Row/styles.css` | `663 B` | | `components/SegmentedControl/index.js` | `46 B` | | `components/SegmentedControl/script.js` | `3.2 kB` | | `components/SegmentedControl/styles.css` | `1.4 kB` | | `components/Select/index.js` | `46 B` | | `components/Select/script.js` | `5.3 kB` | | `components/Select/styles.css` | `3.7 kB` | | `components/Skeleton/index.js` | `46 B` | | `components/Skeleton/script.js` | `4.3 kB` | | `components/Skeleton/styles.css` | `978 B` | | `components/StarRating/index.js` | `46 B` | | `components/StarRating/script.js` | `6.2 kB` | | `components/StarRating/styles.css` | `322 B` | | `components/Stepper/index.js` | `46 B` | | `components/Stepper/script.js` | `5.5 kB` | | `components/Stepper/styles.css` | `1.2 kB` | | `components/Text/index.js` | `46 B` | | `components/Text/script.js` | `4.8 kB` | | `components/Text/styles.css` | `4.7 kB` | | `components/Textarea/index.js` | `46 B` | | `components/Textarea/script.js` | `3.8 kB` | | `components/Textarea/styles.css` | `2.1 kB` | | `components/TextButton/index.js` | `46 B` | | `components/TextButton/script.js` | `3.9 kB` | | `components/TextButton/styles.css` | `2.1 kB` | | `components/Theme/index.js` | `46 B` | | `components/Theme/script.js` | `18.6 kB` | | `components/Theme/styles.css` | `264 B` | | `components/Thumbnails/index.js` | `46 B` | | `components/Thumbnails/script.js` | `3.5 kB` | | `components/Thumbnails/styles.css` | `458 B` | | `components/Toast/index.js` | `46 B` | | `components/Toast/script.js` | `9.1 kB` | | `components/Toast/styles.css` | `2.1 kB` | | `components/Toggle/index.js` | `46 B` | | `components/Toggle/script.js` | `3.5 kB` | | `components/Toggle/styles.css` | `2.7 kB` | | `components/TouchCapture/index.js` | `25 B` | | `components/TouchCapture/script.js` | `3.5 kB` | | `components/Transition/index.js` | `25 B` | | `components/Transition/script.js` | `2.5 kB` | | `components/TransitionCollapse/index.js` | `25 B` | | `components/TransitionCollapse/script.js` | `3.1 kB` | | `components/TransitionFadeIn/index.js` | `25 B` | | `components/TransitionFadeIn/script.js` | `2.3 kB` | | `components/TransitionResize/index.js` | `25 B` | | `components/TransitionResize/script.js` | `3.6 kB` | | `components/TransitionResponsive/index.js` | `25 B` | | `components/TransitionResponsive/script.js` | `2.2 kB` | | `components/TransitionSpringLeft/index.js` | `25 B` | | `components/TransitionSpringLeft/script.js` | `2.3 kB` | | `components/TransitionSpringUp/index.js` | `25 B` | | `components/TransitionSpringUp/script.js` | `2.3 kB` | | `components/TransitionStack/index.js` | `25 B` | | `components/TransitionStack/script.js` | `2.3 kB` | | `components/TransitionStaggered/index.js` | `25 B` | | `components/TransitionStaggered/script.js` | `2.5 kB` | | `components/VerticalDivider/index.js` | `46 B` | | `components/VerticalDivider/script.js` | `1.7 kB` | | `components/VerticalDivider/styles.css` | `239 B` | | [`LICENSE`](https://github.com/square/maker/blob/feat/pill-shape/LICENSE) | `552 B` | | [`package.json`](https://github.com/square/maker/blob/feat/pill-shape/package.json) | `5.6 kB` | | [`README.md`](https://github.com/square/maker/blob/feat/pill-shape/README.md) | `1.0 kB` | | `utils/assert.js` | `1.0 kB` | | `utils/constants.js` | `689 B` | | `utils/css-validator.js` | `933 B` | | `utils/debug.js` | `984 B` | | `utils/get-contrast.js` | `1.4 kB` | | `utils/maker-colors.js` | `4.1 kB` | | `utils/RenderFn.js` | `766 B` | | `utils/transitions.js` | `4.2 kB` |
Hidden files | File | Before | After | | --------------------------------------------------- | --------: | -----------------------: | | `components/Accordion/script.js.map` | `21.4 kB` | `21.4 kB` | | `components/Accordion/styles.css.map` | `5.9 kB` | `5.9 kB` | | `components/ActionBar/script.js.map` | `56.0 kB` | `56.0 kB` | | `components/ActionBar/styles.css.map` | `18.9 kB` | `18.9 kB` | | `components/Badge/script.js.map` | `21.6 kB` | `21.6 kB` | | `components/Badge/styles.css.map` | `5.2 kB` | `5.2 kB` | | `components/Blade/script.js.map` | `26.7 kB` | `26.7 kB` | | `components/Blade/styles.css.map` | `5.0 kB` | `5.0 kB` | | `components/BlockFormControlLayout/script.js.map` | `8.5 kB` | `8.5 kB` | | `components/BlockFormControlLayout/styles.css.map` | `770 B` | `770 B` | | `components/Button/script.js.map` | `35.5 kB` | `35.5 kB` | | `components/Button/styles.css.map` | `18.8 kB` | `18.8 kB` | | `components/Calendar/script.js.map` | `28.7 kB` | `28.7 kB` | | `components/Calendar/styles.css.map` | `10.1 kB` | `10.1 kB` | | `components/Card/script.js.map` | `15.3 kB` | `15.3 kB` | | `components/Card/styles.css.map` | `2.9 kB` | `2.9 kB` | | `components/Checkbox/script.js.map` | `18.6 kB` | `18.6 kB` | | `components/Checkbox/styles.css.map` | `3.7 kB` | `3.7 kB` | | `components/Choice/script.js.map` | `25.4 kB` | `25.4 kB` | | `components/Choice/styles.css.map` | `8.0 kB` | `8.0 kB` | | `components/Container/script.js.map` | `19.1 kB` | `19.1 kB` | | `components/Container/styles.css.map` | `5.5 kB` | `5.5 kB` | | `components/Dialog/script.js.map` | `33.2 kB` | `33.2 kB` | | `components/Dialog/styles.css.map` | `9.4 kB` | `9.4 kB` | | `components/Divider/script.js.map` | `12.7 kB` | `12.7 kB` | | `components/Divider/styles.css.map` | `1.7 kB` | `1.7 kB` | | `components/Icon/script.js.map` | `13.7 kB` | `13.7 kB` | | `components/Icon/styles.css.map` | `2.2 kB` | `2.2 kB` | | `components/Image/script.js.map` | `24.0 kB` | `24.0 kB` | | `components/Image/styles.css.map` | `5.5 kB` | `5.5 kB` | | `components/ImageUploader/script.js.map` | `43.6 kB` | `43.6 kB` | | `components/ImageUploader/styles.css.map` | `19.3 kB` | `19.3 kB` | | `components/InlineFormControlLayout/script.js.map` | `12.7 kB` | `12.7 kB` | | `components/InlineFormControlLayout/styles.css.map` | `1.4 kB` | `1.4 kB` | | `components/Input/script.js.map` | `21.1 kB` | `21.1 kB` | | `components/Input/styles.css.map` | `5.7 kB` | `5.7 kB` | | `components/Link/script.js.map` | `14.2 kB` | `14.2 kB` | | `components/Link/styles.css.map` | `3.4 kB` | `3.4 kB` | | `components/Loading/script.js.map` | `11.0 kB` | `11.0 kB` | | `components/Loading/styles.css.map` | `2.3 kB` | `2.3 kB` | | `components/Menu/script.js.map` | `41.3 kB` | `41.3 kB` | | `components/Menu/styles.css.map` | `13.8 kB` | `13.8 kB` | | `components/Modal/script.js.map` | `42.1 kB` | `42.1 kB` | | `components/Modal/styles.css.map` | `16.7 kB` | `16.7 kB` | | `components/Notice/script.js.map` | `18.5 kB` | `18.5 kB` | | `components/Notice/styles.css.map` | `5.1 kB` | `5.1 kB` | | `components/Pill/script.js.map` | `13.3 kB` | 43%↑`19.1 kB` | | `components/Pill/styles.css.map` | `2.3 kB` | 233%↑`7.7 kB` | | `components/PinInput/script.js.map` | `24.5 kB` | `24.5 kB` | | `components/PinInput/styles.css.map` | `7.9 kB` | `7.9 kB` | | `components/Popover/script.js.map` | `38.8 kB` | `38.8 kB` | | `components/Popover/styles.css.map` | `7.0 kB` | `7.0 kB` | | `components/ProgressBar/script.js.map` | `15.6 kB` | `15.6 kB` | | `components/ProgressBar/styles.css.map` | `3.4 kB` | `3.4 kB` | | `components/ProgressCircle/script.js.map` | `17.4 kB` | `17.4 kB` | | `components/ProgressCircle/styles.css.map` | `4.2 kB` | `4.2 kB` | | `components/Radio/script.js.map` | `17.5 kB` | `17.5 kB` | | `components/Radio/styles.css.map` | `3.6 kB` | `3.6 kB` | | `components/Row/script.js.map` | `11.8 kB` | `11.8 kB` | | `components/Row/styles.css.map` | `2.0 kB` | `2.0 kB` | | `components/SegmentedControl/script.js.map` | `14.8 kB` | `14.8 kB` | | `components/SegmentedControl/styles.css.map` | `3.9 kB` | `3.9 kB` | | `components/Select/script.js.map` | `24.2 kB` | `24.2 kB` | | `components/Select/styles.css.map` | `6.8 kB` | `6.8 kB` | | `components/Skeleton/script.js.map` | `17.8 kB` | `17.8 kB` | | `components/Skeleton/styles.css.map` | `3.0 kB` | `3.0 kB` | | `components/StarRating/script.js.map` | `23.6 kB` | `23.6 kB` | | `components/StarRating/styles.css.map` | `6.8 kB` | `6.8 kB` | | `components/Stepper/script.js.map` | `21.4 kB` | `21.4 kB` | | `components/Stepper/styles.css.map` | `6.6 kB` | `6.6 kB` | | `components/Text/script.js.map` | `22.4 kB` | `22.4 kB` | | `components/Text/styles.css.map` | `11.6 kB` | `11.6 kB` | | `components/Textarea/script.js.map` | `18.4 kB` | `18.4 kB` | | `components/Textarea/styles.css.map` | `4.3 kB` | `4.3 kB` | | `components/TextButton/script.js.map` | `18.1 kB` | `18.1 kB` | | `components/TextButton/styles.css.map` | `5.2 kB` | `5.2 kB` | | `components/Theme/script.js.map` | `58.3 kB` | `58.3 kB` | | `components/Theme/styles.css.map` | `3.9 kB` | `3.9 kB` | | `components/Thumbnails/script.js.map` | `15.6 kB` | `15.6 kB` | | `components/Thumbnails/styles.css.map` | `3.0 kB` | `3.0 kB` | | `components/Toast/script.js.map` | `38.7 kB` | `38.7 kB` | | `components/Toast/styles.css.map` | `14.6 kB` | `14.6 kB` | | `components/Toggle/script.js.map` | `18.3 kB` | `18.3 kB` | | `components/Toggle/styles.css.map` | `4.5 kB` | `4.5 kB` | | `components/TouchCapture/script.js.map` | `12.0 kB` | `12.0 kB` | | `components/Transition/script.js.map` | `10.8 kB` | `10.8 kB` | | `components/TransitionCollapse/script.js.map` | `13.4 kB` | `13.4 kB` | | `components/TransitionFadeIn/script.js.map` | `10.5 kB` | `10.5 kB` | | `components/TransitionResize/script.js.map` | `14.4 kB` | `14.4 kB` | | `components/TransitionResponsive/script.js.map` | `10.3 kB` | `10.3 kB` | | `components/TransitionSpringLeft/script.js.map` | `10.6 kB` | `10.6 kB` | | `components/TransitionSpringUp/script.js.map` | `10.5 kB` | `10.5 kB` | | `components/TransitionStack/script.js.map` | `10.2 kB` | `10.2 kB` | | `components/TransitionStaggered/script.js.map` | `11.1 kB` | `11.1 kB` | | `components/VerticalDivider/script.js.map` | `8.9 kB` | `8.9 kB` | | `components/VerticalDivider/styles.css.map` | `760 B` | `760 B` | | `utils/assert.js.map` | `3.9 kB` | `3.9 kB` | | `utils/constants.js.map` | `2.5 kB` | `2.5 kB` | | `utils/css-validator.js.map` | `3.3 kB` | `3.3 kB` | | `utils/debug.js.map` | `3.4 kB` | `3.4 kB` | | `utils/get-contrast.js.map` | `5.7 kB` | `5.7 kB` | | `utils/maker-colors.js.map` | `15.6 kB` | `15.6 kB` | | `utils/RenderFn.js.map` | `2.8 kB` | `2.8 kB` | | `utils/transitions.js.map` | `16.9 kB` | `16.9 kB` |

🤖 This report was automatically generated by pkg-size-action

privatenumber commented 1 year ago

Just realized the Pill component will no longer be a pill 😫

berwyn commented 1 year ago

There's a couple quirks like the gaps that I'm trying to iron out, the bottom of the right endcap on the ribbons with an outline pattern has all sorts of weirdness because of how rounding + clip-path interact and it really bugs me :/

I was also torn on making the MPill not a pill, but we're trying to surface different shapes of small informational items that are placed inline with their content and MPill seemed to fit the bill most. I did debate introducing an MChip that sort of matches the role of Material Design chips but felt like its role would overlap a bit too much with MPill :/

berwyn commented 1 year ago

Going to put out a call for help here. As Lauren noted, there is sometimes a sliver of a gap between the core element and the psudo-element. I have tried everything I can think of to ensure this never occurs, up to rewriting the component to use a flow wrapper and making the two endcaps discrete elements in the flex row, ensuring the gap and other positioning properties are set to 0.

As far as I can tell, the gap shows up when the elements are laid out such that the border between the two elements falls onto a fractional pixel, leading the layout engine to align the start of the endcap with the next full pixel, and I have no idea how I can fix this short of rebuilding the whole thing to use a custom clip-path on the entire capsule for each potential shape combination, or some absolute nonsense with an embedded SVG with various <g> elements that can be set as the background property on the pseudo-elements :/

github-actions[bot] commented 1 year ago

:tada: This PR is included in version 16.6.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: