@redseed/redseed-ui-vue3 10.5.1 → 11.0.1

package/package.json

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

package/src/components/Disclosure/Disclosure.vue

@@ -29,7 +29,6 @@ const props = defineProps({
 
 const emit = defineEmits(['click'])
 
-const triggerId = _.uniqueId('disclosure-trigger-')
 const contentId = _.uniqueId('disclosure-content-')
 
 const isOpen = ref(props.open)
@@ -139,14 +138,15 @@ watch(isOpen, (open, wasOpen) => {
 }, { flush: 'sync' })
 
 /**
- * Each teleport target's current element, or null while it is absent.
+ * The content teleport target's current element, or null while it is absent.
  *
  * Re-checked rather than latched. These used to only ever flip true, and the
  * observer disconnected once both had been found — so a consumer that removed a
  * target left a Teleport mounted against nothing and the trigger vanished.
- * `SectionHeader` does exactly that: it width-gates the slots a target is
- * mounted into, so narrowing a header past 640px took the trigger away and the
- * section could no longer be opened. See #372.
+ * `SectionHeader` did exactly that: it width-gated the slots a target was mounted
+ * into, so narrowing a header past 640px took the trigger away and the section
+ * could no longer be opened (#372). The trigger no longer teleports at all (#408);
+ * the content still does, because 27 consumers still place a content pad.
  *
  * The element itself goes to `to`, not an `#id` selector. Vue resolves a
  * selector once, when the Teleport mounts, and never again when only
@@ -156,13 +156,11 @@ watch(isOpen, (open, wasOpen) => {
  * changed `to` is re-resolved, so a target that appears late or is re-created
  * gets the content moved into the live element.
  */
-const triggerTarget = shallowRef(null)
 const contentTarget = shallowRef(null)
 
 let observer = null
 
 function setTeleport() {
-    triggerTarget.value = document.getElementById(triggerId)
     contentTarget.value = document.getElementById(contentId)
 }
 
@@ -189,39 +187,41 @@ onBeforeUnmount(() => {
     <div class="rsui-disclosure">
         <slot name="child"
             :isOpen="isOpen"
-            :triggerId="triggerId"
             :contentId="contentId"
             :handleTrigger="handleTrigger"
         ></slot>
     </div>
 
     <!--
-        `disabled` rather than `v-if`, so the trigger renders in place when the
-        consumer supplies no target instead of not rendering at all.
+        Rendered IN PLACE. There is no trigger Teleport any more.
 
-        There used to be no second branch: `<Teleport v-if="canTeleportTrigger">`
-        and nothing else, so a missing target meant no trigger ANYWHERE rather
-        than one in a less good place. `SectionHeader` width-gates the slots a
-        target is mounted into, so below 640px of its OWN width — container, not
-        viewport — a section simply could not be opened. See #372.
+        It used to be teleported into an empty `<div :id="triggerId">` the consumer left
+        somewhere in their own markup, and every failure this component has had came from
+        that handoff — a pad in a width-gated slot (#372), a pad removed by
+        `:showMoreActions="false"` (#407), banned utility classes to sit a pad beside a
+        title. `collapsible` on SectionHeader and CardHeader replaced it: the header asks
+        whether it is inside a Disclosure and renders the trigger itself.
 
-        Vue's own `disabled` keeps this as one definition rendered in one of two
-        places, rather than two copies that can drift.
+        With no consumer placing a trigger pad, the Teleport had nothing to do — it was
+        already `:disabled` for every one of them, which renders exactly here. So this is
+        not a behaviour change, it is the removal of a branch nothing took. See #408.
+
+        A consumer wanting the trigger somewhere specific puts a `collapsible` header
+        there, or writes `<DisclosureTrigger>` where they want it.
     -->
-    <Teleport v-if="rendersOwnTrigger"
-        :to="triggerTarget"
-        :disabled="!triggerTarget"
-    >
+    <!--
+        Gated as a whole, not just the default content. A header that claims the trigger
+        (`collapsible`) suppresses this ENTIRELY, so a consumer supplying a custom `#trigger`
+        alongside a collapsible header gets one control rather than two. That is what the
+        Teleport's own `v-if` used to do, and dropping it to the default slot content alone
+        would have quietly changed it.
+    -->
+    <template v-if="rendersOwnTrigger">
         <slot name="trigger"
             :handleTrigger="handleTrigger"
             :isOpen="isOpen"
             :contentId="contentId"
         >
-            <!--
-                The markup itself moved to DisclosureTrigger so a header can render
-                the same button in its own title row. Rendered here it is unchanged:
-                ButtonSlot treats an unset size prop and a false one alike.
-            -->
             <DisclosureTrigger
                 :sm="$attrs.sm"
                 :md="$attrs.md"
@@ -231,7 +231,7 @@ onBeforeUnmount(() => {
                 :full="$attrs.full"
             />
         </slot>
-    </Teleport>
+    </template>
 
     <!-- Same reasoning as the trigger above: in place rather than nowhere. -->
     <Teleport :to="contentTarget"

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'
@@ -72,19 +72,27 @@ const props = defineProps({
         default: false,
     },
     /**
-     * Keep the badge on the title line on a narrow header.
+     * Drop the badge onto its own line on a narrow header.
      *
-     * `--stacked` puts `basis-full` on the title text, so below 640px the badge does
-     * not wrap when it runs out of room — it ALWAYS starts a new line. A group header
-     * carrying a count then stacks three rows above the first card, which is the second
-     * of the two reasons TeamCoachingIndex gives for hand-placing its badge inside the
-     * title rather than using `#badge` at all.
+     * OPT-IN. It used to be the default, with `inlineBadge` to turn it off, and that was the
+     * wrong way round — BREAKING, hence the major.
      *
-     * Separate from `collapsible` on purpose: a collapsible section does not necessarily
-     * want an inline badge, and a badge-carrying section need not collapse. Default
-     * false, so no existing header moves. See #407.
+     * The slot is a count. The Section standards say so outright ("a badge in a section
+     * header says how many, not how it is going"), and 12 of 17 lms1 call sites are counts:
+     * `filteredCount`, `categoryGroup.count`, group counts. A number on its own line is
+     * severed from the thing it counts.
+     *
+     * `PageHeader` already settled the layout: its `__status` badge sits in
+     * `__title-text-container` with `items-center` and has no narrow branch at all.
+     *
+     * Measured before the flip: a 25px badge with 211px of clear room beside it still went
+     * to row two, costing 26px of header height for nothing. Of four test cases only one had
+     * a title long enough to need the wrap.
+     *
+     * Kept rather than deleted, because stacking is defensible when it is CHOSEN — a long
+     * label badge, rather than a count, may genuinely want its own line. See #407.
      */
-    inlineBadge: {
+    stackBadge: {
         type: Boolean,
         default: false,
     },
@@ -117,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() {
@@ -217,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"
@@ -263,7 +312,7 @@ const titleTag = computed(() => HEADING_LEVELS.includes(String(props.headingLeve
             <!-- Title slot, default slot -->
             <div :class="[
                 'rsui-section-header__title',
-                { 'rsui-section-header__title--stacked': !responsiveWidth.specific && !inlineBadge },
+                { 'rsui-section-header__title--stacked': !responsiveWidth.specific && stackBadge },
             ]">
                 <component :is="titleTag"
                     :class="[
@@ -292,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>
@@ -321,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>