components: InputControl to TypeScript #33696

sarayourfriend · 2021-07-26T14:58:32Z

Description

I did this refactor while I was working on something else so I figured I might as well open a PR for it.

It just converts the InputControl to TypeScript and (I think) improves the way the reducer code is structured while we're at it.

How has this been tested?

Storybook should work the same for InputControl, NumberControl and UnitControl, the last two depend on InputControl.

TS build should pass as well.

Types of changes

Janitorial

Checklist:

My code is tested.
My code follows the WordPress code style.
[N/A] My code follows the accessibility standards.
[N/A] I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

github-actions · 2021-07-26T15:05:34Z

Size Change: +1.93 kB (0%)

Total Size: 1.08 MB

Filename	Size	Change
`build/admin-manifest/index.min.js`	1.46 kB	+49 B (+3%)
`build/annotations/index.min.js`	2.93 kB	-1 B (0%)
`build/block-directory/index.min.js`	6.62 kB	+1 B (0%)
`build/block-directory/style-rtl.css`	1.01 kB	-8 B (-1%)
`build/block-directory/style.css`	1.01 kB	-9 B (-1%)
`build/block-editor/index.min.js`	127 kB	+75 B (0%)
`build/block-editor/style-rtl.css`	13.9 kB	-148 B (-1%)
`build/block-editor/style.css`	13.8 kB	-154 B (-1%)
`build/block-library/blocks/audio/style-rtl.css`	111 B	-1 B (-1%)
`build/block-library/blocks/audio/style.css`	111 B	-1 B (-1%)
`build/block-library/blocks/button/editor-rtl.css`	474 B	-1 B (0%)
`build/block-library/blocks/button/style-rtl.css`	605 B	+2 B (0%)
`build/block-library/blocks/button/style.css`	604 B	+2 B (0%)
`build/block-library/blocks/buttons/style-rtl.css`	370 B	-5 B (-1%)
`build/block-library/blocks/buttons/style.css`	370 B	-5 B (-1%)
`build/block-library/blocks/calendar/style-rtl.css`	207 B	-1 B (0%)
`build/block-library/blocks/calendar/style.css`	207 B	-1 B (0%)
`build/block-library/blocks/columns/editor-rtl.css`	189 B	-1 B (-1%)
`build/block-library/blocks/columns/editor.css`	188 B	-2 B (-1%)
`build/block-library/blocks/columns/style-rtl.css`	474 B	-1 B (0%)
`build/block-library/blocks/columns/style.css`	475 B	-1 B (0%)
`build/block-library/blocks/cover/editor-rtl.css`	666 B	-4 B (-1%)
`build/block-library/blocks/cover/style-rtl.css`	1.23 kB	+3 B (0%)
`build/block-library/blocks/cover/style.css`	1.23 kB	+2 B (0%)
`build/block-library/blocks/embed/editor-rtl.css`	488 B	+2 B (0%)
`build/block-library/blocks/embed/editor.css`	488 B	+2 B (0%)
`build/block-library/blocks/embed/style-rtl.css`	400 B	-1 B (0%)
`build/block-library/blocks/file/editor-rtl.css`	300 B	-1 B (0%)
`build/block-library/blocks/freeform/editor-rtl.css`	2.44 kB	-4 B (0%)
`build/block-library/blocks/freeform/editor.css`	2.44 kB	-5 B (0%)
`build/block-library/blocks/gallery/editor-rtl.css`	707 B	+3 B (0%)
`build/block-library/blocks/gallery/editor.css`	706 B	+1 B (0%)
`build/block-library/blocks/gallery/style-rtl.css`	1.05 kB	-7 B (-1%)
`build/block-library/blocks/gallery/style.css`	1.05 kB	-7 B (-1%)
`build/block-library/blocks/group/editor-rtl.css`	159 B	-1 B (-1%)
`build/block-library/blocks/group/editor.css`	159 B	-1 B (-1%)
`build/block-library/blocks/html/editor-rtl.css`	283 B	+2 B (+1%)
`build/block-library/blocks/html/editor.css`	284 B	+3 B (+1%)
`build/block-library/blocks/image/editor-rtl.css`	728 B	-1 B (0%)
`build/block-library/blocks/image/editor.css`	728 B	+1 B (0%)
`build/block-library/blocks/image/style-rtl.css`	482 B	+1 B (0%)
`build/block-library/blocks/image/style.css`	487 B	+2 B (0%)
`build/block-library/blocks/latest-comments/style-rtl.css`	284 B	-2 B (-1%)
`build/block-library/blocks/latest-comments/style.css`	284 B	-2 B (-1%)
`build/block-library/blocks/latest-posts/style-rtl.css`	528 B	+2 B (0%)
`build/block-library/blocks/latest-posts/style.css`	527 B	+3 B (+1%)
`build/block-library/blocks/media-text/editor-rtl.css`	266 B	+3 B (+1%)
`build/block-library/blocks/media-text/editor.css`	263 B	-1 B (0%)
`build/block-library/blocks/media-text/style-rtl.css`	488 B	-4 B (-1%)
`build/block-library/blocks/media-text/style.css`	485 B	-4 B (-1%)
`build/block-library/blocks/more/editor-rtl.css`	431 B	-3 B (-1%)
`build/block-library/blocks/more/editor.css`	431 B	-3 B (-1%)
`build/block-library/blocks/navigation-link/editor.css`	474 B	+1 B (0%)
`build/block-library/blocks/navigation/editor-rtl.css`	1.67 kB	-16 B (-1%)
`build/block-library/blocks/navigation/editor.css`	1.68 kB	-11 B (-1%)
`build/block-library/blocks/navigation/style-rtl.css`	1.65 kB	-2 B (0%)
`build/block-library/blocks/navigation/style.css`	1.64 kB	-20 B (-1%)
`build/block-library/blocks/page-list/editor.css`	310 B	-1 B (0%)
`build/block-library/blocks/page-list/style-rtl.css`	242 B	+2 B (+1%)
`build/block-library/blocks/page-list/style.css`	242 B	+2 B (+1%)
`build/block-library/blocks/paragraph/style-rtl.css`	248 B	+1 B (0%)
`build/block-library/blocks/post-author/editor-rtl.css`	210 B	+1 B (0%)
`build/block-library/blocks/post-author/editor.css`	210 B	+1 B (0%)
`build/block-library/blocks/post-author/style-rtl.css`	182 B	-1 B (-1%)
`build/block-library/blocks/post-author/style.css`	181 B	-3 B (-2%)
`build/block-library/blocks/post-content/editor-rtl.css`	138 B	-1 B (-1%)
`build/block-library/blocks/post-content/editor.css`	138 B	-1 B (-1%)
`build/block-library/blocks/post-featured-image/editor-rtl.css`	412 B	+74 B (+22%)	🚨
`build/block-library/blocks/post-featured-image/editor.css`	412 B	+74 B (+22%)	🚨
`build/block-library/blocks/post-featured-image/style-rtl.css`	143 B	+2 B (+1%)
`build/block-library/blocks/post-featured-image/style.css`	143 B	+2 B (+1%)
`build/block-library/blocks/post-template/editor-rtl.css`	99 B	-1 B (-1%)
`build/block-library/blocks/post-template/editor.css`	98 B	-1 B (-1%)
`build/block-library/blocks/post-template/style-rtl.css`	378 B	-1 B (0%)
`build/block-library/blocks/post-template/style.css`	379 B	-1 B (0%)
`build/block-library/blocks/pullquote/style-rtl.css`	361 B	-1 B (0%)
`build/block-library/blocks/pullquote/style.css`	360 B	-1 B (0%)
`build/block-library/blocks/pullquote/theme-rtl.css`	167 B	-2 B (-1%)
`build/block-library/blocks/pullquote/theme.css`	167 B	-2 B (-1%)
`build/block-library/blocks/query-title/editor-rtl.css`	85 B	-1 B (-1%)
`build/block-library/blocks/query-title/editor.css`	85 B	-1 B (-1%)
`build/block-library/blocks/quote/theme-rtl.css`	220 B	-1 B (0%)
`build/block-library/blocks/quote/theme.css`	222 B	+1 B (0%)
`build/block-library/blocks/rss/editor-rtl.css`	202 B	+1 B (0%)
`build/block-library/blocks/rss/editor.css`	204 B	+2 B (+1%)
`build/block-library/blocks/rss/style-rtl.css`	289 B	-1 B (0%)
`build/block-library/blocks/rss/style.css`	288 B	-2 B (-1%)
`build/block-library/blocks/search/editor-rtl.css`	209 B	-2 B (-1%)
`build/block-library/blocks/search/editor.css`	209 B	-2 B (-1%)
`build/block-library/blocks/search/style-rtl.css`	368 B	+9 B (+3%)
`build/block-library/blocks/search/style.css`	372 B	+10 B (+3%)
`build/block-library/blocks/separator/style-rtl.css`	250 B	-1 B (0%)
`build/block-library/blocks/separator/style.css`	250 B	-1 B (0%)
`build/block-library/blocks/shortcode/editor-rtl.css`	474 B	-2 B (0%)
`build/block-library/blocks/shortcode/editor.css`	474 B	-2 B (0%)
`build/block-library/blocks/site-logo/editor-rtl.css`	462 B	-3 B (-1%)
`build/block-library/blocks/site-logo/editor.css`	464 B	-1 B (0%)
`build/block-library/blocks/site-logo/style-rtl.css`	153 B	-1 B (-1%)
`build/block-library/blocks/site-logo/style.css`	153 B	-1 B (-1%)
`build/block-library/blocks/site-tagline/editor-rtl.css`	86 B	-1 B (-1%)
`build/block-library/blocks/site-tagline/editor.css`	86 B	-1 B (-1%)
`build/block-library/blocks/site-title/editor-rtl.css`	84 B	-1 B (-1%)
`build/block-library/blocks/site-title/editor.css`	84 B	-1 B (-1%)
`build/block-library/blocks/social-link/editor-rtl.css`	165 B	+1 B (+1%)
`build/block-library/blocks/social-links/editor-rtl.css`	812 B	+12 B (+2%)
`build/block-library/blocks/social-links/editor.css`	811 B	+12 B (+2%)
`build/block-library/blocks/social-links/style-rtl.css`	1.33 kB	-2 B (0%)
`build/block-library/blocks/social-links/style.css`	1.33 kB	-4 B (0%)
`build/block-library/blocks/spacer/editor-rtl.css`	307 B	-1 B (0%)
`build/block-library/blocks/spacer/editor.css`	307 B	-1 B (0%)
`build/block-library/blocks/table/editor-rtl.css`	471 B	-7 B (-1%)
`build/block-library/blocks/table/editor.css`	472 B	-6 B (-1%)
`build/block-library/blocks/table/style-rtl.css`	481 B	+1 B (0%)
`build/block-library/blocks/table/style.css`	481 B	+1 B (0%)
`build/block-library/blocks/template-part/editor-rtl.css`	636 B	+85 B (+15%)	⚠️
`build/block-library/blocks/template-part/editor.css`	635 B	+85 B (+15%)	⚠️
`build/block-library/blocks/video/editor-rtl.css`	571 B	+2 B (0%)
`build/block-library/blocks/video/editor.css`	572 B	+2 B (0%)
`build/block-library/common-rtl.css`	1.29 kB	+3 B (0%)
`build/block-library/common.css`	1.29 kB	+2 B (0%)
`build/block-library/editor-rtl.css`	9.87 kB	+34 B (0%)
`build/block-library/editor.css`	9.85 kB	+17 B (0%)
`build/block-library/index.min.js`	147 kB	+819 B (+1%)
`build/block-library/reset.css`	514 B	-1 B (0%)
`build/block-library/style-rtl.css`	10.2 kB	-62 B (-1%)
`build/block-library/style.css`	10.2 kB	-61 B (-1%)
`build/block-library/theme-rtl.css`	688 B	-4 B (-1%)
`build/block-library/theme.css`	692 B	-1 B (0%)
`build/blocks/index.min.js`	47.2 kB	+1 B (0%)
`build/components/index.min.js`	197 kB	+943 B (0%)
`build/components/style-rtl.css`	15.8 kB	-162 B (-1%)
`build/components/style.css`	15.8 kB	-148 B (-1%)
`build/core-data/index.min.js`	12.6 kB	+141 B (+1%)
`build/customize-widgets/index.min.js`	10.8 kB	+436 B (+4%)
`build/customize-widgets/style-rtl.css`	1.5 kB	+11 B (+1%)
`build/customize-widgets/style.css`	1.49 kB	+10 B (+1%)
`build/data-controls/index.min.js`	831 B	+2 B (0%)
`build/data/index.min.js`	7.22 kB	+1 B (0%)
`build/date/index.min.js`	31.8 kB	-1 B (0%)
`build/edit-navigation/index.min.js`	13.9 kB	+2 B (0%)
`build/edit-navigation/style-rtl.css`	3.1 kB	-25 B (-1%)
`build/edit-navigation/style.css`	3.1 kB	-24 B (-1%)
`build/edit-post/classic-rtl.css`	479 B	-4 B (-1%)
`build/edit-post/classic.css`	481 B	-2 B (0%)
`build/edit-post/index.min.js`	59.4 kB	-28 B (0%)
`build/edit-post/style-rtl.css`	7.19 kB	-65 B (-1%)
`build/edit-post/style.css`	7.18 kB	-61 B (-1%)
`build/edit-site/index.min.js`	26 kB	-9 B (0%)
`build/edit-site/style-rtl.css`	5.01 kB	-30 B (-1%)
`build/edit-site/style.css`	5.01 kB	-24 B (0%)
`build/edit-widgets/index.min.js`	16.6 kB	+419 B (+3%)
`build/edit-widgets/style-rtl.css`	4.01 kB	+23 B (+1%)
`build/edit-widgets/style.css`	4.02 kB	+30 B (+1%)
`build/editor/index.min.js`	38.3 kB	-349 B (-1%)
`build/editor/style-rtl.css`	3.92 kB	+41 B (+1%)
`build/editor/style.css`	3.91 kB	+30 B (+1%)
`build/format-library/index.min.js`	5.72 kB	+6 B (0%)
`build/list-reusable-blocks/style-rtl.css`	838 B	-4 B (0%)
`build/list-reusable-blocks/style.css`	838 B	-4 B (0%)
`build/nux/index.min.js`	2.31 kB	-2 B (0%)
`build/nux/style-rtl.css`	747 B	+2 B (0%)
`build/nux/style.css`	743 B	+1 B (0%)
`build/plugins/index.min.js`	1.99 kB	-1 B (0%)
`build/server-side-render/index.min.js`	1.64 kB	+1 B (0%)
`build/widgets/index.min.js`	6.48 kB	-2 B (0%)
`build/widgets/style-rtl.css`	1.04 kB	-4 B (0%)
`build/widgets/style.css`	1.04 kB	-2 B (0%)

