feat(core/ix-select): Add +1 chip

[lzeiml]

💡 What is the current behavior?

Currently overflow of selected item if ix-select is set to mode="multiple" is just handled by a scrollbar that appears.

🆕 What is the new behavior?

After two items have been selected, the third and every subsequent item will be indicated by a number after the first two selected items:

🏁 Checklist

A pull request can only be merged if all of these conditions are met (where applicable):

• 🦮 Accessibility (a11y) features were implemented
• 🗺️ Internationalization (i18n) - no hard coded strings
• 📲 Responsiveness - components handle viewport changes and content overflow gracefully
• 📕 Add or update a Storybook story
• 📄 Documentation was reviewed/updated siemens/ix-docs
• 🧪 Unit tests were added/updated and pass (pnpm test)
• 📸 Visual regression tests were added/updated and pass (Guide)
• 🧐 Static code analysis passes (pnpm lint)
• 🏗️ Successful compilation (pnpm build, changes pushed)

[changeset-bot]

🦋 Changeset detected

Latest commit: 472db0f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@siemens/ix	Minor
@siemens/ix-angular	Minor
@siemens/ix-docs	Minor
@siemens/ix-react	Minor
@siemens/ix-vue	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[gemini-code-assist]

Summary of Changes

Hello @lzeiml, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly improves the user experience of the ix-select component in multiple selection mode. Instead of relying on a scrollbar to handle an overflow of selected items, the component now displays a concise +N chip after the first two selected items. This change provides a cleaner and more intuitive visual representation of numerous selections, enhancing the component's overall usability and aesthetic.

Highlights

• Overflow Chip Implementation: Introduced a new +N overflow chip for the ix-select component when in multiple selection mode, replacing the previous scrollbar behavior for managing selected item overflow.
• New Private Methods: Added renderOverflowChip to create the visual ix-filter-chip for the overflow count and renderChips to manage the display logic for visible chips and the new overflow chip.
• Render Logic Update: Modified the main render method in select.tsx to utilize the new renderChips method, ensuring that only the first two selected items are individually displayed, followed by the +N chip if more items are selected.

Changelog

• packages/core/src/components/select/select.tsx
  • Added a new private method renderOverflowChip responsible for rendering an ix-filter-chip that displays the count of overflowing selected items (e.g., +3).
  • Introduced a new private method renderChips which orchestrates the rendering of selected items, ensuring that a maximum of two individual item chips are displayed, followed by the renderOverflowChip if more than two items are selected.
  • Modified the main render function within the Select class to invoke this.renderChips() for displaying selected items, replacing the previous direct mapping of selectedItems to renderChip.

Activity

• The pull request was created by lzeiml.
• No human activity (comments, reviews, etc.) has occurred yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new feature to handle overflow of selected items in a multi-select by displaying a +N chip. The implementation is straightforward. However, a key concern is the lack of accompanying tests. New features should always be tested to ensure correctness and prevent future regressions. Additionally, the number of visible chips is hardcoded, which could be improved by making it a configurable property for better flexibility.

[gemini-code-assist]

The maximum number of visible chips is hardcoded to 2. This 'magic number' makes the component less flexible and harder to maintain. Consider exposing this as a prop to allow consumers to configure this value. This would make the component more reusable.

For example:

  /**
   * The maximum number of visible chips in multiple mode.
   * If more items are selected, an overflow chip will be displayed.
   */
  @Prop() maxVisibleChips = 2;

Then you can use this.maxVisibleChips in the renderChips method.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud