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 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)

This comment has been minimized.

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.

@jackmu95 jackmu95 self-requested a review Nov 21, 2019
tmorehouse added 18 commits Nov 21, 2019
@tmorehouse tmorehouse removed the Status: WIP label Nov 22, 2019
@tmorehouse tmorehouse marked this pull request as ready for review Nov 22, 2019
tmorehouse added 5 commits Nov 22, 2019
tmorehouse added 7 commits Nov 27, 2019
@tmorehouse tmorehouse requested a review from jackmu95 Nov 28, 2019
tmorehouse added 8 commits Nov 28, 2019
tmorehouse and others added 7 commits Nov 28, 2019
@tmorehouse tmorehouse merged commit 00eb9d9 into dev Dec 2, 2019
9 checks passed
9 checks passed
License Compliance All checks passed.
ci/circleci: build Your tests passed on CircleCI!
ci/circleci: lint Your tests passed on CircleCI!
ci/circleci: setup Your tests passed on CircleCI!
ci/circleci: test Your tests passed on CircleCI!
codecov/patch 100% of diff hit (target 99.91%)
codecov/project 99.91% (+<.01%) compared to 833b028
deploy/netlify Deploy preview ready!
security/snyk - package.json (pi0) No manifest changes detected
2.2.0 automation moved this from In progress to Done Dec 2, 2019
@tmorehouse tmorehouse deleted the feat/form-tags branch Dec 2, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants
You can’t perform that action at this time.