diff --git a/packages/patternfly-4/react-core/src/components/Select/Select.tsx b/packages/patternfly-4/react-core/src/components/Select/Select.tsx index c81639372dd..87b02a0a542 100644 --- a/packages/patternfly-4/react-core/src/components/Select/Select.tsx +++ b/packages/patternfly-4/react-core/src/components/Select/Select.tsx @@ -77,6 +77,8 @@ export interface SelectProps width?: string | number; /** Max height of the select container as a number of px or string percentage */ maxHeight?: string | number; + /** If true, only show count of selections rather than selected values. Default to false. */ + showOnlySelectionCount?: boolean; /** Icon element to render inside the select toggle */ toggleIcon?: React.ReactElement; /** Custom content to render in the select menu. If this prop is defined, the variant prop will be ignored and the select will render with a single select toggle */ @@ -120,6 +122,7 @@ class Select extends React.Component undefined as void, onCreateOption: (_newOptionValue: string) => undefined as void, + showOnlySelectionCount: false, toggleIcon: null as React.ReactElement, onFilter: null, customContent: null @@ -356,6 +359,7 @@ class Select extends React.Component {selections && @@ -484,6 +488,11 @@ class Select extends React.Component {toggleIcon && {toggleIcon}} {selections && (Array.isArray(selections) && selections.length > 0) && selectedChips} + {selections && showOnlySelectionCount && (Array.isArray(selections) && selections.length > 0) && ( +
+ {selections.length} +
+ )} + + { @@ -585,10 +586,16 @@ class MultiTypeaheadSelectInput extends React.Component { hasOnCreateOption: checked }); }; + + this.toggleShowOnlyCount = checked => { + this.setState({ + showOnlySelectionCount: checked + }); + }; } render() { - const { isExpanded, selected, isCreatable, hasOnCreateOption } = this.state; + const { isExpanded, selected, isCreatable, hasOnCreateOption, showOnlySelectionCount } = this.state; const titleId = 'multi-typeahead-select-id'; return ( @@ -608,6 +615,7 @@ class MultiTypeaheadSelectInput extends React.Component { placeholderText="Select a state" isCreatable={isCreatable} onCreateOption={(hasOnCreateOption && this.onCreateOption) || undefined} + showOnlySelectionCount={showOnlySelectionCount} > {this.state.options.map((option, index) => ( @@ -629,6 +637,14 @@ class MultiTypeaheadSelectInput extends React.Component { id="toggle-new-typeahead-multi" name="toggle-new-typeahead-multi" /> + ); } diff --git a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/__snapshots__/DataToolbar.test.tsx.snap b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/__snapshots__/DataToolbar.test.tsx.snap index a7b9bf32185..ce3647c0b76 100644 --- a/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/__snapshots__/DataToolbar.test.tsx.snap +++ b/packages/patternfly-4/react-core/src/experimental/components/DataToolbar/__snapshots__/DataToolbar.test.tsx.snap @@ -229,6 +229,7 @@ exports[`data toolbar DataToolbarFilter 1`] = ` } placeholderText="" selections="Running" + showOnlySelectionCount={false} toggleIcon={null} toggleId={null} variant="single" @@ -935,6 +936,7 @@ exports[`data toolbar DataToolbarFilter 1`] = ` } placeholderText="" selections="Low" + showOnlySelectionCount={false} toggleIcon={null} toggleId={null} variant="single" @@ -2366,6 +2368,7 @@ exports[`data toolbar DataToolbarToggleGroup 1`] = ` } placeholderText="" selections="Running" + showOnlySelectionCount={false} toggleIcon={null} toggleId={null} variant="single" @@ -2580,6 +2583,7 @@ exports[`data toolbar DataToolbarToggleGroup 1`] = ` } placeholderText="" selections="Low" + showOnlySelectionCount={false} toggleIcon={null} toggleId={null} variant="single"