DEV relate broader use with prop name

src/components/README.md

@@ -1469,11 +1469,13 @@ Format consistent dropdown button props.
     </tr><tr>
     <td>params.options</td><td><code>Array</code></td>
     </tr><tr>
+    <td>params.buttonContent</td><td><code>React.ReactNode</code></td>
+    </tr><tr>
     <td>params.buttonVariant</td><td><code>string</code></td>
     </tr><tr>
     <td>params.onSplitButton</td><td><code>function</code></td>
     </tr><tr>
-    <td>params.splitButtonCopy</td><td><code>string</code></td>
+    <td>params.placeholder</td><td><code>string</code></td>
     </tr><tr>
     <td>params.splitButtonVariant</td><td><code>string</code></td>
     </tr>  </tbody>
@@ -1548,6 +1550,8 @@ callback for both select and dropdown.
     </tr><tr>
     <td>props.ariaLabel</td><td><code>string</code></td>
     </tr><tr>
+    <td>props.buttonContent</td><td><code>React.ReactNode</code></td>
+    </tr><tr>
     <td>props.buttonVariant</td><td><code>string</code></td>
     </tr><tr>
     <td>props.className</td><td><code>string</code></td>

src/components/form/__tests__/__snapshots__/select.test.js.snap

@@ -101,6 +101,7 @@ exports[`Select Component should allow being disabled with missing options: no o
   "id": "test",
   "options": [],
   "ariaLabel": "Select option",
+  "buttonContent": null,
   "className": "",
   "direction": "down",
   "isDisabled": false,
@@ -113,7 +114,6 @@ exports[`Select Component should allow being disabled with missing options: no o
   "placeholder": "Select option",
   "position": "left",
   "selectedOptions": null,
-  "splitButtonContent": null,
   "splitButtonVariant": null,
   "toggleIcon": null,
   "variant": "single",
@@ -182,6 +182,7 @@ exports[`Select Component should allow being disabled with missing options: opti
     "world"
   ],
   "ariaLabel": "Select option",
+  "buttonContent": null,
   "className": "",
   "direction": "down",
   "isDisabled": true,
@@ -194,7 +195,6 @@ exports[`Select Component should allow being disabled with missing options: opti
   "placeholder": "Select option",
   "position": "left",
   "selectedOptions": null,
-  "splitButtonContent": null,
   "splitButtonVariant": null,
   "toggleIcon": null,
   "variant": "single",
@@ -258,6 +258,7 @@ exports[`Select Component should allow being disabled with missing options: opti
   "id": "test",
   "options": [],
   "ariaLabel": "Select option",
+  "buttonContent": null,
   "className": "",
   "direction": "down",
   "isDisabled": false,
@@ -270,7 +271,6 @@ exports[`Select Component should allow being disabled with missing options: opti
   "placeholder": "Select option",
   "position": "left",
   "selectedOptions": null,
-  "splitButtonContent": null,
   "splitButtonVariant": null,
   "toggleIcon": null,
   "variant": "single",
@@ -331,6 +331,7 @@ exports[`Select Component should allow being disabled with missing options: opti
 exports[`Select Component should allow data- props: data- attributes 1`] = `
 {
   "ariaLabel": "Select option",
+  "buttonContent": null,
   "buttonVariant": undefined,
   "children": [],
   "className": "",
@@ -351,7 +352,6 @@ exports[`Select Component should allow data- props: data- attributes 1`] = `
   "placeholder": "Select option",
   "position": "left",
   "selectedOptions": null,
-  "splitButtonContent": null,
   "splitButtonVariant": null,
   "toggleIcon": null,
   "variant": "single",
@@ -566,6 +566,7 @@ exports[`Select Component should emulate pf dropdown: emulated dropdown 1`] = `
     "world"
   ],
   "ariaLabel": "Select option",
+  "buttonContent": null,
   "className": "",
   "direction": "down",
   "id": "generatedid-",
@@ -578,7 +579,6 @@ exports[`Select Component should emulate pf dropdown: emulated dropdown 1`] = `
   "placeholder": "Select option",
   "position": "left",
   "selectedOptions": null,
-  "splitButtonContent": null,
   "splitButtonVariant": null,
   "toggleIcon": null,
   "variant": "single",
@@ -649,6 +649,7 @@ exports[`Select Component should render a basic component: basic component 1`] =
     }
   ],
   "ariaLabel": "Select option",
+  "buttonContent": null,
   "className": "",
   "direction": "down",
   "isDisabled": false,
@@ -661,7 +662,6 @@ exports[`Select Component should render a basic component: basic component 1`] =
   "placeholder": "Select option",
   "position": "left",
   "selectedOptions": null,
-  "splitButtonContent": null,
   "splitButtonVariant": null,
   "toggleIcon": null,
   "variant": "single",
@@ -740,6 +740,7 @@ exports[`Select Component should render a checkbox select: checkbox select 1`] =
   "variant": "checkbox",
   "placeholder": "multiselect test",
   "ariaLabel": "Select option",
+  "buttonContent": null,
   "className": "",
   "direction": "down",
   "isDisabled": false,
@@ -750,7 +751,6 @@ exports[`Select Component should render a checkbox select: checkbox select 1`] =
   "maxHeight": null,
   "name": null,
   "position": "left",
-  "splitButtonContent": null,
   "splitButtonVariant": null,
   "toggleIcon": null,
   "children": []

src/components/form/select.js

@@ -194,22 +194,22 @@ const formatSelectProps = _memoize(({ isDisabled, placeholder, options } = {}) =
  * @param {object} params
  * @param {boolean} params.isDisabled
  * @param {Array} params.options
+ * @param {React.ReactNode} params.buttonContent
  * @param {string} params.buttonVariant
  * @param {Function} params.onSplitButton
  * @param {string} params.placeholder
- * @param {React.ReactNode} params.splitButtonContent
  * @param {string} params.splitButtonVariant
  * @returns {*}
  */
 const formatButtonProps = _memoize(
   ({
     isDisabled,
     options,
+    buttonContent,
     buttonVariant,
     onSplitButton,
     onToggle,
     placeholder,
-    splitButtonContent,
     splitButtonVariant
   } = {}) => {
     const buttonVariantPropLookup = {
@@ -225,15 +225,15 @@ const formatButtonProps = _memoize(
         splitButtonVariant: 'action',
         splitButtonItems: [
           <DropdownToggleAction onClick={onSplitButton} key="toggle-action">
-            {splitButtonContent}
+            {buttonContent}
           </DropdownToggleAction>
         ]
       },
       default: {
         splitButtonVariant: 'default',
         splitButtonItems: [
           <DropdownToggleAction onClick={() => onToggle()} key="toggle-action">
-            {splitButtonContent}
+            {buttonContent}
           </DropdownToggleAction>
         ]
       },
@@ -292,6 +292,7 @@ const formatButtonParentProps = (formattedButtonProps = {}) => {
  * @fires onToggle
  * @param {object} props
  * @param {string} props.ariaLabel
+ * @param {React.ReactNode} props.buttonContent
  * @param {string} props.buttonVariant
  * @param {string} props.className
  * @param {string} props.direction
@@ -309,7 +310,6 @@ const formatButtonParentProps = (formattedButtonProps = {}) => {
  * @param {string} props.placeholder
  * @param {string} props.position
  * @param {number|string|Array} props.selectedOptions
- * @param {React.ReactNode} props.splitButtonContent
  * @param {string} props.splitButtonVariant
  * @param {React.ReactNode|Function} props.toggleIcon
  * @param {string} props.variant
@@ -318,6 +318,7 @@ const formatButtonParentProps = (formattedButtonProps = {}) => {
  */
 const Select = ({
   ariaLabel,
+  buttonContent,
   buttonVariant,
   className,
   direction,
@@ -335,7 +336,6 @@ const Select = ({
   placeholder,
   position,
   selectedOptions,
-  splitButtonContent,
   splitButtonVariant,
   toggleIcon,
   variant,
@@ -476,13 +476,13 @@ const Select = ({
             onSplitButton: onUpdatedSplitButton,
             options,
             buttonVariant,
-            splitButtonContent,
+            buttonContent,
             splitButtonVariant,
             placeholder: placeholder || ariaLabel
           })}
         >
           {toggleIcon ||
-            (!splitButtonVariant && splitButtonContent) ||
+            (!splitButtonVariant && buttonContent) ||
             (!splitButtonVariant && placeholder) ||
             (!SplitButtonVariant && ariaLabel)}
         </DropdownToggle>
@@ -571,10 +571,11 @@ const Select = ({
  *     ariaLabel: string, onSelect: Function, isToggleText: boolean, isDropdownButton: boolean, maxHeight: number,
  *     buttonVariant: string, name: string, options: Array|object, selectedOptions: Array|number|string,
  *     variant: string, isInline: boolean, id: string, isDisabled: boolean, placeholder: string, position: string,
- *     splitButtonContent: React.ReactNode, splitButtonVariant: string, direction: string}}
+ *     buttonContent: React.ReactNode, splitButtonVariant: string, direction: string}}
  */
 Select.propTypes = {
   ariaLabel: PropTypes.string,
+  buttonContent: PropTypes.node,
   buttonVariant: PropTypes.oneOf(Object.values(ButtonVariant)),
   className: PropTypes.string,
   direction: PropTypes.oneOf(Object.values(SelectDirection)),
@@ -617,7 +618,6 @@ Select.propTypes = {
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))
   ]),
-  splitButtonContent: PropTypes.node,
   splitButtonVariant: PropTypes.oneOf(Object.values(SplitButtonVariant)),
   toggleIcon: PropTypes.element,
   variant: PropTypes.oneOf([...Object.values(SelectVariant)])
@@ -629,11 +629,12 @@ Select.propTypes = {
  * @type {{isFlipEnabled: boolean, toggleIcon: null, className: string, onSplitButton: Function, ariaLabel: string,
  *     onSelect: Function, isToggleText: boolean, isDropdownButton: boolean, maxHeight: null, buttonVariant: string,
  *     name: null, options: Array, selectedOptions: null, variant: SelectVariant.single, isInline: boolean, id: string,
- *     isDisabled: boolean, placeholder: string, position: string, splitButtonContent: null, splitButtonVariant: null,
+ *     isDisabled: boolean, placeholder: string, position: string, buttonContent: null, splitButtonVariant: null,
  *     direction: string}}
  */
 Select.defaultProps = {
   ariaLabel: 'Select option',
+  buttonContent: null,
   buttonVariant: ButtonVariant.default,
   className: '',
   direction: SelectDirection.down,
@@ -651,7 +652,6 @@ Select.defaultProps = {
   placeholder: 'Select option',
   position: SelectPosition.left,
   selectedOptions: null,
-  splitButtonContent: null,
   splitButtonVariant: null,
   toggleIcon: null,
   variant: SelectVariant.single

src/components/toolbar/__tests__/__snapshots__/toolbarFieldBillingProvider.test.js.snap

@@ -62,6 +62,7 @@ exports[`ToolbarFieldBillingProvider Component should render a basic component:
 <Select
   aria-label="t(curiosity-toolbar.placeholder_billing, {"context":"provider"})"
   ariaLabel="Select option"
+  buttonContent={null}
   className=""
   data-test="toolbarFieldBillingProvider"
   direction="down"
@@ -97,7 +98,6 @@ exports[`ToolbarFieldBillingProvider Component should render a basic component:
   placeholder="t(curiosity-toolbar.placeholder_billing, {"context":"provider"})"
   position="left"
   selectedOptions="aws"
-  splitButtonContent={null}
   splitButtonVariant={null}
   toggleIcon={null}
   variant="single"

src/components/toolbar/__tests__/__snapshots__/toolbarFieldCategory.test.js.snap

@@ -109,6 +109,7 @@ exports[`ToolbarFieldCategory Component should render a basic component: basic 1
 <Select
   aria-label="t(curiosity-toolbar.placeholder, {"context":"category"})"
   ariaLabel="Select option"
+  buttonContent={null}
   className=""
   data-test="toolbarFieldCategory"
   direction="down"
@@ -126,7 +127,6 @@ exports[`ToolbarFieldCategory Component should render a basic component: basic 1
   placeholder="t(curiosity-toolbar.placeholder, {"context":"category"})"
   position="left"
   selectedOptions={null}
-  splitButtonContent={null}
   splitButtonVariant={null}
   toggleIcon={null}
   variant="single"

src/components/toolbar/__tests__/__snapshots__/toolbarFieldExport.test.js.snap

@@ -39,6 +39,13 @@ exports[`ToolbarFieldExport Component should render a basic component: basic 1`]
 <Select
   aria-label="t(curiosity-toolbar.placeholder, {"context":"export"})"
   ariaLabel="Select option"
+  buttonContent={
+    <React.Fragment>
+      <ExportIcon />
+       
+      t(curiosity-toolbar.label, {"context":"export"})
+    </React.Fragment>
+  }
   className=""
   data-test="toolbarFieldExport"
   direction="down"
@@ -65,13 +72,6 @@ exports[`ToolbarFieldExport Component should render a basic component: basic 1`]
   placeholder="t(curiosity-toolbar.placeholder, {"context":"export"})"
   position="left"
   selectedOptions={null}
-  splitButtonContent={
-    <React.Fragment>
-      <ExportIcon />
-       
-      t(curiosity-toolbar.label, {"context":"export"})
-    </React.Fragment>
-  }
   splitButtonVariant={null}
   title="t(curiosity-toolbar.placeholder, {"context":"export"})"
   toggleIcon={null}

src/components/toolbar/__tests__/__snapshots__/toolbarFieldGranularity.test.js.snap

@@ -91,6 +91,7 @@ exports[`ToolbarFieldGranularity Component should render a basic component: basi
 <Select
   aria-label="t(curiosity-toolbar.placeholder, {"context":"granularity"})"
   ariaLabel="Select option"
+  buttonContent={null}
   className=""
   data-test="toolbarFieldGranularity"
   direction="down"
@@ -131,7 +132,6 @@ exports[`ToolbarFieldGranularity Component should render a basic component: basi
   placeholder="t(curiosity-toolbar.placeholder, {"context":"granularity"})"
   position="left"
   selectedOptions="Weekly"
-  splitButtonContent={null}
   splitButtonVariant={null}
   toggleIcon={null}
   variant="single"

src/components/toolbar/__tests__/__snapshots__/toolbarFieldGroupVariant.test.js.snap

@@ -81,6 +81,7 @@ exports[`ToolbarFieldGroupVariant Component should render a basic component: bas
   <Select
     aria-label="t(curiosity-toolbar.placeholder, {"context":"groupVariant"})"
     ariaLabel="Select option"
+    buttonContent={null}
     className=""
     data-test="toolbarFieldGroupVariant"
     direction="down"
@@ -121,7 +122,6 @@ exports[`ToolbarFieldGroupVariant Component should render a basic component: bas
     placeholder="t(curiosity-toolbar.placeholder, {"context":"groupVariant"})"
     position="left"
     selectedOptions={null}
-    splitButtonContent={null}
     splitButtonVariant={null}
     toggleIcon={null}
     variant="single"
@@ -149,6 +149,7 @@ exports[`ToolbarFieldGroupVariant Component should return a standalone component
     <Select
       aria-label="t(curiosity-toolbar.placeholder, {"context":"groupVariant"})"
       ariaLabel="Select option"
+      buttonContent={null}
       className=""
       data-test="toolbarFieldGroupVariant"
       direction="down"
@@ -179,7 +180,6 @@ exports[`ToolbarFieldGroupVariant Component should return a standalone component
       placeholder="t(curiosity-toolbar.placeholder, {"context":"groupVariant"})"
       position="left"
       selectedOptions={null}
-      splitButtonContent={null}
       splitButtonVariant={null}
       toggleIcon={null}
       variant="single"