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

Icon component: Add types #26216

Closed
wants to merge 2 commits into from
Closed

Icon component: Add types #26216

wants to merge 2 commits into from

Conversation

sirreal
Copy link
Member

@sirreal sirreal commented Oct 16, 2020

Description

Add types to the Icon component.

How has this been tested?

Types are properly generated (no test failures).

Types of changes

Internal: Code Quality.

@sirreal sirreal added [Type] Code Quality Issues or PRs that relate to code quality [Package] Components /packages/components labels Oct 16, 2020
@sirreal sirreal self-assigned this Oct 16, 2020
@github-actions
Copy link

github-actions bot commented Oct 28, 2020

Size Change: +203 B (0%)

Total Size: 1.21 MB

Filename Size Change
build/block-editor/index.js 130 kB +207 B (0%)
build/block-library/index.js 146 kB +20 B (0%)
build/components/index.js 172 kB +30 B (0%)
build/compose/index.js 9.81 kB -1 B
build/data/index.js 8.77 kB -2 B (0%)
build/edit-site/index.js 22.1 kB -50 B (0%)
build/editor/index.js 43.1 kB -1 B
build/element/index.js 4.65 kB -1 B
build/list-reusable-blocks/index.js 3.11 kB +1 B
build/media-utils/index.js 5.34 kB +1 B
build/nux/index.js 3.42 kB +1 B
build/rich-text/index.js 13.2 kB -1 B
build/server-side-render/index.js 2.77 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.78 kB 0 B
build/api-fetch/index.js 3.45 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 8.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 11.1 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.97 kB 0 B
build/block-library/editor.css 8.97 kB 0 B
build/block-library/style-rtl.css 7.83 kB 0 B
build/block-library/style.css 7.84 kB 0 B
build/block-library/theme-rtl.css 837 B 0 B
build/block-library/theme.css 838 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/style-rtl.css 15.2 kB 0 B
build/components/style.css 15.2 kB 0 B
build/core-data/index.js 12.3 kB 0 B
build/data-controls/index.js 772 B 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.46 kB 0 B
build/edit-navigation/index.js 11.2 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.4 kB 0 B
build/edit-post/style.css 6.39 kB 0 B
build/edit-site/style-rtl.css 3.88 kB 0 B
build/edit-site/style.css 3.88 kB 0 B
build/edit-widgets/index.js 26.4 kB 0 B
build/edit-widgets/style-rtl.css 3.12 kB 0 B
build/edit-widgets/style.css 3.12 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 7.7 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 712 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/reusable-blocks/index.js 3.06 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@sirreal sirreal marked this pull request as ready for review October 30, 2020 17:22
Copy link
Contributor

@sarayourfriend sarayourfriend left a comment

Choose a reason for hiding this comment

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

Just one question and a couple style suggestions for consistency/readability

packages/components/src/icon/index.js Outdated Show resolved Hide resolved
packages/components/src/icon/index.js Outdated Show resolved Hide resolved
/* eslint-disable jsdoc/valid-types */
/**
* @template T
* @typedef {T extends import('react').ComponentType<infer U> ? U : T extends string ? import('react').ComponentPropsWithoutRef<'span'> : {}} AdditionalProps
Copy link
Contributor

Choose a reason for hiding this comment

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

Should the final default be never rather than {}? When would we end up in that final branch?

Also an aside, the formatting like this is so frustrating to read... I'm assuming there's no way to split this across multiple lines with JSDoc right? Is that another limitation we could add to the list of reasons why full TS is preferred?

Copy link
Member Author

Choose a reason for hiding this comment

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

Should the final default be never rather than {}? When would we end up in that final branch?

🤔 This probably isn't perfect, I don't think it captures the case where icon is an element but this is a good start.

We want something that we can intersect (&) with another type to just keep the other type (an identity element). That's {} (I don't know whether there are other types that would work) where A & {} is the same as A. A & never is never (I had to play a bit to test this out).

Also an aside, the formatting like this is so frustrating to read... I'm assuming there's no way to split this across multiple lines with JSDoc right? Is that another limitation we could add to the list of reasons why full TS is preferred?

💯 It's very unpleasant. I don't believe TypeScript + JSDoc work properly when we break these on multiple lines. It would be much nicer in TypeScript. For reference, this is equivalent TypeScript:

export type AdditionalProps<T> =
    T extends React.ComponentType<infer U>
    ? U
    : T extends string
    ? React.ComponentPropsWithoutRef<'span'>
    : {};

Fortunately, although it's exported (JSDoc typedefs are always exported, but this likely isn't easily accessible from the package) it's really an internal type helper.

packages/components/src/icon/index.js Outdated Show resolved Hide resolved
Base automatically changed from master to trunk March 1, 2021 15:44
@t-hamano
Copy link
Contributor

Hi @sirreal,

I have been trying to find out if this PR is still valid today.

In the latest trunk, the Icon component appears to have been migrated to TypeScript in #32219. Sorry, I would like to close this PR but if there is anything I have missed please feel free to comment.

And thank you for your contribution!

cc: @ciampo, @mirka

@t-hamano t-hamano closed this Dec 19, 2022
@sirreal sirreal deleted the update/type-component-icon branch December 20, 2022 09:09
@sirreal
Copy link
Member Author

sirreal commented Dec 20, 2022

This was fine to close, thanks for the cleanup 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants