Skip to content

feat(sbb-form-field): add <sbb-hint> and <sbb-form-field-text-counter> components#4579

Open
jeripeierSBB wants to merge 21 commits intomainfrom
text-counter
Open

feat(sbb-form-field): add <sbb-hint> and <sbb-form-field-text-counter> components#4579
jeripeierSBB wants to merge 21 commits intomainfrom
text-counter

Conversation

@jeripeierSBB
Copy link
Contributor

@jeripeierSBB jeripeierSBB commented Mar 3, 2026

Closes #4512

@gemini-code-assist
Copy link

Summary of Changes

Hello, I'm Gemini Code Assist1! 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 enhances the form field functionality by adding a new component to provide real-time feedback on character limits. It improves the user experience for input and textarea fields by clearly indicating how many characters are left, supporting multiple languages, and integrating smoothly with existing form field behaviors and styling.

Highlights

  • New Text Counter Component: Introduced a new sbb-form-field-text-counter component that automatically displays the remaining characters for input and textarea elements within an sbb-form-field that have a maxlength attribute.
  • Internationalization Support: Added internationalization for the text counter messages, allowing it to display 'characters remaining' in German, English, French, and Italian.
  • Seamless Form Field Integration: Integrated the text counter component directly into the sbb-form-field, ensuring it automatically detects the associated input element, updates in real-time, and inherits the form field's negative and disabled/readonly states.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • src/elements/core/i18n/i18n.ts
    • Added i18nRemainingCharacters function to provide internationalized strings for the text counter.
  • src/elements/form-field.ts
    • Exported the new form-field-text-counter module.
  • src/elements/form-field/form-field-text-counter.ts
    • Exported the form-field-text-counter.component.ts.
  • src/elements/form-field/form-field-text-counter/form-field-text-counter.component.ts
    • Implemented the SbbFormFieldTextCounterElement component to calculate and display remaining characters.
    • Added logic to listen for input changes and attribute changes on the associated form field's input element.
    • Included SbbLanguageController for dynamic language updates of the counter text.
    • Applied SbbNegativeMixin and SbbElementInternalsMixin for consistent styling and accessibility.
  • src/elements/form-field/form-field-text-counter/form-field-text-counter.scss
    • Added styling for the sbb-form-field-text-counter component, including color variables and negative state adjustments.
  • src/elements/form-field/form-field-text-counter/form-field-text-counter.snapshot.spec.ts
    • Added snapshot tests for the sbb-form-field-text-counter component.
  • src/elements/form-field/form-field-text-counter/form-field-text-counter.spec.ts
    • Added unit tests for the sbb-form-field-text-counter component, covering input updates, disabled/readonly states, language changes, and programmatic value updates.
  • src/elements/form-field/form-field-text-counter/form-field-text-counter.ssr.spec.ts
    • Added server-side rendering (SSR) tests for the sbb-form-field-text-counter component.
  • src/elements/form-field/form-field-text-counter/form-field-text-counter.stories.ts
    • Added Storybook stories for the sbb-form-field-text-counter component, showcasing its usage with textarea and input elements, and demonstrating negative and error states.
  • src/elements/form-field/form-field-text-counter/readme.md
    • Added documentation for the sbb-form-field-text-counter component, detailing its usage and behavior.
  • src/elements/form-field/form-field/form-field.component.ts
    • Updated patchedInputs type to include HTMLTextAreaElement for broader compatibility.
    • Added a new text-counter slot to accommodate the sbb-form-field-text-counter component.
    • Dispatched ɵinputattributechange event when input attributes change, notifying the text counter.
    • Automatically assigned the text-counter slot for sbb-form-field-text-counter elements.
    • Applied _patchInputValue to textarea elements to ensure proper value tracking.
    • Added maxlength to the attributeFilter for the _formFieldAttributeObserver.
    • Dispatched a custom ɵinput event when input value changes programmatically, ensuring the text counter updates.
    • Included sbb-form-field-text-counter in _syncNegative to propagate the negative state.
  • src/elements/form-field/form-field/form-field.scss
    • Added styling to hide the sbb-form-field-text-counter when the parent form field is in a disabled or readonly state.
  • src/elements/form-field/form-field/form-field.stories.ts
    • Imported the form-field-text-counter module.
    • Added new Storybook templates for textarea and input fields with the remaining characters counter.
  • src/elements/form-field/form-field/readme.md
    • Updated the slots table to include the new text-counter slot with its description.
