Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: standardise forwardRefs across components #1748

Merged
merged 3 commits into from
Jun 25, 2024

Conversation

madhurisandbhor
Copy link
Contributor

What does it do?

Standardising forwardRefs across components, so added forward refs to interactive and actionable components.

Why is it needed?

Currently, a lot of components don’t have forwardRef some do, and it applies to the input field of that component, some edge cases use imperativeHandle e.g. TextInput, realistically we should add forwardRef to all the components in some capacity, Ref.

@madhurisandbhor madhurisandbhor added pr: chore This PR contains chore tasks (cleanups, configs, tooling...) source: design-system relates to design-system package labels Jun 20, 2024
@madhurisandbhor madhurisandbhor self-assigned this Jun 20, 2024
Copy link

vercel bot commented Jun 20, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
design-system ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 25, 2024 10:00am

Copy link

changeset-bot bot commented Jun 20, 2024

🦋 Changeset detected

Latest commit: f321c26

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@strapi/design-system Minor
@strapi/icons Minor
@strapi/ui-primitives Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

github-actions bot commented Jun 20, 2024

Size Change: +274 B (+0.09%)

Total Size: 289 kB

Filename Size Change
packages/design-system/dist/index.js 95 kB +139 B (+0.15%)
packages/design-system/dist/index.mjs 93.9 kB +135 B (+0.14%)
ℹ️ View Unchanged
Filename Size
packages/icons/dist/index.js 21.9 kB
packages/icons/dist/index.mjs 21.6 kB
packages/icons/dist/symbols-index.js 11.8 kB
packages/icons/dist/symbols-index.mjs 11.6 kB
packages/primitives/dist/index.js 16.8 kB
packages/primitives/dist/index.mjs 16.3 kB

compressed-size-action

@madhurisandbhor madhurisandbhor marked this pull request as ready for review June 20, 2024 13:28
@jhoward1994
Copy link
Contributor

Looks good. It looks to me like some components still don't use forwardRef e.g.

components/Alert/Alert.tsx
components/Badge/Badge.tsx

Is that intentional or should all compos be set up with forward ref?

@madhurisandbhor
Copy link
Contributor Author

@jhoward1994 As I mentioned, I tried to add forwardRefs to actionable or interactive components where user might need to focus, highlight, do some actions on respective DOM elements. So for Alert and Badge I dont think its really necessary to add any refs to be utilised for any case. If you think any case do let me know, thanks!

const contentRef = React.useRef<HTMLDivElement>(null);
const SimpleMenu = React.forwardRef<HTMLButtonElement, SimpleMenuProps>(
({ children, onOpen, onClose, popoverPlacement, onReachEnd, ...props }, forwardedRef) => {
const triggerRef = React.useRef<HTMLButtonElement>(null);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where is triggerRef used?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its passed as a composedRef to MenuTrigger

@madhurisandbhor madhurisandbhor merged commit 61936d6 into main Jun 25, 2024
11 checks passed
@madhurisandbhor madhurisandbhor deleted the chore/forwardRefs branch June 25, 2024 10:01
simotae14 added a commit that referenced this pull request Jul 1, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`main` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `main`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @strapi/[email protected]

### Minor Changes

- [#1748](#1748)
[`61936d6`](61936d6)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - chore:
standardise forwardRefs across components

### Patch Changes

- [#1738](#1738)
[`8a87483`](8a87483)
Thanks [@joshuaellis](https://github.com/joshuaellis)! -
fix(IconButton): sizing was wrong compared to other buttons

- [#1750](#1750)
[`d89c9c3`](d89c9c3)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - Fixed:
Link doesn't show the hover color

- [#1753](#1753)
[`9df216b`](9df216b)
Thanks [@simotae14](https://github.com/simotae14)! - fixed Modal Content
scroll issues

- [#1752](#1752)
[`90da62e`](90da62e)
Thanks [@remidej](https://github.com/remidej)! - fixed SubNavHeader not
applying space between label and search icon

- [#1749](#1749)
[`c7c5ad6`](c7c5ad6)
Thanks [@madhurisandbhor](https://github.com/madhurisandbhor)! - fix:
add click action on tag icon instead of on tag itself

-   Updated dependencies \[]:
    -   @strapi/[email protected]

## @strapi/[email protected]



## @strapi/[email protected]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pr: chore This PR contains chore tasks (cleanups, configs, tooling...) source: design-system relates to design-system package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants