docs: update API documentation

Author: mrholek

packages/docs/content/api/CDropdown.api.mdx

@@ -50,7 +50,13 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
       </tr>
       <tr>
         <td colSpan="3">
-          <p>Configures automatic closing behavior for the React Dropdown: - <code>{`true`}</code> - Close on clicks inside or outside of the React Dropdown Menu. - <code>{`false`}</code> - Disable auto-close; manually call <code>{`hide`}</code> or <code>{`toggle`}</code> (also not closed by <code>{`Escape`}</code>). - <code>{`'inside'`}</code> - Close only when clicking inside the React Dropdown Menu. - <code>{`'outside'`}</code> - Close only when clicking outside the React Dropdown Menu.</p>
+          <p>Configures automatic closing behavior for the React Dropdown:</p>
+<ul>
+<li><code>{`true`}</code> - Close on clicks inside or outside of the React Dropdown Menu.</li>
+<li><code>{`false`}</code> - Disable auto-close; manually call <code>{`hide`}</code> or <code>{`toggle`}</code> (also not closed by <code>{`Escape`}</code>).</li>
+<li><code>{`'inside'`}</code> - Close only when clicking inside the React Dropdown Menu.</li>
+<li><code>{`'outside'`}</code> - Close only when clicking outside the React Dropdown Menu.</li>
+</ul>
         <JSXDocs code={`// Close only when user clicks outside of the menu
 <CDropdown autoClose="outside" />`} />
         </td>
@@ -201,7 +207,11 @@ const myContainer = document.getElementById('my-container')
       </tr>
       <tr>
         <td colSpan="3">
-          <p>Controls the visibility of the React Dropdown Menu: - <code>{`true`}</code> - Visible - <code>{`false`}</code> - Hidden</p>
+          <p>Controls the visibility of the React Dropdown Menu:</p>
+<ul>
+<li><code>{`true`}</code> - Visible</li>
+<li><code>{`false`}</code> - Hidden</li>
+</ul>
         <JSXDocs code={`// Programmatically manage the dropdown visibility
 const [visible, setVisible] = useState(false)
 

packages/docs/content/api/CDropdownToggle.api.mdx

@@ -152,7 +152,7 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
       </tr>
       <tr>
         <td colSpan="3">
-          <p>Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.</p>
+          <p>Sets which event handlers you'd like provided to your toggle prop. You can specify one trigger or an array of them.</p>
         </td>
       </tr>
       <tr id="cdropdowntoggle-variant">

packages/docs/content/api/CFocusTrap.api.mdx

@@ -43,7 +43,12 @@ import CFocusTrap from '@coreui/react/src/components/focus-trap/CFocusTrap'
       <tr>
         <td colSpan="3">
           <p>Single React element that renders a DOM node and forwards refs properly. The focus trap will be applied to this element and all its focusable descendants.<br />
- Requirements: - Must be a single ReactElement (not an array or fragment) - Must forward the ref to a DOM element - Should contain focusable elements for proper trap behavior</p>
+ Requirements:</p>
+<ul>
+<li>Must be a single ReactElement (not an array or fragment)</li>
+<li>Must forward the ref to a DOM element</li>
+<li>Should contain focusable elements for proper trap behavior</li>
+</ul>
         </td>
       </tr>
       <tr id="cfocustrap-focus-first-element">

packages/docs/content/api/CFormSelect.api.mdx

@@ -122,7 +122,11 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
       </tr>
       <tr>
         <td colSpan="3">
-          <p>Options list of the select component. Available keys: <code>{`label`}</code>, <code>{`value`}</code>, <code>{`disabled`}</code>. Examples: - <code>{`options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`}</code> - <code>{`options={['js', 'html']}`}</code></p>
+          <p>Options list of the select component. Available keys: <code>{`label`}</code>, <code>{`value`}</code>, <code>{`disabled`}</code>. Examples:</p>
+<ul>
+<li><code>{`options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`}</code></li>
+<li><code>{`options={['js', 'html']}`}</code></li>
+</ul>
         </td>
       </tr>
       <tr id="cformselect-size">

packages/docs/content/api/CPopover.api.mdx

@@ -42,7 +42,12 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
       </tr>
       <tr>
         <td colSpan="3">
-          <p>Defines the container element to which the React Popover is appended. Accepts: - A DOM element (<code>{`HTMLElement`}</code> or <code>{`DocumentFragment`}</code>) - A function that returns a single element - <code>{`null`}</code> (defaults to <code>{`document.body`}</code>)</p>
+          <p>Defines the container element to which the React Popover is appended. Accepts:</p>
+<ul>
+<li>A DOM element (<code>{`HTMLElement`}</code> or <code>{`DocumentFragment`}</code>)</li>
+<li>A function that returns a single element</li>
+<li><code>{`null`}</code> (defaults to <code>{`document.body`}</code>)</li>
+</ul>
         <JSXDocs code={`<CPopover container={document.getElementById('my-container')}>...</CPopover>`} />
         </td>
       </tr>
@@ -63,7 +68,11 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
       </tr>
       <tr>
         <td colSpan="3">
-          <p>Delay (in milliseconds) before showing or hiding the React Popover. - If a number is provided, that delay applies to both "show" and "hide". - If an object is provided, use separate values for "show" and "hide".</p>
+          <p>Delay (in milliseconds) before showing or hiding the React Popover.</p>
+<ul>
+<li>If a number is provided, that delay applies to both "show" and "hide".</li>
+<li>If an object is provided, use separate values for "show" and "hide".</li>
+</ul>
         <JSXDocs code={`// Delays 300ms on both show and hide
 <CPopover delay={300}>...</CPopover>
 
@@ -178,7 +187,11 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
       </tr>
       <tr>
         <td colSpan="3">
-          <p>Controls the visibility of the React Popover. - <code>{`true`}</code> shows the popover. - <code>{`false`}</code> hides the popover.</p>
+          <p>Controls the visibility of the React Popover.</p>
+<ul>
+<li><code>{`true`}</code> shows the popover.</li>
+<li><code>{`false`}</code> hides the popover.</li>
+</ul>
         </td>
       </tr>
     </tbody>

packages/docs/content/api/CTable.api.mdx

@@ -102,8 +102,14 @@ import CTable from '@coreui/react/src/components/table/CTable'
       </tr>
       <tr>
         <td colSpan="3">
-          <p>Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '<em>props')
- In columns prop each array item represents one column. Item might be specified in two ways: String: each item define column name equal to item value. Object: item is object with following keys available as column configuration: - key (required)(String) - define column name equal to item key. - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake</em>case to individual words and capitalization of each word. - _props (Object) - adds classes to all cels in column, ex. <code>{`_props: { scope: 'col', className: 'custom-class' }`}</code>, - _style (Object) - adds styles to the column header (useful for defining widths)</p>
+          <p>Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')<br />
+ In columns prop each array item represents one column. Item might be specified in two ways: String: each item define column name equal to item value. Object: item is object with following keys available as column configuration:</p>
+<ul>
+<li>key (required)(String) - define column name equal to item key.</li>
+<li>label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.</li>
+<li>_props (Object) - adds classes to all cels in column, ex. <code>{`_props: { scope: 'col', className: 'custom-class' }`}</code>,</li>
+<li>_style (Object) - adds styles to the column header (useful for defining widths)</li>
+</ul>
         </td>
       </tr>
       <tr id="ctable-footer">

