Skip to content

Commit

Permalink
feat(OnyxPagination): enable search and update select focus styles (#…
Browse files Browse the repository at this point in the history
…1774)

Relates to #1722

- enable search
- rename modern to select
- add example to demo app
- update hover/focus styles
  • Loading branch information
larsrickert authored Aug 26, 2024
1 parent 0a819eb commit 3d612d4
Show file tree
Hide file tree
Showing 11 changed files with 40 additions and 7 deletions.
5 changes: 5 additions & 0 deletions .changeset/eighty-books-shake.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"sit-onyx": minor
---

feat(OnyxPagination): enable search and update select focus styles
8 changes: 7 additions & 1 deletion apps/demo-app/src/views/HomeView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
OnyxLink,
OnyxLoadingIndicator,
OnyxPageLayout,
OnyxPagination,
OnyxRadioGroup,
OnyxSelect,
OnyxSkeleton,
Expand Down Expand Up @@ -48,6 +49,7 @@ const COMPONENTS = [
"OnyxLink",
"OnyxSelect",
"OnyxLoadingIndicator",
"OnyxPagination",
"OnyxRadioGroup",
"OnyxSkeleton",
"OnyxStepper",
Expand Down Expand Up @@ -121,6 +123,8 @@ const tableData = [
{ fruit: "Apple", price: "1.99", inventory: 3000 },
{ fruit: "Banana", price: "3.75", inventory: 18000 },
];
const currentPage = ref(1);
</script>

<template>
Expand Down Expand Up @@ -199,6 +203,8 @@ const tableData = [

<OnyxLoadingIndicator v-if="show('OnyxLoadingIndicator')" />

<OnyxPagination v-if="show('OnyxPagination')" v-model="currentPage" :pages="42" />

<template v-if="show('OnyxRadioGroup')">
<OnyxRadioGroup
v-model="radioState"
Expand All @@ -207,7 +213,7 @@ const tableData = [
:skeleton="skeletonNumber"
/>
<div v-if="!useSkeleton" class="onyx-text--small state-info">
OnyxRadioGroup state: {{ radioState ?? "" }}
OnyxRadioGroup state: {{ radioState ?? "-" }}
</div>
</template>

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -45,20 +45,22 @@ test.describe("screenshot tests", () => {
test.describe("screenshot tests (buttons)", () => {
executeMatrixScreenshotTest({
name: "Pagination (buttons)",
columns: ["previous", "next"],
columns: ["select", "previous", "next"],
rows: ["default", "hover", "active", "focus-visible"],
// TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410
disabledAccessibilityRules: ["color-contrast"],
component: () => <OnyxPagination pages={42} modelValue={2} />,
beforeScreenshot: async (component, page, column, row) => {
const button = page.getByRole("button", {
let button = page.getByRole("button", {
name: column === "previous" ? "previous page" : "next page",
});

if (column === "select") button = component.getByLabel("Page selection");

if (row === "hover") await button.hover();
if (row === "focus-visible") {
await page.keyboard.press("Tab");
await page.keyboard.press("Tab");
if (column !== "select") await page.keyboard.press("Tab");
if (column === "next") await page.keyboard.press("Tab");
}
if (row === "active") {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import ModernPagination from "./ModernPagination.vue";
import SelectPagination from "./SelectPagination.vue";
import type { OnyxPaginationProps } from "./types";
const props = withDefaults(defineProps<OnyxPaginationProps>(), {
Expand All @@ -15,6 +15,6 @@ const emit = defineEmits<{
</script>

<template>
<ModernPagination v-bind="props" @update:model-value="emit('update:modelValue', $event)" />
<!-- TODO: add classic pagination, see https://github.com/SchwarzIT/onyx/issues/1714 -->
<SelectPagination v-bind="props" @update:model-value="emit('update:modelValue', $event)" />
<!-- TODO: add "inline" mode, see https://github.com/SchwarzIT/onyx/issues/1714 -->
</template>
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@ const hasReachedMax = computed(() => props.modelValue >= props.pages);
:value-label="props.modelValue.toString()"
hide-label
:disabled="props.disabled || props.pages <= 1"
alignment="left"
with-search
@update:model-value="
emit('update:modelValue', $event as (typeof selectOptions)[number]['value'])
"
Expand Down Expand Up @@ -106,6 +108,24 @@ const hasReachedMax = computed(() => props.modelValue >= props.pages);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
justify-content: space-between;
$hover-selector: "&:has(.onyx-select-input__native:enabled:read-write):hover";
$focus-selector: "&:has(.onyx-select-input__native:enabled:focus, .onyx-select-input__native--show-focus)";
#{$focus-selector},
#{$hover-selector} {
background-color: var(--onyx-color-base-neutral-200);
--border-color: unset;
}
// select input chevron icon color
&,
#{$hover-selector},
#{$focus-selector} {
.onyx-select-input__button {
color: var(--onyx-color-text-icons-neutral-intense);
}
}
}
.onyx-select-input__native {
Expand Down

0 comments on commit 3d612d4

Please sign in to comment.