Commit 81df42f9 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Simplify .PaginationPageButton

Use `classes` to extend, not obliterate, component styles, obviating
the need to use complex mixins.
parent a81a51ac
...@@ -90,17 +90,17 @@ export default function ButtonPatterns() { ...@@ -90,17 +90,17 @@ export default function ButtonPatterns() {
<Library.Example title="Page numbers"> <Library.Example title="Page numbers">
<Library.Demo withSource style={{ backgroundColor: '#ececec' }}> <Library.Demo withSource style={{ backgroundColor: '#ececec' }}>
<LabeledButton className="PaginationPageButton" variant="dark"> <LabeledButton classes="PaginationPageButton" variant="dark">
9 9
</LabeledButton> </LabeledButton>
<LabeledButton <LabeledButton
className="PaginationPageButton" classes="PaginationPageButton"
variant="dark" variant="dark"
pressed pressed
> >
10 10
</LabeledButton> </LabeledButton>
<LabeledButton className="PaginationPageButton" variant="dark"> <LabeledButton classes="PaginationPageButton" variant="dark">
11 11
</LabeledButton> </LabeledButton>
</Library.Demo> </Library.Demo>
...@@ -109,14 +109,14 @@ export default function ButtonPatterns() { ...@@ -109,14 +109,14 @@ export default function ButtonPatterns() {
<Library.Example title="Navigation buttons"> <Library.Example title="Navigation buttons">
<Library.Demo withSource style={{ backgroundColor: '#ececec' }}> <Library.Demo withSource style={{ backgroundColor: '#ececec' }}>
<LabeledButton <LabeledButton
className="PaginationPageButton" classes="PaginationPageButton"
icon="arrow-left" icon="arrow-left"
variant="dark" variant="dark"
> >
Prev Prev
</LabeledButton> </LabeledButton>
<LabeledButton <LabeledButton
className="PaginationPageButton" classes="PaginationPageButton"
icon="arrow-right" icon="arrow-right"
iconPosition="right" iconPosition="right"
variant="dark" variant="dark"
......
...@@ -36,7 +36,7 @@ function PaginationNavigation({ currentPage, onChangePage, totalPages }) { ...@@ -36,7 +36,7 @@ function PaginationNavigation({ currentPage, onChangePage, totalPages }) {
<div className="PaginationNavigation__relative PaginationNavigation__prev"> <div className="PaginationNavigation__relative PaginationNavigation__prev">
{hasPreviousPage && ( {hasPreviousPage && (
<LabeledButton <LabeledButton
className="PaginationPageButton" classes="PaginationPageButton"
icon="arrow-left" icon="arrow-left"
title="Go to previous page" title="Go to previous page"
onClick={e => changePageTo(currentPage - 1, e.target)} onClick={e => changePageTo(currentPage - 1, e.target)}
...@@ -53,7 +53,7 @@ function PaginationNavigation({ currentPage, onChangePage, totalPages }) { ...@@ -53,7 +53,7 @@ function PaginationNavigation({ currentPage, onChangePage, totalPages }) {
<div className="PaginationNavigation__gap">...</div> <div className="PaginationNavigation__gap">...</div>
) : ( ) : (
<LabeledButton <LabeledButton
className="PaginationPageButton" classes="PaginationPageButton"
key={`page-${idx}`} key={`page-${idx}`}
title={`Go to page ${page}`} title={`Go to page ${page}`}
pressed={page === currentPage} pressed={page === currentPage}
...@@ -69,7 +69,7 @@ function PaginationNavigation({ currentPage, onChangePage, totalPages }) { ...@@ -69,7 +69,7 @@ function PaginationNavigation({ currentPage, onChangePage, totalPages }) {
<div className="PaginationNavigation__relative PaginationNavigation__next"> <div className="PaginationNavigation__relative PaginationNavigation__next">
{hasNextPage && ( {hasNextPage && (
<LabeledButton <LabeledButton
className="PaginationPageButton" classes="PaginationPageButton"
icon="arrow-right" icon="arrow-right"
iconPosition="right" iconPosition="right"
title="Go to next page" title="Go to next page"
......
...@@ -24,9 +24,7 @@ ...@@ -24,9 +24,7 @@
// This button style has asymmetrical padding. Hold it here to see if // This button style has asymmetrical padding. Hold it here to see if
// this kind of padding is useful in other patterns. // this kind of padding is useful in other patterns.
.PaginationPageButton { .PaginationPageButton {
@include buttons.LabeledButton { padding: var.$layout-space--small var.$layout-space;
padding: var.$layout-space--small var.$layout-space;
}
} }
// An IconButton, but override minimum height/width on touch screen devices // An IconButton, but override minimum height/width on touch screen devices
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment