sidenav: Fix props leaking to DOM on Pagination component by lachlanjc · Pull Request #2057 · system-ui/theme-ui

lachlanjc · 2021-12-30T05:50:52Z

Closes #1471.

On production docs:

On this branch:

Looking at our usage of this component, I can’t see any breaking changes from not spreading these props, but please flag if you are aware of any!

📦 Published PR as canary version: 0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0

✨ Test out this PR locally via:

npm install @theme-ui/color-modes@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/color@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/components@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/core@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/css@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/custom-properties@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/editor@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install gatsby-plugin-theme-ui@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install gatsby-theme-style-guide@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install gatsby-theme-ui-layout@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/match-media@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/mdx@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/parse-props@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/preset-base@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/preset-bootstrap@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/preset-bulma@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/preset-dark@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/preset-deep@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/preset-funk@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/preset-future@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/preset-polaris@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/preset-roboto@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/preset-sketchy@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/preset-swiss@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/preset-system@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/preset-tailwind@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/preset-tosh@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/presets@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/prism@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/sidenav@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/style-guide@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/tailwind@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/theme-provider@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install theme-ui@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
npm install @theme-ui/typography@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
# or 
yarn add @theme-ui/color-modes@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/color@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/components@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/core@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/css@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/custom-properties@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/editor@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add gatsby-plugin-theme-ui@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add gatsby-theme-style-guide@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add gatsby-theme-ui-layout@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/match-media@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/mdx@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/parse-props@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/preset-base@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/preset-bootstrap@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/preset-bulma@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/preset-dark@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/preset-deep@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/preset-funk@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/preset-future@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/preset-polaris@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/preset-roboto@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/preset-sketchy@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/preset-swiss@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/preset-system@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/preset-tailwind@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/preset-tosh@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/presets@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/prism@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/sidenav@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/style-guide@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/tailwind@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/theme-provider@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add theme-ui@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0
yarn add @theme-ui/typography@0.13.2--canary.2057.053c111b329c4bf405fcc03dc304d334b3ece53e.0

vercel · 2021-12-30T05:50:54Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/9x2oWr7vXwedAdZVXwuFGBxHMbxV
✅ Preview: https://theme-ui-git-lachlanjc-pagination-leak-systemui.vercel.app

hasparus · 2021-12-30T13:37:31Z

Technically, this package is user-facing. Some of those 290 weekly downloads could pass style className or css prop to that div. Or even an id.

I'm not very opinionated about this, but shouldn't we instead fix it in the docs package? The may be something I'm missing, I'm not very familiar with this part of the codebase.

Tip: If you add a section starting from ### Release notes to your post, the bot will add it to changelog in GitHub Releases.

lachlanjc · 2021-12-30T22:52:56Z

That's true. Will explore. Thanks for the tip!

lachlanjc · 2022-01-08T23:24:02Z

@hasparus made this non-breaking!

hasparus · 2022-03-21T12:54:09Z

🚀 PR was released in v0.14.0 🚀

sidenav: Fix props leaking to DOM on Pagination component

f920864

lachlanjc added the affects-docs Changes affect documentation, but not only documentation label Dec 30, 2021

lachlanjc requested a review from hasparus as a code owner December 30, 2021 05:50

Remove sx prop

ae5a9dd

vercel Bot deployed to Preview December 30, 2021 06:10 View deployment

Make change non-breaking

49a98e6

vercel Bot deployed to Preview January 8, 2022 23:23 View deployment

lachlanjc mentioned this pull request Jan 13, 2022

Release v0.13.2 #2075

Merged

hasparus merged commit a0c2d6b into develop Jan 14, 2022

hasparus deleted the lachlanjc-pagination-leak branch January 14, 2022 12:27

hasparus added the prerelease This change is available in a prerelease. label Jan 15, 2022

This was referenced Jan 15, 2022

chore(deps): bump shelljs from 0.8.4 to 0.8.5 #2078

Merged

fix(docs): Update recommendations in Keyframes doc #2079

Merged

This was referenced Jan 29, 2022

feat(color-modes): Warn when theme color keys have leading/trailing whitespace #2099

Merged

feat(custom-properties): Warn in development on invalid theme keys #2080

Merged

feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082

Merged

This was referenced Feb 13, 2022

chore(deps): bump follow-redirects from 1.14.7 to 1.14.8 #2132

Merged

fix(style-guide): use inherited fontSize for ColorPalette color labels #2135

Merged

This was referenced Feb 20, 2022

chore(deps): bump next from 12.0.9 to 12.1.0 in /examples/next #2136

Merged

fix(gatsby-plugin-theme-ui,docs): Dependency Updates #2138

Merged

chore(deps): bump prismjs from 1.26.0 to 1.27.0 #2141

Merged

This was referenced Mar 1, 2022

chore(deps): bump @emotion/styled from 11.6.0 to 11.8.1 #2155

Merged

chore(deps-dev): bump @babel/register from 7.16.0 to 7.17.0 #2152

Merged

This was referenced Mar 16, 2022

chore(deps): bump lodash-es from 4.17.15 to 4.17.21 #2167

Merged

fix(docs): make layout more consistent #2168

Merged

fix(color-modes): properly use print mode even if its name is initialColorModeName #2090

Merged

hasparus added released This issue/pull request has been released. and removed prerelease This change is available in a prerelease. labels Mar 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

sidenav: Fix props leaking to DOM on Pagination component#2057

sidenav: Fix props leaking to DOM on Pagination component#2057
hasparus merged 3 commits into
developfrom
lachlanjc-pagination-leak

lachlanjc commented Dec 30, 2021 •

edited by hasparus

Loading

Uh oh!

vercel Bot commented Dec 30, 2021 •

edited

Loading

Uh oh!

hasparus commented Dec 30, 2021

Uh oh!

lachlanjc commented Dec 30, 2021

Uh oh!

lachlanjc commented Jan 8, 2022

Uh oh!

hasparus commented Mar 21, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

lachlanjc commented Dec 30, 2021 • edited by hasparus Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Dec 30, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hasparus commented Dec 30, 2021

Uh oh!

lachlanjc commented Dec 30, 2021

Uh oh!

lachlanjc commented Jan 8, 2022

Uh oh!

hasparus commented Mar 21, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

lachlanjc commented Dec 30, 2021 •

edited by hasparus

Loading

vercel Bot commented Dec 30, 2021 •

edited

Loading