feat(pagination): add forwardedRef for pagination container div #10239

kevinsperrine · 2021-12-07T00:44:28Z

This PR adds a forwardedRef prop to the Pagination component. This allows us to check the size of the component and adjust styles as necessary in different circumstances.

Changelog

New

add forwardedRef prop to Pagination component. This allows us to check the getBoundingClientRect of the pagination container and change classes or styles as necessary. We can achieve this via wrapping the Pagination with an extra div, but it would be nicer to avoid the extra markup.

Testing / Reviewing

Pagination should be unaffected in stories and the new test should pass confirming the presence of the ref.

netlify · 2021-12-07T00:44:33Z

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: aa3921c

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/61f826d042c924000890b0aa

😎 Browse the preview: https://deploy-preview-10239--carbon-react-next.netlify.app

netlify · 2021-12-07T01:06:09Z

❌ Deploy Preview for carbon-components-react failed.
Built without sensitive environment variables

🔨 Explore the source changes: 23c4d8f

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/61aeae6e9ba1aa0007dffe1e

netlify · 2021-12-07T01:09:45Z

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 23c4d8f

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/61aeae6e35001d0008b20cf8

😎 Browse the preview: https://deploy-preview-10239--carbon-elements.netlify.app

netlify · 2021-12-07T01:24:58Z

❌ Deploy Preview for carbon-components-react failed.
Built without sensitive environment variables

🔨 Explore the source changes: ffe816e

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/61aeb1f1a70ec70007800c64

netlify · 2021-12-07T01:36:43Z

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: ffe816e

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/61aeb1f14139e100070853d2

😎 Browse the preview: https://deploy-preview-10239--carbon-elements.netlify.app

netlify · 2021-12-07T01:58:18Z

❌ Deploy Preview for carbon-components-react failed.
Built without sensitive environment variables

🔨 Explore the source changes: 3f477bb

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/61aeb534eabf9e0007277fa4

netlify · 2021-12-07T01:58:18Z

✔️ Deploy Preview for carbon-components-react ready!

🔨 Explore the source changes: aa3921c

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/61f826d0f390b700079b3851

😎 Browse the preview: https://deploy-preview-10239--carbon-components-react.netlify.app

netlify · 2021-12-07T02:02:34Z

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: aa3921c

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/61f826d042c924000890b0a8

😎 Browse the preview: https://deploy-preview-10239--carbon-elements.netlify.app

jnm2377 · 2021-12-13T22:12:04Z

packages/react/src/components/Pagination/Pagination.js