Activity
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.


A haiku for the code: Max length set with care, Characters counted, clear view, Words flow, limits known.

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.

@github-actions github-actions bot temporarily deployed to pr4579-diff March 3, 2026 12:15 Inactive
@github-actions github-actions bot temporarily deployed to pr4579 March 3, 2026 12:39 Inactive
@github-actions github-actions bot temporarily deployed to pr4579-diff March 3, 2026 12:46 Inactive
@github-actions github-actions bot temporarily deployed to pr4579 March 3, 2026 13:10 Inactive
@github-actions github-actions bot temporarily deployed to pr4579-diff March 3, 2026 13:17 Inactive
# Conflicts:
#	src/elements/form-field.ts
#	src/elements/form-field/form-field/form-field.stories.ts
#	src/elements/timetable-form/timetable-form-field/readme.md
@github-actions github-actions bot temporarily deployed to pr4579 March 11, 2026 14:40 Inactive
@github-actions github-actions bot temporarily deployed to pr4579-diff March 11, 2026 14:44 Inactive
@github-actions github-actions bot temporarily deployed to pr4579 March 12, 2026 16:30 Inactive
@jeripeierSBB jeripeierSBB marked this pull request as ready for review March 12, 2026 16:37
@github-actions github-actions bot temporarily deployed to pr4579-diff March 12, 2026 16:37 Inactive
@github-actions github-actions bot added pr: peer review required A peer review is required for this pull request diff-available labels Mar 12, 2026
@github-actions github-actions bot temporarily deployed to pr4579 March 13, 2026 08:08 Inactive
@github-actions github-actions bot requested a deployment to pr4579-diff March 13, 2026 08:11 In progress
super.disconnectedCallback();
this._formFieldAttributeObserver?.disconnect();
this._inputFormAbortController.abort();
if (this._input?.localName === 'input') {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Suggested change
if (this._input?.localName === 'input' || this._input?.localName === 'textarea') {

return 'unchanged';
} else if (this._input) {
this.internals.states.delete(`input-type-${this._input.localName}`);
if (this._input.localName === 'input') {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Suggested change
if (this._input.localName === 'input' || this._input.localName === 'textarea') {

@jeripeierSBB jeripeierSBB added the pr: a11y review required A a11y review is required for this pull request label Mar 17, 2026
Copy link
Contributor

@TomMenga TomMenga left a comment

Choose a reason for hiding this comment

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

LGTM 👍
some minor improvements

Comment on lines +27 to +29
if (this.formField) {
this.negative = this.formField.hasAttribute('negative');
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
if (this.formField) {
this.negative = this.formField.hasAttribute('negative');
}
this.negative = this.formField?.hasAttribute('negative') ?? false;

Comment on lines +5 to +6
color: var(--sbb-form-field-label-color);
font-size: var(--sbb-text-font-size-xxs);
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
color: var(--sbb-form-field-label-color);
font-size: var(--sbb-text-font-size-xxs);
/** Could be moved to global */
--sbb-form-field-hint-color: var(--sbb-form-field-label-color);
--sbb-form-field-hint-font-size: var(--sbb-text-font-size-xxs);
color: var(--sbb-form-field-hint-color);
font-size: var(--sbb-form-field-hint-font-size);

In theory, to fully support theme customization, it should have its own vars that could also be moved to global. You could argue that it's not worth it, though

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

diff-available pr: a11y review required A a11y review is required for this pull request pr: peer review required A peer review is required for this pull request pr: visual review required preview-available target: 4.x

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature request]: textarea supporting "X characters left"

2 participants