avo 4.1.14 → 4.1.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98def409c0459889f884d0d4b41bac8c1f9b839ae84ede96e9c7d6871d805a8c
-  data.tar.gz: f0b899bbd3f7dc90617dbb3fbfc1411d726838aa56e97f85cb3549040f1be311
+  metadata.gz: 979ea4a3d9398395f5ddcf3122789f338eb1866c5712f338345d70fb4616fe68
+  data.tar.gz: 595a5f9ab9aeeda7c3be1cdd9e9cd944bf04fdd056de079bcb2ca5ca16f97e6a
 SHA512:
-  metadata.gz: eed930f4f812d56de331fdcbe8ce9637f5b26c511258fc6944d63c50940f858cbc08bd77914cb413e5478fb01323f8bdc5a6f4d8f6ddf5b9f7e61df51460059e
-  data.tar.gz: 0c3155f5025bc0538da092283d2b05946fb6f9e55314019f707f7b3cb4b69e2b0069c2ad5ece6dfdffc9fcba55938b302bd2b6e6bd52259d2fd919b2faa525fd
+  metadata.gz: '0893fb0c3556b1da737b856b2892252402101526b9d762fcc7fd2a1642d8dccb1ca6d2dc28081f399bccfff8484a06f33ecefa308ba13fe60236423480b3fc37'
+  data.tar.gz: 90974ed038a73a92fe8d9f9bcb7e16d425a7e90b89f2b152afaf71ddb224d57b9d82486d64e00000b9fd7fc637e67be4472d4875e8c4c767d22665b4f89f9080

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (4.1.14)
+    avo (4.1.15)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)

data/app/assets/builds/avo/application.css

