feat(faceted-search/badge): Add BadgeMenu for single selection #4891

yyanwang · 2023-09-13T06:18:23Z

What is the problem this PR is trying to solve?
In TMC we have use case for single selection faceted badge but currently there's no badge for that.
BadgeMenu is added in this PR to support single selection.
What is the chosen solution to this problem?
Add new badge type BadgeMenu. Figma design is here.

DropdownButton of design system also have some updates for displaying a check icon for selected item. Coral figma library

Please check if the PR fulfills these requirements

The PR have used yarn changeset to a request a release from the CI if wanted.
The PR commit message follows our guidelines
Tests for the changes have been added (for bug fixes / features) And non reg done before need review
Docs have been added / updated (for bug fixes / features)
Related design / discussions / pages (not in jira), if any, are all linked or available in the PR

[ ] This PR introduces a breaking change

github-actions · 2023-09-13T06:43:30Z

4891

Demo is available here

github-actions · 2023-09-13T06:47:14Z

Size Change: +22.1 kB (0%)

Total Size: 13.2 MB

Filename	Size	Change
`./packages/design-system/dist/TalendDesignSystem.css`	281 kB	-106 B (0%)
`./packages/design-system/dist/TalendDesignSystem.js`	1.07 MB	+1.28 kB (0%)
`./packages/design-system/dist/TalendDesignSystem.min.css`	172 kB	-104 B (0%)
`./packages/design-system/dist/TalendDesignSystem.min.js`	211 kB	+211 B (0%)
`./packages/faceted-search/dist/TalendReactFacetedSearch.css`	37.6 kB	+2.15 kB (+6%)	🔍
`./packages/faceted-search/dist/TalendReactFacetedSearch.js`	452 kB	+14.6 kB (+3%)
`./packages/faceted-search/dist/TalendReactFacetedSearch.min.css`	17 kB	+953 B (+6%)	🔍
`./packages/faceted-search/dist/TalendReactFacetedSearch.min.js`	103 kB	+3.36 kB (+3%)
`./packages/faceted-search/dist/TalendReactFacetedSearch.min.js.dependencies.json`	1.29 kB	-266 B (-17%)	👏

ℹ️ View Unchanged

