fix(toolbarFieldExport): sw-117 apply export label

* toolbarFieldExport, apply export label copy
* toolbar, standalone single item filters without padding
* select, allow basic dropdown button

public/locales/en-US.json

@@ -317,6 +317,7 @@
     "label_category_hypervisor": "Hypervisor",
     "label_category_physical": "Physical",
     "label_category_virtual": "Virtual",
+    "label_export": "Export",
     "label_export_csv": "Export to CSV",
     "label_export_loading": "Loading...",
     "label_export_json": "Export to JSON",

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,
@@ -181,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,
@@ -256,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,
@@ -328,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": "",
@@ -562,6 +566,7 @@ exports[`Select Component should emulate pf dropdown: emulated dropdown 1`] = `
     "world"
   ],
   "ariaLabel": "Select option",
+  "buttonContent": null,
   "className": "",
   "direction": "down",
   "id": "generatedid-",
@@ -644,6 +649,7 @@ exports[`Select Component should render a basic component: basic component 1`] =
     }
   ],
   "ariaLabel": "Select option",
+  "buttonContent": null,
   "className": "",
   "direction": "down",
   "isDisabled": false,
@@ -734,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,

src/components/form/select.js

@@ -31,11 +31,12 @@ import { helpers } from '../../common';
 /**
  * Dropdown split button variants
  *
- * @type {{action: string, checkbox: string}}
+ * @type {{default: string, checkbox: string, action: string}}
  */
 const SplitButtonVariant = {
   action: 'action',
-  checkbox: 'checkbox'
+  checkbox: 'checkbox',
+  default: 'default'
 };
 
 /**
@@ -193,14 +194,24 @@ 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.splitButtonCopy
+ * @param {string} params.placeholder
  * @param {string} params.splitButtonVariant
  * @returns {*}
  */
 const formatButtonProps = _memoize(
-  ({ isDisabled, options, buttonVariant, onSplitButton, splitButtonCopy, splitButtonVariant } = {}) => {
+  ({
+    isDisabled,
+    options,
+    buttonContent,
+    buttonVariant,
+    onSplitButton,
+    onToggle,
+    placeholder,
+    splitButtonVariant
+  } = {}) => {
     const buttonVariantPropLookup = {
       default: { toggleVariant: 'default' },
       plain: { isPlain: true, toggleIndicator: null },
@@ -214,19 +225,27 @@ const formatButtonProps = _memoize(
         splitButtonVariant: 'action',
         splitButtonItems: [
           <DropdownToggleAction onClick={onSplitButton} key="toggle-action">
-            {splitButtonCopy}
+            {buttonContent}
+          </DropdownToggleAction>
+        ]
+      },
+      default: {
+        splitButtonVariant: 'default',
+        splitButtonItems: [
+          <DropdownToggleAction onClick={() => onToggle()} key="toggle-action">
+            {buttonContent}
           </DropdownToggleAction>
         ]
       },
       checkbox: {
         splitButtonVariant: 'checkbox',
         splitButtonItems: [
           <DropdownToggleCheckbox
-            id={`toggle-action-${splitButtonCopy}`}
+            id={`toggle-action-${placeholder}`}
             key="toggle-action"
             onClick={onSplitButton}
-            aria-label={splitButtonCopy}
-            placeholder={splitButtonCopy}
+            aria-label={placeholder}
+            placeholder={placeholder}
           />
         ]
       }
@@ -273,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
@@ -298,6 +318,7 @@ const formatButtonParentProps = (formattedButtonProps = {}) => {
  */
 const Select = ({
   ariaLabel,
+  buttonContent,
   buttonVariant,
   className,
   direction,
@@ -451,14 +472,19 @@ const Select = ({
           onToggle={(_event, expanded) => onToggle(expanded)}
           {...formatButtonProps({
             isDisabled,
+            onToggle: () => onToggle(!isExpanded),
             onSplitButton: onUpdatedSplitButton,
             options,
             buttonVariant,
-            splitButtonCopy: placeholder || ariaLabel,
-            splitButtonVariant
+            buttonContent,
+            splitButtonVariant,
+            placeholder: placeholder || ariaLabel
           })}
         >
-          {toggleIcon || (!splitButtonVariant && placeholder) || (!SplitButtonVariant && ariaLabel)}
+          {toggleIcon ||
+            (!splitButtonVariant && buttonContent) ||
+            (!splitButtonVariant && placeholder) ||
+            (!SplitButtonVariant && ariaLabel)}
         </DropdownToggle>
       }
       dropdownItems={
@@ -545,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,
- *     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)),
@@ -602,10 +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, splitButtonVariant: null, direction: string}}
+ *     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,

src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap

@@ -356,6 +356,10 @@ exports[`I18n Component should generate a predictable locale key output snapshot
         "key": "curiosity-toolbar.placeholder",
         "match": "t('curiosity-toolbar.placeholder', { context: 'export' })",
       },
