Merge branch '4-dev' into avo-976-adjust-text-input-design

Author: adrianthedev

Gemfile.lock

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

Procfile.dev

@@ -1,4 +1,4 @@
-web: bin/rails server -p 3030
+web: bin/rails server
 js: yarn build:js --watch
 css: yarn build:css --watch
 cjs: yarn build:custom-js --watch

app/assets/stylesheets/application.css

@@ -68,11 +68,16 @@
 @custom-variant floating-controls (&:where(.floating-controls *));
 @custom-variant shift-pressed (&:where(.shift-pressed *));
 
+/* Used to determine if the filters buttons is displayed. */
+@custom-variant index-missing-resources (&:where(.index-missing-resources *));
+
 /* https://tailwindcss.com/docs/upgrade-guide#hover-styles-on-mobile */
 /* needed to fix hover on system tests we need to find a better solution */
 /* I discovered that the Tailwind v4 `hover` change is affecting the test browser. As a temporary fix, I forced a custom variant to preserve the Tailwind v3 `hover` behavior, since it resolves the failing tests. However, we’ll need to find a more robust long-term solution. This one was tricky to pinpoint. */
 @custom-variant hover (&:hover);
 
+@import "./css/components/ui/checkbox.css";
+
 @layer components {
   @import "./../../../node_modules/easymde/dist/easymde.min.css";
   @import "./../../../node_modules/tippy.js/dist/tippy.css";
@@ -115,7 +120,6 @@
   @import "./css/components/ui/file_upload_input.css";
   @import "./css/components/ui/file_upload_item.css";
   @import "./css/components/ui/dropdown.css";
-  @import "./css/components/ui/checkbox.css";
   @import "./css/components/ui/radio_button.css";
   @import "./css/components/input.css";
 
@@ -207,6 +211,10 @@
       @apply ms-0 col-start-2;
     }
   }
