Skip to content

Commit

Permalink
feat(select): чекбоксы в выпадашке множественного выбора #903)
Browse files Browse the repository at this point in the history 
* feat(select): multiple checkmark as checkbox

* feat(select): use checkbox size m

* fix(select): checkbox margin
  • Loading branch information
@reme3d2y
reme3d2y committed Dec 29, 2021
1 parent 2158918 commit f5638ef
Show file tree
Hide file tree
Showing 18 changed files with 191 additions and 43 deletions.
75 changes: 60 additions & 15 deletions packages/picker-button/src/__snapshots__/Component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,13 +136,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Neptunium
</div>
<span
class="checkmark after single"
/>
</div>
<div
aria-selected="false"
Expand All @@ -151,13 +154,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Plutonium
</div>
<span
class="checkmark after single"
/>
</div>
<div
aria-selected="false"
Expand All @@ -166,13 +172,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Americium
</div>
<span
class="checkmark after single"
/>
</div>
<div
aria-selected="false"
Expand All @@ -181,13 +190,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Curium
</div>
<span
class="checkmark after single"
/>
</div>
<div
aria-selected="false"
Expand All @@ -196,13 +208,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Berkelium
</div>
<span
class="checkmark after single"
/>
</div>
<div
aria-selected="false"
Expand All @@ -211,13 +226,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Californium
</div>
<span
class="checkmark after single"
/>
</div>
<div
aria-selected="false"
Expand All @@ -226,13 +244,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Einsteinium
</div>
<span
class="checkmark after single"
/>
</div>
<div
aria-selected="false"
Expand All @@ -241,13 +262,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Fermium
</div>
<span
class="checkmark after single"
/>
</div>
<div
aria-selected="false"
Expand All @@ -256,13 +280,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Mendelevium
</div>
<span
class="checkmark after single"
/>
</div>
<div
aria-selected="false"
Expand All @@ -271,13 +298,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Nobelium
</div>
<span
class="checkmark after single"
/>
</div>
<div
aria-selected="false"
Expand All @@ -286,13 +316,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Lawrencium
</div>
<span
class="checkmark after single"
/>
</div>
<div
aria-selected="false"
Expand All @@ -301,13 +334,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Rutherfordium
</div>
<span
class="checkmark after single"
/>
</div>
<div
aria-selected="false"
Expand All @@ -316,13 +352,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Dubnium
</div>
<span
class="checkmark after single"
/>
</div>
<div
aria-selected="false"
Expand All @@ -331,13 +370,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Seaborgium
</div>
<span
class="checkmark after single"
/>
</div>
<div
aria-selected="false"
Expand All @@ -346,13 +388,16 @@ exports[`Snapshots tests should display opened correctly 2`] = `
role="option"
>
<span
class="checkmark"
class="checkmark before single"
/>
<div
class="content textContent"
>
Bohrium
</div>
<span
class="checkmark after single"
/>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ..._image_snapshots__/select-with-tags-interactions-tests-hover-pressed-2-snap.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ..._image_snapshots__/select-with-tags-interactions-tests-hover-pressed-3-snap.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions .../__image_snapshots__/select-with-tags-interactions-tests-hover-pressed-snap.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/select/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@alfalab/core-components-input": "^8.0.1",
"@alfalab/core-components-popover": "^5.6.0",
"@alfalab/core-components-skeleton": "^3.0.2",
"@alfalab/core-components-checkbox": "^2.3.2",
"@alfalab/hooks": "^1.4.1",
"classnames": "^2.2.6",
"downshift": "5.4.7",
Expand Down
3 changes: 3 additions & 0 deletions packages/select/src/__image_snapshots__/select-multiple-click-snap.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/select/src/__image_snapshots__/select-multiple-default-snap.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions packages/select/src/__image_snapshots__/select-optgroup-click-snap.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions packages/select/src/__image_snapshots__/select-optgroup-default-snap.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 29 additions & 1 deletion packages/select/src/component.screenshots.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ describe('Select | optgroup', () => {
componentName: 'Select',
knobs: {
options: JSON.stringify(groups),
selected: groups[0].options[1].key,
selected: JSON.stringify(groups[0].options[1].key),
size: 'l',
defaultOpen: true,
block: true,
Expand All @@ -262,3 +262,31 @@ describe('Select | optgroup', () => {

['default', 'click'].map(testCase);
});

describe('Select | multiple', () => {
const testCase = (theme: string) =>
screenshotTesting({
cases: [
[
`${theme}`,
createStorybookUrl({
componentName: 'Select',
knobs: {
options: JSON.stringify(options),
selected: JSON.stringify([options[0].key, options[1].key]),
multiple: true,
defaultOpen: true,
block: true,
placeholder: 'Выберите элемент',
},
}),
],
],
screenshotOpts: {
fullPage: true,
},
theme,
})();

['default', 'click'].map(testCase);
});
2 changes: 2 additions & 0 deletions packages/select/src/components/base-select/Component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -280,6 +280,7 @@ export const BaseSelect = forwardRef(
disabled: option.disabled,
onMouseDown: (event: MouseEvent) => event.preventDefault(),
}),
multiple,
index,
option,
size: optionsSize,
Expand All @@ -295,6 +296,7 @@ export const BaseSelect = forwardRef(
optionProps,
optionClassName,
getItemProps,
multiple,
optionsSize,
highlightedIndex,
selectedItems,
Expand Down

0 comments on commit f5638ef

Please sign in to comment.