sidenav: Fix props leaking to DOM on Pagination component

[lachlanjc]

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]

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]

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]

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

[lachlanjc]

@hasparus made this non-breaking!

[hasparus]

🚀 PR was released in v0.14.0 🚀