ℹ️

View Unchanged

Filename	Size
`build/a11y/index.min.js`	1.12 kB
`build/api-fetch/index.min.js`	2.44 kB
`build/autop/index.min.js`	2.28 kB
`build/blob/index.min.js`	673 B
`build/block-library/blocks/archives/editor-rtl.css`	61 B
`build/block-library/blocks/archives/editor.css`	60 B
`build/block-library/blocks/archives/style-rtl.css`	65 B
`build/block-library/blocks/archives/style.css`	65 B
`build/block-library/blocks/audio/editor-rtl.css`	58 B
`build/block-library/blocks/audio/editor.css`	58 B
`build/block-library/blocks/audio/theme-rtl.css`	125 B
`build/block-library/blocks/audio/theme.css`	125 B
`build/block-library/blocks/block/editor-rtl.css`	161 B
`build/block-library/blocks/block/editor.css`	161 B
`build/block-library/blocks/button/editor.css`	474 B
`build/block-library/blocks/buttons/editor-rtl.css`	315 B
`build/block-library/blocks/buttons/editor.css`	315 B
`build/block-library/blocks/categories/editor-rtl.css`	84 B
`build/block-library/blocks/categories/editor.css`	83 B
`build/block-library/blocks/categories/style-rtl.css`	79 B
`build/block-library/blocks/categories/style.css`	79 B
`build/block-library/blocks/code/style-rtl.css`	90 B
`build/block-library/blocks/code/style.css`	90 B
`build/block-library/blocks/code/theme-rtl.css`	131 B
`build/block-library/blocks/code/theme.css`	131 B
`build/block-library/blocks/cover/editor.css`	670 B
`build/block-library/blocks/embed/style.css`	400 B
`build/block-library/blocks/embed/theme-rtl.css`	124 B
`build/block-library/blocks/embed/theme.css`	124 B
`build/block-library/blocks/file/editor.css`	300 B
`build/block-library/blocks/file/style-rtl.css`	255 B
`build/block-library/blocks/file/style.css`	255 B
`build/block-library/blocks/file/view.min.js`	711 B
`build/block-library/blocks/gallery/theme-rtl.css`	122 B
`build/block-library/blocks/gallery/theme.css`	122 B
`build/block-library/blocks/group/style-rtl.css`	57 B
`build/block-library/blocks/group/style.css`	57 B
`build/block-library/blocks/group/theme-rtl.css`	93 B
`build/block-library/blocks/group/theme.css`	93 B
`build/block-library/blocks/heading/editor-rtl.css`	152 B
`build/block-library/blocks/heading/editor.css`	152 B
`build/block-library/blocks/heading/style-rtl.css`	76 B
`build/block-library/blocks/heading/style.css`	76 B
`build/block-library/blocks/home-link/style-rtl.css`	247 B
`build/block-library/blocks/home-link/style.css`	247 B
`build/block-library/blocks/image/theme-rtl.css`	124 B
`build/block-library/blocks/image/theme.css`	124 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	137 B
`build/block-library/blocks/latest-posts/editor.css`	137 B
`build/block-library/blocks/list/style-rtl.css`	63 B
`build/block-library/blocks/list/style.css`	63 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	474 B
`build/block-library/blocks/navigation-link/style-rtl.css`	94 B
`build/block-library/blocks/navigation-link/style.css`	94 B
`build/block-library/blocks/navigation/view.min.js`	2.84 kB
`build/block-library/blocks/nextpage/editor-rtl.css`	395 B
`build/block-library/blocks/nextpage/editor.css`	395 B
`build/block-library/blocks/page-list/editor-rtl.css`	310 B
`build/block-library/blocks/paragraph/editor-rtl.css`	157 B
`build/block-library/blocks/paragraph/editor.css`	157 B
`build/block-library/blocks/paragraph/style.css`	248 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	140 B
`build/block-library/blocks/post-comments-form/style.css`	140 B
`build/block-library/blocks/post-comments/style-rtl.css`	360 B
`build/block-library/blocks/post-comments/style.css`	359 B
`build/block-library/blocks/post-excerpt/editor-rtl.css`	73 B
`build/block-library/blocks/post-excerpt/editor.css`	73 B
`build/block-library/blocks/post-excerpt/style-rtl.css`	69 B
`build/block-library/blocks/post-excerpt/style.css`	69 B
`build/block-library/blocks/post-terms/style-rtl.css`	73 B
`build/block-library/blocks/post-terms/style.css`	73 B
`build/block-library/blocks/post-title/style-rtl.css`	60 B
`build/block-library/blocks/post-title/style.css`	60 B
`build/block-library/blocks/preformatted/style-rtl.css`	103 B
`build/block-library/blocks/preformatted/style.css`	103 B
`build/block-library/blocks/pullquote/editor-rtl.css`	198 B
`build/block-library/blocks/pullquote/editor.css`	198 B
`build/block-library/blocks/query-pagination-numbers/editor-rtl.css`	122 B
`build/block-library/blocks/query-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/query-pagination/editor-rtl.css`	270 B
`build/block-library/blocks/query-pagination/editor.css`	262 B
`build/block-library/blocks/query-pagination/style-rtl.css`	168 B
`build/block-library/blocks/query-pagination/style.css`	168 B
`build/block-library/blocks/query/editor-rtl.css`	131 B
`build/block-library/blocks/query/editor.css`	132 B
`build/block-library/blocks/quote/style-rtl.css`	169 B
`build/block-library/blocks/quote/style.css`	169 B
`build/block-library/blocks/search/theme-rtl.css`	64 B
`build/block-library/blocks/search/theme.css`	64 B
`build/block-library/blocks/separator/editor-rtl.css`	99 B
`build/block-library/blocks/separator/editor.css`	99 B
`build/block-library/blocks/separator/theme-rtl.css`	172 B
`build/block-library/blocks/separator/theme.css`	172 B
`build/block-library/blocks/social-link/editor.css`	165 B
`build/block-library/blocks/spacer/style-rtl.css`	48 B
`build/block-library/blocks/spacer/style.css`	48 B
`build/block-library/blocks/table/theme-rtl.css`	188 B
`build/block-library/blocks/table/theme.css`	188 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	146 B
`build/block-library/blocks/tag-cloud/style.css`	146 B
`build/block-library/blocks/template-part/theme-rtl.css`	101 B
`build/block-library/blocks/template-part/theme.css`	101 B
`build/block-library/blocks/term-description/editor-rtl.css`	90 B
`build/block-library/blocks/term-description/editor.css`	90 B
`build/block-library/blocks/text-columns/editor-rtl.css`	95 B
`build/block-library/blocks/text-columns/editor.css`	95 B
`build/block-library/blocks/text-columns/style-rtl.css`	166 B
`build/block-library/blocks/text-columns/style.css`	166 B
`build/block-library/blocks/verse/style-rtl.css`	87 B
`build/block-library/blocks/verse/style.css`	87 B
`build/block-library/blocks/video/style-rtl.css`	173 B
`build/block-library/blocks/video/style.css`	173 B
`build/block-library/blocks/video/theme-rtl.css`	124 B
`build/block-library/blocks/video/theme.css`	124 B
`build/block-library/reset-rtl.css`	514 B
`build/block-serialization-default-parser/index.min.js`	1.3 kB
`build/block-serialization-spec-parser/index.min.js`	3.06 kB
`build/compose/index.min.js`	10.2 kB
`build/deprecated/index.min.js`	738 B
`build/dom-ready/index.min.js`	576 B
`build/dom/index.min.js`	4.78 kB
`build/element/index.min.js`	3.44 kB
`build/escape-html/index.min.js`	739 B
`build/format-library/style-rtl.css`	668 B
`build/format-library/style.css`	669 B
`build/hooks/index.min.js`	1.76 kB
`build/html-entities/index.min.js`	628 B
`build/i18n/index.min.js`	3.73 kB
`build/is-shallow-equal/index.min.js`	710 B
`build/keyboard-shortcuts/index.min.js`	1.74 kB
`build/keycodes/index.min.js`	1.49 kB
`build/list-reusable-blocks/index.min.js`	2.07 kB
`build/media-utils/index.min.js`	3.08 kB
`build/notices/index.min.js`	1.07 kB
`build/primitives/index.min.js`	1.06 kB
`build/priority-queue/index.min.js`	791 B
`build/react-i18n/index.min.js`	924 B
`build/redux-routine/index.min.js`	2.82 kB
`build/reusable-blocks/index.min.js`	2.56 kB
`build/reusable-blocks/style-rtl.css`	256 B
`build/reusable-blocks/style.css`	256 B
`build/rich-text/index.min.js`	10.8 kB
`build/shortcode/index.min.js`	1.68 kB
`build/token-list/index.min.js`	848 B
`build/url/index.min.js`	1.95 kB
`build/viewport/index.min.js`	1.28 kB
`build/warning/index.min.js`	1.16 kB
`build/wordcount/index.min.js`	1.24 kB

