@redseed/redseed-ui-vue3 11.0.0 → 11.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "11.0.0",
+    "version": "11.0.1",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Layout/TwoColumnLayout.vue

@@ -1,4 +1,7 @@
 <script setup>
+import { computed, provide, ref } from 'vue'
+import { useResponsiveWidth } from '../../helpers'
+
 const props = defineProps({
     topAside: {
         type: Boolean,
@@ -14,9 +17,41 @@ const props = defineProps({
         default: false,
     },
 })
+
+const layoutElement = ref(null)
+
+/**
+ * 896, because that is `@4xl` — the container query in `two_column_layout.css` that puts
+ * the columns side by side. Measured here as well as queried there so components INSIDE a
+ * column can ask the same question, which CSS alone cannot tell them.
+ *
+ * Kept honest by a test asserting the stylesheet still breaks at `@4xl`. Two numbers that
+ * must agree is a drift risk; an unasserted one is a certainty.
+ */
+const SIDE_BY_SIDE_WIDTH = 896
+
+const { responsiveWidth } = useResponsiveWidth(layoutElement, SIDE_BY_SIDE_WIDTH)
+
+/**
+ * Whether the layout is showing two columns right now.
+ *
+ * Provided because a descendant cannot work this out for itself. `SectionHeader` needs it:
+ * where its actions go depends on whether it is a COLUMN on a page or the page itself, and
+ * a 330px aside and a 330px phone are the same measurement with opposite answers. Its own
+ * container cannot tell them apart, and neither can a viewport breakpoint — this collapses
+ * on its own width, so the viewport it collapses at moves with whatever chrome is around
+ * it. In Storybook that is 32px of padding and the columns hold down to a 928px viewport.
+ *
+ * A ref rather than a value, through a slot boundary, same as `Card` provides
+ * `rsuiCardHasBody` — slot content is compiled in the parent's scope but mounted with this
+ * component as its parent instance, so inject resolves here.
+ */
+provide('rsuiTwoColumnLayout', {
+    isSideBySide: computed(() => responsiveWidth.value.specific),
+})
 </script>
 <template>
-<div class="rsui-two-column-layout">
+<div ref="layoutElement" class="rsui-two-column-layout">
     <div
         :class="[
             'rsui-two-column-layout__container',

package/src/components/Section/SectionHeader.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, useAttrs, useSlots } from 'vue'
+import { ref, computed, inject, useAttrs, useSlots } from 'vue'
 import { rendersContent } from '../../helpers/slots'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
 import Icon from '../Icon/Icon.vue'
@@ -125,6 +125,43 @@ const sectionHeaderElement = ref(null)
 
 const { responsiveWidth } = useResponsiveWidth(sectionHeaderElement, 640)
 
+/**
+ * Whether the enclosing `TwoColumnLayout` is currently showing two columns, or null when
+ * there is no layout around this header.
+ *
+ * This is the question `responsiveWidth` cannot answer. The container says how much room
+ * the header has — truncation, whether a badge fits — and that is the right question for
+ * everything inside it. Where the ACTIONS go is a different question: a 330px aside on a
+ * desktop wants its single "View all" beside the title, and the same 330px on a phone
+ * wants it underneath. Identical container, opposite answers, so the container cannot
+ * decide it.
+ *
+ * A viewport breakpoint cannot decide it either, which is what the first cut of this got
+ * wrong. `TwoColumnLayout` collapses on a CONTAINER query — 896px of its own width — so
+ * the viewport it collapses at moves with whatever chrome surrounds it. In Storybook that
+ * is 32px of padding and the columns hold down to a 928px viewport, and the 64rem constant
+ * stacked the actions across the whole 928–1023 band while the aside was still an aside.
+ * More page furniture moves the boundary the other way. No constant fits.
+ *
+ * So the header rides on the layout's own answer rather than approximating it, and the
+ * two can never disagree.
+ */
+const twoColumnLayout = inject('rsuiTwoColumnLayout', null)
+
+const isColumnBesideAnother = computed(() => twoColumnLayout?.isSideBySide.value ?? false)
+
+/**
+ * The actions stay in the header row while this header is one of two columns, however
+ * narrow the column is. A single "View all" beside a wrapped title reads better in a 330px
+ * aside than the same link dropped into a left-aligned block below it — and a view-all is
+ * the only thing in this slot in practice: of 17 lms1 headers using `#actions`, 12 hold
+ * exactly that and none renders two controls at once.
+ *
+ * Once the layout collapses, every column is the full width of the page and the container
+ * measurement answers it correctly on its own, which is what it did before any of this.
+ */
+const keepsActionsInline = computed(() => responsiveWidth.value.specific || isColumnBesideAnother.value)
+
 const emit = defineEmits(['click:more-actions'])
 
 function handleMoreActionsClick() {
@@ -225,7 +262,11 @@ const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLeve
             // It used to come from `md:` — a viewport query at 768 — while the icon
             // gate, the actions swap and the badge stacking all read the container at
             // 640, so a narrow column on a wide screen got both layouts at once. #420.
-            'rsui-section-header--narrow': !responsiveWidth.specific,
+            'rsui-section-header--narrow': !keepsActionsInline,
+            // Container only, deliberately NOT the one above. Where the actions go is a
+            // question about the page; whether the title has room is a question about this
+            // column, and the two want different answers in an aside on a wide screen.
+            'rsui-section-header--narrow-column': !responsiveWidth.specific,
         }
     ]"
     :role="isClickable ? 'button' : undefined"
@@ -300,7 +341,7 @@ const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLeve
         >
             <!-- Desktop actions slot, optional -->
             <div class="rsui-section-header__actions-desktop"
-                v-if="responsiveWidth.specific && $slots.actions"
+                v-if="keepsActionsInline && $slots.actions"
             >
                 <slot name="actions"></slot>
             </div>
@@ -329,7 +370,7 @@ const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLeve
 
     <!-- Mobile actions slot, optional -->
     <div class="rsui-section-header__actions-mobile"
-        v-if="showMobileActions && !responsiveWidth.specific && $slots.actions"
+        v-if="showMobileActions && !keepsActionsInline && $slots.actions"
     >
         <slot name="actions"></slot>
     </div>