From e8624000da2f9127cbf032b650b8baedccf4b57d Mon Sep 17 00:00:00 2001 From: boppli Date: Fri, 5 Jul 2024 10:45:32 +0200 Subject: [PATCH 01/29] clean up old style test --- apps/demo-app/src/views/HomeView.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/demo-app/src/views/HomeView.vue b/apps/demo-app/src/views/HomeView.vue index 457307c1a..3b67cd853 100644 --- a/apps/demo-app/src/views/HomeView.vue +++ b/apps/demo-app/src/views/HomeView.vue @@ -272,7 +272,7 @@ const tableData = [ /> @@ -145,27 +139,6 @@ const isMobile = inject( font-weight: 600; } - &__footer, - &__mobile-footer { - color: var(--onyx-color-text-icons-neutral-soft); - - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--onyx-spacing-2xs); - } - &__footer { - border-top: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300); - padding: var(--onyx-spacing-4xs) var(--onyx-spacing-md); - } - &__mobile-footer { - margin-top: var(--onyx-spacing-xs); - border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300); - border-radius: var(--onyx-radius-sm); - font-size: 0.8125rem; - line-height: 1.25rem; - } - &--mobile { width: 100%; position: static; diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue index 0f7378731..d1e935555 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue +++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/UserMenuLayout.vue @@ -3,6 +3,7 @@ // to easily switch between mobile and desktop layout import { injectI18n } from "../../../../i18n"; import type { SelectOptionValue } from "../../../../types"; +import OnyxListItem from "../../../OnyxListItem/OnyxListItem.vue"; import OnyxFlyoutMenu from "../OnyxFlyoutMenu/OnyxFlyoutMenu.vue"; const props = defineProps<{ isMobile: boolean }>(); @@ -22,7 +23,9 @@ const { t } = injectI18n(); + + From 53846131171a487c24c38f78fc0843d4ed19b66b Mon Sep 17 00:00:00 2001 From: boppli Date: Wed, 10 Jul 2024 13:50:16 +0200 Subject: [PATCH 25/29] set highest breakpoint for nav item max example --- .../sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts index ae734e8c0..9e6a6a46f 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts +++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts @@ -138,12 +138,13 @@ export const WithCustomAppArea = { } satisfies Story; /** - * This example should be watched at a mobile breakpoint. - * Both the nav area as well as the context area will overflow. + * This nav bar has a lot of menu and context area items. + * Both the nav area as well as the context area will overflow when opened. */ export const WithOverflowingMobileContent = { args: { ...WithContextArea.args, + mobileBreakpoint: ONYX_BREAKPOINTS.xl, default: () => [ h(OnyxNavButton, { label: "Item 1", href: "/" }), h( From 290ff77379de547d183f2c6664fad052fcdbf8fe Mon Sep 17 00:00:00 2001 From: boppli Date: Wed, 10 Jul 2024 15:03:16 +0200 Subject: [PATCH 26/29] use prop for headline, not slot --- .../OnyxMobileNavButton/OnyxMobileNavButton.vue | 12 ++++-------- .../src/components/OnyxMobileNavButton/types.ts | 4 ++++ .../src/components/OnyxNavBar/OnyxNavBar.vue | 5 +---- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.vue b/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.vue index 0e56a8da5..9519b6ad9 100644 --- a/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.vue +++ b/packages/sit-onyx/src/components/OnyxMobileNavButton/OnyxMobileNavButton.vue @@ -15,15 +15,11 @@ const emit = defineEmits<{ "update:open": [isOpen: boolean]; }>(); -const slots = defineSlots<{ +defineSlots<{ /** * Slot for the menu content when it's open. */ default(): unknown; - /** - * Slot for a headline of the menu content when it's open - */ - headline?(): unknown; }>(); @@ -43,10 +39,10 @@ const slots = defineSlots<{
- - + + {{ props.headline }} diff --git a/packages/sit-onyx/src/components/OnyxMobileNavButton/types.ts b/packages/sit-onyx/src/components/OnyxMobileNavButton/types.ts index 3835fbb41..d16123356 100644 --- a/packages/sit-onyx/src/components/OnyxMobileNavButton/types.ts +++ b/packages/sit-onyx/src/components/OnyxMobileNavButton/types.ts @@ -12,4 +12,8 @@ export type OnyxMobileNavButtonProps = { * If `true`, an "x" icon will be displayed. */ open?: boolean; + /** + * Headline of the mobile flyout + */ + headline?: string; }; diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue index 3cfecaf1f..877fe5f5f 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue +++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue @@ -132,12 +132,9 @@ defineExpose({ class="onyx-nav-bar__burger" :icon="menu" :label="t('navigation.toggleBurgerMenu')" + :headline="t('navigation.navigationHeadline')" @update:open="isContextOpen = false" > - -