+      {
+        "key": "curiosity-toolbar.label",
+        "match": "t('curiosity-toolbar.label', { context: 'export' })",
+      },
     ],
   },
   {
@@ -1036,6 +1040,10 @@ exports[`I18n Component should have locale keys that exist in the default langua
     "file": "src/components/toolbar/toolbarFieldExport.js",
     "key": "curiosity-toolbar.label",
   },
+  {
+    "file": "src/components/toolbar/toolbarFieldExport.js",
+    "key": "curiosity-toolbar.label",
+  },
   {
     "file": "src/components/toolbar/toolbarFieldExportContext.js",
     "key": "curiosity-toolbar.notifications",

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

@@ -358,14 +358,6 @@ exports[`Toolbar Component should return an empty render, or variant filter, whe
     isExpanded={false}
     showClearFiltersButton={false}
   >
-    <ToolbarToggleGroup
-      breakpoint="md"
-      toggleIcon={<FilterIcon />}
-    >
-      <ForwardRef
-        variant="filter-group"
-      />
-    </ToolbarToggleGroup>
     <ForwardRef />
     <ForwardRef
       align={

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"

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"

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

@@ -39,7 +39,13 @@ exports[`ToolbarFieldExport Component should render a basic component: basic 1`]
 <Select
   aria-label="t(curiosity-toolbar.placeholder, {"context":"export"})"
   ariaLabel="Select option"
-  buttonVariant="plain"
+  buttonContent={
+    <React.Fragment>
+      <ExportIcon />
+       
+      t(curiosity-toolbar.label, {"context":"export"})
+    </React.Fragment>
+  }
   className=""
   data-test="toolbarFieldExport"
   direction="down"
@@ -68,7 +74,7 @@ exports[`ToolbarFieldExport Component should render a basic component: basic 1`]
   selectedOptions={null}
   splitButtonVariant={null}
   title="t(curiosity-toolbar.placeholder, {"context":"export"})"
-  toggleIcon={<ExportIcon />}
+  toggleIcon={null}
   variant="single"
 />
 `;

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"

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"
@@ -148,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"

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

@@ -118,6 +118,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
 <Select
   aria-label="t(curiosity-toolbar.placeholder, {"context":"rangedMonthly"})"
   ariaLabel="Select option"
+  buttonContent={null}
   className=""
   data-test="toolbarFieldRangeGranularity"
   direction="down"
@@ -319,6 +320,7 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
 <Select
   aria-label="t(curiosity-toolbar.placeholder, {"context":"rangedMonthly"})"
   ariaLabel="Select option"
+  buttonContent={null}
   className=""
   data-test="toolbarFieldRangeGranularity"
   direction="down"

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

@@ -290,6 +290,7 @@ exports[`ToolbarFieldSelectCategory Component should render a basic component: b
 <Select
   aria-label="t(curiosity-toolbar.placeholder, {"context":"filter"})"
   ariaLabel="Select option"
+  buttonContent={null}
   className=""
   data-test="toolbarFieldCategory"
   direction="down"

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

@@ -67,6 +67,7 @@ exports[`ToolbarFieldSla Component should render a basic component: basic 1`] =
 <Select
   aria-label="t(curiosity-toolbar.placeholder, {"context":"sla"})"
   ariaLabel="Select option"
+  buttonContent={null}
   className=""
   data-test="toolbarFieldSla"
   direction="down"

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

@@ -67,6 +67,7 @@ exports[`ToolbarFieldSla Component should render a basic component: basic 1`] =
 <Select
   aria-label="t(curiosity-toolbar.placeholder, {"context":"usage"})"
   ariaLabel="Select option"
+  buttonContent={null}
   className=""
   data-test="toolbarFieldUsage"
   direction="down"