Commit 2ed7aae

committed

feat(CDropdownToggle): add splitLabel prop for customizable screen reader text

1 parent e6c3def commit 2ed7aaeCopy full SHA for 2ed7aae

File tree

+23

-3

lines changed

+23

-3

lines changed

Lines changed: 11 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,14 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {`
`34`	`34`	`*/`
`35`	`35`	`split?: boolean`
`36`	`36`
	`37`	`+ /**`
	`38`	`+ * Screen reader label for split button dropdown toggle.`
	`39`	`+ *`
	`40`	`+ * @default 'Toggle Dropdown'`
	`41`	`+ * @since 5.9.0`
	`42`	`+ */`
	`43`	`+ splitLabel?: string`
	`44`	`+`
`37`	`45`	`/**`
`38`	`46`	`* Sets which event handlers you'd like provided to your toggle prop. You can`
`39`	`47`	`* specify one trigger or an array of them.`
`@@ -50,6 +58,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({`
`50`	`58`	`className,`
`51`	`59`	`navLink = true,`
`52`	`60`	`split,`
	`61`	`+ splitLabel = 'Toggle Dropdown',`
`53`	`62`	`trigger = 'click',`
`54`	`63`	`...rest`
`55`	`64`	`}) => {`
`@@ -117,7 +126,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({`
`117`	`126`	`return (`
`118`	`127`	`<CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>`
`119`	`128`	`{children}`
`120`		`- {split && <span className="visually-hidden">Toggle Dropdown</span>}`
	`129`	`+ {split && <span className="visually-hidden">{splitLabel}</span>}`
`121`	`130`	`</CButton>`
`122`	`131`	`)`
`123`	`132`	`}`
`@@ -128,6 +137,7 @@ CDropdownToggle.propTypes = {`
`128`	`137`	`className: PropTypes.string,`
`129`	`138`	`custom: PropTypes.bool,`
`130`	`139`	`split: PropTypes.bool,`
	`140`	`+ splitLabel: PropTypes.string,`
`131`	`141`	`trigger: triggerPropType,`
`132`	`142`	`}`
`133`	`143`

Lines changed: 10 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -145,6 +145,16 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg`
`145`	`145`	<p>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code>{`.dropdown-toggle-split`}</code> className for proper spacing around the dropdown caret.</p>
`146`	`146`	`</td>`
`147`	`147`	`</tr>`
	`148`	`+ <tr id="cdropdowntoggle-split-label">`
	`149`	`+ <td className="text-primary fw-semibold">splitLabel<a href="#cdropdowntoggle-split-label" aria-label="CDropdownToggle splitLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">5.9.0+</span></td>`
	`150`	+ <td><code>{`Toggle Dropdown`}</code></td>
	`151`	+ <td><code>{`string`}</code></td>
	`152`	`+ </tr>`
	`153`	`+ <tr>`
	`154`	`+ <td colSpan="3">`
	`155`	`+ <p>Screen reader label for split button dropdown toggle.</p>`
	`156`	`+ </td>`
	`157`	`+ </tr>`
`148`	`158`	`<tr id="cdropdowntoggle-trigger">`
`149`	`159`	`<td className="text-primary fw-semibold">trigger<a href="#cdropdowntoggle-trigger" aria-label="CDropdownToggle trigger permalink" className="anchor-link after">#</a></td>`
`150`	`160`	<td><code>{`click`}</code></td>

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ export const DropdownDropendExample = () => {`
`24`	`24`
`25`	`25`	`<CDropdown variant="btn-group" direction="dropend">`
`26`	`26`	`<CButton color="secondary">Small split button</CButton>`
`27`		`- <CDropdownToggle color="secondary" split />`
	`27`	`+ <CDropdownToggle color="secondary" split splitLabel="Toggle Dropend"/>`
`28`	`28`	`<CDropdownMenu>`
`29`	`29`	`<CDropdownItem href="#">Action</CDropdownItem>`
`30`	`30`	`<CDropdownItem href="#">Another action</CDropdownItem>`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ export const DropdownDropstartExample = () => {`
`25`	`25`
`26`	`26`	`<CButtonGroup>`
`27`	`27`	`<CDropdown variant="btn-group" direction="dropstart">`
`28`		`- <CDropdownToggle color="secondary" split />`
	`28`	`+ <CDropdownToggle color="secondary" split splitLabel="Toggle Dropstart"/>`
`29`	`29`	`<CDropdownMenu>`
`30`	`30`	`<CDropdownItem href="#">Action</CDropdownItem>`
`31`	`31`	`<CDropdownItem href="#">Another action</CDropdownItem>`

Comments

(0)