Files
Sammy Mohamed 3f743e19f7 feat: better form control integration (#1053)
* feat: better form control integration

- general a11y described by service
- hint and error stories
- datepicker value type
- mock resizeObserver causing select failure
- form desciption test failures

* feat: autocomplete and combobox

- re-implemented form integration based on latest implementation

* fix: error state

* fix: formatting

* chore: update snapshot

* fix: format

* fix: update snapshot

* fix: autocomplete stories

* fix: test

* fix: remove not needed effects

* fix: call onTouched when autocomplete focus out

* fix: evaluate only error state in field

* fix: fix slider classes and field integration

* fix: set correct error styles to input group

* feat: add native select field control support

* fix: implement field control

* fix: emit touched when blurred for combobox

* fix: add invalid support for combobox multiple

* fix: fix autcomplete search and input styles

* feat: improve control state data attributes and hlm-error

- render hlm-error if error presetn
- add touched, dirty and matches-spartan-invalid attributes

* feat: apply field control as host directive

* test: fix some control error stories WIP

* fix: lint issues w/ type imports and sort order

* chore: remove form-field package as it is replaced by field

* chore: update snapshot

* fix: fix autocomplete providers array and error story

* fix: fix select, field error and input group

* docs: fix reactive forms examples WIP

* feat: add healthcheck and migration for hlm-form-field to hlm-field

* fix: add value accessor to date-picker multi

* docs: update field for/id

* fix: fix checkbox and rename CVA providers

* fix: add and fix tests

* docs(field): update headings

* feat(autocomplete): add inputId

* feat(combobox): add input/button id

* chore: update snapshot

* docs(date-picker): use hlm field

* docs(field): add native-select example, simplify selectId

* docs: use hlm-field for date-picker blocks

* feat: update form field usage in autocomplete story

* fix(input): unit test and remove unused ngControl

* fix: comment out missing errorState in select

* feat: remove ng-* classes

* feat: remove unused code

* fix: comment out error in unit tests

* feat: set label for attribute automatically

* refactor: rename variable

* docs: add brain input and textarea docs

* fix: apply button styles in storybook

* fix: fix select test and add missing attributes

* feat: add attributes to switch

* fix: fix field e2e tests and lint errors

* chore: fix format

* fix: add optional chain

* feat(select): add controls and aria labels to brn-select-trigger

* fix: update default value for select demo

* docs(select): add form example

* chore: update snapshot

* fix(select): add optional chain for aria-invalid

* feat(select): update e2e test form attributes

* fix(input): form unit test

* fix(select): update unit test template, add HlmFieldControlDescribedBy to select trigger button

* fix(combobox): use new combobox template for unit test

* add hlmFieldControlDescribedBy to combobox trigger button

* chore: remove console log from unit test

* fix(checkbox): use buttonName instead of id

* fix: lint issue w/ import

* test: fix unit tests

* docs: add field date picker preview

* docs: fix blocks and reactive forms

* docs: improve control, field and forms docs

* feat: add provider for error matcher

* chore: rename var

* fix: replace aria-invalid in registry styles

* feat: move state to brn, add to combo tigger

* chore: format

* feat(combobox): apply form attributes on brnComboboxTrigger

* remove need for applyControlState

* chore: update snapshot

* docs: update container width for the responsive select demo

* fix: remove aria invalid and fix chips focus styles

* feat(field): move HlmFieldControlDescribedBy and HlmFieldA11yService into brain package

* chore: update snapshot

* feat(field): update id input handling, update styles

* docs: update form examples to required

* feat: add forceInvalid to brn-field and brn-checkbox

* allow overrides to data-invalid and data-matches-spartan-invalid

* fix: add error if ngControl.control is not defined

---------

Co-authored-by: Merlin <merlin.moos@oldendorff.com>
Co-authored-by: Toni Škobić <toni.skobic@gmail.com>
Co-authored-by: Marc Stammerjohann <8985933+marcjulian@users.noreply.github.com>
2026-03-31 12:41:44 +02:00

7.4 KiB

Contributing

spartan is an MIT-licensed open source project with its ongoing development made by contributors.

Contributing to the UI library

Folder structure

Source code for the UI primitives exists under the libs/brain and libs/helm folders. To contribute features or bug fixes to the project, locate the relevant code in one of these sub-folders.

Setup

spartan uses PNPM to manage its dependencies.

Before opening a pull request, run the following command from the root folder to make sure your development dependencies are up-to-date:

pnpm install

Running locally

When working on UI primitives you most likely want to work with our storybook. To start storybook you can simply run and go to http://localhost:4400:

pnpm run storybook

Build

spartan uses Nx for builds. To build all projects locally, run the following command from the root folder:

pnpm run build

Testing

spartan uses Jest for tests. To test all projects locally, run the following command from the root folder:

pnpm run test

We also have e2e tests set up with Cypress that run against our storybook. Run them with:

pnpm run e2e

Contributing to the docs and spartan website

To serve the documentation and example application locally, run the following command from the root folder:

pnpm run dev

The code is inside apps/app and runs on AnalogJs.

Creating a new Brain feature

Brain features should be added as a secondary entrypoint to the brain library. This can be done by running the following command:

nx g @spartan-ng/tools:brain-secondary-entrypoint --name=feature-name

Creating a new Helm feature

Helm features should be added as a secondary entrypoint to the helm library. This can be done by running the following command:

nx g @spartan-ng/tools:helm-secondary-entrypoint --name=feature-name

Submitting pull requests

Please follow these basic steps to simplify pull request reviews. If you don't you'll probably just be asked to anyway.

  • Please rebase your branch against the current master.
  • Run the Setup command to make sure your development dependencies are up-to-date.
  • Please ensure the test suite passes before submitting a PR.
  • If you've added new functionality, please include tests which validate its behavior.
  • Make reference to possible issues on PR comment.

Submitting bug reports

  • Search through issues to see if a previous issue has already been reported and/or fixed.
  • Provide a small reproduction using a StackBlitz project or a GitHub repository.
  • Please detail the affected browser(s) and operating system(s).
  • Please be sure to state which version of Angular, node and npm you're using.

Submitting new features

  • We value keeping the API surface small and concise, which factors into whether new features are accepted.
  • Submit an issue with the prefix RFC: with your feature request.
  • The feature will be discussed and considered.
  • Once the PR is submitted, it will be reviewed and merged once approved.

Questions and requests for support

Questions and requests for support should not be opened as issues and should be handled in the following ways:

Commit message guidelines

We have very precise rules over how our git commit messages can be formatted. This leads to more readable messages that are easy to follow when looking through the project history. But also, we use the git commit messages to generate the changelog.

Commit message format

Each commit message consists of a header, a body and a footer. The header has a special format that includes a type, a scope and a subject:

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

The header is mandatory and the scope of the header is optional.

Any line of the commit message cannot be longer than 100 characters! This allows the message to be easier to read on GitHub as well as in various git tools.

The footer should contain a closing reference to an issue if any.

Samples: (even more samples)

docs(changelog): update changelog to beta.5
fix(release): need to depend on latest rxjs and zone.js

The version in our package.json gets copied to the one we publish, and users need the latest of these.

Revert

If the commit reverts a previous commit, it should begin with revert:, followed by the header of the reverted commit. In the body it should say: This reverts commit <hash>., where the hash is the SHA of the commit being reverted.

Type

Must be one of the following:

  • build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
  • ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
  • docs: Documentation only changes
  • feat: A new feature
  • fix: A bug fix
  • perf: A code change that improves performance
  • refactor: A code change that neither fixes a bug nor adds a feature
  • style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc.)
  • test: Adding missing tests or correcting existing tests

Scope

The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.

The following is the list of supported scopes:

Primitives

  • accordion
  • alert
  • alert-dialog
  • aspect-ratio
  • avatar
  • badge
  • breadcrumb
  • button
  • button-group
  • calendar
  • card
  • carousel
  • checkbox
  • collapsible
  • combobox
  • command
  • context-menu
  • data-table
  • date-picker
  • dialog
  • dropdown-menu
  • empty
  • field
  • hover-card
  • icon
  • input
  • input-otp
  • label
  • menubar
  • navigation-menu
  • pagination
  • popover
  • progress
  • radio-group
  • scroll-area
  • select
  • separator
  • sheet
  • skeleton
  • slider
  • sonner
  • spinner
  • switch
  • table
  • tabs
  • textarea
  • toggle
  • toggle-group
  • tooltip
  • typography

And others

  • trpc
  • nx
  • repo
  • cli

Subject

The subject contains a succinct description of the change:

  • use the imperative, present tense: "change" not "changed" nor "changes"
  • don't capitalize the first letter
  • no dot (.) at the end

Body

Just as in the subject, use the imperative, present tense: "change" not "changed" nor "changes". The body should include the motivation for the change and contrast this with previous behavior.

The footer should contain any information about Breaking Changes and is also the place to reference GitHub issues that this commit Closes.

Breaking Changes should start with the word BREAKING CHANGE: with a space or two newlines. The rest of the commit message is then used for this.

Example:

feat(scope): commit message

BREAKING CHANGES:

Describe breaking changes here

BEFORE:

Previous code example here

AFTER:

New code example here