From 8cabcc24dce07bb2f59b42933d393e411d0245d9 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 10 Jun 2020 06:30:00 +0100 Subject: [PATCH 1/2] Adds custom classname to dropdown options --- packages/components/src/custom-select-control/README.md | 2 +- packages/components/src/custom-select-control/index.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/custom-select-control/README.md b/packages/components/src/custom-select-control/README.md index 62dc6920b49a2..7c2a14fe276da 100644 --- 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 index fdda79fb97aec..a8bbf9a93549a 100644 --- 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': From 4b43a6e60e2e6e33ad5a91abf22290b63f2d7e5f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 10 Jun 2020 06:30:25 +0100 Subject: [PATCH 2/2] Updates story with new custom classname prop --- packages/components/src/custom-select-control/stories/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/custom-select-control/stories/index.js b/packages/components/src/custom-select-control/stories/index.js index dc8f82f471ac9..7b8b07a2c7d00 100644 --- 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',