packages/docs/content/api/CTabs.api.mdx

@@ -60,7 +60,8 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs'
         <td colSpan="3">
           <p>Callback fired when the active tab changes.</p>
 <ul>
-<li>In controlled mode (<code>{`activeItemKey`}</code> provided), you must update <code>{`activeItemKey`}</code> yourself based on the value received. - In uncontrolled mode, this callback is called after internal state updates.</li>
+<li>In controlled mode (<code>{`activeItemKey`}</code> provided), you must update <code>{`activeItemKey`}</code> yourself based on the value received.</li>
+<li>In uncontrolled mode, this callback is called after internal state updates.</li>
 </ul>
         <JSXDocs code={`<CTabs onChange={(key) => console.log('Tab changed to', key)} />`} />
         </td>

packages/docs/content/api/CTooltip.api.mdx

@@ -42,7 +42,12 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
       </tr>
       <tr>
         <td colSpan="3">
-          <p>Appends the React Tooltip to a specific element instead of the default <code>{`document.body`}</code>. You may pass: - A DOM element (<code>{`HTMLElement`}</code> or <code>{`DocumentFragment`}</code>) - A function that returns a single element - <code>{`null`}</code></p>
+          <p>Appends the React Tooltip to a specific element instead of the default <code>{`document.body`}</code>. You may pass:</p>
+<ul>
+<li>A DOM element (<code>{`HTMLElement`}</code> or <code>{`DocumentFragment`}</code>)</li>
+<li>A function that returns a single element</li>
+<li><code>{`null`}</code></li>
+</ul>
         <JSXDocs code={`<CTooltip container={document.getElementById('my-container')}>...</CTooltip>`} />
         </td>
       </tr>
@@ -63,7 +68,11 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
       </tr>
       <tr>
         <td colSpan="3">
-          <p>The delay (in milliseconds) before showing or hiding the React Tooltip. - If provided as a number, the delay is applied to both "show" and "hide". - If provided as an object, it should have distinct "show" and "hide" values.</p>
+          <p>The delay (in milliseconds) before showing or hiding the React Tooltip.</p>
+<ul>
+<li>If provided as a number, the delay is applied to both "show" and "hide".</li>
+<li>If provided as an object, it should have distinct "show" and "hide" values.</li>
+</ul>
         <JSXDocs code={`// Delays 300ms on both show and hide
 <CTooltip delay={300}>...</CTooltip>
 
@@ -168,7 +177,11 @@ import CTooltip from '@coreui/react/src/components/tooltip/CTooltip'
       </tr>
       <tr>
         <td colSpan="3">
-          <p>Controls the visibility of the React Tooltip. - <code>{`true`}</code> to show the tooltip. - <code>{`false`}</code> to hide the tooltip.</p>
+          <p>Controls the visibility of the React Tooltip.</p>
+<ul>
+<li><code>{`true`}</code> to show the tooltip.</li>
+<li><code>{`false`}</code> to hide the tooltip.</li>
+</ul>
         </td>
       </tr>
     </tbody>