Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[admin] Add the danger scheme to the ui/button component #5384

Merged
merged 2 commits into from
Sep 15, 2023
Merged

[admin] Add the danger scheme to the ui/button component #5384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b20ae32
Fix the ui/button component focus and disabled styles
elia Sep 15, 2023
9a26bf9
Add the danger scheme to the ui/button component
elia Sep 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions admin/app/components/solidus_admin/products/show/component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
) %>
Expand Down
19 changes: 14 additions & 5 deletions admin/app/components/solidus_admin/ui/button/component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,23 +35,31 @@ 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
],
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
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
],
}

Expand All @@ -70,6 +78,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),
Expand Down