@@ -312,7 +321,7 @@ export default class Pagination extends Component {
    const pageSizes = mapPageSizesToObject(_pageSizes);

    return (
-      <div className={classNames} {...other}>
+      <div className={classNames} ref={forwardedRef} {...other}>


Hmm.. thoughts on doing something like rest.ref rather than adding a whole new prop for it in v10, and having to deprecate it in v11 when it's no longer needed?
DatePicker class component did this with inline to not have to introduce it as a prop:

carbon/packages/react/src/components/DatePicker/DatePicker.js

Line 340 in ddaadaa

inline: rest.inline ?? false,

Good call. That is definitely cleaner. I will adjust.

jnm2377 · 2022-01-10T17:18:19Z

hi @kevinsperrine just wanted to check in on this and see if it's something you're still working on?

kevinsperrine · 2022-01-10T17:23:43Z

hi @kevinsperrine just wanted to check in on this and see if it's something you're still working on?

Hi @jnm2377, Sorry, I forgot about this after the holidays. Yes', I'll adjust and push up the changes today.

### Description This upgrades the project to use Node 18. **Note:** OpenSSL 3.0 is included as of Node 17, which can cause errors in packages within the application that haven't yet been upgraded. To prevent this, the option `--openssl-legacy-provider` is used with certain script commands. In Carbon for IBM.com, Webpack 4 is the main breaking point. Once it is upgraded to Webpack 5 the errors should be resolved. If not, a further audit/upgrade of dependencies will be required. Read more about the OpenSSL upgrade [here](https://medium.com/the-node-js-collection/node-js-17-is-here-8dba1e14e382). ### Changelog **New** - {{new thing}} **Changed** - project now uses Node 18 - changed various import paths to use `internal/vendor` - upgrade various deps as required by Node 18 **Removed** - unneeded test assertions and Codesandbox examples

…-design-system#10253) * chore(deps): upgrade Node 18 (carbon-design-system#10239) This upgrades the project to use Node 18. **Note:** OpenSSL 3.0 is included as of Node 17, which can cause errors in packages within the application that haven't yet been upgraded. To prevent this, the option `--openssl-legacy-provider` is used with certain script commands. In Carbon for IBM.com, Webpack 4 is the main breaking point. Once it is upgraded to Webpack 5 the errors should be resolved. If not, a further audit/upgrade of dependencies will be required. Read more about the OpenSSL upgrade [here](https://medium.com/the-node-js-collection/node-js-17-is-here-8dba1e14e382). **New** - {{new thing}} **Changed** - project now uses Node 18 - changed various import paths to use `internal/vendor` - upgrade various deps as required by Node 18 **Removed** - unneeded test assertions and Codesandbox examples         * fix(filter-panel): missing modal imports (carbon-design-system#10204) ### Related Ticket(s) carbon-design-system#10200 ### Description in small breakpoints the modal header and close button were missing imports ### Changelog **New** - added modal imports         * chore(storybook): update cwc urls (carbon-design-system#10207) Update Storybook URLs to monorepo `carbon-web-components` package **New** - {{new thing}} **Changed** - change Storybook repo urls to monorepo package **Removed** - unused deploy script         * fix(rolloup): point to cwc internal vendor components for custom babel plugin (carbon-design-system#10209) N/A Edit roll up config for custom babel plugin that prevents the `customElements.define()` from happening for the cwc components - look for the internal vendor carbon web component components instead to prevent the custom registry error **Changed** - point to cwc internal vendor components for custom babel plugin         * chore(storybook): fix storybook:react commands * chore(merge): resolve conflicts * chore(snapshots): fixes updateSnapshot script; new snapshots generated with new prefix --------- Co-authored-by: Ariella Gilmore <[email protected]> Co-authored-by: Anna Wen <[email protected]>

feat(pagination): add forwardedRef for pagination container div

23c4d8f

kevinsperrine requested a review from a team as a code owner December 7, 2021 00:44

kevinsperrine requested review from aledavila and jnm2377 December 7, 2021 00:44

feat(Pagination): forwardRef to pagination next, too

ffe816e

fix(pagination): remove Element in forwardedRef proptype definition

3f477bb

feat(pagination): update public api snapshot

711e6ac

kevinsperrine requested a review from a team as a code owner December 7, 2021 03:04

Merge branch 'main' into ksp-forward-ref-pagination

f22c9c5

jnm2377 reviewed Dec 13, 2021

View reviewed changes

kevinsperrine added 2 commits January 11, 2022 12:55

Merge branch 'main' into ksp-forward-ref-pagination

d8d1c09

feat: pass forwardedRef to pagination

2e2ad3e

jnm2377 approved these changes Jan 14, 2022

View reviewed changes

jnm2377 added the status: one more review 👀 label Jan 14, 2022

Merge branch 'main' into ksp-forward-ref-pagination

d6e8989

aledavila approved these changes Jan 26, 2022

View reviewed changes

Alessandra Davila and others added 2 commits January 26, 2022 10:21

Merge branch 'main' into ksp-forward-ref-pagination

38daf82

Merge branch 'main' into ksp-forward-ref-pagination

aa3921c

jnm2377 enabled auto-merge (squash) January 31, 2022 18:13

jnm2377 removed the status: one more review 👀 label Jan 31, 2022

jnm2377 added the status: ready to merge 🎉 label Jan 31, 2022

jnm2377 merged commit 430693f into carbon-design-system:main Jan 31, 2022

jnm2377 mentioned this pull request Feb 10, 2022

v10.53 #10590

Closed

22 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(pagination): add forwardedRef for pagination container div #10239

feat(pagination): add forwardedRef for pagination container div #10239

kevinsperrine commented Dec 7, 2021 •

edited

Loading

netlify bot commented Dec 7, 2021 •

edited

Loading

netlify bot commented Dec 7, 2021

netlify bot commented Dec 7, 2021

netlify bot commented Dec 7, 2021

netlify bot commented Dec 7, 2021

netlify bot commented Dec 7, 2021

netlify bot commented Dec 7, 2021 •

edited

Loading

netlify bot commented Dec 7, 2021 •

edited

Loading

jnm2377 Dec 13, 2021

kevinsperrine Dec 13, 2021

jnm2377 commented Jan 10, 2022

kevinsperrine commented Jan 10, 2022

feat(pagination): add forwardedRef for pagination container div #10239

feat(pagination): add forwardedRef for pagination container div #10239

Conversation

kevinsperrine commented Dec 7, 2021 • edited Loading

Changelog

Testing / Reviewing

netlify bot commented Dec 7, 2021 • edited Loading

netlify bot commented Dec 7, 2021

netlify bot commented Dec 7, 2021

netlify bot commented Dec 7, 2021

netlify bot commented Dec 7, 2021

netlify bot commented Dec 7, 2021

netlify bot commented Dec 7, 2021 • edited Loading

netlify bot commented Dec 7, 2021 • edited Loading

jnm2377 Dec 13, 2021

Choose a reason for hiding this comment

kevinsperrine Dec 13, 2021

Choose a reason for hiding this comment

jnm2377 commented Jan 10, 2022

kevinsperrine commented Jan 10, 2022

kevinsperrine commented Dec 7, 2021 •

edited

Loading

netlify bot commented Dec 7, 2021 •

edited

Loading

netlify bot commented Dec 7, 2021 •

edited

Loading

netlify bot commented Dec 7, 2021 •

edited

Loading