Skip to content

Commit

Permalink
Fix pagination css
Browse files Browse the repository at this point in the history 
Refs: #7036
  • Loading branch information
@anicyne
anicyne committed Nov 26, 2024
1 parent 017b349 commit a663102
Show file tree
Hide file tree
Showing 6 changed files with 198 additions and 182 deletions.
14 changes: 7 additions & 7 deletions packages/components/src/components/pagination/shadow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
watchValidator,
} from '../../schema';
import type { JSX } from '@stencil/core';
import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
import { Component, h, Prop, State, Watch } from '@stencil/core';

import { translate } from '../../i18n';
import { nonce } from '../../utils/dev.utils';
Expand Down Expand Up @@ -98,13 +98,13 @@ export class KolPagination implements PaginationAPI {
});

return (
<Host class="kol-pagination">
<div class="kol-pagination">
<nav aria-label={this.state._label}>
<ul class="kol-pagination__navigation-list">
{this.state._hasButtons.first && (
<li>
<KolButtonWcTag
class="kol-pagination__button kol-pagination__button--first"
class="first"
exportparts="icon"
_customClass={this.state._customClass}
_disabled={this.state._page <= 1}
Expand All @@ -119,7 +119,7 @@ export class KolPagination implements PaginationAPI {
{this.state._hasButtons.previous && (
<li>
<KolButtonWcTag
class="kol-pagination__button kol-pagination__button--previous"
class="previous"
exportparts="icon"
_customClass={this.state._customClass}
_disabled={this.state._page <= 1}
Expand All @@ -135,7 +135,7 @@ export class KolPagination implements PaginationAPI {
{this.state._hasButtons.next && (
<li>
<KolButtonWcTag
class="kol-pagination__button kol-pagination__button--next"
class="next"
exportparts="icon"
_customClass={this.state._customClass}
_disabled={count <= this.state._page}
Expand All @@ -150,7 +150,7 @@ export class KolPagination implements PaginationAPI {
{this.state._hasButtons.last && (
<li>
<KolButtonWcTag
class="kol-pagination__button kol-pagination__button--last"
class="last"
exportparts="icon"
_customClass={this.state._customClass}
_disabled={count <= this.state._page}
Expand All @@ -176,7 +176,7 @@ export class KolPagination implements PaginationAPI {
_value={[this.state._pageSize]}
></KolSelectTag>
)}
</Host>
</div>
);
}

Expand Down
82 changes: 43 additions & 39 deletions packages/components/src/components/pagination/test/__snapshots__/snapshot.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,58 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`kol-pagination should render with _label="Label" _on={} _max=0 _page=4 _hasButtons=false _siblingCount=0 1`] = `
<kol-pagination class="kol-pagination">
<kol-pagination>
<template shadowrootmode="open">
<nav aria-label="Label">
<ul class="navigation-list"></ul>
</nav>
<div class="kol-pagination">
<nav aria-label="Label">
<ul class="kol-pagination__navigation-list"></ul>
</nav>
</div>
</template>
</kol-pagination>
`;

exports[`kol-pagination should render with _label="Label" _on={} _max=2 _page=1 1`] = `
<kol-pagination class="kol-pagination">
<kol-pagination>
<template shadowrootmode="open">
<nav aria-label="Label">
<ul class="navigation-list">
<li>
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-first" _tooltipalign="top" class="first" exportparts="icon"></kol-button-wc>
</li>
<li>
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="previous" exportparts="icon"></kol-button-wc>
</li>
<li>
<kol-button-wc _disabled="" _label="" class="selected">
<span slot="expert">
<span class="visually-hidden">
kol-page
<div class="kol-pagination">
<nav aria-label="Label">
<ul class="kol-pagination__navigation-list">
<li>
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-first" _tooltipalign="top" class="first" exportparts="icon"></kol-button-wc>
</li>
<li>
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="previous" exportparts="icon"></kol-button-wc>
</li>
<li>
<kol-button-wc _disabled="" _label="" class="selected">
<span slot="expert">
<span class="visually-hidden">
kol-page
</span>
1
</span>
1
</span>
</kol-button-wc>
</li>
<li>
<kol-button-wc _label="" exportparts="icon">
<span slot="expert">
<span class="visually-hidden">
kol-page
</kol-button-wc>
</li>
<li>
<kol-button-wc _label="" exportparts="icon">
<span slot="expert">
<span class="visually-hidden">
kol-page
</span>
2
</span>
2
</span>
</kol-button-wc>
</li>
<li>
<kol-button-wc _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="next" exportparts="icon"></kol-button-wc>
</li>
<li>
<kol-button-wc _hidelabel="" _label="kol-page-last" _tooltipalign="top" class="last" exportparts="icon"></kol-button-wc>
</li>
</ul>
</nav>
</kol-button-wc>
</li>
<li>
<kol-button-wc _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="next" exportparts="icon"></kol-button-wc>
</li>
<li>
<kol-button-wc _hidelabel="" _label="kol-page-last" _tooltipalign="top" class="last" exportparts="icon"></kol-button-wc>
</li>
</ul>
</nav>
</div>
</template>
</kol-pagination>
`;
30 changes: 17 additions & 13 deletions packages/themes/default/src/components/pagination.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@
.kol-pagination {
font-family: var(--font-family);

&__button {
outline: none;
&__navigation-list {
.button:focus {
outline: none;
}

&-inner {
.button-inner {
background-color: var(--color-light);
border-radius: var(--border-radius);
border: rem(1) solid var(--color-primary);
Expand All @@ -22,30 +24,32 @@
transition-property: background-color, color, border-color;
}

&:focus &-inner {
.button:focus .button-inner {
@include focus-outline;
}

&:is(:active, :hover):not(:disabled) &-inner {
.button:is(:active, :hover):not(:disabled) .button-inner {
background-color: var(--color-primary-variant);
border-color: var(--color-primary-variant);
box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24);
color: var(--color-light);
}

&:active &-inner {
.button:active .button-inner {
color: var(--color-light);
outline: none;
}
}

&__button--selected {
opacity: 1;
.selected {
button {
opacity: 1;
}

& .kol-pagination__button-inner {
background-color: var(--color-primary);
color: var(--color-light);
border: 0;
.button-inner {
background-color: var(--color-primary);
color: var(--color-light);
border: 0;
}
}
}
}
Expand Down
72 changes: 37 additions & 35 deletions packages/themes/ecl/src/ecl-ec/components/pagination.scss
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,50 @@
@import '../../mixins/rem';

@layer kol-theme-component {
:host {
.kol-pagination {
display: grid;
font-family: var(--font-family);
}

.button {
appearance: none;
background-color: none;
outline: none;
text-decoration: none;
}
&__navigation-list {
.button {
appearance: none;
background-color: none;
outline: none;
text-decoration: none;
}

.button-inner {
background-color: var(--color-yellow);
border: rem(2) solid var(--color-yellow);
color: var(--color-black);
font-weight: var(--font-weight-bold);
min-height: var(--a11y-min-size);
min-width: var(--a11y-min-size);
padding: 0.25em 0.75em;
}
.button-inner {
background-color: var(--color-yellow);
border: rem(2) solid var(--color-yellow);
color: var(--color-black);
font-weight: var(--font-weight-bold);
min-height: var(--a11y-min-size);
min-width: var(--a11y-min-size);
padding: 0.25em 0.75em;
}

.button:not(:disabled):hover .button-inner {
background-color: var(--color-yellow-120);
border-color: var(--color-yellow-120);
}
.button:not(:disabled):hover .button-inner {
background-color: var(--color-yellow-120);
border-color: var(--color-yellow-120);
}

.button:focus .button-inner {
outline-offset: rem(-4);
outline: rem(2) solid var(--color-black);
}
.button:focus .button-inner {
outline-offset: rem(-4);
outline: rem(2) solid var(--color-black);
}

.button:disabled .button-inner {
cursor: not-allowed;
opacity: 0.5;
}
.button:disabled .button-inner {
cursor: not-allowed;
opacity: 0.5;
}

.selected .button-inner {
background-color: var(--color-blue);
border-color: var(--color-blue);
color: var(--color-white);
opacity: 1;
text-decoration: underline;
.selected .button-inner {
background-color: var(--color-blue);
border-color: var(--color-blue);
color: var(--color-white);
opacity: 1;
text-decoration: underline;
}
}
}
}
Loading

0 comments on commit a663102

Please sign in to comment.