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(b-form-tags): new tagged input component #4409

merged 342 commits into from Dec 2, 2019

feat(b-form-tags): new tagged input component #4409

merged 342 commits into from Dec 2, 2019


Copy link

@tmorehouse tmorehouse commented Nov 21, 2019

Describe the PR

New form control component <b-form-tags> (and helper component <b-form-tag>)

Has default rendering of layout which can be overridden via the scoped default slot.

To Do:

  • Documentation
  • Add a "Add" button for easier usage on mobile devices (since users can't press enter easily)
  • Add handling of adding tags when space (or other character, such as ; or ,, is pressed)
  • Props to disable adding tag on enter events
  • Prop for providing a tag validator function to validate before the tag is added
  • emit tag-state event when tags are added (or can't be added)
  • Unit tests
  • add in optional last tag removal via delete key (when input is empty)
  • better input filtering of duplicate tags after add attempt
  • improve tag styling with minimal SCSS, and usage of utility classes
  • validate tags (invalid/duplicate) on input event
  • Add input validation state to slot scope (isInvalid, isDuplicate)
  • add arrays of invalidTags and duplicateTags to slot scope
  • add invalid/duplicate feedback to default render
  • update documentation for validation + examples
  • Add invalid/duplicate tag feedback text prop defaults to config
  • make adding tag on change event opt-in
  • adjust timing of input clearing when input element is a <select>
  • move default content render to helper method (emulating a default slot function)
  • add example of using select element as the tag input to docs
  • Make tagged region an aria-live="polite" with non-atomic updates (additions and removals announced only)

Future Ideas:

  • clear the input value if focus leaves component and input only has invalid/duplicate tags
  • Update custom render examples for best aria practices
  • support 'required' prop (but only if in a form) by automatically adding is-invalid class to root element on form submission (and call evt.preventDefault() on the form's submit event
  • prop to transform tag to upper/lower case before adding
  • add prop for case insensitive duplicate detection
  • option to clear input on invalid/duplicate (default is to keep invalid/duplicate tags in input)
  • use a select if prop 'options` provided (filter out existing tags for options) - will require a bit of custom SCSS to style the select) - interim show example of using select in custom render

Loosely based on

PR checklist

What kind of change does this PR introduce? (check at least one)

  • Bugfix
  • Feature
  • Enhancement
  • ARIA accessibility
  • Documentation update
  • Other (please describe)

Does this PR introduce a breaking change? (check one)

  • No
  • Yes (please describe)

The PR fulfills these requirements:

  • It's submitted to the dev branch, not the master branch
  • When resolving a specific issue, it's referenced in the PR's title (i.e. [...] (fixes #xxx[,#xxx]), where "xxx" is the issue number)
  • It should address only one issue or feature. If adding multiple features or fixing a bug and adding a new feature, break them into separate PRs if at all possible.
  • The title should follow the Conventional Commits naming convention (i.e. fix(alert): not alerting during SSR render, docs(badge): update pill examples, fix typos, chore: fix typo in README, etc). This is very important, as the CHANGELOG is generated from these messages.

If new features/enhancement/fixes are added or changed:

  • Includes documentation updates (including updating the component's package.json for slot and event changes)
  • Includes any needed TypeScript declaration file updates
  • New/updated tests are included and passing (if required)
  • Existing test suites are passing
  • The changes have not impacted the functionality of other components or directives
  • ARIA Accessibility has been taken into consideration (Does it affect screen reader users or keyboard only users? Clickable items should be in the tab index, etc.)

If adding a new feature, or changing the functionality of an existing feature, the PR's
description above includes:

  • A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Copy link

codecov bot commented Nov 21, 2019

Codecov Report

Merging #4409 into dev will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##              dev    #4409      +/-   ##
+ Coverage   99.91%   99.91%   +<.01%     
  Files         242      245       +3     
  Lines        4673     4818     +145     
  Branches     1310     1345      +35     
+ Hits         4669     4814     +145     
  Misses          3        3              
  Partials        1        1
Impacted Files Coverage Δ
src/components/index.js 100% <ø> (ø) ⬆️
src/index.js 100% <ø> (ø) ⬆️
src/components/form-tags/form-tags.js 100% <100%> (ø)
src/components/form-tags/index.js 100% <100%> (ø)
src/components/form-tags/form-tag.js 100% <100%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 833b028...71a9997. Read the comment docs.

@tmorehouse tmorehouse marked this pull request as ready for review November 22, 2019 02:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
No open projects

Successfully merging this pull request may close these issues.

None yet

2 participants