Skip to content

Commit 5942e78

Browse files
koppenkoppen
committed
Add class for managing Flowbite styles
This gives us a bit more control and allows us better error messages.
1 parent d974956 commit 5942e78

File tree

13 files changed

+172
-118
lines changed

13 files changed

+172
-118
lines changed

‎app/components/flowbite/button.rb‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -31,32 +31,34 @@ def sizes
3131

3232
# rubocop:disable Layout/LineLength
3333
def styles
34-
{
35-
danger: Flowbite::Style.new(
36-
default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
37-
),
38-
dark: Flowbite::Style.new(
39-
default: ["focus:outline-none", "text-white", "bg-dark", "box-border", "border", "border-transparent", "hover:bg-dark-strong", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
40-
),
41-
default: Flowbite::Style.new(
42-
default: ["focus:outline-none", "text-white", "bg-brand", "box-border", "border", "border-transparent", "hover:bg-brand-strong", "focus:ring-4", "focus:ring-brand-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
43-
),
44-
ghost: Flowbite::Style.new(
45-
default: ["focus:outline-none", "text-heading", "bg-transparent", "box-border", "border", "border-transparent", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "font-medium", "leading-5", "rounded-base"]
46-
),
47-
secondary: Flowbite::Style.new(
48-
default: ["focus:outline-none", "text-body", "bg-neutral-secondary-medium", "box-border", "border", "border-default-medium", "hover:bg-neutral-tertiary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
49-
),
50-
success: Flowbite::Style.new(
51-
default: ["focus:outline-none", "text-white", "bg-success", "box-border", "border", "border-transparent", "hover:bg-success-strong", "focus:ring-4", "focus:ring-success-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
52-
),
53-
tertiary: Flowbite::Style.new(
54-
default: ["focus:outline-none", "text-body", "bg-neutral-primary-soft", "box-border", "border", "border-default", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary-soft", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
55-
),
56-
warning: Flowbite::Style.new(
57-
default: ["focus:outline-none", "text-white", "bg-warning", "box-border", "border", "border-transparent", "hover:bg-warning-strong", "focus:ring-4", "focus:ring-warning-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
58-
)
59-
}.freeze
34+
Flowbite::Styles.from_hash(
35+
{
36+
danger: {
37+
default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
38+
},
39+
dark: {
40+
default: ["focus:outline-none", "text-white", "bg-dark", "box-border", "border", "border-transparent", "hover:bg-dark-strong", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
41+
},
42+
default: {
43+
default: ["focus:outline-none", "text-white", "bg-brand", "box-border", "border", "border-transparent", "hover:bg-brand-strong", "focus:ring-4", "focus:ring-brand-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
44+
},
45+
ghost: {
46+
default: ["focus:outline-none", "text-heading", "bg-transparent", "box-border", "border", "border-transparent", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "font-medium", "leading-5", "rounded-base"]
47+
},
48+
secondary: {
49+
default: ["focus:outline-none", "text-body", "bg-neutral-secondary-medium", "box-border", "border", "border-default-medium", "hover:bg-neutral-tertiary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
50+
},
51+
success: {
52+
default: ["focus:outline-none", "text-white", "bg-success", "box-border", "border", "border-transparent", "hover:bg-success-strong", "focus:ring-4", "focus:ring-success-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
53+
},
54+
tertiary: {
55+
default: ["focus:outline-none", "text-body", "bg-neutral-primary-soft", "box-border", "border", "border-default", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary-soft", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
56+
},
57+
warning: {
58+
default: ["focus:outline-none", "text-white", "bg-warning", "box-border", "border", "border-transparent", "hover:bg-warning-strong", "focus:ring-4", "focus:ring-warning-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
59+
}
60+
}.freeze
61+
)
6062
end
6163
# rubocop:enable Layout/LineLength
6264
end

‎app/components/flowbite/button/outline.rb‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,29 @@ class Outline < Flowbite::Button
66
class << self
77
# rubocop:disable Layout/LineLength, Metrics/MethodLength
88
def styles
9-
{
10-
danger: Flowbite::Style.new(
9+
Flowbite::Styles.from_hash({
10+
danger: {
1111
default: ["focus:outline-none", "text-danger", "bg-transparent", "box-border", "border", "border-danger", "hover:text-white", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"]
12-
),
13-
dark: Flowbite::Style.new(
12+
},
13+
dark: {
1414
default: ["focus:outline-none", "text-dark", "bg-transparent", "box-border", "border", "border-dark", "hover:text-white", "hover:bg-dark-strong", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"]
15-
),
16-
default: Flowbite::Style.new(
15+
},
16+
default: {
1717
default: ["focus:outline-none", "text-brand", "bg-transparent", "box-border", "border", "border-brand", "hover:text-white", "hover:bg-brand-strong", "focus:ring-4", "focus:ring-brand-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"]
18-
),
19-
secondary: Flowbite::Style.new(
18+
},
19+
secondary: {
2020
default: ["focus:outline-none", "text-body", "bg-transparent", "box-border", "border", "border-default-medium", "hover:bg-neutral-tertiary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"]
21-
),
22-
success: Flowbite::Style.new(
21+
},
22+
success: {
2323
default: ["focus:outline-none", "text-success", "bg-transparent", "box-border", "border", "border-success", "hover:text-white", "hover:bg-success-strong", "focus:ring-4", "focus:ring-success-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"]
24-
),
25-
tertiary: Flowbite::Style.new(
24+
},
25+
tertiary: {
2626
default: ["focus:outline-none", "text-body", "bg-transparent", "box-border", "border", "border-default", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary-soft", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"]
27-
),
28-
warning: Flowbite::Style.new(
27+
},
28+
warning: {
2929
default: ["focus:outline-none", "text-warning", "bg-transparent", "box-border", "border", "border-warning", "hover:text-white", "hover:bg-warning-strong", "focus:ring-4", "focus:ring-warning-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"]
30-
)
31-
}
30+
}
31+
}.freeze)
3232
end
3333
# rubocop:enable Layout/LineLength, Metrics/MethodLength
3434
end

‎app/components/flowbite/button/pill.rb‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,32 @@ class Pill < Flowbite::Button
66
class << self
77
# rubocop:disable Layout/LineLength, Metrics/MethodLength
88
def styles
9-
{
10-
danger: Flowbite::Style.new(
9+
Flowbite::Styles.from_hash({
10+
danger: {
1111
default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"]
12-
),
13-
dark: Flowbite::Style.new(
12+
},
13+
dark: {
1414
default: ["focus:outline-none", "text-white", "bg-dark", "box-border", "border", "border-transparent", "hover:bg-dark-strong", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"]
15-
),
16-
default: Flowbite::Style.new(
15+
},
16+
default: {
1717
default: ["focus:outline-none", "text-white", "bg-brand", "box-border", "border", "border-transparent", "hover:bg-brand-strong", "focus:ring-4", "focus:ring-brand-medium", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"]
18-
),
19-
ghost: Flowbite::Style.new(
18+
},
19+
ghost: {
2020
default: ["focus:outline-none", "text-heading", "bg-transparent", "box-border", "border", "border-transparent", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "font-medium", "leading-5", "rounded-full", "text-center"]
21-
),
22-
secondary: Flowbite::Style.new(
21+
},
22+
secondary: {
2323
default: ["focus:outline-none", "text-body", "bg-neutral-secondary-medium", "box-border", "border", "border-default-medium", "hover:bg-neutral-tertiary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"]
24-
),
25-
success: Flowbite::Style.new(
24+
},
25+
success: {
2626
default: ["focus:outline-none", "text-white", "bg-success", "box-border", "border", "border-transparent", "hover:bg-success-strong", "focus:ring-4", "focus:ring-success-medium", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"]
27-
),
28-
tertiary: Flowbite::Style.new(
27+
},
28+
tertiary: {
2929
default: ["focus:outline-none", "text-body", "bg-neutral-primary-soft", "box-border", "border", "border-default", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary-soft", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"]
30-
),
31-
warning: Flowbite::Style.new(
30+
},
31+
warning: {
3232
default: ["focus:outline-none", "text-white", "bg-warning", "box-border", "border", "border-transparent", "hover:bg-warning-strong", "focus:ring-4", "focus:ring-warning-medium", "shadow-xs", "font-medium", "leading-5", "rounded-full", "text-center"]
33-
)
34-
}
33+
}
34+
}.freeze)
3535
end
3636
# rubocop:enable Layout/LineLength, Metrics/MethodLength
3737
end

‎app/components/flowbite/card.rb‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@ def classes(state: :default, style: :default)
1515

1616
# rubocop:disable Layout/LineLength
1717
def styles
18-
{
19-
default: Flowbite::Style.new(
20-
default: ["p-6", "bg-neutral-primary-soft", "border", "border-default", "rounded-base", "shadow-xs"]
21-
)
22-
}.freeze
18+
Flowbite::Styles.from_hash(
19+
{
20+
default: {
21+
default: ["p-6", "bg-neutral-primary-soft", "border", "border-default", "rounded-base", "shadow-xs"]
22+
}
23+
}.freeze
24+
)
2325
end
2426
# rubocop:enable Layout/LineLength
2527
end

‎app/components/flowbite/input/checkbox.rb‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,15 @@ def sizes
2222

2323
# rubocop:disable Layout/LineLength
2424
def styles
25-
{
26-
default: Flowbite::Style.new(
27-
default: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "rounded-sm", "focus:ring-brand", "focus:ring-2"],
28-
disabled: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "rounded-sm", "focus:ring-brand", "focus:ring-2", "cursor-not-allowed"],
29-
error: ["text-danger", "bg-danger-soft", "border-danger-subtle", "rounded-sm", "focus:ring-danger", "focus:ring-2"]
30-
)
31-
}.freeze
25+
Flowbite::Styles.from_hash(
26+
{
27+
default: {
28+
default: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "rounded-sm", "focus:ring-brand", "focus:ring-2"],
29+
disabled: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "rounded-sm", "focus:ring-brand", "focus:ring-2", "cursor-not-allowed"],
30+
error: ["text-danger", "bg-danger-soft", "border-danger-subtle", "rounded-sm", "focus:ring-danger", "focus:ring-2"]
31+
}
32+
}.freeze
33+
)
3234
end
3335
end
3436

‎app/components/flowbite/input/field.rb‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,15 @@ def sizes
4646

4747
# rubocop:disable Layout/LineLength
4848
def styles
49-
{
50-
default: Flowbite::Style.new(
51-
default: ["bg-neutral-secondary-medium", "border", "border-default-medium", "text-heading", "rounded-base", "focus:ring-brand", "focus:border-brand", "block", "w-full", "shadow-xs", "placeholder:text-body"],
52-
disabled: ["bg-neutral-secondary-medium", "border", "border-default-medium", "text-fg-disabled", "rounded-base", "focus:ring-brand", "focus:border-brand", "block", "w-full", "shadow-xs", "cursor-not-allowed", "placeholder:text-fg-disabled"],
53-
error: ["bg-danger-soft", "border", "border-danger-subtle", "text-fg-danger-strong", "rounded-base", "focus:ring-danger", "focus:border-danger", "block", "w-full", "shadow-xs", "placeholder:text-fg-danger-strong"]
54-
)
55-
}.freeze
49+
Flowbite::Styles.from_hash(
50+
{
51+
default: {
52+
default: ["bg-neutral-secondary-medium", "border", "border-default-medium", "text-heading", "rounded-base", "focus:ring-brand", "focus:border-brand", "block", "w-full", "shadow-xs", "placeholder:text-body"],
53+
disabled: ["bg-neutral-secondary-medium", "border", "border-default-medium", "text-fg-disabled", "rounded-base", "focus:ring-brand", "focus:border-brand", "block", "w-full", "shadow-xs", "cursor-not-allowed", "placeholder:text-fg-disabled"],
54+
error: ["bg-danger-soft", "border", "border-danger-subtle", "text-fg-danger-strong", "rounded-base", "focus:ring-danger", "focus:border-danger", "block", "w-full", "shadow-xs", "placeholder:text-fg-danger-strong"]
55+
}
56+
}.freeze
57+
)
5658
end
5759
# rubocop:enable Layout/LineLength
5860
end

‎app/components/flowbite/input/file.rb‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,15 @@ def input_field_type
1616

1717
# rubocop:disable Layout/LineLength
1818
def self.styles
19-
{
20-
default: Flowbite::Style.new(
21-
default: ["block", "w-full", "text-heading", "border", "border-default-medium", "rounded-base", "cursor-pointer", "bg-neutral-secondary-medium", "focus:outline-none"],
22-
disabled: ["block", "w-full", "text-fg-disabled", "border", "border-default-medium", "rounded-base", "cursor-not-allowed", "bg-neutral-secondary-medium"],
23-
error: ["block", "w-full", "text-fg-danger-strong", "border", "border-danger-subtle", "rounded-base", "cursor-pointer", "bg-danger-soft", "focus:outline-none"]
24-
)
25-
}.freeze
19+
Flowbite::Styles.from_hash(
20+
{
21+
default: {
22+
default: ["block", "w-full", "text-heading", "border", "border-default-medium", "rounded-base", "cursor-pointer", "bg-neutral-secondary-medium", "focus:outline-none"],
23+
disabled: ["block", "w-full", "text-fg-disabled", "border", "border-default-medium", "rounded-base", "cursor-not-allowed", "bg-neutral-secondary-medium"],
24+
error: ["block", "w-full", "text-fg-danger-strong", "border", "border-danger-subtle", "rounded-base", "cursor-pointer", "bg-danger-soft", "focus:outline-none"]
25+
}
26+
}.freeze
27+
)
2628
end
2729
# rubocop:enable Layout/LineLength
2830
end

‎app/components/flowbite/input/hint.rb‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@ def classes(state: :default, style: :default)
1414
end
1515

1616
def styles
17-
{
18-
default: Flowbite::Style.new(
19-
default: ["mt-2.5", "text-sm", "text-body"]
20-
)
21-
}.freeze
17+
Flowbite::Styles.from_hash(
18+
{
19+
default: {
20+
default: ["mt-2.5", "text-sm", "text-body"]
21+
}
22+
}.freeze
23+
)
2224
end
2325
end
2426

‎app/components/flowbite/input/label.rb‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,15 @@ def classes(state: :default, style: :default)
1717
end
1818

1919
def styles
20-
{
21-
default: Flowbite::Style.new(
22-
default: ["block", "mb-2.5", "text-sm", "font-medium", "text-heading"],
23-
disabled: ["block", "mb-2.5", "text-sm", "font-medium", "text-fg-disabled"],
24-
error: ["block", "mb-2.5", "text-sm", "font-medium", "text-fg-danger-strong"]
25-
)
26-
}.freeze
20+
Flowbite::Styles.from_hash(
21+
{
22+
default: {
23+
default: ["block", "mb-2.5", "text-sm", "font-medium", "text-heading"],
24+
disabled: ["block", "mb-2.5", "text-sm", "font-medium", "text-fg-disabled"],
25+
error: ["block", "mb-2.5", "text-sm", "font-medium", "text-fg-danger-strong"]
26+
}
27+
}.freeze
28+
)
2729
end
2830
end
2931

‎app/components/flowbite/input/radio_button.rb‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,15 @@ def sizes
1717

1818
# rubocop:disable Layout/LineLength
1919
def styles
20-
{
21-
default: Flowbite::Style.new(
22-
default: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "focus:ring-brand", "focus:ring-2"],
23-
disabled: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "focus:ring-brand", "focus:ring-2", "cursor-not-allowed"],
24-
error: ["text-danger", "bg-danger-soft", "border-danger-subtle", "focus:ring-danger", "focus:ring-2"]
25-
)
26-
}.freeze
20+
Flowbite::Styles.from_hash(
21+
{
22+
default: {
23+
default: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "focus:ring-brand", "focus:ring-2"],
24+
disabled: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "focus:ring-brand", "focus:ring-2", "cursor-not-allowed"],
25+
error: ["text-danger", "bg-danger-soft", "border-danger-subtle", "focus:ring-danger", "focus:ring-2"]
26+
}
27+
}.freeze
28+
)
2729
end
2830
end
2931

0 commit comments

Comments
 (0)