From b20ae329a52dc017f51af7dd7c45f6c730472fcd Mon Sep 17 00:00:00 2001 From: Elia Schito Date: Fri, 15 Sep 2023 09:59:51 +0200 Subject: [PATCH 1/2] Fix the ui/button component focus and disabled styles The focus ring was not properly shown and the disabled border wasn't set. --- .../components/solidus_admin/ui/button/component.rb | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/admin/app/components/solidus_admin/ui/button/component.rb b/admin/app/components/solidus_admin/ui/button/component.rb index 480817d598e..69e11df863a 100644 --- a/admin/app/components/solidus_admin/ui/button/component.rb +++ b/admin/app/components/solidus_admin/ui/button/component.rb @@ -35,23 +35,23 @@ class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent active:text-white active:bg-gray-800 focus:text-white focus:bg-gray-700 disabled:text-gray-400 disabled:bg-gray-100 disabled:cursor-not-allowed - aria-disabled:text-gray-400 aria-disabled:bg-gray-100 aria-disabled:cursor-not-allowed + aria-disabled:text-gray-400 aria-disabled:bg-gray-100 aria-disabled:aria-disabled:cursor-not-allowed ], secondary: %w[ text-gray-700 bg-white border border-1 border-gray-200 hover:bg-gray-50 active:bg-gray-100 focus:bg-gray-50 - disabled:text-gray-300 disabled:bg-white border-gray-200 disabled:cursor-not-allowed - aria-disabled:text-gray-300 aria-disabled:bg-white border-gray-200 aria-disabled:cursor-not-allowed + disabled:text-gray-300 disabled:bg-white disabled:cursor-not-allowed + aria-disabled:text-gray-300 aria-disabled:bg-white aria-disabled:cursor-not-allowed ], ghost: %w[ text-gray-700 bg-transparent hover:bg-gray-50 active:bg-gray-100 focus:bg-gray-50 focus:ring-gray-300 focus:ring-2 - disabled:text-gray-300 disabled:bg-transparent border-gray-300 disabled:cursor-not-allowed - aria-disabled:text-gray-300 aria-disabled:bg-transparent border-gray-300 aria-disabled:cursor-not-allowed + disabled:text-gray-300 disabled:bg-transparent disabled:border-gray-300 disabled:cursor-not-allowed + aria-disabled:text-gray-300 aria-disabled:bg-transparent aria-disabled:border-gray-300 aria-disabled:cursor-not-allowed ], } @@ -70,6 +70,7 @@ def initialize( @attributes[:class] = [ 'justify-start items-center justify-center gap-1 inline-flex rounded', + 'focus:ring focus:ring-gray-300 focus:ring-0.5 focus:bg-white focus:ring-offset-0 [&:focus-visible]:outline-none', SIZES.fetch(size.to_sym), (TEXT_PADDINGS.fetch(size.to_sym) if @text), SCHEMES.fetch(scheme.to_sym), From 9a26bf9f81ceb4e9a5e17d708fa80fd1d36eb7b4 Mon Sep 17 00:00:00 2001 From: Elia Schito Date: Fri, 15 Sep 2023 10:41:54 +0200 Subject: [PATCH 2/2] Add the danger scheme to the ui/button component --- .../solidus_admin/products/show/component.html.erb | 3 +-- admin/app/components/solidus_admin/ui/button/component.rb | 8 ++++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/admin/app/components/solidus_admin/products/show/component.html.erb b/admin/app/components/solidus_admin/products/show/component.html.erb index 28d52c81cc4..0c500371254 100644 --- a/admin/app/components/solidus_admin/products/show/component.html.erb +++ b/admin/app/components/solidus_admin/products/show/component.html.erb @@ -165,8 +165,7 @@ <%= render component("ui/button").new( tag: :button, text: t(".delete"), - scheme: :secondary, - class: "border-red-500 text-red-500 hover:bg-red-500 hover:text-white", + scheme: :danger, "data-action": "click->#{stimulus_id}#confirmDelete", "data-#{stimulus_id}-message-param": t(".delete_confirmation"), ) %> diff --git a/admin/app/components/solidus_admin/ui/button/component.rb b/admin/app/components/solidus_admin/ui/button/component.rb index 69e11df863a..b3cf234b5fe 100644 --- a/admin/app/components/solidus_admin/ui/button/component.rb +++ b/admin/app/components/solidus_admin/ui/button/component.rb @@ -45,6 +45,14 @@ class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent disabled:text-gray-300 disabled:bg-white disabled:cursor-not-allowed aria-disabled:text-gray-300 aria-disabled:bg-white aria-disabled:cursor-not-allowed ], + danger: %w[ + text-red-500 bg-white border border-1 border-red-500 + hover:bg-red-500 hover:border-red-600 hover:text-white + active:bg-red-600 active:border-red-700 active:text-white + focus:bg-red-50 focus:bg-red-500 focus:border-red-600 focus:text-white + disabled:text-red-300 disabled:bg-white disabled:border-red-200 disabled:cursor-not-allowed + aria-disabled:text-red-300 aria-disabled:bg-white aria-disabled:border-red-200 aria-disabled:cursor-not-allowed + ], ghost: %w[ text-gray-700 bg-transparent hover:bg-gray-50