@@ -5115,52 +5115,60 @@ tag.tagify__tag {
     }
   }
   @media (width >= 96rem) {
-    .container-large {
+    .container-lg {
       width: 100%;
     }
     @media (width >= 30rem) {
-      .container-large {
+      .container-lg {
         max-width: 30rem;
       }
     }
     @media (width >= 40rem) {
-      .container-large {
+      .container-lg {
         max-width: 40rem;
       }
     }
     @media (width >= 48rem) {
-      .container-large {
+      .container-lg {
         max-width: 48rem;
       }
     }
     @media (width >= 64rem) {
-      .container-large {
+      .container-lg {
         max-width: 64rem;
       }
     }
     @media (width >= 80rem) {
-      .container-large {
+      .container-lg {
         max-width: 80rem;
       }
     }
     @media (width >= 96rem) {
-      .container-large {
+      .container-lg {
         max-width: 96rem;
       }
     }
-    .container-large {
+    .container-lg {
       margin-inline: auto;
     }
   }
   @media (width >= 80rem) {
-    .container-small {
+    .container-md {
       margin-inline: auto;
       width: 100%;
       max-width: calc(var(--spacing) * 240);
       padding-inline: 0px;
     }
   }
-  .container-full-width {
+  @media (width >= 48rem) {
+    .container-sm {
+      margin-inline: auto;
+      width: 100%;
+      max-width: calc(var(--spacing) * 180);
+      padding-inline: 0px;
+    }
+  }
+  .container-full {
     width: 100%;
   }
   .top-navbar {
@@ -8012,7 +8020,7 @@ tag.tagify__tag {
       width: 100%;
     }
   }
-  .container-small .field-wrapper__content-wrapper {
+  :is(.container-md, .container-sm) .field-wrapper__content-wrapper {
     width: 100%;
   }
   .field-wrapper.field-wrapper--density-compact {
@@ -8037,32 +8045,32 @@ tag.tagify__tag {
     height: 100%;
     overflow: hidden;
   }
-  .cado-avatar--large {
+  .cado-avatar--lg {
     width: calc(var(--spacing) * 20);
     height: calc(var(--spacing) * 20);
   }
-  .cado-avatar--medium {
+  .cado-avatar--md {
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
-  .cado-avatar--small {
+  .cado-avatar--sm {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
   }
-  .cado-avatar--tiny {
+  .cado-avatar--xs {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
   }
   .cado-avatar--rounded {
     border-radius: calc(infinity * 1px);
   }
-  .cado-avatar--square.cado-avatar--large {
+  .cado-avatar--square.cado-avatar--lg {
     border-radius: var(--radius-2xl);
   }
-  .cado-avatar--square.cado-avatar--medium {
+  .cado-avatar--square.cado-avatar--md {
     border-radius: var(--radius-xl);
   }
-  .cado-avatar--square.cado-avatar--small, .cado-avatar--square.cado-avatar--tiny {
+  .cado-avatar--square.cado-avatar--sm, .cado-avatar--square.cado-avatar--xs {
     border-radius: var(--radius-md);
   }
   .cado-avatar--placeholder, .cado-avatar--initials {
@@ -8144,27 +8152,27 @@ tag.tagify__tag {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .cado-avatar--large .cado-avatar__initials {
+  .cado-avatar--lg .cado-avatar__initials {
     width: calc(var(--spacing) * 8);
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
     --tw-leading: calc(var(--spacing) * 8);
     line-height: calc(var(--spacing) * 8);
   }
-  .cado-avatar--medium .cado-avatar__initials {
+  .cado-avatar--md .cado-avatar__initials {
     width: calc(var(--spacing) * 6);
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
   }
-  .cado-avatar--small .cado-avatar__initials {
+  .cado-avatar--sm .cado-avatar__initials {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
   }
-  .cado-avatar--tiny .cado-avatar__initials {
+  .cado-avatar--xs .cado-avatar__initials {
     font-size: var(--text-tiny);
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);

data/app/assets/stylesheets/css/components/avatar.css

@@ -4,19 +4,19 @@
 }
 
 /* Size variants */
-.cado-avatar--large {
+.cado-avatar--lg {
   @apply size-20;
 }
 
-.cado-avatar--medium {
+.cado-avatar--md {
   @apply size-12;
 }
 
-.cado-avatar--small {
+.cado-avatar--sm {
   @apply size-8;
 }
 
-.cado-avatar--tiny {
+.cado-avatar--xs {
   @apply size-5;
 }
 
@@ -25,16 +25,16 @@
   @apply rounded-full;
 }
 
-.cado-avatar--square.cado-avatar--large {
+.cado-avatar--square.cado-avatar--lg {
   @apply rounded-2xl;
 }
 
-.cado-avatar--square.cado-avatar--medium {
+.cado-avatar--square.cado-avatar--md {
   @apply rounded-xl;
 }
 
-.cado-avatar--square.cado-avatar--small,
-.cado-avatar--square.cado-avatar--tiny {
+.cado-avatar--square.cado-avatar--sm,
+.cado-avatar--square.cado-avatar--xs {
   @apply rounded-md;
 }
 
@@ -111,18 +111,18 @@
 }
 
 /* Font sizes for different avatar sizes */
-.cado-avatar--large .cado-avatar__initials {
+.cado-avatar--lg .cado-avatar__initials {
   @apply text-2xl leading-8 w-8;
 }
 
-.cado-avatar--medium .cado-avatar__initials {
+.cado-avatar--md .cado-avatar__initials {
   @apply text-lg leading-6 w-6;
 }
 
-.cado-avatar--small .cado-avatar__initials {
+.cado-avatar--sm .cado-avatar__initials {
   @apply text-sm leading-6;
 }
 
-.cado-avatar--tiny .cado-avatar__initials {
+.cado-avatar--xs .cado-avatar__initials {
   @apply text-tiny leading-4;
 }

data/app/assets/stylesheets/css/components/field-wrapper.css

@@ -107,7 +107,8 @@
   }
 }
 
-.container-small {
+.container-md,
+.container-sm {
   .field-wrapper__content-wrapper {
     @apply w-full;
   }

data/app/assets/stylesheets/css/components/sidebar_resize.css

@@ -8,7 +8,7 @@
    the sidebar, leaving >= 6px of the 8px `body.os-pc` scroll gutter grabbable.
    The other 13px stop exactly at the earliest interactive box edge in the
    layout: .main-content's start budget is 17px (1px border + 16px padding, since
-   .container-small zeroes the inner 8px at >= xl), but the first breadcrumb
+   .container-md zeroes the inner 8px at >= xl), but the first breadcrumb
    pulls its own 4px of padding back out for optical alignment, so anything
    past +13px starts covering it. sidebar_resize_spec.rb holds that line.
 

data/app/assets/stylesheets/css/components/ui/panel_header.css

@@ -37,10 +37,10 @@
 }
 
 /* Size variants */
-.header--size-medium {
+.header--size-md {
   /* Default styles already applied */
 }
 
-.header--size-small {
+.header--size-sm {
   /* Small variant uses same structure but can have different spacing if needed */
 }

data/app/assets/stylesheets/css/layout.css

@@ -150,21 +150,30 @@
   @apply flex flex-1 flex-col px-0 md:px-2;
 }
 
-.container-large {
+.container-lg {
   @apply 2xl:container 2xl:mx-auto;
 }
 
 /* max-width (not a fixed width) so the container fills the space left of a
    widened sidebar instead of overflowing it, while still capping at 960px on
-   wide viewports. w-full is required: .container-small is a flex item of
+   wide viewports. w-full is required: .container-md is a flex item of
    .main-content (flex flex-col), and per Flexbox §4.2 the auto inline margins
    from mx-auto suppress the default align-self: stretch — without an explicit
    width the item would collapse to its content width. */
-.container-small {
+.container-md {
   @apply xl:px-0 xl:w-full xl:max-w-240 xl:mx-auto;
 }
 
-.container-full-width {
+/* Clamps from md, well before .container-md's xl: waiting would make :sm and :md
+   pixel-identical on every laptop, which is where a narrow container is most
+   worth asking for. The trade is that at exactly 768px the 720px column leaves
+   only 24px a side; it opens up quickly above that, and the alternative was a
+   value that does nothing until 1280px. */
+.container-sm {
+  @apply md:px-0 md:w-full md:max-w-180 md:mx-auto;
+}
+
+.container-full {
   @apply w-full;
 }
 

data/app/components/avo/breadcrumb_element_component.html.erb

@@ -5,10 +5,10 @@
 ) do %>
   <% if @avatar.present? %>
     <div class="breadcrumb-element__avatar">
-      <%= render Avo::UI::AvatarComponent.new src: helpers.main_app.url_for(@avatar.value), shape: :square, type: :avatar, size: :tiny %>
+      <%= render Avo::UI::AvatarComponent.new src: helpers.main_app.url_for(@avatar.value), shape: :square, type: :avatar, size: :xs %>
     </div>
   <% elsif @initials.present? %>
-    <span class="breadcrumb-element__initials"><%= render Avo::UI::AvatarComponent.new shape: :square, type: :initials, size: :tiny, initials: @initials %></span>
+    <span class="breadcrumb-element__initials"><%= render Avo::UI::AvatarComponent.new shape: :square, type: :initials, size: :xs, initials: @initials %></span>
   <% end %>
   <% if @icon.present? %>
     <%= helpers.svg @icon, class: "breadcrumb-element__icon" %>

data/app/components/avo/fields/avatar_field/index_component.html.erb

@@ -1,9 +1,9 @@
 <%= index_field_wrapper(**field_wrapper_args, flush: true, dash_if_blank: false, center_content: true) do %>
   <% if @resource.avatar.present? && @resource.avatar.value.present? %>
-    <%= render Avo::UI::AvatarComponent.new src: helpers.safe_image_url(@resource.avatar.value), shape: :square, type: :avatar, size: :small %>
+    <%= render Avo::UI::AvatarComponent.new src: helpers.safe_image_url(@resource.avatar.value), shape: :square, type: :avatar, size: :sm %>
   <% elsif @resource.initials.present? %>
-    <%= render Avo::UI::AvatarComponent.new shape: :square, type: :initials, size: :small, initials: @resource.initials %>
+    <%= render Avo::UI::AvatarComponent.new shape: :square, type: :initials, size: :sm, initials: @resource.initials %>
   <% else %>
-    <%= render Avo::UI::AvatarComponent.new shape: :square, type: :placeholder, size: :small %>
+    <%= render Avo::UI::AvatarComponent.new shape: :square, type: :placeholder, size: :sm %>
   <% end %>
 <% end %>

data/app/components/avo/u_i/avatar_component.rb

@@ -1,12 +1,12 @@
 class Avo::UI::AvatarComponent < Avo::BaseComponent
-  SIZES = %w[large medium small tiny].freeze
+  SIZES = %w[lg md sm xs].freeze
   SHAPES = %w[rounded square].freeze
   THEMES = %w[default orange yellow green teal blue purple].freeze
   TYPES = %w[avatar placeholder initials].freeze
 
   def initialize(
     type: "placeholder",
-    size: "large",
+    size: "lg",
     shape: "rounded",
     theme: "default",
     initials: nil,

data/app/components/avo/u_i/panel_header_component.html.erb

@@ -1,8 +1,8 @@
 <%= tag.div class: class_names(
   @class,
   "header",
-  "header--size-medium": size_medium?,
-  "header--size-small": size_small?
+  "header--size-md": size_md?,
+  "header--size-sm": size_sm?
 ), data: { "item-index": @index, component: component_name }.compact_blank do %>
   <div class="header__main">
     <div class="header__content">

data/app/components/avo/u_i/panel_header_component.rb

@@ -3,7 +3,7 @@
 class Avo::UI::PanelHeaderComponent < Avo::BaseComponent
   prop :title
   prop :description
-  prop :size, default: :medium
+  prop :size, default: :md
   prop :url
   prop :target
   prop :index
@@ -14,11 +14,11 @@ class Avo::UI::PanelHeaderComponent < Avo::BaseComponent
   renders_one :controls
   renders_one :discreet_information
 
-  def size_medium?
-    @size == :medium
+  def size_md?
+    @size == :md
   end
 
-  def size_small?
-    @size == :small
+  def size_sm?
+    @size == :sm
   end
 end

data/app/controllers/avo/base_application_controller.rb

@@ -250,7 +250,8 @@ module Avo
     end
 
     def mark_container_width(width)
-      raise ArgumentError, "Invalid container width: #{width}. Must be one of #{Avo::Configuration::VALID_CONTAINER_WIDTHS}" unless Avo::Configuration::VALID_CONTAINER_WIDTHS.include?(width.to_sym)
+      width = Avo::Configuration.normalize_container_width(width.to_sym)
+      raise ArgumentError, "Invalid container width: #{width}. Must be one of #{Avo::Configuration::VALID_CONTAINER_WIDTHS}" unless Avo::Configuration::VALID_CONTAINER_WIDTHS.include?(width)
       @container_size = width.to_s
     end
 

data/app/controllers/avo/charts_controller.rb

@@ -18,7 +18,7 @@ module Avo
       compute_summary_data
 
       @page_title = "#{@resource.plural_name} — #{@field_id.to_s.humanize} summary"
-      @container_size = :small
+      @container_size = :md
 
       index_params = {
         encoded_filters: params[:encoded_filters],

data/app/controllers/avo/media_library_controller.rb

@@ -3,7 +3,7 @@ module Avo
     include Pagy::Method
 
     before_action :authorize_access!
-    before_action -> { @container_size = "large" }, only: [:edit]
+    before_action -> { @container_size = "lg" }, only: [:edit]
 
     def index
       @attaching = false

data/app/helpers/avo/application_helper.rb

@@ -241,10 +241,9 @@ module Avo
     end
 
     def container_classes
-      return "container-#{container_width_css_suffix(@container_size.to_sym)}" if @container_size.present?
+      return "container-#{@container_size}" if @container_size.present?
 
-      width = Avo.configuration.container_width.fetch(@view&.to_sym, :large)
-      "container-#{container_width_css_suffix(width)}"
+      "container-#{Avo.configuration.container_width.fetch(@view&.to_sym, :lg)}"
     end
 
     # encode & encrypt params
@@ -336,10 +335,6 @@ module Avo
       "attachment#{extension}"
     end
 
-    def container_width_css_suffix(width)
-      (width == :full) ? "full-width" : width.to_s
-    end
-
     def avo_field(type = nil, id = nil, as: nil, view: :show, form: nil, component_options: {}, **args, &block)
       if as.present?
         id = type

data/lib/avo/configuration.rb

@@ -73,15 +73,21 @@ module Avo
 
     unless defined?(CONTAINER_WIDTH_DEFAULTS)
       CONTAINER_WIDTH_DEFAULTS = {
-        index: :large,
-        show: :small,
-        new: :small,
-        edit: :small,
-        create: :small,
-        update: :small
+        index: :lg,
+        show: :md,
+        new: :md,
+        edit: :md,
+        create: :md,
+        update: :md
       }.freeze
 
-      VALID_CONTAINER_WIDTHS = %i[full large small].freeze
+      VALID_CONTAINER_WIDTHS = %i[full lg md sm].freeze
+
+      # Avo 4.1 renamed the widths onto Tailwind's scale so the vocabulary matches
+      # every other size option (`size: :sm`, `width: :xl`, ...). Note `:small`
+      # maps to `:md`, not `:sm` — the rename kept the old width and freed the
+      # narrower names. The old names still work and warn; drop them in Avo 5.
+      DEPRECATED_CONTAINER_WIDTHS = {large: :lg, small: :md}.freeze
 
       CONTAINER_WIDTH_GROUPS = {
         forms: %i[new edit create update],
@@ -90,11 +96,23 @@ module Avo
       }.freeze
     end
 
+    # Single funnel for every container width that enters Avo — `config.container_width=`
+    # and the controllers' `mark_container_width`. Unknown values pass through untouched
+    # so each caller keeps raising its own ArgumentError.
+    def self.normalize_container_width(value)
+      replacement = DEPRECATED_CONTAINER_WIDTHS[value.respond_to?(:to_sym) ? value.to_sym : value]
+      return value if replacement.nil?
+
+      Avo.logger.warn "[Avo] Container width `:#{value}` is deprecated and will be removed in Avo 5. Use `:#{replacement}` instead."
+      replacement
+    end
+
     def container_width=(value)
       case value
       when NilClass
         @container_width = nil
       when Symbol
+        value = self.class.normalize_container_width(value)
         raise ArgumentError, "Invalid container width: #{value}. Must be one of #{VALID_CONTAINER_WIDTHS}" unless VALID_CONTAINER_WIDTHS.include?(value)
         @container_width = CONTAINER_WIDTH_DEFAULTS.transform_values { value }
       when Hash
@@ -102,6 +120,8 @@ module Avo
         invalid_keys = value.keys.reject { |k| valid_keys.include?(k) }
         raise ArgumentError, "Invalid container width keys: #{invalid_keys}. Valid keys: #{valid_keys}" if invalid_keys.any?
 
+        value = value.transform_values { |v| self.class.normalize_container_width(v) }
+
         invalid_values = value.values.reject { |v| VALID_CONTAINER_WIDTHS.include?(v) }
         raise ArgumentError, "Invalid container widths: #{invalid_values}" if invalid_values.any?
 

data/lib/avo/skills/avo-admin-config/SKILL.md

@@ -86,7 +86,7 @@ config.pagination = { type: :countless }         # global pagination defaults; s
 
 ```ruby
 config.container_width = :full                            # one width for all views
-config.container_width = { index: :full, show: :small }   # or per view / group alias
+config.container_width = { index: :full, show: :md }      # or per view / group alias
 config.sidebar = {                                        # the sidebar's three knobs, merged over the defaults
   toggle_visible: false,                                  # hide the collapse button → sidebar stays open on desktop (default true)
   resizable: false,                                       # remove the drag-to-resize handle (default true)
@@ -101,7 +101,7 @@ config.back_to_top = { enabled: false }                   # the floating "Back t
 
 `config.sidebar` is a hash merged over `{toggle_visible: true, resizable: true, default_width: 256}`, so set only the keys you change. On desktop the sidebar edge is a drag handle: users resize it and the width persists **per browser** (a cookie, not a user preference). `default_width` sets the starting width and is clamped to `200`–`480` — an unparseable value falls back to `256` rather than clamping to the minimum. Both settings apply at `lg` (1024px) and wider only; below that the sidebar is a full-height overlay at the 256px default. A width the user has dragged to wins over `default_width`. The flat `config.sidebar_toggle_visible = false` still works and writes into `config.sidebar[:toggle_visible]`, but the hash is the canonical home.
 
-`container_width` values are `:large` (default index), `:small` (default show/forms), and `:full`. The hash form accepts individual views (`:index`, `:show`, `:new`, `:edit`, `:create`, `:update`) and group aliases (`:forms`, `:display`, `:single`); a specific key wins over an alias. The `body_classes` block runs in Avo's `ExecutionContext`, so it has `current_user`, `request`, and `params`.
+`container_width` values are `:lg` (default index), `:md` (default show/forms), `:sm` (a 720px narrow container, opt-in) and `:full` — Tailwind's scale, matching every other size option in Avo. The Avo-4.0 names `:large` and `:small` still work, log a deprecation warning, and map to `:lg`/`:md`; note `:small` maps to `:md`, **not** to `:sm`, which is a genuinely narrower container that did not exist before. They go away in Avo 5. The hash form accepts individual views (`:index`, `:show`, `:new`, `:edit`, `:create`, `:update`) and group aliases (`:forms`, `:display`, `:single`); a specific key wins over an alias. The `body_classes` block runs in Avo's `ExecutionContext`, so it has `current_user`, `request`, and `params`.
 
 ### Navigation home and record flow
 

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "4.1.14" unless const_defined?(:VERSION)
+  VERSION = "4.1.15" unless const_defined?(:VERSION)
 end

data/lib/generators/avo/templates/initializer/avo.tt

@@ -153,7 +153,7 @@ Avo.configure do |config|
   # config.use_browser_timezone = true # set false to render dates/times in the app's configured zone for everyone; off automatically in the test environment
   # config.currency = 'USD'
   # config.hide_layout_when_printing = false
-  # config.container_width = :large # :full, :large, or :small. Hash for per-view: { index: :full, single: :small }
+  # config.container_width = :lg # :full, :lg, :md, or :sm. Hash for per-view: { index: :full, single: :md }
   # config.use_stacked_fields = false
   # Set to false to disable Avo's Tailwind integration even when `tailwindcss-ruby` is installed.
   # config.tailwindcss_integration_enabled = true

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: avo
 version: !ruby/object:Gem::Version
-  version: 4.1.14
+  version: 4.1.15
 platform: ruby
 authors:
 - Adrian Marin