From 590c9e9305d29f3404f77dba413ee16b95d367a8 Mon Sep 17 00:00:00 2001 From: Adrian Marin Date: Tue, 3 Dec 2024 09:47:16 +0200 Subject: [PATCH] feature: grid item badge (#3478) * feature: grid item badge * add data indicator * lint * add badge title * lint --------- Co-authored-by: Paul Bob Co-authored-by: Paul Bob <69730720+Paul-Bob@users.noreply.github.com> --- .github/ISSUE_TEMPLATE/bug_report.md | 11 +++++++---- .../avo/index/grid_item_component.html.erb | 1 + app/components/avo/index/grid_item_component.rb | 16 ++++++++++++++++ safelist.txt | 2 +- scripts/export-tailwind-safelist.js | 3 +++ spec/dummy/app/avo/resources/product.rb | 5 ++++- 6 files changed, 32 insertions(+), 6 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index dc95170508..a4678787d7 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -12,7 +12,13 @@ A clear and concise description of what the bug is. You can use https://main.avodemo.com/ as the base app for the given instructions. --> -### Steps to Reproduce +### Reproduction repository for the bug + + +### Steps to use in the reproduction repository Steps to reproduce the behavior: 1. Add this configuration '...' 2. Go to '...' @@ -23,9 +29,6 @@ Steps to reproduce the behavior: ### Expected behavior & Actual behavior -### Models and resource files - - ### System configuration **Avo version**: diff --git a/app/components/avo/index/grid_item_component.html.erb b/app/components/avo/index/grid_item_component.html.erb index f75b60ceba..b2b8c37ae8 100644 --- a/app/components/avo/index/grid_item_component.html.erb +++ b/app/components/avo/index/grid_item_component.html.erb @@ -12,6 +12,7 @@ style: html(:cover, :style) do %> <%= render Avo::RowSelectorComponent.new(floating: true, size: :lg) if @resource.record_selector%> <%= render_cover %> + <%= render_badge %> <% end %>
diff --git a/app/components/avo/index/grid_item_component.rb b/app/components/avo/index/grid_item_component.rb index 06d392196d..01be46509a 100644 --- a/app/components/avo/index/grid_item_component.rb +++ b/app/components/avo/index/grid_item_component.rb @@ -65,4 +65,20 @@ def render_body @card[:body] end end + + def render_badge + return if @card[:badge_label].blank? + + content_tag :div, + class: class_names("absolute block inset-auto top-0 right-0 mt-2 mr-2 text-sm font-semibold bg-#{badge_color}-50 border border-#{badge_color}-300 text-#{badge_color}-700 rounded shadow-lg px-2 py-px z-10", html(:badge, :classes)), + title: @card[:badge_title], + style: html(:badge, :style), + data: {target: :badge, tippy: :tooltip, **(html(:badge, :data).presence || {})} do + @card[:badge_label] + end + end + + def badge_color + @card[:badge_color] || "gray" + end end diff --git a/safelist.txt b/safelist.txt index 4bc9d0281e..086d59508e 100644 --- a/safelist.txt +++ b/safelist.txt @@ -1,2 +1,2 @@ # This file was auto-generated using the `yarn export:tailwind-safelist` command in `export-tailwind-safelist.js` -bg-inherit-500 border-inherit-500 hover:bg-inherit-600 hover:border-inherit-600 active:border-inherit-600 active:outline-inherit-600 active:bg-inherit-600 text-inherit-500 hover:bg-inherit-100 active:bg-inherit-100 active:border-inherit-500 active:outline-inherit-500 bg-current-500 border-current-500 hover:bg-current-600 hover:border-current-600 active:border-current-600 active:outline-current-600 active:bg-current-600 text-current-500 hover:bg-current-100 active:bg-current-100 active:border-current-500 active:outline-current-500 bg-transparent-500 border-transparent-500 hover:bg-transparent-600 hover:border-transparent-600 active:border-transparent-600 active:outline-transparent-600 active:bg-transparent-600 text-transparent-500 hover:bg-transparent-100 active:bg-transparent-100 active:border-transparent-500 active:outline-transparent-500 bg-black-500 border-black-500 hover:bg-black-600 hover:border-black-600 active:border-black-600 active:outline-black-600 active:bg-black-600 text-black-500 hover:bg-black-100 active:bg-black-100 active:border-black-500 active:outline-black-500 bg-white-500 border-white-500 hover:bg-white-600 hover:border-white-600 active:border-white-600 active:outline-white-600 active:bg-white-600 text-white-500 hover:bg-white-100 active:bg-white-100 active:border-white-500 active:outline-white-500 bg-slate-500 border-slate-500 hover:bg-slate-600 hover:border-slate-600 active:border-slate-600 active:outline-slate-600 active:bg-slate-600 text-slate-500 hover:bg-slate-100 active:bg-slate-100 active:border-slate-500 active:outline-slate-500 bg-gray-500 border-gray-500 hover:bg-gray-600 hover:border-gray-600 active:border-gray-600 active:outline-gray-600 active:bg-gray-600 text-gray-500 hover:bg-gray-100 active:bg-gray-100 active:border-gray-500 active:outline-gray-500 bg-zinc-500 border-zinc-500 hover:bg-zinc-600 hover:border-zinc-600 active:border-zinc-600 active:outline-zinc-600 active:bg-zinc-600 text-zinc-500 hover:bg-zinc-100 active:bg-zinc-100 active:border-zinc-500 active:outline-zinc-500 bg-neutral-500 border-neutral-500 hover:bg-neutral-600 hover:border-neutral-600 active:border-neutral-600 active:outline-neutral-600 active:bg-neutral-600 text-neutral-500 hover:bg-neutral-100 active:bg-neutral-100 active:border-neutral-500 active:outline-neutral-500 bg-stone-500 border-stone-500 hover:bg-stone-600 hover:border-stone-600 active:border-stone-600 active:outline-stone-600 active:bg-stone-600 text-stone-500 hover:bg-stone-100 active:bg-stone-100 active:border-stone-500 active:outline-stone-500 bg-red-500 border-red-500 hover:bg-red-600 hover:border-red-600 active:border-red-600 active:outline-red-600 active:bg-red-600 text-red-500 hover:bg-red-100 active:bg-red-100 active:border-red-500 active:outline-red-500 bg-orange-500 border-orange-500 hover:bg-orange-600 hover:border-orange-600 active:border-orange-600 active:outline-orange-600 active:bg-orange-600 text-orange-500 hover:bg-orange-100 active:bg-orange-100 active:border-orange-500 active:outline-orange-500 bg-amber-500 border-amber-500 hover:bg-amber-600 hover:border-amber-600 active:border-amber-600 active:outline-amber-600 active:bg-amber-600 text-amber-500 hover:bg-amber-100 active:bg-amber-100 active:border-amber-500 active:outline-amber-500 bg-yellow-500 border-yellow-500 hover:bg-yellow-600 hover:border-yellow-600 active:border-yellow-600 active:outline-yellow-600 active:bg-yellow-600 text-yellow-500 hover:bg-yellow-100 active:bg-yellow-100 active:border-yellow-500 active:outline-yellow-500 bg-lime-500 border-lime-500 hover:bg-lime-600 hover:border-lime-600 active:border-lime-600 active:outline-lime-600 active:bg-lime-600 text-lime-500 hover:bg-lime-100 active:bg-lime-100 active:border-lime-500 active:outline-lime-500 bg-green-500 border-green-500 hover:bg-green-600 hover:border-green-600 active:border-green-600 active:outline-green-600 active:bg-green-600 text-green-500 hover:bg-green-100 active:bg-green-100 active:border-green-500 active:outline-green-500 bg-emerald-500 border-emerald-500 hover:bg-emerald-600 hover:border-emerald-600 active:border-emerald-600 active:outline-emerald-600 active:bg-emerald-600 text-emerald-500 hover:bg-emerald-100 active:bg-emerald-100 active:border-emerald-500 active:outline-emerald-500 bg-teal-500 border-teal-500 hover:bg-teal-600 hover:border-teal-600 active:border-teal-600 active:outline-teal-600 active:bg-teal-600 text-teal-500 hover:bg-teal-100 active:bg-teal-100 active:border-teal-500 active:outline-teal-500 bg-cyan-500 border-cyan-500 hover:bg-cyan-600 hover:border-cyan-600 active:border-cyan-600 active:outline-cyan-600 active:bg-cyan-600 text-cyan-500 hover:bg-cyan-100 active:bg-cyan-100 active:border-cyan-500 active:outline-cyan-500 bg-sky-500 border-sky-500 hover:bg-sky-600 hover:border-sky-600 active:border-sky-600 active:outline-sky-600 active:bg-sky-600 text-sky-500 hover:bg-sky-100 active:bg-sky-100 active:border-sky-500 active:outline-sky-500 bg-blue-500 border-blue-500 hover:bg-blue-600 hover:border-blue-600 active:border-blue-600 active:outline-blue-600 active:bg-blue-600 text-blue-500 hover:bg-blue-100 active:bg-blue-100 active:border-blue-500 active:outline-blue-500 bg-indigo-500 border-indigo-500 hover:bg-indigo-600 hover:border-indigo-600 active:border-indigo-600 active:outline-indigo-600 active:bg-indigo-600 text-indigo-500 hover:bg-indigo-100 active:bg-indigo-100 active:border-indigo-500 active:outline-indigo-500 bg-violet-500 border-violet-500 hover:bg-violet-600 hover:border-violet-600 active:border-violet-600 active:outline-violet-600 active:bg-violet-600 text-violet-500 hover:bg-violet-100 active:bg-violet-100 active:border-violet-500 active:outline-violet-500 bg-purple-500 border-purple-500 hover:bg-purple-600 hover:border-purple-600 active:border-purple-600 active:outline-purple-600 active:bg-purple-600 text-purple-500 hover:bg-purple-100 active:bg-purple-100 active:border-purple-500 active:outline-purple-500 bg-fuchsia-500 border-fuchsia-500 hover:bg-fuchsia-600 hover:border-fuchsia-600 active:border-fuchsia-600 active:outline-fuchsia-600 active:bg-fuchsia-600 text-fuchsia-500 hover:bg-fuchsia-100 active:bg-fuchsia-100 active:border-fuchsia-500 active:outline-fuchsia-500 bg-pink-500 border-pink-500 hover:bg-pink-600 hover:border-pink-600 active:border-pink-600 active:outline-pink-600 active:bg-pink-600 text-pink-500 hover:bg-pink-100 active:bg-pink-100 active:border-pink-500 active:outline-pink-500 bg-rose-500 border-rose-500 hover:bg-rose-600 hover:border-rose-600 active:border-rose-600 active:outline-rose-600 active:bg-rose-600 text-rose-500 hover:bg-rose-100 active:bg-rose-100 active:border-rose-500 active:outline-rose-500 bg-light-blue-500 border-light-blue-500 hover:bg-light-blue-600 hover:border-light-blue-600 active:border-light-blue-600 active:outline-light-blue-600 active:bg-light-blue-600 text-light-blue-500 hover:bg-light-blue-100 active:bg-light-blue-100 active:border-light-blue-500 active:outline-light-blue-500 bg-warm-gray-500 border-warm-gray-500 hover:bg-warm-gray-600 hover:border-warm-gray-600 active:border-warm-gray-600 active:outline-warm-gray-600 active:bg-warm-gray-600 text-warm-gray-500 hover:bg-warm-gray-100 active:bg-warm-gray-100 active:border-warm-gray-500 active:outline-warm-gray-500 bg-true-gray-500 border-true-gray-500 hover:bg-true-gray-600 hover:border-true-gray-600 active:border-true-gray-600 active:outline-true-gray-600 active:bg-true-gray-600 text-true-gray-500 hover:bg-true-gray-100 active:bg-true-gray-100 active:border-true-gray-500 active:outline-true-gray-500 bg-cool-gray-500 border-cool-gray-500 hover:bg-cool-gray-600 hover:border-cool-gray-600 active:border-cool-gray-600 active:outline-cool-gray-600 active:bg-cool-gray-600 text-cool-gray-500 hover:bg-cool-gray-100 active:bg-cool-gray-100 active:border-cool-gray-500 active:outline-cool-gray-500 bg-blue-gray-500 border-blue-gray-500 hover:bg-blue-gray-600 hover:border-blue-gray-600 active:border-blue-gray-600 active:outline-blue-gray-600 active:bg-blue-gray-600 text-blue-gray-500 hover:bg-blue-gray-100 active:bg-blue-gray-100 active:border-blue-gray-500 active:outline-blue-gray-500 bg-primary-500 border-primary-500 hover:bg-primary-600 hover:border-primary-600 active:border-primary-600 active:outline-primary-600 active:bg-primary-600 text-primary-500 hover:bg-primary-100 active:bg-primary-100 active:border-primary-500 active:outline-primary-500 bg-text-white-500 border-text-white-500 hover:bg-text-white-600 hover:border-text-white-600 active:border-text-white-600 active:outline-text-white-600 active:bg-text-white-600 text-text-white-500 hover:bg-text-white-100 active:bg-text-white-100 active:border-text-white-500 active:outline-text-white-500 whitespace-pre-line text-right text-left text-center font-sans font-serif font-mono !bg-gray-100 opacity-50 select-none bg-[#0B8AE2] bg-[#34C683] bg-[#FFBE4F] bg-[#FF7676] bg-[#2AB1EE] bg-[#34C6A8] bg-[#EC8CFF] bg-[#80FF91] bg-[#FFFC38] bg-[#1BDBE8] \ No newline at end of file +bg-inherit-50 bg-inherit-500 border-inherit-300 border-inherit-500 hover:bg-inherit-600 hover:border-inherit-600 active:border-inherit-600 active:outline-inherit-600 active:bg-inherit-600 text-inherit-500 text-inherit-700 hover:bg-inherit-100 active:bg-inherit-100 active:border-inherit-500 active:outline-inherit-500 bg-current-50 bg-current-500 border-current-300 border-current-500 hover:bg-current-600 hover:border-current-600 active:border-current-600 active:outline-current-600 active:bg-current-600 text-current-500 text-current-700 hover:bg-current-100 active:bg-current-100 active:border-current-500 active:outline-current-500 bg-transparent-50 bg-transparent-500 border-transparent-300 border-transparent-500 hover:bg-transparent-600 hover:border-transparent-600 active:border-transparent-600 active:outline-transparent-600 active:bg-transparent-600 text-transparent-500 text-transparent-700 hover:bg-transparent-100 active:bg-transparent-100 active:border-transparent-500 active:outline-transparent-500 bg-black-50 bg-black-500 border-black-300 border-black-500 hover:bg-black-600 hover:border-black-600 active:border-black-600 active:outline-black-600 active:bg-black-600 text-black-500 text-black-700 hover:bg-black-100 active:bg-black-100 active:border-black-500 active:outline-black-500 bg-white-50 bg-white-500 border-white-300 border-white-500 hover:bg-white-600 hover:border-white-600 active:border-white-600 active:outline-white-600 active:bg-white-600 text-white-500 text-white-700 hover:bg-white-100 active:bg-white-100 active:border-white-500 active:outline-white-500 bg-slate-50 bg-slate-500 border-slate-300 border-slate-500 hover:bg-slate-600 hover:border-slate-600 active:border-slate-600 active:outline-slate-600 active:bg-slate-600 text-slate-500 text-slate-700 hover:bg-slate-100 active:bg-slate-100 active:border-slate-500 active:outline-slate-500 bg-gray-50 bg-gray-500 border-gray-300 border-gray-500 hover:bg-gray-600 hover:border-gray-600 active:border-gray-600 active:outline-gray-600 active:bg-gray-600 text-gray-500 text-gray-700 hover:bg-gray-100 active:bg-gray-100 active:border-gray-500 active:outline-gray-500 bg-zinc-50 bg-zinc-500 border-zinc-300 border-zinc-500 hover:bg-zinc-600 hover:border-zinc-600 active:border-zinc-600 active:outline-zinc-600 active:bg-zinc-600 text-zinc-500 text-zinc-700 hover:bg-zinc-100 active:bg-zinc-100 active:border-zinc-500 active:outline-zinc-500 bg-neutral-50 bg-neutral-500 border-neutral-300 border-neutral-500 hover:bg-neutral-600 hover:border-neutral-600 active:border-neutral-600 active:outline-neutral-600 active:bg-neutral-600 text-neutral-500 text-neutral-700 hover:bg-neutral-100 active:bg-neutral-100 active:border-neutral-500 active:outline-neutral-500 bg-stone-50 bg-stone-500 border-stone-300 border-stone-500 hover:bg-stone-600 hover:border-stone-600 active:border-stone-600 active:outline-stone-600 active:bg-stone-600 text-stone-500 text-stone-700 hover:bg-stone-100 active:bg-stone-100 active:border-stone-500 active:outline-stone-500 bg-red-50 bg-red-500 border-red-300 border-red-500 hover:bg-red-600 hover:border-red-600 active:border-red-600 active:outline-red-600 active:bg-red-600 text-red-500 text-red-700 hover:bg-red-100 active:bg-red-100 active:border-red-500 active:outline-red-500 bg-orange-50 bg-orange-500 border-orange-300 border-orange-500 hover:bg-orange-600 hover:border-orange-600 active:border-orange-600 active:outline-orange-600 active:bg-orange-600 text-orange-500 text-orange-700 hover:bg-orange-100 active:bg-orange-100 active:border-orange-500 active:outline-orange-500 bg-amber-50 bg-amber-500 border-amber-300 border-amber-500 hover:bg-amber-600 hover:border-amber-600 active:border-amber-600 active:outline-amber-600 active:bg-amber-600 text-amber-500 text-amber-700 hover:bg-amber-100 active:bg-amber-100 active:border-amber-500 active:outline-amber-500 bg-yellow-50 bg-yellow-500 border-yellow-300 border-yellow-500 hover:bg-yellow-600 hover:border-yellow-600 active:border-yellow-600 active:outline-yellow-600 active:bg-yellow-600 text-yellow-500 text-yellow-700 hover:bg-yellow-100 active:bg-yellow-100 active:border-yellow-500 active:outline-yellow-500 bg-lime-50 bg-lime-500 border-lime-300 border-lime-500 hover:bg-lime-600 hover:border-lime-600 active:border-lime-600 active:outline-lime-600 active:bg-lime-600 text-lime-500 text-lime-700 hover:bg-lime-100 active:bg-lime-100 active:border-lime-500 active:outline-lime-500 bg-green-50 bg-green-500 border-green-300 border-green-500 hover:bg-green-600 hover:border-green-600 active:border-green-600 active:outline-green-600 active:bg-green-600 text-green-500 text-green-700 hover:bg-green-100 active:bg-green-100 active:border-green-500 active:outline-green-500 bg-emerald-50 bg-emerald-500 border-emerald-300 border-emerald-500 hover:bg-emerald-600 hover:border-emerald-600 active:border-emerald-600 active:outline-emerald-600 active:bg-emerald-600 text-emerald-500 text-emerald-700 hover:bg-emerald-100 active:bg-emerald-100 active:border-emerald-500 active:outline-emerald-500 bg-teal-50 bg-teal-500 border-teal-300 border-teal-500 hover:bg-teal-600 hover:border-teal-600 active:border-teal-600 active:outline-teal-600 active:bg-teal-600 text-teal-500 text-teal-700 hover:bg-teal-100 active:bg-teal-100 active:border-teal-500 active:outline-teal-500 bg-cyan-50 bg-cyan-500 border-cyan-300 border-cyan-500 hover:bg-cyan-600 hover:border-cyan-600 active:border-cyan-600 active:outline-cyan-600 active:bg-cyan-600 text-cyan-500 text-cyan-700 hover:bg-cyan-100 active:bg-cyan-100 active:border-cyan-500 active:outline-cyan-500 bg-sky-50 bg-sky-500 border-sky-300 border-sky-500 hover:bg-sky-600 hover:border-sky-600 active:border-sky-600 active:outline-sky-600 active:bg-sky-600 text-sky-500 text-sky-700 hover:bg-sky-100 active:bg-sky-100 active:border-sky-500 active:outline-sky-500 bg-blue-50 bg-blue-500 border-blue-300 border-blue-500 hover:bg-blue-600 hover:border-blue-600 active:border-blue-600 active:outline-blue-600 active:bg-blue-600 text-blue-500 text-blue-700 hover:bg-blue-100 active:bg-blue-100 active:border-blue-500 active:outline-blue-500 bg-indigo-50 bg-indigo-500 border-indigo-300 border-indigo-500 hover:bg-indigo-600 hover:border-indigo-600 active:border-indigo-600 active:outline-indigo-600 active:bg-indigo-600 text-indigo-500 text-indigo-700 hover:bg-indigo-100 active:bg-indigo-100 active:border-indigo-500 active:outline-indigo-500 bg-violet-50 bg-violet-500 border-violet-300 border-violet-500 hover:bg-violet-600 hover:border-violet-600 active:border-violet-600 active:outline-violet-600 active:bg-violet-600 text-violet-500 text-violet-700 hover:bg-violet-100 active:bg-violet-100 active:border-violet-500 active:outline-violet-500 bg-purple-50 bg-purple-500 border-purple-300 border-purple-500 hover:bg-purple-600 hover:border-purple-600 active:border-purple-600 active:outline-purple-600 active:bg-purple-600 text-purple-500 text-purple-700 hover:bg-purple-100 active:bg-purple-100 active:border-purple-500 active:outline-purple-500 bg-fuchsia-50 bg-fuchsia-500 border-fuchsia-300 border-fuchsia-500 hover:bg-fuchsia-600 hover:border-fuchsia-600 active:border-fuchsia-600 active:outline-fuchsia-600 active:bg-fuchsia-600 text-fuchsia-500 text-fuchsia-700 hover:bg-fuchsia-100 active:bg-fuchsia-100 active:border-fuchsia-500 active:outline-fuchsia-500 bg-pink-50 bg-pink-500 border-pink-300 border-pink-500 hover:bg-pink-600 hover:border-pink-600 active:border-pink-600 active:outline-pink-600 active:bg-pink-600 text-pink-500 text-pink-700 hover:bg-pink-100 active:bg-pink-100 active:border-pink-500 active:outline-pink-500 bg-rose-50 bg-rose-500 border-rose-300 border-rose-500 hover:bg-rose-600 hover:border-rose-600 active:border-rose-600 active:outline-rose-600 active:bg-rose-600 text-rose-500 text-rose-700 hover:bg-rose-100 active:bg-rose-100 active:border-rose-500 active:outline-rose-500 bg-light-blue-50 bg-light-blue-500 border-light-blue-300 border-light-blue-500 hover:bg-light-blue-600 hover:border-light-blue-600 active:border-light-blue-600 active:outline-light-blue-600 active:bg-light-blue-600 text-light-blue-500 text-light-blue-700 hover:bg-light-blue-100 active:bg-light-blue-100 active:border-light-blue-500 active:outline-light-blue-500 bg-warm-gray-50 bg-warm-gray-500 border-warm-gray-300 border-warm-gray-500 hover:bg-warm-gray-600 hover:border-warm-gray-600 active:border-warm-gray-600 active:outline-warm-gray-600 active:bg-warm-gray-600 text-warm-gray-500 text-warm-gray-700 hover:bg-warm-gray-100 active:bg-warm-gray-100 active:border-warm-gray-500 active:outline-warm-gray-500 bg-true-gray-50 bg-true-gray-500 border-true-gray-300 border-true-gray-500 hover:bg-true-gray-600 hover:border-true-gray-600 active:border-true-gray-600 active:outline-true-gray-600 active:bg-true-gray-600 text-true-gray-500 text-true-gray-700 hover:bg-true-gray-100 active:bg-true-gray-100 active:border-true-gray-500 active:outline-true-gray-500 bg-cool-gray-50 bg-cool-gray-500 border-cool-gray-300 border-cool-gray-500 hover:bg-cool-gray-600 hover:border-cool-gray-600 active:border-cool-gray-600 active:outline-cool-gray-600 active:bg-cool-gray-600 text-cool-gray-500 text-cool-gray-700 hover:bg-cool-gray-100 active:bg-cool-gray-100 active:border-cool-gray-500 active:outline-cool-gray-500 bg-blue-gray-50 bg-blue-gray-500 border-blue-gray-300 border-blue-gray-500 hover:bg-blue-gray-600 hover:border-blue-gray-600 active:border-blue-gray-600 active:outline-blue-gray-600 active:bg-blue-gray-600 text-blue-gray-500 text-blue-gray-700 hover:bg-blue-gray-100 active:bg-blue-gray-100 active:border-blue-gray-500 active:outline-blue-gray-500 bg-primary-50 bg-primary-500 border-primary-300 border-primary-500 hover:bg-primary-600 hover:border-primary-600 active:border-primary-600 active:outline-primary-600 active:bg-primary-600 text-primary-500 text-primary-700 hover:bg-primary-100 active:bg-primary-100 active:border-primary-500 active:outline-primary-500 bg-text-white-50 bg-text-white-500 border-text-white-300 border-text-white-500 hover:bg-text-white-600 hover:border-text-white-600 active:border-text-white-600 active:outline-text-white-600 active:bg-text-white-600 text-text-white-500 text-text-white-700 hover:bg-text-white-100 active:bg-text-white-100 active:border-text-white-500 active:outline-text-white-500 whitespace-pre-line text-right text-left text-center font-sans font-serif font-mono !bg-gray-100 opacity-50 select-none bg-[#0B8AE2] bg-[#34C683] bg-[#FFBE4F] bg-[#FF7676] bg-[#2AB1EE] bg-[#34C6A8] bg-[#EC8CFF] bg-[#80FF91] bg-[#FFFC38] bg-[#1BDBE8] \ No newline at end of file diff --git a/scripts/export-tailwind-safelist.js b/scripts/export-tailwind-safelist.js index a09b569155..d0c4d2b528 100644 --- a/scripts/export-tailwind-safelist.js +++ b/scripts/export-tailwind-safelist.js @@ -10,7 +10,9 @@ const colors = require('tailwindcss/colors') // Dynamically-built buttons need these classes in prod. const buttonClasses = [ + 'bg-${color}-50', 'bg-${color}-500', + 'border-${color}-300', 'border-${color}-500', 'hover:bg-${color}-600', 'hover:border-${color}-600', @@ -18,6 +20,7 @@ const buttonClasses = [ 'active:outline-${color}-600', 'active:bg-${color}-600', 'text-${color}-500', + 'text-${color}-700', 'hover:bg-${color}-100', 'active:bg-${color}-100', 'active:border-${color}-500', diff --git a/spec/dummy/app/avo/resources/product.rb b/spec/dummy/app/avo/resources/product.rb index 53de4f952f..442bf323a0 100644 --- a/spec/dummy/app/avo/resources/product.rb +++ b/spec/dummy/app/avo/resources/product.rb @@ -7,7 +7,10 @@ class Avo::Resources::Product < Avo::BaseResource { cover_url: record.image.attached? ? main_app.url_for(record.image.variant(resize: "300x300")) : nil, title: record.title, - body: simple_format(record.description) + body: simple_format(record.description), + badge_label: (record.updated_at < 1.week.ago) ? "New" : "Updated", + badge_color: (record.updated_at < 1.week.ago) ? "green" : "orange", + badge_title: (record.updated_at < 1.week.ago) ? "New product here" : "Updated product here" } end, html: -> do