fix(CFormLabel): CFormLabelProps doesn't accept htmlFor

mrholek · mrholek · commit 2b825a2aa7c2 · 2021-11-14T20:57:01.000+01:00
diff --git a/packages/coreui-react/src/components/form/CFormLabel.tsx b/packages/coreui-react/src/components/form/CFormLabel.tsx
@@ -1,8 +1,8 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, AllHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-export interface CFormLabelProps extends HTMLAttributes<HTMLLabelElement> {
+export interface CFormLabelProps extends AllHTMLAttributes<HTMLLabelElement> {
   /**
    * A string of all className you want applied to the component.
    */
diff --git a/packages/coreui-react/src/components/form/__tests__/CFormLabel.spec.tsx b/packages/coreui-react/src/components/form/__tests__/CFormLabel.spec.tsx
@@ -15,3 +15,11 @@ test('CFormLabel customize className', async () => {
   expect(container.firstChild).toHaveClass('form-label')
   expect(container.firstChild).toHaveTextContent('Test')
 })
+
+test('CFormLabel customize htmlFor', async () => {
+  const { container } = render(<CFormLabel htmlFor="bazinga">Test</CFormLabel>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveAttribute('for', 'bazinga')
+  expect(container.firstChild).toHaveClass('form-label')
+  expect(container.firstChild).toHaveTextContent('Test')
+})
diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormLabel.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormLabel.spec.tsx.snap
@@ -10,6 +10,17 @@ exports[`CFormLabel customize className 1`] = `
 </div>
 `;
 
+exports[`CFormLabel customize htmlFor 1`] = `
+<div>
+  <label
+    class="form-label"
+    for="bazinga"
+  >
+    Test
+  </label>
+</div>
+`;
+
 exports[`loads and displays CFormLabel component 1`] = `
 <div>
   <label
