Skip to content

fix(table): fix range selection #2865

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 25 commits into from
Mar 19, 2019
Merged

fix(table): fix range selection #2865

merged 25 commits into from
Mar 19, 2019

Conversation

tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Mar 18, 2019 •
edited
Loading

Description of Pull Request:

Dynamically adds a class to apply user-select: none; when range selection is active.

When table is selectable, it will have class b-table-selectable and one of the following three classes, depending on which mode is in use, on <table>:

  • b-table-select-single
  • b-table-select-multi
  • b-table-select-range

When at least one row is selected the class b-table-selecting will be active on <table>.

When b-table-select-range and b-table-selecting are both active, the CSS rule user-select: none; will apply to all table > tbody > tr rows

This allows the user to select text within the table when a selection is not active.

Live preview https://deploy-preview-2865--bootstrap-vue.netlify.com/

CC/ @lianee

PR checklist:

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

  • Bugfix
  • Feature
  • Enhancement to an existing feature
  • ARIA accessibility
  • Documentation update
  • Other, please describe:

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

  • Yes
  • No

If yes, please describe the impact:

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 #xxxx[,#xxxx], where "xxxx" is the issue number)
  • The PR 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.
  • PR titles should following the
    Conventional Commits naming convention (i.e.
    "fix(alert): not alerting during SSR render", "docs(badge): Updated pill examples, fix typos",
    "chore: fix typo in docs", 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)
  • 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)

@codecov
Copy link

codecov bot commented Mar 18, 2019 •
edited
Loading

Codecov Report

Merging #2865 into dev will increase coverage by 0.02%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##              dev    #2865      +/-   ##
==========================================
+ Coverage   86.76%   86.79%   +0.02%     
==========================================
  Files         197      197              
  Lines        3280     3286       +6     
  Branches      965      968       +3     
==========================================
+ Hits         2846     2852       +6     
  Misses        316      316              
  Partials      118      118
Impacted Files Coverage Δ
src/components/table/helpers/mixin-tbody-row.js 92.37% <ø> (-0.07%) ⬇️
src/components/table/table.js 93.33% <100%> (+0.06%) ⬆️
src/components/table/helpers/mixin-selectable.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 8570c96...e5135f9. Read the comment docs.

@tmorehouse tmorehouse mentioned this pull request Mar 18, 2019
Merged
18 tasks
@tmorehouse tmorehouse marked this pull request as ready for review March 18, 2019 13:36
@tmorehouse tmorehouse requested a review from jacobmllr95 March 18, 2019 13:47
@tmorehouse
Copy link
Member Author

Going to be making a few minor adjustments to this later.

@lianee
Copy link
Contributor

lianee commented Mar 18, 2019

@tmorehouse suggestion: decouple in two classes:
table.js:

'b-table-selecting': this.isSelecting,
[`b-table-select-${this.selectMode}`]: true

mixin-selectable.js:

    isSelecting() {
      return (
        this.selectable &&
        this.selectedRows &&
        this.selectedRows.some(Boolean)
      )
    }

_table.scss:

  &.b-table-selecting.b-table-select-range {
    > tbody > tr {
      user-select: none;
    }
  }

@tmorehouse tmorehouse requested a review from jacobmllr95 March 19, 2019 04:35
@tmorehouse
Copy link
Member Author

@lianee I've updated the classes, etc.

@tmorehouse tmorehouse merged commit da49558 into dev Mar 19, 2019
@tmorehouse tmorehouse deleted the tmorehouse/table-select branch March 19, 2019 12:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jacobmllr95 jacobmllr95 jacobmllr95 approved these changes

Assignees
No one assigned
Labels
Type: Fix
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@tmorehouse @lianee @jacobmllr95