Enable custom classnames on <CustomSelectControl> options (#23045)

* Adds custom classname to dropdown options * Updates story with new custom classname prop
WordPress · Jun 10, 2020 · cd9bceb · cd9bceb
1 parent e9e3027
commit cd9bceb
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 1 deletion.
diff --git a/packages/components/src/custom-select-control/README.md b/packages/components/src/custom-select-control/README.md
@@ -93,7 +93,7 @@ The label for the control.
 #### options
 
 The options that can be chosen from.
-- Type: `Array<{ key: String, name: String, style: ?{}, ...rest }>`
+- Type: `Array<{ key: String, name: String, style: ?{}, className: ?String, ...rest }>`
 - Required: Yes
 
 #### onChange

diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
@@ -138,6 +138,7 @@ export default function CustomSelectControl( {
 								index,
 								key: item.key,
 								className: classnames(
+									item.className,
 									'components-custom-select-control__item',
 									{
 										'is-highlighted':

diff --git a/packages/components/src/custom-select-control/stories/index.js b/packages/components/src/custom-select-control/stories/index.js
@@ -18,6 +18,7 @@ const defaultOptions = [
 		key: 'normal',
 		name: 'Normal',
 		style: { fontSize: '100%' },
+		className: 'can-apply-custom-class-to-option',
 	},
 	{
 		key: 'large',