Filename	Size
`./packages/assets-api/dist/TalendAssetsApi.js`	7.21 kB
`./packages/assets-api/dist/TalendAssetsApi.js.dependencies.json`	2 B
`./packages/assets-api/dist/TalendAssetsApi.min.js`	3.34 kB
`./packages/assets-api/dist/TalendAssetsApi.min.js.dependencies.json`	2 B
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.js`	105 kB
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.js.dependencies.json`	672 B
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.min.js`	21.9 kB
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.min.js.dependencies.json`	695 B
`./packages/cmf-router/dist/TalendReactCmfRouter.js`	163 kB
`./packages/cmf-router/dist/TalendReactCmfRouter.js.dependencies.json`	1.25 kB
`./packages/cmf-router/dist/TalendReactCmfRouter.min.js`	13.9 kB
`./packages/cmf-router/dist/TalendReactCmfRouter.min.js.dependencies.json`	1.29 kB
`./packages/cmf/dist/TalendReactCmf.js`	637 kB
`./packages/cmf/dist/TalendReactCmf.js.dependencies.json`	1.31 kB
`./packages/cmf/dist/TalendReactCmf.min.js`	122 kB
`./packages/cmf/dist/TalendReactCmf.min.js.dependencies.json`	1.35 kB
`./packages/components/dist/TalendReactComponents.css`	403 kB
`./packages/components/dist/TalendReactComponents.js`	2.95 MB
`./packages/components/dist/TalendReactComponents.js.dependencies.json`	3.47 kB
`./packages/components/dist/TalendReactComponents.min.css`	210 kB
`./packages/components/dist/TalendReactComponents.min.js`	637 kB
`./packages/components/dist/TalendReactComponents.min.js.dependencies.json`	3.55 kB
`./packages/containers/dist/TalendReactContainers.css`	3.01 kB
`./packages/containers/dist/TalendReactContainers.js`	540 kB
`./packages/containers/dist/TalendReactContainers.js.dependencies.json`	1.55 kB
`./packages/containers/dist/TalendReactContainers.min.css`	1.73 kB
`./packages/containers/dist/TalendReactContainers.min.js`	106 kB
`./packages/containers/dist/TalendReactContainers.min.js.dependencies.json`	1.6 kB
`./packages/dataviz/dist/TalendReactDataviz.css`	28.9 kB
`./packages/dataviz/dist/TalendReactDataviz.js`	371 kB
`./packages/dataviz/dist/TalendReactDataviz.js.dependencies.json`	1.15 kB
`./packages/dataviz/dist/TalendReactDataviz.min.css`	12 kB
`./packages/dataviz/dist/TalendReactDataviz.min.js`	64.6 kB
`./packages/dataviz/dist/TalendReactDataviz.min.js.dependencies.json`	1.19 kB
`./packages/design-system/dist/TalendDesignSystem.js.dependencies.json`	1.3 kB
`./packages/design-system/dist/TalendDesignSystem.min.js.dependencies.json`	1.33 kB
`./packages/design-tokens/dist/TalendDesignTokens.css`	44.6 kB
`./packages/design-tokens/dist/TalendDesignTokens.js`	39.6 kB
`./packages/design-tokens/dist/TalendDesignTokens.js.dependencies.json`	2 B
`./packages/design-tokens/dist/TalendDesignTokens.min.css`	41.5 kB
`./packages/design-tokens/dist/TalendDesignTokens.min.js`	33.3 kB
`./packages/design-tokens/dist/TalendDesignTokens.min.js.dependencies.json`	2 B
`./packages/faceted-search/dist/TalendReactFacetedSearch.js.dependencies.json`	1.51 kB
`./packages/flow-designer/dist/TalendReactFlowDesigner.min.js`	52.7 kB
`./packages/flow-designer/dist/TalendReactFlowDesigner.min.js.dependencies.json`	1.25 kB
`./packages/forms/dist/TalendReactForms.css`	39.3 kB
`./packages/forms/dist/TalendReactForms.js`	780 kB
`./packages/forms/dist/TalendReactForms.js.dependencies.json`	1.5 kB
`./packages/forms/dist/TalendReactForms.min.css`	13.4 kB
`./packages/forms/dist/TalendReactForms.min.js`	206 kB
`./packages/forms/dist/TalendReactForms.min.js.dependencies.json`	1.54 kB
`./packages/http/dist/TalendHttp.js`	24.5 kB
`./packages/http/dist/TalendHttp.js.dependencies.json`	2 B
`./packages/http/dist/TalendHttp.min.js`	5.19 kB
`./packages/http/dist/TalendHttp.min.js.dependencies.json`	2 B
`./packages/icons/dist/bundle.js`	1.26 kB
`./packages/icons/dist/info.js`	26.1 kB
`./packages/icons/dist/react.esm.js`	569 kB
`./packages/icons/dist/react.js`	606 kB
`./packages/icons/dist/talend-icons-webfont.css`	17.3 kB
`./packages/icons/dist/talendicons.css`	334 B
`./packages/icons/dist/TalendIcons.js`	733 kB
`./packages/icons/dist/TalendIcons.js.dependencies.json`	128 B
`./packages/icons/dist/TalendIcons.min.js`	591 kB
`./packages/icons/dist/TalendIcons.min.js.dependencies.json`	131 B
`./packages/icons/dist/typeUtils.js`	14.4 kB
`./packages/jsfc/dist/index.js`	86.8 kB
`./packages/jsfc/dist/index.js.dependencies.json`	2 B
`./packages/router-bridge/dist/TalendRouterBridge.js`	133 kB
`./packages/router-bridge/dist/TalendRouterBridge.js.dependencies.json`	1.05 kB
`./packages/router-bridge/dist/TalendRouterBridge.min.js`	22 kB
`./packages/router-bridge/dist/TalendRouterBridge.min.js.dependencies.json`	1.07 kB
`./packages/sagas/dist/TalendReactSagas.js`	10.9 kB
`./packages/sagas/dist/TalendReactSagas.js.dependencies.json`	348 B
`./packages/sagas/dist/TalendReactSagas.min.js`	1.41 kB
`./packages/sagas/dist/TalendReactSagas.min.js.dependencies.json`	360 B
`./packages/stepper/dist/TalendReactStepper.css`	2.4 kB
`./packages/stepper/dist/TalendReactStepper.js`	96.4 kB
`./packages/stepper/dist/TalendReactStepper.js.dependencies.json`	1.27 kB
`./packages/stepper/dist/TalendReactStepper.min.css`	1.19 kB
`./packages/stepper/dist/TalendReactStepper.min.js`	10.6 kB
`./packages/stepper/dist/TalendReactStepper.min.js.dependencies.json`	1.31 kB
`./packages/storybook-docs/dist/globalStyles.js`	0 B	🆕
`./packages/storybook-docs/dist/globalStyles.min.css`	10.2 kB
`./packages/storybook-docs/dist/managerStyles.js`	0 B	🆕
`./packages/storybook-docs/dist/managerStyles.min.css`	1.53 kB
`./packages/theme/dist/bootstrap.css`	172 kB
`./packages/theme/dist/bootstrap.js`	2.51 kB
`./packages/theme/dist/bootstrap.js.dependencies.json`	3 B

_{compressed-size-action}

github-actions · 2023-09-13T06:48:20Z

