keystone_ui 0.29.3 → 0.29.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6957989b7a51f3fdd94ce32536025f31b9f3d1cc35fae4b92c1957da717ffd80
-  data.tar.gz: 9c3a4af4f7a27c7082ca8bf64578de1d96a415cf06019143bf1b9dbbc1f9b0ac
+  metadata.gz: 5df45efe6cf162e4a96fa164e01d6ccdf623f8a84d14c530fd5dca4b42eec941
+  data.tar.gz: f1366496636edb0d10f9e50c4b75c4dddc21801634cce63ba67cf4bfe009dfd6
 SHA512:
-  metadata.gz: 60cb001c00c818f4990338a8ad9575ba48d97fd1874dbc86ac03370959b49223cf82c4bf3b92d4b65ddbd0d92e7a5fceba909cbd558222dc584e96473402e910
-  data.tar.gz: 9148787bdf6de7526e77cd73012d156468183d0f5b3a21e5a873d71c6d677b35fbc2ad8c8adc7735b9ed9f0523912f3b80907bd8cc96eb1fa5ba52fea581d6a7
+  metadata.gz: f249e58a7511397eab772a9e1c9c54c323c0583ddafe41c4da6741d54d8ee57e3590d9c400f75fbd7f5a71d4aa4b0fa30cb0f6223ee6ab817b0240ab539b976b
+  data.tar.gz: dd617c68d26134469be161339b9c0158a2cd39f4f95ee29d9f6e3546f85b4e60cc4009a2d30d431f31792c3dea9752489df8e48032493b5dde5ab872e5a12135

data/app/assets/javascripts/keystone_ui/info_controller.js

