Skip to content
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.

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

feat(ui5-combobox): add suggestions grouping #3469

Merged
merged 16 commits into from
Jul 1, 2021

Conversation

ndeshev
Copy link
Contributor

@ndeshev ndeshev commented Jun 25, 2021

Enable users to set items to groups. Groups are visually identified in the suggestions list by group headers.

For group headers a new component is introduced - ComboBoxGroupItem. The grouping is based on the items order as they are declared in the markup - the items between two group headers are considered to belong to the first one.

Example - in the code below - the items between the "A" group item and the "Random Group Item" are grouped to the "A" group while the last item belongs to the "Random Group Item Text" group.

        <ui5-combobox id="combo-grouping">
		<ui5-cb-group-item text="A"></ui5-cb-group-item>
		<ui5-cb-item text="Algeria"></ui5-cb-item>
		<ui5-cb-item text="Argentina"></ui5-cb-item>
		<ui5-cb-item text="Australia"></ui5-cb-item>
		<ui5-cb-item text="Austria"></ui5-cb-item>

		<ui5-cb-group-item text="Random Group Item Text"></ui5-cb-group-item>
		<ui5-cb-item text="Albania"></ui5-cb-item>
	</ui5-combobox>

cb-grouping

Fixes: #3371

Enable users to set items to groups. Groups are visually indentified
in the suggestions list by group headers.
@ndeshev ndeshev requested review from MapTo0 and ilhan007 June 25, 2021 05:23
@ndeshev ndeshev marked this pull request as ready for review June 28, 2021 06:53
Copy link
Contributor

@fifoosid fifoosid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add ui5-cb-group-item to the appenddocs tag in ComboBox.js
Add a sample in ComboBox.sample.html

packages/main/src/ComboBox.js Outdated Show resolved Hide resolved
packages/main/src/ComboBox.js Outdated Show resolved Hide resolved
packages/main/src/ComboBoxGroupItem.js Outdated Show resolved Hide resolved
packages/main/src/ComboBoxGroupItem.js Outdated Show resolved Hide resolved
packages/main/src/ComboBoxGroupItem.js Outdated Show resolved Hide resolved
packages/main/src/ComboBoxGroupItem.js Outdated Show resolved Hide resolved
packages/main/src/ComboBox.js Outdated Show resolved Hide resolved
Copy link
Member

@MapTo0 MapTo0 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest we deep test this changed once the value change pull request get merged

packages/main/src/ComboBox.js Outdated Show resolved Hide resolved
fifoosid
fifoosid previously approved these changes Jun 29, 2021
Copy link
Contributor

@fifoosid fifoosid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM now, someone from @SAP/ui5-webcomponents-topic-rl should approve and we can merge it

@fifoosid fifoosid requested a review from a team June 29, 2021 10:13
MapTo0
MapTo0 previously requested changes Jun 29, 2021
Copy link
Member

@MapTo0 MapTo0 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/ ---------- /

  1. type "b"
  2. arrow down - b should be removed

/ ---------- /

  1. Type "a"
  2. items gets filtered, but not autocompleted

packages/main/src/ComboBox.js Outdated Show resolved Hide resolved
@MapTo0
Copy link
Member

MapTo0 commented Jun 29, 2021

Overall. looks good, fix these issue and we should be good to go.

@MapTo0
Copy link
Member

MapTo0 commented Jun 29, 2021

Actually, there is a double focus all the time, but I guess this should be another issue ..

@ndeshev
Copy link
Contributor Author

ndeshev commented Jun 30, 2021

There is no double focus for me? Please pull the last changes, something is not right.
When a group item is reached with the keyboard the typed in value should not be cleared, as it is in UI5.

@ndeshev ndeshev requested a review from hristop June 30, 2021 04:29
@ndeshev ndeshev requested a review from MapTo0 June 30, 2021 05:15
@MapTo0 MapTo0 dismissed their stale review June 30, 2021 06:08

going on a vacation

@hristop
Copy link
Contributor

hristop commented Jul 1, 2021

lgtm, I think we can merge when someone with rights approve the change

@ilhan007 ilhan007 added the SAP SF label Jul 1, 2021
@ilhan007 ilhan007 merged commit 5e3f391 into SAP:master Jul 1, 2021
ilhan007 pushed a commit that referenced this pull request Jul 2, 2021
Enable users to set items to groups. Groups are visually identified in the suggestions list by group headers.
For group headers a new component is introduced - ComboBoxGroupItem. The grouping is based on the items order as they are declared in the markup - the items between two group headers are considered to belong to the first one.

Fixes: #3371
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[SF][ComboBox with grouping][Urgent - WithIn 3 Weeks] support comboBox with grouping
5 participants