Skip to content

Commit d60ed86

Browse files
acelayaacelaya
committed
Migrate SortableBarChartCard ordering dropdown to tailwind
1 parent 150dfb8 commit d60ed86

2 files changed

Lines changed: 25 additions & 24 deletions

File tree

‎src/visits/charts/SortableBarChartCard.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { sortBy, splitEvery, zipObj } from '@shlinkio/data-manipulation';
22
import type { Order } from '@shlinkio/shlink-frontend-kit';
3-
import { OrderingDropdown } from '@shlinkio/shlink-frontend-kit';
4-
import { Paginator, roundTen } from '@shlinkio/shlink-frontend-kit/tailwind';
3+
import { OrderingDropdown, Paginator, roundTen } from '@shlinkio/shlink-frontend-kit/tailwind';
54
import type { FC, ReactNode } from 'react';
65
import { useCallback, useMemo, useState } from 'react';
76
import { SpaceBetweenContainer } from '../../common/SpaceBetweenContainer';
@@ -130,12 +129,14 @@ export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
130129
/>
131130
)}
132131
<OrderingDropdown
133-
isButton={false}
134-
right
132+
buttonVariant="link"
133+
menuAlignment="right"
134+
buttonSize="sm"
135+
buttonClassName="tw:[&]:p-0"
135136
items={sortingItems}
136137
order={order}
137-
onChange={(field, dir) => {
138-
setOrder({ field, dir });
138+
onChange={(newOrder) => {
139+
setOrder(newOrder);
139140
setCurrentPage(1);
140141
}}
141142
/>

‎test/visits/__snapshots__/VisitsStats.test.tsx.snap‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ exports[`<VisitsStats /> > loads visits when mounted 1`] = `
1818
class="tw:flex tw:content-center tw:gap-1"
1919
>
2020
<button
21-
aria-controls=":r3d:"
21+
aria-controls=":r43:"
2222
aria-expanded="false"
2323
aria-label="Expand"
2424
class="tw:inline-flex tw:rounded-md tw:focus-ring tw:text-lm-brand tw:dark:text-dm-brand tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline tw:px-1.5 tw:py-1 tw:text-sm"
@@ -44,7 +44,7 @@ exports[`<VisitsStats /> > loads visits when mounted 1`] = `
4444
class="tw:relative tw:inline-block"
4545
>
4646
<button
47-
aria-controls=":r3f:"
47+
aria-controls=":r45:"
4848
aria-expanded="false"
4949
aria-haspopup="true"
5050
class="tw:flex tw:items-center tw:rounded-md tw:focus-ring tw:justify-between tw:text-lm-brand tw:dark:text-dm-brand tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline tw:px-1.5 tw:py-1 tw:text-sm tw:gap-x-1.5 tw:[&]:p-0"
@@ -72,7 +72,7 @@ exports[`<VisitsStats /> > loads visits when mounted 1`] = `
7272
</div>
7373
<div
7474
class="tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md tw:first:rounded-t-md tw:last:rounded-b-md"
75-
id=":r3d:"
75+
id=":r43:"
7676
>
7777
<div
7878
class="recharts-wrapper tw:select-none"
@@ -600,7 +600,7 @@ exports[`<VisitsStats /> > loads visits when mounted 2`] = `
600600
class="tw:flex tw:content-center tw:gap-1"
601601
>
602602
<button
603-
aria-controls=":r3k:"
603+
aria-controls=":r4a:"
604604
aria-expanded="false"
605605
aria-label="Expand"
606606
class="tw:inline-flex tw:rounded-md tw:focus-ring tw:text-lm-brand tw:dark:text-dm-brand tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline tw:px-1.5 tw:py-1 tw:text-sm"
@@ -626,7 +626,7 @@ exports[`<VisitsStats /> > loads visits when mounted 2`] = `
626626
class="tw:relative tw:inline-block"
627627
>
628628
<button
629-
aria-controls=":r3m:"
629+
aria-controls=":r4c:"
630630
aria-expanded="false"
631631
aria-haspopup="true"
632632
class="tw:flex tw:items-center tw:rounded-md tw:focus-ring tw:justify-between tw:text-lm-brand tw:dark:text-dm-brand tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline tw:px-1.5 tw:py-1 tw:text-sm tw:gap-x-1.5 tw:[&]:p-0"
@@ -654,7 +654,7 @@ exports[`<VisitsStats /> > loads visits when mounted 2`] = `
654654
</div>
655655
<div
656656
class="tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md tw:first:rounded-t-md tw:last:rounded-b-md"
657-
id=":r3k:"
657+
id=":r4a:"
658658
>
659659
<div
660660
class="recharts-wrapper tw:select-none"
@@ -1182,7 +1182,7 @@ exports[`<VisitsStats /> > loads visits when mounted 3`] = `
11821182
class="tw:flex tw:content-center tw:gap-1"
11831183
>
11841184
<button
1185-
aria-controls=":r3r:"
1185+
aria-controls=":r4h:"
11861186
aria-expanded="false"
11871187
aria-label="Expand"
11881188
class="tw:inline-flex tw:rounded-md tw:focus-ring tw:text-lm-brand tw:dark:text-dm-brand tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline tw:px-1.5 tw:py-1 tw:text-sm"
@@ -1208,7 +1208,7 @@ exports[`<VisitsStats /> > loads visits when mounted 3`] = `
12081208
class="tw:relative tw:inline-block"
12091209
>
12101210
<button
1211-
aria-controls=":r3t:"
1211+
aria-controls=":r4j:"
12121212
aria-expanded="false"
12131213
aria-haspopup="true"
12141214
class="tw:flex tw:items-center tw:rounded-md tw:focus-ring tw:justify-between tw:text-lm-brand tw:dark:text-dm-brand tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline tw:px-1.5 tw:py-1 tw:text-sm tw:gap-x-1.5 tw:[&]:p-0"
@@ -1236,7 +1236,7 @@ exports[`<VisitsStats /> > loads visits when mounted 3`] = `
12361236
</div>
12371237
<div
12381238
class="tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md tw:first:rounded-t-md tw:last:rounded-b-md"
1239-
id=":r3r:"
1239+
id=":r4h:"
12401240
>
12411241
<div
12421242
class="recharts-wrapper tw:select-none"
@@ -1764,7 +1764,7 @@ exports[`<VisitsStats /> > loads visits when mounted 4`] = `
17641764
class="tw:flex tw:content-center tw:gap-1"
17651765
>
17661766
<button
1767-
aria-controls=":r42:"
1767+
aria-controls=":r4o:"
17681768
aria-expanded="false"
17691769
aria-label="Expand"
17701770
class="tw:inline-flex tw:rounded-md tw:focus-ring tw:text-lm-brand tw:dark:text-dm-brand tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline tw:px-1.5 tw:py-1 tw:text-sm"
@@ -1790,7 +1790,7 @@ exports[`<VisitsStats /> > loads visits when mounted 4`] = `
17901790
class="tw:relative tw:inline-block"
17911791
>
17921792
<button
1793-
aria-controls=":r44:"
1793+
aria-controls=":r4q:"
17941794
aria-expanded="false"
17951795
aria-haspopup="true"
17961796
class="tw:flex tw:items-center tw:rounded-md tw:focus-ring tw:justify-between tw:text-lm-brand tw:dark:text-dm-brand tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline tw:px-1.5 tw:py-1 tw:text-sm tw:gap-x-1.5 tw:[&]:p-0"
@@ -1818,7 +1818,7 @@ exports[`<VisitsStats /> > loads visits when mounted 4`] = `
18181818
</div>
18191819
<div
18201820
class="tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md tw:first:rounded-t-md tw:last:rounded-b-md"
1821-
id=":r42:"
1821+
id=":r4o:"
18221822
>
18231823
<div
18241824
class="recharts-wrapper tw:select-none"
@@ -2405,7 +2405,7 @@ exports[`<VisitsStats /> > loads visits when mounted 5`] = `
24052405
class="tw:flex tw:content-center tw:gap-1"
24062406
>
24072407
<button
2408-
aria-controls=":r49:"
2408+
aria-controls=":r4v:"
24092409
aria-expanded="false"
24102410
aria-label="Expand"
24112411
class="tw:inline-flex tw:rounded-md tw:focus-ring tw:text-lm-brand tw:dark:text-dm-brand tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline tw:px-1.5 tw:py-1 tw:text-sm"
@@ -2431,7 +2431,7 @@ exports[`<VisitsStats /> > loads visits when mounted 5`] = `
24312431
class="tw:relative tw:inline-block"
24322432
>
24332433
<button
2434-
aria-controls=":r4b:"
2434+
aria-controls=":r51:"
24352435
aria-expanded="false"
24362436
aria-haspopup="true"
24372437
class="tw:flex tw:items-center tw:rounded-md tw:focus-ring tw:justify-between tw:text-lm-brand tw:dark:text-dm-brand tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline tw:px-1.5 tw:py-1 tw:text-sm tw:gap-x-1.5 tw:[&]:p-0"
@@ -2459,7 +2459,7 @@ exports[`<VisitsStats /> > loads visits when mounted 5`] = `
24592459
</div>
24602460
<div
24612461
class="tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md tw:first:rounded-t-md tw:last:rounded-b-md"
2462-
id=":r49:"
2462+
id=":r4v:"
24632463
>
24642464
<div
24652465
class="recharts-wrapper tw:select-none"
@@ -3046,7 +3046,7 @@ exports[`<VisitsStats /> > loads visits when mounted 6`] = `
30463046
class="tw:flex tw:content-center tw:gap-1"
30473047
>
30483048
<button
3049-
aria-controls=":r4g:"
3049+
aria-controls=":r56:"
30503050
aria-expanded="false"
30513051
aria-label="Expand"
30523052
class="tw:inline-flex tw:rounded-md tw:focus-ring tw:text-lm-brand tw:dark:text-dm-brand tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline tw:px-1.5 tw:py-1 tw:text-sm"
@@ -3072,7 +3072,7 @@ exports[`<VisitsStats /> > loads visits when mounted 6`] = `
30723072
class="tw:relative tw:inline-block"
30733073
>
30743074
<button
3075-
aria-controls=":r4i:"
3075+
aria-controls=":r58:"
30763076
aria-expanded="false"
30773077
aria-haspopup="true"
30783078
class="tw:flex tw:items-center tw:rounded-md tw:focus-ring tw:justify-between tw:text-lm-brand tw:dark:text-dm-brand tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline tw:px-1.5 tw:py-1 tw:text-sm tw:gap-x-1.5 tw:[&]:p-0"
@@ -3100,7 +3100,7 @@ exports[`<VisitsStats /> > loads visits when mounted 6`] = `
31003100
</div>
31013101
<div
31023102
class="tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md tw:first:rounded-t-md tw:last:rounded-b-md"
3103-
id=":r4g:"
3103+
id=":r56:"
31043104
>
31053105
<div
31063106
class="recharts-wrapper tw:select-none"

0 commit comments

Comments
 (0)