search

square / maker

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

fix(input)!: focus states by dropping support for UC & Opera Mini #256

Closed pretzelhammer closed 2 years ago

pretzelhammer commented 2 years ago

Describe the problem this PR addresses

https://github.com/square/maker/issues/226#issuecomment-1071061425

Describe the changes in this PR

Drops support for UC Browser 12.12 and Opera Mini browsers so that our :focus-within CSS styles within the MInput component work again.

Other information

This has been broken since v4.1.0 when this line was released 🤦

Migration Guide: 7.x -> 8.x

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/focus-inputs/#/

github-actions[bot] commented 2 years ago

📊 Package size report   -0.64%↓

File Before After
components/ActionBar/script.js 14.1 kB -0.95%↓14.0 kB
components/ActionBar/styles.css 5.4 kB -0.11%↓5.4 kB
components/Blade/script.js 6.3 kB -2.19%↓6.2 kB
components/Blade/styles.css 756 B -1.85%↓742 B
components/Button/script.js 6.0 kB -1.97%↓5.9 kB
components/Button/styles.css 3.6 kB -0.28%↓3.6 kB
components/Calendar/script.js 7.5 kB -2.43%↓7.3 kB
components/Calendar/styles.css 2.5 kB -2.34%↓2.4 kB
components/Card/script.js 1.7 kB -2.57%↓1.7 kB
components/Checkbox/script.js 3.8 kB -1.32%↓3.7 kB
components/Checkbox/styles.css 1.7 kB -2.73%↓1.7 kB
components/Choice/script.js 4.3 kB -2.74%↓4.2 kB
components/Choice/styles.css 1.3 kB -1.23%↓1.3 kB
components/Container/script.js 4.3 kB -2.31%↓4.2 kB
components/Dialog/script.js 7.0 kB -1.99%↓6.9 kB
components/Dialog/styles.css 1.2 kB -0.82%↓1.2 kB
components/Divider/script.js 1.7 kB -2.6%↓1.7 kB
components/Divider/styles.css 148 B -4.05%↓142 B
components/Heading/script.js 2.6 kB -1.27%↓2.6 kB
components/Image/script.js 3.4 kB -1.96%↓3.3 kB
components/Image/styles.css 254 B -18.1%↓208 B
components/ImageUploader/script.js 11.9 kB -1.36%↓11.7 kB
components/ImageUploader/styles.css 2.5 kB -3.41%↓2.4 kB
components/Input/script.js 4.3 kB -1.17%↓4.2 kB
components/Input/styles.css 3.1 kB -3.6%↓3.0 kB
components/Loading/script.js 2.3 kB -1.98%↓2.2 kB
components/Modal/script.js 9.3 kB -1.53%↓9.2 kB
components/Modal/styles.css 1.0 kB -1.4%↓987 B
components/Notice/script.js 4.3 kB -2.9%↓4.2 kB
components/PinInput/script.js 4.5 kB -0.64%↓4.5 kB
components/PinInput/styles.css 1.2 kB -0.41%↓1.2 kB
components/Popover/script.js 10.1 kB -1.44%↓9.9 kB
components/Popover/styles.css 401 B -1.5%↓395 B
components/ProgressBar/script.js 3.0 kB -2.89%↓2.9 kB
components/Radio/script.js 3.5 kB -1.44%↓3.4 kB
components/Radio/styles.css 1.6 kB -3.58%↓1.6 kB
components/SegmentedControl/script.js 3.1 kB -1.65%↓3.1 kB
components/SegmentedControl/styles.css 813 B -2.34%↓794 B
components/Select/script.js 5.1 kB -1.83%↓5.0 kB
components/Select/styles.css 2.5 kB -3.98%↓2.4 kB
components/Skeleton/script.js 4.4 kB -1.1%↓4.3 kB
components/StarRating/script.js 6.0 kB -1.51%↓5.9 kB
components/Stepper/script.js 3.8 kB -2.84%↓3.7 kB
components/Text/script.js 2.1 kB -1.54%↓2.1 kB
components/Textarea/script.js 3.7 kB -1.31%↓3.6 kB
components/Textarea/styles.css 2.2 kB -4.7%↓2.1 kB
components/TextButton/script.js 3.6 kB -3.15%↓3.4 kB
components/TextButton/styles.css 1.4 kB -0.69%↓1.4 kB
components/Theme/script.js 2.3 kB -3.32%↓2.2 kB
components/Toggle/script.js 3.8 kB -1.32%↓3.7 kB
components/Toggle/styles.css 3.6 kB -1.57%↓3.5 kB
components/TouchCapture/script.js 3.6 kB -0.98%↓3.5 kB
components/TransitionFadeIn/script.js 2.3 kB -2.93%↓2.3 kB
components/TransitionResize/script.js 3.7 kB -3.05%↓3.6 kB
components/TransitionSpringLeft/script.js 2.3 kB -2.89%↓2.3 kB
components/TransitionSpringUp/script.js 2.3 kB -2.91%↓2.3 kB
components/TransitionStaggered/script.js 2.6 kB -2.31%↓2.5 kB
utils/assert.js 1.1 kB -2.38%↓1.1 kB
utils/BlockFormControlLayout/script.js 1.8 kB -2.45%↓1.8 kB
utils/BlockFormControlLayout/styles.css 333 B -3.9%↓320 B
utils/debug.js 1.1 kB -3.43%↓1.0 kB
utils/get-contrast.js 1.2 kB -5.26%↓1.2 kB
utils/InlineFormControlLayout/script.js 2.5 kB -3.67%↓2.4 kB
utils/Transition/script.js 2.5 kB -2.71%↓2.4 kB
utils/TransitionResponsive/script.js 2.3 kB -2.07%↓2.2 kB
utils/transitions.js 4.7 kB -10.7%↓4.2 kB
Total (Includes all files) 1.2 MB -0.64%↓1.2 MB
Tarball size 219.6 kB -0.06%↓219.5 kB
Unchanged files | File | Size | | -------------------------------------------------------------------------------- | -------: | | `components/ActionBar/index.js` | `46 B` | | `components/Blade/index.js` | `46 B` | | `components/Button/index.js` | `46 B` | | `components/Calendar/index.js` | `46 B` | | `components/Card/index.js` | `46 B` | | `components/Card/styles.css` | `154 B` | | `components/Checkbox/index.js` | `46 B` | | `components/Choice/index.js` | `46 B` | | `components/Container/index.js` | `46 B` | | `components/Container/styles.css` | `1.0 kB` | | `components/Dialog/index.js` | `46 B` | | `components/Divider/index.js` | `46 B` | | `components/Heading/index.js` | `46 B` | | `components/Heading/styles.css` | `3.1 kB` | | `components/Image/index.js` | `46 B` | | `components/ImageUploader/index.js` | `46 B` | | `components/Input/index.js` | `46 B` | | `components/Loading/index.js` | `46 B` | | `components/Loading/styles.css` | `1.2 kB` | | `components/Modal/index.js` | `46 B` | | `components/Notice/index.js` | `46 B` | | `components/Notice/styles.css` | `1.0 kB` | | `components/PinInput/index.js` | `46 B` | | `components/Popover/index.js` | `46 B` | | `components/ProgressBar/index.js` | `46 B` | | `components/ProgressBar/styles.css` | `1.1 kB` | | `components/Radio/index.js` | `46 B` | | `components/SegmentedControl/index.js` | `46 B` | | `components/Select/index.js` | `46 B` | | `components/Skeleton/index.js` | `46 B` | | `components/Skeleton/styles.css` | `817 B` | | `components/StarRating/index.js` | `46 B` | | `components/StarRating/styles.css` | `322 B` | | `components/Stepper/index.js` | `46 B` | | `components/Stepper/styles.css` | `384 B` | | `components/Text/index.js` | `46 B` | | `components/Text/styles.css` | `1.0 kB` | | `components/Textarea/index.js` | `46 B` | | `components/TextButton/index.js` | `46 B` | | `components/Theme/index.js` | `25 B` | | `components/Toggle/index.js` | `46 B` | | `components/TouchCapture/index.js` | `25 B` | | `components/TransitionFadeIn/index.js` | `25 B` | | `components/TransitionResize/index.js` | `25 B` | | `components/TransitionSpringLeft/index.js` | `25 B` | | `components/TransitionSpringUp/index.js` | `25 B` | | `components/TransitionStaggered/index.js` | `25 B` | | [`LICENSE`](https://github.com/square/maker/blob/focus-inputs/LICENSE) | `552 B` | | [`package.json`](https://github.com/square/maker/blob/focus-inputs/package.json) | `5.0 kB` | | [`README.md`](https://github.com/square/maker/blob/focus-inputs/README.md) | `327 B` | | `utils/BlockFormControlLayout/index.js` | `46 B` | | `utils/InlineFormControlLayout/index.js` | `46 B` | | `utils/InlineFormControlLayout/styles.css` | `355 B` | | `utils/Transition/index.js` | `25 B` | | `utils/TransitionResponsive/index.js` | `25 B` |
Hidden files | File | Before | After | | ----------------------------------------------- | --------: | --------------------------: | | `components/ActionBar/script.js.map` | `54.1 kB` | -0.2%↓`54.0 kB` | | `components/ActionBar/styles.css.map` | `17.5 kB` | -0.01%↓`17.5 kB` | | `components/Blade/script.js.map` | `23.4 kB` | -0.38%↓`23.3 kB` | | `components/Blade/styles.css.map` | `3.9 kB` | `3.9 kB` | | `components/Button/script.js.map` | `23.9 kB` | -0.39%↓`23.8 kB` | | `components/Button/styles.css.map` | `10.2 kB` | `10.2 kB` | | `components/Calendar/script.js.map` | `29.0 kB` | -0.34%↓`28.9 kB` | | `components/Calendar/styles.css.map` | `10.4 kB` | `10.4 kB` | | `components/Card/script.js.map` | `8.8 kB` | -0.43%↓`8.8 kB` | | `components/Card/styles.css.map` | `668 B` | `668 B` | | `components/Checkbox/script.js.map` | `18.4 kB` | -0.19%↓`18.4 kB` | | `components/Checkbox/styles.css.map` | `3.9 kB` | -0.15%↓`3.9 kB` | | `components/Choice/script.js.map` | `19.1 kB` | -0.47%↓`19.0 kB` | | `components/Choice/styles.css.map` | `5.7 kB` | `5.7 kB` | | `components/Container/script.js.map` | `17.0 kB` | -0.5%↓`16.9 kB` | | `components/Container/styles.css.map` | `4.6 kB` | `4.6 kB` | | `components/Dialog/script.js.map` | `25.7 kB` | -0.35%↓`25.6 kB` | | `components/Dialog/styles.css.map` | `6.0 kB` | `6.0 kB` | | `components/Divider/script.js.map` | `8.8 kB` | -0.44%↓`8.8 kB` | | `components/Divider/styles.css.map` | `704 B` | `704 B` | | `components/Heading/script.js.map` | `13.5 kB` | -0.29%↓`13.4 kB` | | `components/Heading/styles.css.map` | `5.5 kB` | `5.5 kB` | | `components/Image/script.js.map` | `14.1 kB` | -0.28%↓`14.1 kB` | | `components/Image/styles.css.map` | `2.9 kB` | `2.9 kB` | | `components/ImageUploader/script.js.map` | `46.3 kB` | -0.25%↓`46.2 kB` | | `components/ImageUploader/styles.css.map` | `20.5 kB` | `20.5 kB` | | `components/Input/script.js.map` | `21.1 kB` | -0.17%↓`21.1 kB` | | `components/Input/styles.css.map` | `6.1 kB` | `6.1 kB` | | `components/Loading/script.js.map` | `11.1 kB` | -0.33%↓`11.0 kB` | | `components/Loading/styles.css.map` | `2.3 kB` | `2.3 kB` | | `components/Modal/script.js.map` | `33.3 kB` | -0.26%↓`33.2 kB` | | `components/Modal/styles.css.map` | `9.8 kB` | `9.8 kB` | | `components/Notice/script.js.map` | `17.4 kB` | -0.54%↓`17.4 kB` | | `components/Notice/styles.css.map` | `3.8 kB` | `3.8 kB` | | `components/PinInput/script.js.map` | `18.5 kB` | -0.18%↓`18.4 kB` | | `components/PinInput/styles.css.map` | `7.0 kB` | `7.0 kB` | | `components/Popover/script.js.map` | `35.1 kB` | -0.26%↓`35.0 kB` | | `components/Popover/styles.css.map` | `5.7 kB` | `5.7 kB` | | `components/ProgressBar/script.js.map` | `13.3 kB` | -0.68%↓`13.3 kB` | | `components/ProgressBar/styles.css.map` | `2.6 kB` | `2.6 kB` | | `components/Radio/script.js.map` | `17.2 kB` | -0.2%↓`17.1 kB` | | `components/Radio/styles.css.map` | `3.7 kB` | `3.7 kB` | | `components/SegmentedControl/script.js.map` | `14.1 kB` | -0.25%↓`14.1 kB` | | `components/SegmentedControl/styles.css.map` | `3.3 kB` | -0.03%↓`3.3 kB` | | `components/Select/script.js.map` | `23.7 kB` | -0.39%↓`23.6 kB` | | `components/Select/styles.css.map` | `6.5 kB` | `6.5 kB` | | `components/Skeleton/script.js.map` | `17.7 kB` | -0.18%↓`17.6 kB` | | `components/Skeleton/styles.css.map` | `2.9 kB` | `2.9 kB` | | `components/StarRating/script.js.map` | `22.4 kB` | -0.4%↓`22.3 kB` | | `components/StarRating/styles.css.map` | `6.3 kB` | `6.3 kB` | | `components/Stepper/script.js.map` | `16.1 kB` | -0.58%↓`16.0 kB` | | `components/Stepper/styles.css.map` | `3.3 kB` | `3.3 kB` | | `components/Text/script.js.map` | `10.4 kB` | -0.38%↓`10.3 kB` | | `components/Text/styles.css.map` | `2.7 kB` | `2.7 kB` | | `components/Textarea/script.js.map` | `18.5 kB` | -0.22%↓`18.4 kB` | | `components/Textarea/styles.css.map` | `4.8 kB` | `4.8 kB` | | `components/TextButton/script.js.map` | `16.3 kB` | -0.57%↓`16.2 kB` | | `components/TextButton/styles.css.map` | `4.0 kB` | `4.0 kB` | | `components/Theme/script.js.map` | `10.8 kB` | -0.85%↓`10.7 kB` | | `components/Toggle/script.js.map` | `19.6 kB` | -0.18%↓`19.6 kB` | | `components/Toggle/styles.css.map` | `5.4 kB` | `5.4 kB` | | `components/TouchCapture/script.js.map` | `12.0 kB` | -0.33%↓`12.0 kB` | | `components/TransitionFadeIn/script.js.map` | `10.5 kB` | -0.38%↓`10.5 kB` | | `components/TransitionResize/script.js.map` | `14.5 kB` | -0.64%↓`14.4 kB` | | `components/TransitionSpringLeft/script.js.map` | `10.6 kB` | -0.38%↓`10.5 kB` | | `components/TransitionSpringUp/script.js.map` | `10.5 kB` | -0.38%↓`10.5 kB` | | `components/TransitionStaggered/script.js.map` | `11.1 kB` | -0.35%↓`11.1 kB` | | `utils/assert.js.map` | `4.2 kB` | -0.9%↓`4.2 kB` | | `utils/BlockFormControlLayout/script.js.map` | `8.5 kB` | -0.52%↓`8.4 kB` | | `utils/BlockFormControlLayout/styles.css.map` | `902 B` | `902 B` | | `utils/debug.js.map` | `3.6 kB` | -1.04%↓`3.6 kB` | | `utils/get-contrast.js.map` | `5.0 kB` | -1.73%↓`4.9 kB` | | `utils/InlineFormControlLayout/script.js.map` | `11.9 kB` | -0.71%↓`11.8 kB` | | `utils/InlineFormControlLayout/styles.css.map` | `1.2 kB` | `1.2 kB` | | `utils/Transition/script.js.map` | `10.8 kB` | -0.37%↓`10.7 kB` | | `utils/TransitionResponsive/script.js.map` | `10.3 kB` | -0.39%↓`10.3 kB` | | `utils/transitions.js.map` | `16.9 kB` | -0.56%↓`16.8 kB` |

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

landondurnan commented 2 years ago

@pretzelhammer Have we considered switching the focus-within to focus?

github-actions[bot] commented 2 years ago

Styleguide deployed to https://square.github.io/maker/styleguide/focus-inputs/#/

github-actions[bot] commented 2 years ago

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

The release is available on:

Your semantic-release bot :package::rocket:

pretzelhammer commented 2 years ago

@landondurnan we could maybe switch focus-within and use a combination of JS and focus to get a similar-ish effect but I'd rather just drop support for browsers that we never really meant to support in the first place.

According to our pubsite usage stats that Lokesh compiled a while back 0% of traffic comes from UC Browser and only 0.5% of traffic comes from Opera (and that's for all Opera versions, Mini (for mobile devices) and regular (for Desktop)). For reference, we dropped support for IE when it was 3% of our pubsite traffic.

Also, I was part of the discussion when we added the > 0.5% figure to our browserlist and the main reason it was added was to support older Chrome versions. We get significantly more pubsite traffic from older Chromes (more than 2 major versions old) than we get from UC and Opera combined. Older Chrome versions account for something like ~10% of traffic, and like I said before, UC and Opera combined are 0.5% (with 0% from UC and Opera usage going down every year).