+
+  select {
+    @apply text-foreground bg-background border-tertiary;
+  }
 }
 
 .loading-spinner {

app/assets/stylesheets/css/components/ui/card.css

@@ -35,12 +35,23 @@
 .card__header {
   @apply flex flex-col items-start self-stretch py-3 px-4;
 
+  &:has(select),
+  &:has(.button) {
+    @apply pe-0;
+  }
+
   /* `sm` size buttons make the header too tall. This will compensate for it. */
   .button {
     @apply -my-1;
   }
 }
 
+.card--compact-header {
+  .card__header {
+    @apply py-1 px-2;
+  }
+}
+
 /* Card title - Copy/14/500 from Figma */
 .card__title {
   @apply text-content font-medium leading-6 text-sm;

app/assets/stylesheets/css/components/ui/checkbox.css

@@ -1,58 +1,37 @@
-/* Checkbox Component - Based on Figma Design System */
-/* BEM Methodology: .checkbox (block), .checkbox__input (element), .checkbox--modifier (modifiers) */
-
-/* ==========================================================================
-   Base Styles
-   ========================================================================== */
-
-.checkbox__input {
-  @apply size-4 mx-3 cursor-pointer rounded-sm border-1 border-tertiary bg-primary;
-  box-shadow: var(--box-shadow);
-}
-
-/* ==========================================================================
-   State: Checked & Indeterminate
-   ========================================================================== */
-
-.checkbox__input:checked,
-.checkbox__input:indeterminate {
-  @apply bg-accent-content border-accent-content;
-}
-
-/* ==========================================================================
-   State: Focus & Hover
-   ========================================================================== */
-
-.checkbox__input:focus-visible,
-.checkbox__input:hover:not(:disabled) {
-  @apply ring-2 ring-offset-2 ring-accent-content outline-none;
-}
-
-/* Maintain checked/indeterminate appearance on focus/hover */
-.checkbox__input:checked:focus-visible,
-.checkbox__input:checked:hover:not(:disabled),
-.checkbox__input:indeterminate:focus-visible,
-.checkbox__input:indeterminate:hover:not(:disabled) {
-  @apply bg-accent-content border-accent-content;
-}
-
-/* ==========================================================================
-   State: Disabled
-   ========================================================================== */
-
-.checkbox__input:disabled {
-  @apply cursor-not-allowed opacity-60;
-}
-
-/* ==========================================================================
-   Modifier: Floating (row selector behavior)
-   ========================================================================== */
-
-.checkbox__input--floating {
-  @apply absolute start-0 top-0 mt-3 z-10 hidden;
-}
-
-.checkbox__input--floating:checked,
-.group:hover .checkbox__input--floating {
-  @apply block;
+@layer base {
+  input[type=checkbox] {
+    @apply size-4 cursor-pointer rounded-sm border-1 border-tertiary bg-primary;
+    box-shadow: var(--box-shadow);
+  }
+
+  input[type=checkbox]:checked {
+    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M10.1953%200.195262C10.4556%20-0.0650874%2010.8776%20-0.0650874%2011.138%200.195262C11.3983%200.455612%2011.3983%200.877621%2011.138%201.13797L4.4713%207.80464C4.21095%208.06499%203.78895%208.06499%203.5286%207.80464L0.195262%204.4713C-0.0650874%204.21095%20-0.0650874%203.78894%200.195262%203.5286C0.455612%203.26825%200.877621%203.26825%201.13797%203.5286L3.99995%206.39057L10.1953%200.195262Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E);
+    background-size: 70%;
+  }
+
+  input[type=checkbox]:indeterminate {
+    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%222%22%20viewBox%3D%220%200%2011%202%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M10%200C10.3682%200%2010.6667%200.298477%2010.6667%200.666667C10.6667%201.03486%2010.3682%201.33333%2010%201.33333H0.666667C0.298477%201.33333%200%201.03486%200%200.666667C0%200.298477%200.298477%200%200.666667%200H10Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E);
+    background-size: 70%;
+  }
+
+  input[type=checkbox]:checked,
+  input[type=checkbox]:indeterminate {
+    @apply bg-accent-content border-accent-content;
+  }
+
+  input[type=checkbox]:focus-visible,
+  input[type=checkbox]:hover:not(:disabled) {
+    @apply ring-2 ring-offset-2 ring-accent-content outline-none;
+  }
+
+  input[type=checkbox]:checked:focus-visible,
+  input[type=checkbox]:checked:hover:not(:disabled),
+  input[type=checkbox]:indeterminate:focus-visible,
+  input[type=checkbox]:indeterminate:hover:not(:disabled) {
+    @apply bg-accent-content border-accent-content;
+  }
+
+  input[type=checkbox]:disabled {
+    @apply cursor-not-allowed opacity-60;
+  }
 }

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

@@ -1,5 +1,5 @@
 .header {
-  @apply flex flex-col gap-2 items-start justify-center pe-0 py-0 px-1;
+  @apply flex flex-col gap-2 items-start justify-center pe-0 py-0;
 }
 
 .header__main {

app/assets/stylesheets/css/layout.css

@@ -11,7 +11,7 @@
 .main {
   --sidebar-width: --spacing(64);
   --sidebar-offset-size: 0rem;
-  --content-width: calc(100% - var(--sidebar-offset-size) - var(--spacing)*2);
+  --content-width: calc(100% - var(--sidebar-offset-size) - var(--spacing) * 2);
 
   @media (min-width: theme(--breakpoint-lg)) {
     &.sidebar-open {
@@ -29,7 +29,7 @@
     height: calc(100dvh - var(--spacing) - var(--top-navbar-height));
 
     .scrollable-wrapper {
-      @apply overflow-y-auto h-full flex-1 flex flex-col;
+      @apply overflow-y-auto h-full flex-1 flex flex-col px-2;
     }
     .avo-container {
       @apply  flex flex-1 flex-col justify-between;

app/components/avo/actions_component.html.erb

@@ -2,8 +2,8 @@
   class="actions-dropdown relative flex w-full flex-col sm:w-auto"
   data-component-name="<%= self.class.to_s.underscore %>"
   data-controller="toggle actions-picker"
-  data-actions-picker-enabled-class="text-black hover:bg-primary-500 hover:text-white"
-  data-actions-picker-disabled-class="cursor-wait text-gray-500"
+  data-actions-picker-enabled-class="text-content hover:bg-secondary"
+  data-actions-picker-disabled-class="cursor-wait text-content/60"
   data-resource-name="<%= @resource.class.to_s %>"
   <% if @resource.record.present? %>
     data-record-id="<%= @resource.record_param %>"

app/components/avo/actions_component.rb

@@ -76,7 +76,7 @@ def render_item(action)
       render_action_link(action.action, icon: action.icon)
     when defined?(Avo::Advanced::Resources::Controls::LinkTo) && Avo::Advanced::Resources::Controls::LinkTo
       link_to action.args[:path],
-        class: action.args.delete(:class) || "flex items-center px-4 py-3 w-full text-black font-semibold text-sm hover:bg-primary-100",
+        class: action.args.delete(:class),
         **action.args.except(:path, :label, :icon) do
           raw("#{icon(action.args[:icon])} #{action.args[:label]}")
         end

app/components/avo/empty_state_component.html.erb

@@ -1,12 +1,5 @@
-<% if @add_background %>
-  <div class="bg-white rounded-sm shadow-panel">
-<% end %>
-<div class="relative flex-1 flex flex-col items-center justify-center space-y-12 py-24">
-  <%= helpers.svg view_type_svg, class: 'h-[250px]' %>
-  <div class="text-gray-500 text-center">
+<div class="relative flex-1 flex flex-col items-center justify-center space-y-2 py-6 border border-dashed border-content-secondary rounded-lg">
+  <div class="text-content-secondary text-center">
     <%= text %>
   </div>
 </div>
-<% if @add_background %>
-  </div>
-<% end %>