Skip to content

Add table sorting #3950

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

Merged
thisisdano merged 49 commits into from
Mar 10, 2021
Merged

Add table sorting #3950

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
49 commits
Select commit Hold shift + click to select a range
04f0fde
add naive / simple table sort
sknep Jan 19, 2021
3a45aad
lint fixes
sknep Jan 19, 2021
ddd9df8
Fix Number global
sknep Jan 19, 2021
3d6a667
Add borderless table & bordered active sort state
sknep Jan 19, 2021
d985b9d
Make button fill height of table cell
sknep Jan 19, 2021
ba86a80
Add locale-based sort
sknep Jan 19, 2021
2411975
implement only one aria-sort per table, add data attr for numeric values
sknep Jan 20, 2021
194cebc
update icon
sknep Jan 20, 2021
166566b
use data-sortable attribute instead of class, add statehood table exa…
sknep Jan 21, 2021
825b154
checkpoint - sort announcement
sknep Feb 2, 2021
d9aa757
Add sort buttons to DOM via JS
sknep Feb 2, 2021
9ae0d27
Simplify redundant classes/data attrs
sknep Feb 2, 2021
2592546
Change to SVG icons
sknep Feb 2, 2021
af7cec5
Aria adjustments
sknep Feb 3, 2021
b8f4d9d
Swap .find() for .filter() + [0] for IE
sknep Feb 3, 2021
767d108
Fix IE bugs, add theme settings + icons
sknep Feb 10, 2021
763be60
Fix var names
sknep Feb 10, 2021
aff1bd2
Use DS prefix
sknep Feb 10, 2021
2f3d1a1
Move back to data attributes, fix some cross-browser bugs
sknep Feb 10, 2021
52541b9
cleanup + notes, fix lints
sknep Feb 10, 2021
9196205
Add striped sortable background color
sknep Feb 10, 2021
60f689a
Remove unused icon
sknep Feb 11, 2021
32bae3b
Add some tests
sknep Feb 11, 2021
b472999
Add unit test for sort state svg node manipulation
sknep Feb 11, 2021
9628c4f
HTML cleanup
sknep Feb 11, 2021
3113176
fix typo
sknep Feb 11, 2021
e1a73a7
Fix typo.
Feb 11, 2021
b9e859b
use claseses instead of IDs
sknep Feb 11, 2021
7571ef4
Merge branch 'accelerator/3935-sortable-table' of https://github.com/…
sknep Feb 11, 2021
ec8d1ee
Update unit tests
sknep Feb 11, 2021
0f6750a
Prettier lint
sknep Feb 11, 2021
38529d5
HTML cleanup/indentation
sknep Feb 11, 2021
540972f
Clarify compareFunction
sknep Feb 11, 2021
d6bef95
Clean up the sort comparator function
sknep Feb 16, 2021
9563c96
Run prettier on table.js.
Feb 16, 2021
9085eae
Make arrowheads match on sort icon
sknep Feb 18, 2021
7739ea5
Improve mobile stacked table display on guidance page
sknep Feb 19, 2021
1209329
scope stacked styles to component
sknep Feb 19, 2021
894a2da
Merge branch 'uswds-2.11.0' into accelerator/3935-sortable-table
thisisdano Mar 4, 2021
a735528
Remove extra space
thisisdano Mar 4, 2021
1457d3d
Don't use a custom border for sorted columns
thisisdano Mar 8, 2021
fa3f008
Remove table-sort border styles from th
thisisdano Mar 8, 2021
fb9ac7f
Update deprecated assert.equal() to assert.strictEqual()
thisisdano Mar 10, 2021
9e2dec0
Use defaults for standard table colors
thisisdano Mar 10, 2021
96c0cef
Use default for sorted icon color
thisisdano Mar 10, 2021
929e595
Revert to default text color
thisisdano Mar 10, 2021
033cf2f
Sync settings
thisisdano Mar 10, 2021
4a22ecd
Calculate proper header colors, sorted and unsorted
thisisdano Mar 10, 2021
96c7aee
Account for sorting color edge cases
thisisdano Mar 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Don't use a custom border for sorted columns
  • Loading branch information
@thisisdano
thisisdano committed Mar 8, 2021
commit 1457d3d3c511424e71ef3d7b2cb13a22ce9e797d
17 changes: 5 additions & 12 deletions src/stylesheets/core/placeholders/_table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@
th {
background-clip: padding-box;
font-weight: fw("bold");
line-height: line-height($theme-body-font-family, $theme-input-line-height);
line-height: line-height(
$theme-body-font-family,
$theme-input-line-height
);
}

th,
Expand Down Expand Up @@ -40,7 +43,6 @@
text-align: left;
}


@mixin table-header-unsorted-styles {
padding-right: units(5);
position: relative;
Expand Down Expand Up @@ -75,7 +77,7 @@
display: inline-block;
margin: 0;
position: absolute;
right: .25rem;
right: 0.25rem;
text-align: center;
text-decoration: none;
// vertically center button within table header
Expand Down Expand Up @@ -144,15 +146,6 @@
td[data-sort-active],
th[data-sort-active] {
background-color: color($theme-table-sorted-background-color);
border-left-width: units(2px);
border-right-width: units(2px);
border-left-color: color($theme-table-sorted-border-color);
border-right-color: color($theme-table-sorted-border-color);
}
tr:last-child > td[data-sort-active],
tr:last-child > th[data-sort-active] {
border-bottom-width: units(2px);
border-bottom-color: color($theme-table-sorted-border-color);
}
}

Expand Down
2 changes: 0 additions & 2 deletions src/stylesheets/settings/_settings-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,8 +174,6 @@ $theme-table-header-text-color: "ink" !default;
$theme-table-stripe-background-color: "base-lightest" !default;
$theme-table-stripe-text-color: "ink" !default;
$theme-table-text-color: "ink" !default;

$theme-table-sorted-border-color: "accent-cool-darker" !default;
$theme-table-sorted-header-background-color: "accent-cool-light" !default;
$theme-table-sorted-background-color: "accent-cool-lighter" !default;
$theme-table-sorted-stripe-background-color: "blue-cool-10v" !default;
Expand Down
2 changes: 0 additions & 2 deletions src/stylesheets/theme/_uswds-theme-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,8 +174,6 @@ $theme-table-header-text-color: "ink";
$theme-table-stripe-background-color: "base-lightest";
$theme-table-stripe-text-color: "ink";
$theme-table-text-color: "ink";

$theme-table-sorted-border-color: "accent-cool-darker";
$theme-table-sorted-header-background-color: "accent-cool-light";
$theme-table-sorted-background-color: "accent-cool-lighter";
$theme-table-sorted-stripe-background-color: "blue-cool-10v";
Expand Down