_{compressed-size-action}

ciampo

Great work, @sarayourfriend !

It's a bit hard for me to review in detail all of the types that you extracted to the types.ts file, since this is quite a big PR and I'm not super familiar with how the component works internally.

I tried to focus particularly for any potential runtime change, and left a few comments

packages/components/src/input-control/types.ts

packages/components/src/input-control/input-base.tsx

packages/components/src/input-control/input-field.tsx

packages/components/src/input-control/utils.ts

packages/components/src/input-control/input-field.tsx

diegohaz · 2021-07-28T12:18:12Z

packages/components/src/input-control/reducer/reducer.ts

 	return {
 		...initialInputControlState,
 		...initialState,
 		initialValue: value,
-	};
+	} as InputState;


Why does this need to be explicitly cast? TypeScript should be able to infer and combine the types from the other objects. If there's an error or something, there may be a bug there that the cast is hiding?

It was because the initialValue couldn't be undefined and the Partial<InputState> was making it allowed to be undefined. But I think previously this was allowable anyway so I've made value and initialValue undefined.

Though won't that mess up the "controlled-ness" of the input? Should we only allow "empty" values but not undefined?

I'm going to merge this PR and we can refine the types for this if we decide it's a problem. Currently I think we're not introducing anything that isn't already true for the intrinsic input element.

