Typescript error in Editable example - getSubmitButtonProps types incompatibile with IconButton

[allenchuang]

Description

When I'm copy and pasting the code in the Editable example, getSubmitButtonProps seems to be imcompatible when spreading the props with IconButton

Link to Reproduction

https://chakra-ui.com/docs/components/form/editable#with-custom-input-and-controls

Steps to reproduce

1. Go to 'https://chakra-ui.com/docs/components/form/editable#with-custom-input-and-controls'

2. Copy the example for

   function CustomControlsExample() {
   /* Here's a custom control */
   function EditableControls() {
   const {
     isEditing,
     getSubmitButtonProps,
     getCancelButtonProps,
     getEditButtonProps,
   } = useEditableControls()
   
   return isEditing ? (
     <ButtonGroup justifyContent='center' size='sm'>
       <IconButton icon={<CheckIcon />} {...getSubmitButtonProps()} />
       <IconButton icon={<CloseIcon />} {...getCancelButtonProps()} />
     </ButtonGroup>
   ) : (
     <Flex justifyContent='center'>
       <IconButton size='sm' icon={<EditIcon />} {...getEditButtonProps()} />
     </Flex>
   )
   }
   
   return (
   <Editable
     textAlign='center'
     defaultValue='Rasengan ⚡️'
     fontSize='2xl'
     isPreviewFocusable={false}
   >
     <EditablePreview />
     {/* Here is the custom input */}
     <Input as={EditableInput} />
     <EditableControls />
   </Editable>
   )
   }

3. Notice the typescript error

Additional .eslintrc.json info:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "css-modules", "chakra-ui"],
  "extends": [
    "prettier",
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:css-modules/recommended",
    "next/core-web-vitals"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": ["error"],
    "@typescript-eslint/ban-ts-comment": "off"
  }
}

Chakra UI Version

1.8.8

Browser

Chrome

Operating System

• [X] macOS
• [ ] Windows
• [ ] Linux

Additional Information

No response

[segunadebayo]

Hi @allenchuang,

This is happening because aria-label is required for the IconButton. Provide aria-label and the error will go away.

Cheers