feat: add types to ComboButton
#16038
Conversation
Convert `ComboButton` to Typescript and export newly added interface `ComboButtonProps`.
✅ Deploy Preview for v11-carbon-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
| /** | ||
| * Specify the size of the buttons and menu. | ||
| */ | ||
| size?: 'sm' | 'md' | 'lg'; |
There was a problem hiding this comment.
Since size is passed to Button, IconButton, and Menu, I typed it statically as each component accepts different, additional values.
For example, Menu also accepts xs, which Button and IconButton do not accept. Conversely, the latter components accept xl and 2xl.
| const containerRef = useRef<HTMLDivElement>(null); | ||
| const menuRef = useRef<React.ComponentRef<typeof Menu>>(null); |
There was a problem hiding this comment.
Added types for containerRef and menuRef.
| } | ||
| } | ||
|
|
||
| function handlePrimaryActionClick(e: React.MouseEvent<HTMLButtonElement>) { |
There was a problem hiding this comment.
Added type for the event (e) argument.
| if (menuRef.current) { | ||
| menuRef.current.style.inlineSize = `${width}px`; | ||
| menuRef.current.style.minInlineSize = `${width}px`; | ||
|
|
||
| if (menuAlignment !== 'bottom' && menuAlignment !== 'top') { | ||
| menuRef.current.style.inlineSize = `fit-content`; | ||
| } | ||
| } |
There was a problem hiding this comment.
Added a null-check for menuRef.current.
| disabled: PropTypes.bool, | ||
|
|
||
| /** | ||
| * Provide the label to be rendered on the primary action button. |
There was a problem hiding this comment.
Fixed a typo: "renderd" → "rendered".
| return defaultTranslations[messageId]; | ||
| } | ||
|
|
||
| interface ComboButtonProps { |
There was a problem hiding this comment.
New types for component props.
Where possible, I pulled the types dynamically from the components that consume these props e.g., children is passed to Menu.children.
| 'carbon.combo-button.additional-actions': 'Additional actions', | ||
| }; | ||
|
|
||
| function defaultTranslateWithId(messageId: string) { |
There was a problem hiding this comment.
Added type for messageId.
| translateWithId?: (id: string) => string; | ||
| } | ||
|
|
||
| const ComboButton = React.forwardRef<HTMLDivElement, ComboButtonProps>( |
There was a problem hiding this comment.
Added types for ComboButton and its props.
daddb69
Convert `ComboButton` to Typescript and export newly added interface `ComboButtonProps`.
Closes #15178
Convert
ComboButtonto Typescript and export newly added interfaceComboButtonProps.Changelog
New
ComboButton/index.js→ComboButton/index.tsx.ComboButtonProps.Changed
ComboButton.propTypes.labeldescription.Testing / Reviewing
PropTypes.