Title	Statements	Branches	Functions
assets-api	28.4% (25/88)	30.76% (16/52)	21.42% (3/14)
cmf	89.17% (1268/1422)	80.36% (618/769)	88.91% (361/406)
cmf-cqrs	87.43% (160/183)	70.23% (59/84)	84.21% (48/57)
cmf-router	69.23% (135/195)	55.71% (78/140)	56.81% (25/44)
components	89.95% (5609/6235)	81.04% (3211/3962)	86.88% (1418/1632)
containers	83.53% (1385/1658)	74.67% (687/920)	75.17% (327/435)
dataviz	85.6% (321/375)	66.66% (160/240)	75.64% (118/156)
faceted-search	84.86% (684/806)	76.36% (265/347)	81.44% (237/291)
flow-designer	69.84% (651/932)	66.47% (355/534)	70.67% (200/283)
forms	86.91% (1701/1957)	76.69% (915/1193)	85.86% (480/559)
http	98.76% (80/81)	98% (49/50)	96.77% (30/31)
sagas	92.3% (24/26)	66.66% (4/6)	50% (2/4)
stepper	81.52% (150/184)	59.34% (54/91)	80.85% (38/47)
utils	100% (66/66)	90.9% (10/11)	100% (16/16)

Gbacc · 2023-09-13T07:20:09Z

I think there is some extra padding/margin for the faceted search implementation
For example we have this for basic badge

And on the new one we have this

Gbacc

LGTM

packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.component.js

yyanwang added 7 commits September 12, 2023 14:10

DropdownButton: add checked state

1d11241

add test for DropdownButton

564c518

add story for DropdownButton

c8bf9b4

DropdownButton style updates

1d26fcc

add BadgeMenu to faceted search

1a72c7d

cleanup

2d566f8

changeset

43b7245

yyanwang temporarily deployed to pull_request_unsafe September 13, 2023 06:18 — with GitHub Actions Inactive

yyanwang had a problem deploying to pull_request_unsafe September 13, 2023 06:18 — with GitHub Actions Error

update doc

73c4625

yyanwang temporarily deployed to pull_request_unsafe September 13, 2023 06:20 — with GitHub Actions Inactive

yyanwang had a problem deploying to pull_request_unsafe September 13, 2023 06:21 — with GitHub Actions Error

yyanwang changed the title ~~(feat/faceted-search): Add BadgeMenu for single selection~~ feat(faceted-search/badge): Add BadgeMenu for single selection Sep 13, 2023

Merge branch 'master' into ywang/feat/TDOPS-5180/single-badge

2310215

yyanwang temporarily deployed to pull_request_unsafe September 13, 2023 06:21 — with GitHub Actions Inactive

yyanwang temporarily deployed to pull_request_unsafe September 13, 2023 06:22 — with GitHub Actions Inactive

yyanwang added 2 commits September 14, 2023 13:17

update DropdownButton checked stype

ee70e9f

update BadgeMenu styles

12cca27

yyanwang temporarily deployed to pull_request_unsafe September 14, 2023 05:18 — with GitHub Actions Inactive

Gbacc approved these changes Sep 14, 2023

View reviewed changes

inna-i approved these changes Sep 14, 2023

View reviewed changes

VolodymyrKovalM reviewed Sep 14, 2023

View reviewed changes

packages/faceted-search/src/components/Badges/BadgeMenu/BadgeMenu.component.js Show resolved Hide resolved

yyanwang merged commit 076d962 into master Sep 15, 2023
10 checks passed

yyanwang deleted the ywang/feat/TDOPS-5180/single-badge branch September 15, 2023 02:30

yyanwang temporarily deployed to pull_request_unsafe September 15, 2023 02:30 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(faceted-search/badge): Add BadgeMenu for single selection #4891

feat(faceted-search/badge): Add BadgeMenu for single selection #4891

yyanwang commented Sep 13, 2023 •

edited

Loading

github-actions bot commented Sep 13, 2023

github-actions bot commented Sep 13, 2023 •

edited

Loading

github-actions bot commented Sep 13, 2023 •

edited

Loading

Gbacc commented Sep 13, 2023

Gbacc left a comment

feat(faceted-search/badge): Add BadgeMenu for single selection #4891

feat(faceted-search/badge): Add BadgeMenu for single selection #4891

Conversation

yyanwang commented Sep 13, 2023 • edited Loading

github-actions bot commented Sep 13, 2023

github-actions bot commented Sep 13, 2023 • edited Loading

github-actions bot commented Sep 13, 2023 • edited Loading

Gbacc commented Sep 13, 2023

Gbacc left a comment

Choose a reason for hiding this comment

yyanwang commented Sep 13, 2023 •

edited

Loading

github-actions bot commented Sep 13, 2023 •

edited

Loading

github-actions bot commented Sep 13, 2023 •

edited

Loading