diegohaz · 2021-07-28T12:21:06Z

packages/components/src/input-control/reducer/reducer.ts

 		dispatch( {
 			type,
 			payload: { value: nextValue, event },
-		} );
+		} as actions.InputAction );


Same here I guess. What's the error if we don't explicitly cast this object?

It complains that the type parameter must be INVALIDATE for some reason. I'm not sure why it complains here and not in the other places 🤔

diegohaz

This is great, Sara! Thanks for working on this!

packages/components/src/input-control/input-field.tsx

* Convert Select to TypeScript * Stop spreading props into InputBase and add all HTML attributes for select * Remove need for `omit`

sarayourfriend · 2021-08-02T16:57:07Z

Whoops, I accidentally merged the SelectControl into this PR 😬 But it's been reviewed here #33784

packages/components/src/select-control/styles/select-control-styles.ts

ciampo

LGTM 🚀

@diegohaz could you also have a final look at this PR? There's only a couple of open conversations left

components: InputControl to TypeScript

bdbd7ea

sarayourfriend added the [Package] Components label Jul 26, 2021

sarayourfriend requested review from ciampo and diegohaz Jul 26, 2021

sarayourfriend self-assigned this Jul 26, 2021

sarayourfriend requested review from ajitbohra and chrisvanpatten as code owners Jul 26, 2021

Add back event to onChange

788daf7

ciampo reviewed Jul 27, 2021

View changes

Fix on validate and remove todo

82dc830

stokesman reviewed Jul 27, 2021

View changes

packages/components/src/input-control/input-field.tsx Show resolved Hide resolved

stokesman reviewed Jul 27, 2021

View changes

packages/components/src/input-control/input-field.tsx Outdated Show resolved Hide resolved

diegohaz reviewed Jul 28, 2021

View changes

packages/components/src/input-control/input-field.tsx Outdated Show resolved Hide resolved

diegohaz reviewed Jul 28, 2021

View changes

sarayourfriend added the [Type] Code Quality label Jul 28, 2021

Remove cast and allow undefined values

11956d9

sarayourfriend mentioned this pull request Jul 30, 2021

components: Add new ColorPicker #33714

Merged

5 of 7 tasks

sarayourfriend added 2 commits Aug 2, 2021

Add explanatory comment for omitting prefix

fa1d387

Use currentTarget

d736b46

ciampo reviewed Aug 2, 2021

View changes

packages/components/src/input-control/input-field.tsx Outdated Show resolved Hide resolved

components: Convert Select to TypeScript (#33784)

6f98642

* Convert Select to TypeScript * Stop spreading props into InputBase and add all HTML attributes for select * Remove need for `omit`

ciampo mentioned this pull request Aug 2, 2021

components: Convert Select to TypeScript #33784

Merged

5 tasks done

sarayourfriend added 2 commits Aug 2, 2021

Remove unused import

c4f7a48

Consistently use currentTarget

7fa7383

ciampo reviewed Aug 4, 2021

View changes

packages/components/src/select-control/styles/select-control-styles.ts Show resolved Hide resolved

Require isFocused props

78fccbe

ciampo approved these changes Aug 5, 2021

View changes

sarayourfriend deleted the refactor/convert-input-control-typescript branch Aug 6, 2021

github-actions bot added this to the Gutenberg 11.3 milestone Aug 6, 2021

WordPress / gutenberg

components: InputControl to TypeScript #33696

components: InputControl to TypeScript #33696

sarayourfriend commented Jul 26, 2021

github-actions bot commented Jul 26, 2021 •

edited

ciampo left a comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

diegohaz left a comment

sarayourfriend commented Aug 2, 2021

ciampo left a comment

WordPress / gutenberg

components: InputControl to TypeScript #33696

components: InputControl to TypeScript #33696

Conversation

sarayourfriend commented Jul 26, 2021

Description

How has this been tested?

Types of changes

Checklist:

github-actions bot commented Jul 26, 2021 • edited

ciampo left a comment

This comment has been minimized.

diegohaz Jul 28, 2021 Member

This comment has been minimized.

sarayourfriend Jul 28, 2021 Author Contributor

This comment has been minimized.

sarayourfriend Aug 6, 2021 Author Contributor

This comment has been minimized.

diegohaz Jul 28, 2021 Member

This comment has been minimized.

sarayourfriend Jul 28, 2021 Author Contributor

diegohaz left a comment

sarayourfriend commented Aug 2, 2021

ciampo left a comment

github-actions bot commented Jul 26, 2021 •

edited

diegohaz Jul 28, 2021
Member

sarayourfriend Jul 28, 2021
Author Contributor

sarayourfriend Aug 6, 2021
Author Contributor

diegohaz Jul 28, 2021
Member

sarayourfriend Jul 28, 2021
Author Contributor