From 3aa12ffd79e2b99d0786770ff7183e3b7bb041fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20A=C3=ADsa?= Date: Fri, 31 May 2024 19:43:54 +0200 Subject: [PATCH 1/9] Add navigator-title slot to NavigatorCard --- src/components/Navigator/NavigatorCard.vue | 26 ++++++++++++---------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue index e3a0d2a82..ce77703fe 100644 --- a/src/components/Navigator/NavigatorCard.vue +++ b/src/components/Navigator/NavigatorCard.vue @@ -32,18 +32,20 @@ @keydown.up.exact.capture.prevent="focusPrev" @keydown.down.exact.capture.prevent="focusNext" > - -

- {{ technology }} -

- - + + +

+ {{ technology }} +

+ + + Date: Fri, 31 May 2024 19:45:58 +0200 Subject: [PATCH 2/9] Negative margin to bring the filter up while keeping the height and padding as it is --- src/components/Navigator/NavigatorCard.vue | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue index ce77703fe..dc30a22fe 100644 --- a/src/components/Navigator/NavigatorCard.vue +++ b/src/components/Navigator/NavigatorCard.vue @@ -1056,6 +1056,9 @@ $navigator-card-vertical-spacing: 8px !default; align-items: flex-end; .filter-on-top & { + // negative margin to bring the filter up + // while keeping the height and padding as it is + margin-top: calc(#{var(--nav-filter-vertical-padding)} * -1); border-top: none; align-items: flex-start; } @@ -1065,9 +1068,10 @@ $navigator-card-vertical-spacing: 8px !default; @include breakpoint(medium, nav) { --nav-filter-horizontal-padding: 20px; + --nav-filter-vertical-padding: 10px; border: none; - padding-top: 10px; - padding-bottom: 10px; + padding-top: var(--nav-filter-vertical-padding); + padding-bottom: var(--nav-filter-vertical-padding); height: $filter-height-small; } @@ -1095,6 +1099,7 @@ $navigator-card-vertical-spacing: 8px !default; .scroller { height: 100%; + margin: 0; box-sizing: border-box; padding-bottom: calc(var(--top-offset, 0px) + var(--card-vertical-spacing)); transition: padding-bottom ease-in 0.15s; From 0c3853cd19906808c32d5a8eab995fa953985e91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20A=C3=ADsa?= Date: Mon, 3 Jun 2024 14:02:48 +0200 Subject: [PATCH 3/9] Add test --- tests/unit/components/Navigator/NavigatorCard.spec.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/tests/unit/components/Navigator/NavigatorCard.spec.js b/tests/unit/components/Navigator/NavigatorCard.spec.js index 8f817a1d7..9cd61b4c9 100644 --- a/tests/unit/components/Navigator/NavigatorCard.spec.js +++ b/tests/unit/components/Navigator/NavigatorCard.spec.js @@ -320,6 +320,15 @@ describe('NavigatorCard', () => { expect(wrapper.find('.post-head').text()).toBe('CustomPostHead'); }); + it('exposes a #navigator-title slot', () => { + const wrapper = createWrapper({ + scopedSlots: { + 'navigator-title': '
CustomNavigatorTitle
', + }, + }); + expect(wrapper.find('.navigator-title').text()).toBe('CustomNavigatorTitle'); + }); + it('exposes a #above-navigator-head slot', () => { const wrapper = createWrapper({ scopedSlots: { From f1e3b9b304235c79b222e46040236b19eab6efaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20A=C3=ADsa?= Date: Tue, 4 Jun 2024 19:24:24 +0200 Subject: [PATCH 4/9] Refactor styles for navigator-title --- src/components/Navigator/NavigatorCard.vue | 32 ++++++++++++++-------- 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue index dc30a22fe..8be3d1c10 100644 --- a/src/components/Navigator/NavigatorCard.vue +++ b/src/components/Navigator/NavigatorCard.vue @@ -32,12 +32,15 @@ @keydown.up.exact.capture.prevent="focusPrev" @keydown.down.exact.capture.prevent="focusNext" > - +

@@ -1015,26 +1018,31 @@ $navigator-card-vertical-spacing: 8px !default; } } -.technology-title { +:deep(.navigator-title) { @include safe-area-left-set(margin-left, var(--card-horizontal-spacing)); @include safe-area-right-set(margin-right, var(--card-horizontal-spacing)); + white-space: nowrap; padding: $navigator-card-vertical-spacing $nav-card-horizontal-spacing; padding-left: $nav-card-horizontal-spacing * 2; + @include font-styles(label-reduced); + font-weight: $font-weight-semibold; + overflow: hidden; + text-overflow: ellipsis; +} + +.technology-title { background: $technology-title-background; border-radius: $nano-border-radius; display: flex; - white-space: nowrap; + color: var(--color-text); - @include breakpoint(small, nav) { - margin-top: 0; + .card-link { + font-size: inherit; + font-weight: inherit } - .card-link { - color: var(--color-text); - @include font-styles(label-reduced); - font-weight: $font-weight-semibold; - overflow: hidden; - text-overflow: ellipsis; + @include breakpoint(small, nav) { + margin-top: 0; } &.router-link-exact-active { From a2286354dc8706f2a5c9399ac39726447835083e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20A=C3=ADsa?= Date: Wed, 5 Jun 2024 16:44:59 +0200 Subject: [PATCH 5/9] NAVIGATOR_TITLE conts --- src/components/Navigator/NavigatorCard.vue | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue index 8be3d1c10..1cb444816 100644 --- a/src/components/Navigator/NavigatorCard.vue +++ b/src/components/Navigator/NavigatorCard.vue @@ -32,13 +32,14 @@ @keydown.up.exact.capture.prevent="focusPrev" @keydown.down.exact.capture.prevent="focusNext" > - + Date: Mon, 29 Jul 2024 18:00:38 +0300 Subject: [PATCH 6/9] Allow customTag in NavigatorCardItem --- src/components/Navigator/NavigatorCardItem.vue | 10 +++++++++- .../components/Navigator/NavigatorCardItem.spec.js | 10 ++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/Navigator/NavigatorCardItem.vue b/src/components/Navigator/NavigatorCardItem.vue index c7c950692..16e631c49 100644 --- a/src/components/Navigator/NavigatorCardItem.vue +++ b/src/components/Navigator/NavigatorCardItem.vue @@ -184,6 +184,10 @@ export default { type: Object, default: () => ({}), }, + customTag: { + type: String, + require: false, + }, }, idState() { return { @@ -204,7 +208,11 @@ export default { ), isBeta: ({ item: { beta } }) => !!beta, isDeprecated: ({ item: { deprecated } }) => !!deprecated, - refComponent: ({ isGroupMarker }) => (isGroupMarker ? 'h3' : Reference), + refComponent: ({ isGroupMarker, customTag }) => { + if (customTag) return customTag; + if (isGroupMarker) return 'h3'; + return Reference; + }, }, methods: { toggleTree() { diff --git a/tests/unit/components/Navigator/NavigatorCardItem.spec.js b/tests/unit/components/Navigator/NavigatorCardItem.spec.js index 817a06396..491d211a6 100644 --- a/tests/unit/components/Navigator/NavigatorCardItem.spec.js +++ b/tests/unit/components/Navigator/NavigatorCardItem.spec.js @@ -86,6 +86,16 @@ describe('NavigatorCardItem', () => { expect(cardItem.attributes('data-nesting-index')).toBe(String(defaultProps.item.depth)); }); + it('renders a custom tag for the leaf-link if customTag is defined', () => { + const wrapper = createWrapper({ + propsData: { + customTag: 'button', + }, + }); + const leafLink = wrapper.find('.leaf-link'); + expect(leafLink.is('button')).toBe(true); + }); + it('renders the NavigationCardItem with an icon override', () => { const navigatorReferences = { iconRef: { From a65877392139d744ca29342a83722c2087941860 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20A=C3=ADsa?= Date: Mon, 29 Jul 2024 18:00:58 +0300 Subject: [PATCH 7/9] Pass isTechnologyDeprecated as technologyProps --- src/components/Navigator.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue index bbc069faf..b621472a6 100644 --- a/src/components/Navigator.vue +++ b/src/components/Navigator.vue @@ -158,6 +158,7 @@ export default { technology: technology.title, technologyPath: technology.path || technology.url, isTechnologyBeta: technology.beta, + isTechnologyDeprecated: technology.deprecated, } ), }, From f779c809c5b092676fa324ea25afdd5fcf4d4860 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20A=C3=ADsa?= Date: Mon, 29 Jul 2024 18:01:31 +0300 Subject: [PATCH 8/9] childUIDs should be conditional --- src/components/Navigator/NavigatorCardItem.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Navigator/NavigatorCardItem.vue b/src/components/Navigator/NavigatorCardItem.vue index 16e631c49..86e9514aa 100644 --- a/src/components/Navigator/NavigatorCardItem.vue +++ b/src/components/Navigator/NavigatorCardItem.vue @@ -197,7 +197,7 @@ export default { }, computed: { isGroupMarker: ({ item: { type } }) => type === TopicTypes.groupMarker, - isParent: ({ item, isGroupMarker }) => !!item.childUIDs.length && !isGroupMarker, + isParent: ({ item, isGroupMarker }) => !!item.childUIDs?.length && !isGroupMarker, parentLabel: ({ item }) => `label-parent-${item.uid}`, siblingsLabel: ({ item }) => `label-${item.uid}`, usageLabel: ({ item }) => `usage-${item.uid}`, From 9634f414eb4f1a33f3943c141451d11a41946b9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20A=C3=ADsa?= Date: Mon, 29 Jul 2024 18:05:05 +0300 Subject: [PATCH 9/9] Render AX if helpers if siblingsCount --- src/components/Navigator/NavigatorCardItem.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Navigator/NavigatorCardItem.vue b/src/components/Navigator/NavigatorCardItem.vue index 86e9514aa..49dc849ba 100644 --- a/src/components/Navigator/NavigatorCardItem.vue +++ b/src/components/Navigator/NavigatorCardItem.vue @@ -13,7 +13,7 @@ :class="{ expanded, active: isActive, 'is-group': isGroupMarker }" :style="{ '--nesting-index': item.depth }" :data-nesting-index="item.depth" - :id="`container-${item.uid}`" + :id="item.uid ? `container-${item.uid}` : null" :aria-hidden="isRendered ? null : 'true'" :hideNavigatorIcon="isGroupMarker" @keydown.left.native.prevent="handleLeftKeydown" @@ -75,7 +75,7 @@ } ) }}