@@ -4,8 +4,7 @@ export default class extends Controller {
   static targets = ["button", "summary", "detail"]
 
   peek() {
-    this.summaryTarget.classList.remove("hidden")
-    this.place(this.summaryTarget)
+    this.show(this.summaryTarget)
   }
 
   unpeek() {
@@ -15,8 +14,7 @@ export default class extends Controller {
   toggle(event) {
     event.stopPropagation()
     const shown = this.hasDetailTarget ? this.detailTarget : this.summaryTarget
-    shown.classList.toggle("hidden")
-    if (!shown.classList.contains("hidden")) this.place(shown)
+    shown.classList.contains("hidden") ? this.show(shown) : shown.classList.add("hidden")
   }
 
   hide(event) {
@@ -28,13 +26,13 @@ export default class extends Controller {
     if (this.hasDetailTarget) this.detailTarget.classList.add("hidden")
   }
 
-  place(shown) {
+  show(shown) {
+    Object.assign(shown.style, { position: "fixed", right: "auto" })
+    shown.classList.remove("hidden")
     const button = this.buttonTarget.getBoundingClientRect()
     Object.assign(shown.style, {
-      position: "fixed",
       top: `${button.bottom}px`,
-      left: `${Math.max(8, button.right - shown.offsetWidth)}px`,
-      right: "auto"
+      left: `${Math.max(8, button.right - shown.offsetWidth)}px`
     })
   }
 }

data/app/components/keystone/ui/breakdown_component.html.erb

@@ -1,10 +1,12 @@
-<span class="block">
+<span class="<%= Keystone::Ui::BreakdownComponent::BREAKDOWN_CLASSES %>">
   <% lines.each do |line| %>
     <span class="<%= Keystone::Ui::BreakdownComponent::LINE_CLASSES %>">
-      <span class="<%= Keystone::Ui::BreakdownComponent::AMOUNT_CLASSES %>"><%= line[:amount] %></span>&nbsp;<span class="<%= Keystone::Ui::BreakdownComponent::LABEL_CLASSES %>"><%= line[:label] %></span>
+      <span class="<%= Keystone::Ui::BreakdownComponent::AMOUNT_CLASSES %>"><%= line[:amount] %></span>
+      <span class="<%= Keystone::Ui::BreakdownComponent::LABEL_CLASSES %>"><%= line[:label] %></span>
     </span>
   <% end %>
   <span class="<%= Keystone::Ui::BreakdownComponent::TOTAL_CLASSES %>">
-    <span class="<%= Keystone::Ui::BreakdownComponent::AMOUNT_CLASSES %>"><%= total[:amount] %></span>&nbsp;<span class="<%= Keystone::Ui::BreakdownComponent::LABEL_CLASSES %>"><%= total[:label] %></span>
+    <span class="<%= Keystone::Ui::BreakdownComponent::AMOUNT_CLASSES %> <%= Keystone::Ui::BreakdownComponent::SUM_CLASSES %>"><%= total[:amount] %></span>
+    <span class="<%= Keystone::Ui::BreakdownComponent::LABEL_CLASSES %> <%= Keystone::Ui::BreakdownComponent::SUM_CLASSES %>"><%= total[:label] %></span>
   </span>
 </span>

data/app/components/keystone/ui/breakdown_component.rb

@@ -3,10 +3,12 @@
 module Keystone
   module Ui
     class BreakdownComponent < ViewComponent::Base
-      LINE_CLASSES = "ks-breakdown-line block"
-      AMOUNT_CLASSES = "ks-breakdown-amount inline-block w-24 text-right tabular-nums"
+      LINE_CLASSES = "ks-breakdown-line"
+      AMOUNT_CLASSES = "ks-breakdown-amount"
       LABEL_CLASSES = "ks-breakdown-label"
-      TOTAL_CLASSES = "ks-breakdown-total ks-stat-card-emphasis block"
+      BREAKDOWN_CLASSES = "ks-breakdown"
+      TOTAL_CLASSES = "ks-breakdown-total"
+      SUM_CLASSES = "ks-breakdown-sum"
 
       attr_reader :lines, :total
 

data/app/components/keystone/ui/info_component.rb

@@ -5,8 +5,8 @@ module Keystone
     class InfoComponent < ViewComponent::Base
       BUTTON_CLASSES = RadioCardComponent::INFO_BUTTON_CLASSES
       ICON = RadioCardComponent::INFO_ICON
-      SUMMARY_CLASSES = "ks-info-summary ks-radio-card-disclosure hidden z-30 w-64 text-sm"
-      DETAIL_CLASSES = "ks-info-detail ks-radio-card-disclosure hidden z-30 w-72 text-sm"
+      SUMMARY_CLASSES = "ks-info-summary ks-info-popup ks-radio-card-disclosure hidden z-30 w-64 text-sm"
+      DETAIL_CLASSES = "ks-info-detail ks-info-popup ks-radio-card-disclosure hidden z-30 w-80 text-sm"
 
       def initialize(summary:)
         @summary = summary

data/lib/keystone_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module KeystoneUi
-  VERSION = "0.29.3"
+  VERSION = "0.29.5"
 end

data/the_local/agents/keystone_ui-develop.md

@@ -278,8 +278,11 @@ outer element. See Conventions before using it.
   summary itself. A second tap closes what the first opened, a click anywhere
   else on the page closes the detail panel, and scrolling the page closes both
   panels. Each panel opens just under the button with its right edge on the
-  button's right edge, and stays at least 8 pixels from the left edge of the
-  screen. The panels are placed against the screen, so the button can sit
+  button's right edge, the first time it opens as well as every later time,
+  and stays at least 8 pixels from the left edge of the screen. The detail
+  panel is wider than the summary panel, and the text in both wraps, so pass
+  plain sentences and add no line breaks or widths of your own. The panels are
+  placed against the screen, so the button can sit
   inside a table or any other container that clips its contents without the
   panels being cut off. Both panels render inside a `<span>`, so the block may
   hold text and inline elements only, such as a `ui_breakdown`, and never a
@@ -287,12 +290,14 @@ outer element. See Conventions before using it.
   controllers registered, and without them the button shows nothing.
 - `ui_breakdown(lines:, total:)` — no block. A list of amounts ending in their
   total. `lines:` is `[{ amount:, label: }, ...]` and `total:` is one
-  `{ amount:, label: }`, both required. Each line renders its amount
-  right-aligned in a fixed-width column with its label beside it, and the total
-  renders last, emphasized. Every value is printed as given and nothing is
-  added up, so compute the total and format numbers and currency before
-  passing them. It renders inline elements only, so it can sit inside a
-  `ui_info` block.
+  `{ amount:, label: }`, both required. Each line renders its amount with its
+  label beside it, and the total renders last, set apart from the lines above
+  it. Every value is printed as given and nothing is added up, so compute the
+  total and format numbers and currency before passing them. How the amounts
+  and labels line up, and how the total is set apart, come from the
+  `ks-breakdown` classes in the keystone_ui-styles gem, and the helper sets no
+  widths or spacing of its own. It renders inline elements only, so it can sit
+  inside a `ui_info` block.
 - `ui_accordion(items: [])` — a stack of independently expandable rows. `items:`
   is `[{ question:, answer: }, ...]`.
 - `ui_tab_switcher(tabs:)` — takes a block. `tabs:` is an array of label strings;
@@ -427,7 +432,10 @@ outer element. See Conventions before using it.
    lists, and the wording of the summary, are the app's own, so ask the
    developer rather than pick. If an info button shows nothing when hovered or
    tapped, the gem's Stimulus controllers are not registered, so stop and hand
-   that part to `keystone_ui-install`.
+   that part to `keystone_ui-install`. If a breakdown renders as one run of
+   text with no columns and no separate total, the app's keystone_ui-styles
+   version does not define the `ks-breakdown` classes, so stop and hand that
+   part to `keystone_ui-install` as well, and add no classes to fix it.
    A field whose value must be one of a fixed list is a `:select` with
    `options:`, and a field that accepts any text and offers common values is a
    text field with `suggestions:`. Which one a field is, and which values it

data/the_local/agents/keystone_ui-info.md

@@ -96,15 +96,22 @@ holds the catalog.
   under the button, and the summary stays the hover text. Both popups are
   placed against the screen, not against the element the button sits in, so a
   table or any other container that clips its contents does not cut them off.
-  Each opens under the button with its right edge on the button's, and is kept
-  on the screen when the button is near the left edge. A second tap closes
+  Each opens under the button with its right edge on the button's, the first
+  time as well as every later time, and is kept on the screen when the button
+  is near the left edge. The detail panel is wider than the summary. Both carry
+  one shared popup class from keystone_ui-styles, which decides how their text
+  wraps and how they fit a narrow screen. A second tap closes
   what the first opened, a click anywhere else closes the detail, and
   scrolling the page closes both.
 - **A breakdown is text.** A breakdown lists amounts, each beside a label
   saying what it is, and ends with a total set apart from the lines above it.
   Every line and the total are an amount and a label, passed as
   already-formatted text and shown as written. The component adds nothing up,
-  so the total is whatever it is given. It has no button and no hidden state of
+  so the total is whatever it is given. Its whole layout comes from
+  keystone_ui-styles' `ks-breakdown` classes: how the amounts and labels line
+  up, and how the total is set apart. The component sets no widths or spacing
+  of its own, so a breakdown looks right only with a keystone_ui-styles version
+  that defines those classes. It has no button and no hidden state of
   its own, and it can be placed inside an info button's detail.
 - **Suggestions.** A form field can carry a list of suggested values. The
   browser offers them while the field's text is typed, and the user can still

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui
 version: !ruby/object:Gem::Version
-  version: 0.29.3
+  version: 0.29.5
 platform: ruby
 authors:
 - Tyler Schneider
@@ -15,14 +15,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.8.0
+        version: 0.9.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.8.0
+        version: 0.9.0
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement