Skip to content

feat(select): Allow count badge to be hidden in checkbox select #3976

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tlabaj merged 1 commit into from
Mar 27, 2020
Merged

feat(select): Allow count badge to be hidden in checkbox select #3976

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions packages/react-core/src/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ export interface SelectProps
noResultsFoundText?: string;
/** Selected item for single select variant. Array of selected items for multi select variants. */
selections?: string | SelectOptionObject | (string | SelectOptionObject)[];
/** Flag indicating if selection badge should be hidden for checkbox variant,default false */
isCheckboxSelectionBadgeHidden?: boolean;
/** Id for select toggle element */
toggleId?: string;
/** Adds accessible text to Select */
Expand Down Expand Up @@ -362,6 +364,7 @@ class Select extends React.Component<SelectProps & InjectedOuiaProps, SelectStat
isDisabled,
isCreatable,
selections,
isCheckboxSelectionBadgeHidden,
ariaLabelledBy,
ariaLabelTypeAhead,
ariaLabelClear,
Expand Down Expand Up @@ -514,11 +517,13 @@ class Select extends React.Component<SelectProps & InjectedOuiaProps, SelectStat
<div className={css(styles.selectToggleWrapper)}>
{toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
<span className={css(styles.selectToggleText)}>{placeholderText}</span>
{selections && (Array.isArray(selections) && selections.length > 0) && (
<div className={css(styles.selectToggleBadge)}>
<span className={css(badgeStyles.badge, badgeStyles.modifiers.read)}>{selections.length}</span>
</div>
)}
{!isCheckboxSelectionBadgeHidden &&
selections &&
(Array.isArray(selections) && selections.length > 0) && (
<div className={css(styles.selectToggleBadge)}>
<span className={css(badgeStyles.badge, badgeStyles.modifiers.read)}>{selections.length}</span>
</div>
)}
</div>
{hasOnClear && hasAnySelections && clearBtn}
</React.Fragment>
Expand Down
86 changes: 57 additions & 29 deletions packages/react-core/src/components/Select/__tests__/Select.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ describe('select', () => {
describe('single select', () => {
test('renders closed successfully', () => {
const view = mount(
<Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()}>
<Select toggleId="single-select-closed" variant={SelectVariant.single} onSelect={jest.fn()}
onToggle={jest.fn()}>
{selectOptions}
</Select>
);
Expand All @@ -55,7 +56,8 @@ describe('select', () => {

test('renders disabled successfully', () => {
const view = mount(
<Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isDisabled>
<Select toggleId="single-select-disabled" variant={SelectVariant.single}
onSelect={jest.fn()} onToggle={jest.fn()} isDisabled>
{selectOptions}
</Select>
);
Expand All @@ -64,25 +66,28 @@ describe('select', () => {

test('renders expanded successfully', () => {
const view = mount(
<Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
<Select toggleId="single-select-expanded" variant={SelectVariant.single}
onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
{selectOptions}
</Select>
);
expect(view).toMatchSnapshot();
});
test('renders expanded successfully with custom objects', () => {
const view = mount(
<Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
<Select toggleId="single-select-custom" variant={SelectVariant.single} onSelect={jest.fn()}
onToggle={jest.fn()} isExpanded>
{selectOptionsCustom}
</Select>
);
expect(view).toMatchSnapshot();
});
});

test('renders up drection successfully', () => {
test('renders up direction successfully', () => {
const view = mount(
<Select variant={SelectVariant.single} direction={SelectDirection.up} onSelect={jest.fn()} onToggle={jest.fn()}>
<Select toggleId="select-up" variant={SelectVariant.single} direction={SelectDirection.up}
onSelect={jest.fn()} onToggle={jest.fn()}>
{selectOptions}
</Select>
);
Expand All @@ -106,6 +111,7 @@ describe('select', () => {
};
const view = mount(
<Select
toggleId="custom-select-filters"
variant={SelectVariant.typeahead}
onSelect={jest.fn()}
onToggle={jest.fn()}
Expand All @@ -124,7 +130,7 @@ describe('select', () => {

test('renders select groups successfully', () => {
const view = mount(
<Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded isGrouped>
<Select toggleId="single-select-groups" variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded isGrouped>
<SelectGroup label="group 1">{selectOptions}</SelectGroup>
<SelectGroup label="group 2">{selectOptions}</SelectGroup>
</Select>
Expand All @@ -136,7 +142,25 @@ describe('select', () => {
describe('checkbox select', () => {
test('renders closed successfully', () => {
const view = mount(
<Select variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()}>
<Select toggleId="checkbox-select-closed" variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()}>
{selectOptions}
</Select>
);
expect(view).toMatchSnapshot();
});

test('renders checkbox select selections properly', () => {
const view = mount(
<Select toggleId="checkbox-select-selections" variant={SelectVariant.checkbox} onToggle={jest.fn()} selections={[selectOptions[0]]}>
{selectOptions}
</Select>
);
expect(view).toMatchSnapshot();
});

test('renders checkbox select selections properly when isCheckboxSelectionBadgeHidden is true', () => {
const view = mount(
<Select toggleId="checkbox-select-hidden-badge" variant={SelectVariant.checkbox} onToggle={jest.fn()} isCheckboxSelectionBadgeHidden selections={[selectOptions[0]]}>
{selectOptions}
</Select>
);
Expand All @@ -145,7 +169,7 @@ describe('checkbox select', () => {

test('renders closed successfully - old classes', () => {
const view = mount(
<Select variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()}>
<Select toggleId="checkbox-select-closed-old" variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()}>
{checkboxSelectOptions}
</Select>
);
Expand All @@ -154,7 +178,7 @@ describe('checkbox select', () => {

test('renders expanded successfully', () => {
const view = mount(
<Select variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
<Select toggleId="checkbox-select-expanded" variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
{selectOptions}
</Select>
);
Expand All @@ -163,7 +187,7 @@ describe('checkbox select', () => {

test('renders expanded successfully - old classes', () => {
const view = mount(
<Select variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
<Select toggleId="checkbox-select-expanded-old" variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
{checkboxSelectOptions}
</Select>
);
Expand All @@ -173,6 +197,7 @@ describe('checkbox select', () => {
test('renders expanded with filtering successfully', () => {
const view = mount(
<Select
toggleId="checkbox-select-expanded-filtered"
variant={SelectVariant.checkbox}
onSelect={jest.fn()}
onToggle={jest.fn()}
Expand All @@ -188,7 +213,7 @@ describe('checkbox select', () => {

test('renders expanded successfully with custom objects', () => {
const view = mount(
<Select variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
<Select toggleId="checkbox-select-expanded-custom" variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
{selectOptionsCustom}
</Select>
);
Expand All @@ -197,7 +222,7 @@ describe('checkbox select', () => {

test('renders checkbox select groups successfully', () => {
const view = mount(
<Select variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded isGrouped>
<Select toggleId="checkbox-select-expanded-groups" variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded isGrouped>
<SelectGroup label="group 1">{selectOptions}</SelectGroup>
<SelectGroup label="group 2">{selectOptions}</SelectGroup>
</Select>
Expand All @@ -207,7 +232,7 @@ describe('checkbox select', () => {

test('renders checkbox select groups successfully - old classes', () => {
const view = mount(
<Select variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded isGrouped>
<Select toggleId="checkbox-select-expanded-groups-old" variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded isGrouped>
<CheckboxSelectGroup label="group 1">{checkboxSelectOptions}</CheckboxSelectGroup>
<CheckboxSelectGroup label="group 2">{checkboxSelectOptions}</CheckboxSelectGroup>
</Select>
Expand All @@ -219,7 +244,7 @@ describe('checkbox select', () => {
describe('typeahead select', () => {
test('renders closed successfully', () => {
const view = mount(
<Select variant={SelectVariant.typeahead} onSelect={jest.fn()} onToggle={jest.fn()}>
<Select toggleId="typeahead-select-closed" variant={SelectVariant.typeahead} onSelect={jest.fn()} onToggle={jest.fn()}>
{selectOptions}
</Select>
);
Expand All @@ -228,7 +253,7 @@ describe('typeahead select', () => {

test('renders expanded successfully', () => {
const view = mount(
<Select variant={SelectVariant.typeahead} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
<Select toggleId="typeahead-select-expanded" variant={SelectVariant.typeahead} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
{selectOptions}
</Select>
);
Expand All @@ -237,7 +262,7 @@ describe('typeahead select', () => {

test('renders selected successfully', () => {
const view = mount(
<Select variant={SelectVariant.typeahead} selections="Mr" onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
<Select toggleId="typeahead-select-selected" variant={SelectVariant.typeahead} selections="Mr" onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
{selectOptions}
</Select>
);
Expand All @@ -248,6 +273,7 @@ describe('typeahead select', () => {
const mockEvent = { target: { value: 'test' } } as React.ChangeEvent<HTMLInputElement>;
const view = mount(
<Select
toggleId="typeahead-select-onchange"
variant={SelectVariant.typeahead}
onSelect={jest.fn()}
onToggle={jest.fn()}
Expand All @@ -266,7 +292,7 @@ describe('typeahead select', () => {
test('test creatable option', () => {
const mockEvent = { target: { value: 'test' } } as React.ChangeEvent<HTMLInputElement>;
const view = mount(
<Select variant={SelectVariant.typeahead} onToggle={jest.fn()} isExpanded isCreatable>
<Select toggleId="typeahead-select-creatable" variant={SelectVariant.typeahead} onToggle={jest.fn()} isExpanded isCreatable>
{selectOptions}
</Select>
);
Expand All @@ -280,7 +306,7 @@ describe('typeahead select', () => {
describe('typeahead multi select', () => {
test('renders closed successfully', () => {
const view = mount(
<Select variant={SelectVariant.typeaheadMulti} onSelect={jest.fn()} onToggle={jest.fn()}>
<Select toggleId="typeahead-multi-select-closed" variant={SelectVariant.typeaheadMulti} onSelect={jest.fn()} onToggle={jest.fn()}>
{selectOptions}
</Select>
);
Expand All @@ -289,7 +315,7 @@ describe('typeahead multi select', () => {

test('renders expanded successfully', () => {
const view = mount(
<Select variant={SelectVariant.typeaheadMulti} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
<Select toggleId="typeahead-multi-select-expanded" variant={SelectVariant.typeaheadMulti} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
{selectOptions}
</Select>
);
Expand All @@ -299,6 +325,7 @@ describe('typeahead multi select', () => {
test('renders selected successfully', () => {
const view = mount(
<Select
toggleId="typeahead-multi-select-selected"
variant={SelectVariant.typeaheadMulti}
selections={['Mr', 'Mrs']}
onSelect={jest.fn()}
Expand All @@ -315,7 +342,8 @@ describe('typeahead multi select', () => {
const mockEvent = { target: { value: 'test' } } as React.ChangeEvent<HTMLInputElement>;
const view = mount(
<Select
variant={SelectVariant.typeahead}
toggleId="typeahead-multi-select-onchange"
variant={SelectVariant.typeaheadMulti}
onSelect={jest.fn()}
onToggle={jest.fn()}
onClear={jest.fn()}
Expand All @@ -336,7 +364,7 @@ describe('API', () => {
const mockToggle = jest.fn();
const mockSelect = jest.fn();
const view = mount(
<Select variant="single" onToggle={mockToggle} onSelect={mockSelect} isExpanded>
<Select toggleId="select-api-click" variant="single" onToggle={mockToggle} onSelect={mockSelect} isExpanded>
{selectOptions}
</Select>
);
Expand All @@ -352,7 +380,7 @@ describe('API', () => {
const myMock = jest.fn();
global.console = { ...global.console, error: myMock };
mount(
<Select variant="single" onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
<Select toggleId="select-api-no-console" variant="single" onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
{selectOptions}
</Select>
);
Expand All @@ -364,7 +392,7 @@ describe('toggle icon', () => {
const ToggleIcon = <div>Icon</div>;
test('select single', () => {
const view = mount(
<Select toggleIcon={ToggleIcon} variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()}>
<Select toggleId="select-toggle-icon-single" toggleIcon={ToggleIcon} variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()}>
{selectOptions}
</Select>
);
Expand All @@ -373,7 +401,7 @@ describe('toggle icon', () => {

test('select checkbox', () => {
const view = mount(
<Select toggleIcon={ToggleIcon} variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()}>
<Select toggleId="checkbox-select-toggle-icon" toggleIcon={ToggleIcon} variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()}>
{selectOptions}
</Select>
);
Expand All @@ -382,7 +410,7 @@ describe('toggle icon', () => {

test('typeahead select', () => {
const view = mount(
<Select toggleIcon={ToggleIcon} variant={SelectVariant.typeahead} onSelect={jest.fn()} onToggle={jest.fn()}>
<Select toggleId="typeahead-select-toggle-icon" toggleIcon={ToggleIcon} variant={SelectVariant.typeahead} onSelect={jest.fn()} onToggle={jest.fn()}>
{selectOptions}
</Select>
);
Expand All @@ -391,7 +419,7 @@ describe('toggle icon', () => {

test('typeahead multi select', () => {
const view = mount(
<Select toggleIcon={ToggleIcon} variant={SelectVariant.typeaheadMulti} onSelect={jest.fn()} onToggle={jest.fn()}>
<Select toggleId="multi-typeahead-select-toggle-icon" toggleIcon={ToggleIcon} variant={SelectVariant.typeaheadMulti} onSelect={jest.fn()} onToggle={jest.fn()}>
{selectOptions}
</Select>
);
Expand All @@ -401,11 +429,11 @@ describe('toggle icon', () => {

describe('select with custom content', () => {
test('renders closed successfully', () => {
const view = mount(<Select customContent="testing custom" onToggle={jest.fn()} />);
const view = mount(<Select toggleId="select-custom-content" customContent="testing custom" onToggle={jest.fn()} />);
expect(view).toMatchSnapshot();
});
test('renders expanded successfully', () => {
const view = mount(<Select customContent="testing custom" onToggle={jest.fn()} isExpanded />);
const view = mount(<Select toggleId="select-expanded" customContent="testing custom" onToggle={jest.fn()} isExpanded />);
expect(view).toMatchSnapshot();
});
});
Loading