Skip to content

Commit

Permalink
fix: pagination buttons are too small (#3004)
Browse files Browse the repository at this point in the history
  • Loading branch information
@justyna-13
justyna-13 committed Oct 5, 2023
1 parent e82aa92 commit 3c56fb2
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 10 deletions.
10 changes: 5 additions & 5 deletions apps/preview/next/pages/showcases/Pagination/Pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function Showcase() {
>
<button
type="button"
className="px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
className="min-w-[38px] px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
aria-current={selectedPage === 1}
onClick={() => setPage(1)}
>
Expand Down Expand Up @@ -70,7 +70,7 @@ export function Showcase() {
<div className="flex pt-1 border-t-4 border-transparent">
<button
type="button"
className="px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 "
className="min-w-[38px] px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 "
aria-current={endPage - 1 === selectedPage}
onClick={() => setPage(endPage - 1)}
>
Expand All @@ -88,7 +88,7 @@ export function Showcase() {
<button
type="button"
className={classNames(
'px-3 sm:px-4 py-3 text-neutral-500 md:w-12 rounded-md hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900',
'min-w-[38px] px-3 sm:px-4 py-3 text-neutral-500 md:w-12 rounded-md hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900',
{ '!text-neutral-900 hover:!text-primary-800 active:!text-primary-900': selectedPage === page },
)}
aria-label={`Page ${page} of ${totalPages}`}
Expand All @@ -104,7 +104,7 @@ export function Showcase() {
<div className="flex pt-1 border-t-4 border-transparent">
<button
type="button"
className="px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 "
className="min-w-[38px] px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 "
aria-current={selectedPage === 1}
onClick={() => setPage(2)}
>
Expand Down Expand Up @@ -138,7 +138,7 @@ export function Showcase() {
>
<button
type="button"
className="px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 "
className="min-w-[38px] px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 "
aria-current={totalPages === selectedPage}
onClick={() => setPage(totalPages)}
>
Expand Down
10 changes: 5 additions & 5 deletions apps/preview/nuxt/pages/showcases/Pagination/Pagination.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
>
<button
type="button"
class="px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
class="min-w-[38px] px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
:aria-current="selectedPage === 1"
@click="setPage(1)"
>
Expand All @@ -42,7 +42,7 @@
<div class="flex pt-1 border-t-4 border-transparent">
<button
type="button"
class="px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
class="min-w-[38px] px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
:aria-current="endPage - 1 === selectedPage"
@click="setPage(endPage - 1)"
>
Expand All @@ -60,7 +60,7 @@
<button
type="button"
:class="[
'px-3 sm:px-4 py-3 md:w-12 text-neutral-500 rounded-md hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900',
'min-w-[38px] px-3 sm:px-4 py-3 md:w-12 text-neutral-500 rounded-md hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900',
{ '!text-neutral-900 hover:!text-primary-800 active:!text-primary-900': selectedPage === page },
]"
:aria-label="`Page ${page} of ${totalPages}`"
Expand All @@ -75,7 +75,7 @@
<div class="flex pt-1 border-t-4 border-transparent">
<button
type="button"
class="px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
class="min-w-[38px] px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
:aria-label="`Page 2 of ${totalPages}`"
@click="setPage(2)"
>
Expand All @@ -99,7 +99,7 @@
>
<button
type="button"
class="px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
class="min-w-[38px] px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
:aria-current="totalPages === selectedPage"
@click="setPage(totalPages)"
>
Expand Down

0 comments on commit 3c56fb2

Please sign in to comment.