Skip to content

Commit

Permalink
[tableSortable] Fix + alignCenter + alignRight (#3032)
Browse files Browse the repository at this point in the history 
* Fix + alignCenter + alignRight

* margins
  • Loading branch information
@vvalentin-lucca
vvalentin-lucca authored Aug 23, 2024
1 parent c32cb7b commit 77c3650
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 35 deletions.
10 changes: 8 additions & 2 deletions packages/scss/src/components/tableSortable/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@
.table-head-row-cell {
&:not(:has(.tableSortable-arrows)) {
&.mod-sortable,
.table-head-row-cell-sortableButton {
.table-head-row-cell-sortableButton,
.indexTable-head-row-cell-sortableButton {
@include sortableLegacy;

.table.mod-S & {
Expand Down Expand Up @@ -91,10 +92,15 @@

&.mod-alignRight {
&.mod-sortable,
.table-head-row-cell-sortableButton {
.table-head-row-cell-sortableButton,
.indexTable-head-row-cell-sortableButton {
@include sortableLegacyAlignRight;
}

&.mod-sortable {
@include sortableLegacy2AlignRight;
}

&:is(.is-sorted-descending, .sortedDescending) {
@include descendingLegacyAlignRight;
}
Expand Down
26 changes: 23 additions & 3 deletions packages/scss/src/components/tableSortable/mods.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@
text-align: left;

.indexTable & {
display: flex;
display: inline-flex;
width: fit-content;
}

&::after {
Expand All @@ -72,8 +73,21 @@
}

@mixin sortableLegacyAlignRight {
&::after {
content: none;
.table & {
&::after {
content: none;
}
}

.indexTable & {
&::before {
content: none;
}

&::after {
margin-left: 0;
margin-right: var(--pr-t-spacings-50);
}
}

&::before {
Expand Down Expand Up @@ -108,6 +122,12 @@
}
}

@mixin sortableLegacy2AlignRight {
&::before {
margin-right: 0;
}
}

@mixin sortedLegacy {
color: var(--palettes-neutral-900);

Expand Down
6 changes: 4 additions & 2 deletions packages/scss/src/components/tableSortable/states.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
@use '@lucca-front/scss/src/commons/utils/a11y';

@mixin sorted {
.table-head-row-cell-sortableButton {
.table-head-row-cell-sortableButton,
.indexTable-head-row-cell-sortableButton {
color: var(--palettes-neutral-900);

&::after {
Expand Down Expand Up @@ -68,7 +69,8 @@
@mixin ascendingLegacy2 {
@include sorted;

.table-head-row-cell-sortableButton {
.table-head-row-cell-sortableButton,
.indexTable-head-row-cell-sortableButton {
&::after {
@include icon.generate('arrow_top');
}
Expand Down
56 changes: 28 additions & 28 deletions stories/documentation/listings/index-table/index-table-sortable.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ function getTemplate(args: IndexTableSortableStory): string {
<table class="indexTable">
<thead class="indexTable-head">
<tr class="indexTable-head-row">
<th class="indexTable-head-row-cell" scope="col">Not sortable</th>
<th class="indexTable-head-row-cell" scope="col">
<th class="indexTable-head-row-cell ${args.align}" scope="col">Not sortable</th>
<th class="indexTable-head-row-cell ${args.align}" scope="col">
<button type="button" class="tableSortable button">
Sortable
<span class="tableSortable-arrows">
Expand All @@ -31,7 +31,7 @@ function getTemplate(args: IndexTableSortableStory): string {
</span>
</button>
</th>
<th class="indexTable-head-row-cell" scope="col" aria-sort="ascending">
<th class="indexTable-head-row-cell ${args.align}" scope="col" aria-sort="ascending">
<button type="button" class="tableSortable button">
Sorted ascending
<span class="tableSortable-arrows">
Expand All @@ -40,7 +40,7 @@ function getTemplate(args: IndexTableSortableStory): string {
</span>
</button>
</th>
<th class="indexTable-head-row-cell" scope="col" aria-sort="descending">
<th class="indexTable-head-row-cell ${args.align}" scope="col" aria-sort="descending">
<button type="button" class="tableSortable button">
Sorted descending
<span class="tableSortable-arrows">
Expand All @@ -62,21 +62,21 @@ function getTemplate(args: IndexTableSortableStory): string {
</thead>
<tbody class="indexTable-body">
<tr class="indexTable-body-row">
<td class="indexTable-body-row-cell">
<td class="indexTable-body-row-cell ${args.align}">
<a href="#" class="indexTable-body-row-cell-link">Content</a>
</td>
<td class="indexTable-body-row-cell">Content</td>
<td class="indexTable-body-row-cell">Content</td>
<td class="indexTable-body-row-cell">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
</tr>
<tr class="indexTable-body-row">
<td class="indexTable-body-row-cell">
<td class="indexTable-body-row-cell ${args.align}">
<a href="#" class="indexTable-body-row-cell-link">Content</a>
</td>
<td class="indexTable-body-row-cell">Content</td>
<td class="indexTable-body-row-cell">Content</td>
<td class="indexTable-body-row-cell">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
</tr>
</tbody>
Expand All @@ -85,46 +85,46 @@ function getTemplate(args: IndexTableSortableStory): string {
<table class="indexTable">
<thead class="indexTable-head">
<tr class="indexTable-head-row">
<th class="indexTable-head-row-cell" scope="col">Not sortable</th>
<th class="indexTable-head-row-cell" scope="col">
<button type="button" class="table-head-row-cell-sortableButton">
<th class="indexTable-head-row-cell ${args.align}" scope="col">Not sortable</th>
<th class="indexTable-head-row-cell ${args.align}" scope="col">
<button type="button" class="indexTable-head-row-cell-sortableButton">
Sortable
</button>
</th>
<th class="indexTable-head-row-cell" scope="col" aria-sort="ascending">
<button type="button" class="table-head-row-cell-sortableButton">
<th class="indexTable-head-row-cell ${args.align}" scope="col" aria-sort="ascending">
<button type="button" class="indexTable-head-row-cell-sortableButton">
Sorted ascending
</button>
</th>
<th class="indexTable-head-row-cell" scope="col" aria-sort="descending">
<button type="button" class="table-head-row-cell-sortableButton">
<th class="indexTable-head-row-cell ${args.align}" scope="col" aria-sort="descending">
<button type="button" class="indexTable-head-row-cell-sortableButton">
Sorted descending
</button>
</th>
<th class="indexTable-head-row-cell ${args.align}" scope="col" aria-sort="none">
<button type="button" class="table-head-row-cell-sortableButton" onclick="switch (this.parentNode.getAttribute('aria-sort')) { case 'ascending': this.parentNode.setAttribute('aria-sort', 'descending'); break; case 'descending': this.parentNode.setAttribute('aria-sort', 'none'); break; default: this.parentNode.setAttribute('aria-sort', 'ascending'); }">
<button type="button" class="indexTable-head-row-cell-sortableButton" onclick="switch (this.parentNode.getAttribute('aria-sort')) { case 'ascending': this.parentNode.setAttribute('aria-sort', 'descending'); break; case 'descending': this.parentNode.setAttribute('aria-sort', 'none'); break; default: this.parentNode.setAttribute('aria-sort', 'ascending'); }">
Interactive
</button>
</th>
</tr>
</thead>
<tbody class="indexTable-body">
<tr class="indexTable-body-row">
<td class="indexTable-body-row-cell">
<td class="indexTable-body-row-cell ${args.align}">
<a href="#" class="indexTable-body-row-cell-link">Content</a>
</td>
<td class="indexTable-body-row-cell">Content</td>
<td class="indexTable-body-row-cell">Content</td>
<td class="indexTable-body-row-cell">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
</tr>
<tr class="indexTable-body-row">
<td class="indexTable-body-row-cell">
<td class="indexTable-body-row-cell ${args.align}">
<a href="#" class="indexTable-body-row-cell-link">Content</a>
</td>
<td class="indexTable-body-row-cell">Content</td>
<td class="indexTable-body-row-cell">Content</td>
<td class="indexTable-body-row-cell">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
<td class="indexTable-body-row-cell ${args.align}">Content</td>
</tr>
</tbody>
Expand Down

0 comments on commit 77c3650

Please sign in to comment.