add badge as a ui component #4144

Mihai-Munteanu · 2025-12-02T18:05:35Z

Description

Fixes # (issue)

Checklist:

I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
I have added tests that prove my fix is effective or that my feature works

Screenshots & recording

Manual review steps

Step 1
Step 2

Manual reviewer: please leave a comment with output from the test if that's the case.

linear · 2025-12-02T18:05:38Z

AVO-864 `Badge` component

github-actions

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

rubocop

lib/avo/u_i/colors.rb|13 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|13 col 23| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.
lib/avo/u_i/colors.rb|13 col 30| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|13 col 45| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|13 col 54| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.
lib/avo/u_i/colors.rb|14 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|14 col 21| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.
lib/avo/u_i/colors.rb|14 col 28| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|14 col 43| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|14 col 52| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.
lib/avo/u_i/colors.rb|16 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|16 col 22| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.
lib/avo/u_i/colors.rb|16 col 29| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|16 col 44| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|16 col 53| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.
lib/avo/u_i/colors.rb|17 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|17 col 32| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.
lib/avo/u_i/colors.rb|17 col 39| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|17 col 54| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|17 col 63| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.
lib/avo/u_i/colors.rb|18 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|18 col 22| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.
lib/avo/u_i/colors.rb|18 col 29| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|18 col 44| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|18 col 53| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.
lib/avo/u_i/colors.rb|19 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|19 col 32| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.
lib/avo/u_i/colors.rb|19 col 39| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|19 col 54| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|19 col 63| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.
lib/avo/u_i/colors.rb|20 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|20 col 21| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.
lib/avo/u_i/colors.rb|20 col 28| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|20 col 43| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|20 col 52| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.
lib/avo/u_i/colors.rb|21 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|21 col 31| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.
lib/avo/u_i/colors.rb|21 col 38| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|21 col 53| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|21 col 62| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.
lib/avo/u_i/colors.rb|22 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|22 col 20| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.
lib/avo/u_i/colors.rb|22 col 27| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|22 col 42| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|22 col 51| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.
lib/avo/u_i/colors.rb|23 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|23 col 30| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.
lib/avo/u_i/colors.rb|23 col 37| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|23 col 52| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|23 col 61| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.
lib/avo/u_i/colors.rb|24 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|24 col 20| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.
lib/avo/u_i/colors.rb|24 col 27| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|24 col 42| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|24 col 51| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.
lib/avo/u_i/colors.rb|25 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|25 col 30| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.
lib/avo/u_i/colors.rb|25 col 37| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|25 col 52| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|25 col 61| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.
lib/avo/u_i/colors.rb|26 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|26 col 22| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.
lib/avo/u_i/colors.rb|26 col 29| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|26 col 44| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|26 col 53| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.
lib/avo/u_i/colors.rb|27 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|27 col 32| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.
lib/avo/u_i/colors.rb|27 col 39| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|27 col 54| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|27 col 63| [Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.
lib/avo/u_i/colors.rb|32 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|32 col 19| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|33 col 9| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|33 col 21| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|45 col 42| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
lib/avo/u_i/colors.rb|57 col 1| [Corrected] Layout/TrailingEmptyLines: 1 trailing blank lines detected.
spec/components/avo/u_i/badge_component_spec.rb|58 col 32| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/components/avo/u_i/badge_component_spec.rb|70 col 31| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/components/avo/u_i/badge_component_spec.rb|85 col 35| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/components/avo/u_i/badge_component_spec.rb|98 col 32| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/components/avo/u_i/badge_component_spec.rb|127 col 36| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/components/avo/u_i/badge_component_spec.rb|138 col 30| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/components/avo/u_i/badge_component_spec.rb|152 col 34| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/components/avo/u_i/badge_component_spec.rb|310 col 1| [Corrected] Layout/TrailingEmptyLines: 1 trailing blank lines detected.
spec/dummy/test/components/previews/badge_component_preview.rb|6 col 47| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/dummy/test/components/previews/badge_component_preview.rb|12 col 14| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/dummy/test/components/previews/badge_component_preview.rb|13 col 13| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/dummy/test/components/previews/badge_component_preview.rb|14 col 14| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/dummy/test/components/previews/badge_component_preview.rb|30 col 12| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/dummy/test/components/previews/badge_component_preview.rb|31 col 12| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/dummy/test/components/previews/badge_component_preview.rb|32 col 12| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/dummy/test/components/previews/badge_component_preview.rb|33 col 11| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/dummy/test/components/previews/badge_component_preview.rb|34 col 20| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/dummy/test/components/previews/badge_component_preview.rb|53 col 36| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/dummy/test/components/previews/badge_component_preview.rb|58 col 36| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.
spec/dummy/test/components/previews/badge_component_preview.rb|63 col 36| [Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.

github-actions · 2025-12-02T18:06:39Z

app/components/avo/u_i/badge_component.rb

+  VALID_COLORS = Avo::UI::Colors::ALL
+
+  def initialize(
+    label: '',


[rubocop] _{reported by reviewdog 🐶}
[Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.

github-actions · 2025-12-02T18:06:39Z

app/components/avo/u_i/badge_component.rb

+
+  def initialize(
+    label: '',
+    color: 'secondary',


[rubocop] _{reported by reviewdog 🐶}
[Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.

github-actions · 2025-12-02T18:06:39Z

app/components/avo/u_i/badge_component.rb

+  def initialize(
+    label: '',
+    color: 'secondary',
+    style: 'subtle',


[rubocop] _{reported by reviewdog 🐶}
[Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.

github-actions · 2025-12-02T18:06:39Z

app/components/avo/u_i/badge_component.rb

+    color: 'secondary',
+    style: 'subtle',
+    icon: nil,
+    icon_position: 'left',


[rubocop] _{reported by reviewdog 🐶}
[Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.

github-actions · 2025-12-02T18:06:39Z

app/components/avo/u_i/badge_component.rb

+    normalized = COLOR_ALIASES[value] || value
+
+    # Fallback to 'secondary' if color is invalid
+    VALID_COLORS.include?(normalized) ? normalized : 'secondary'


[rubocop] _{reported by reviewdog 🐶}
[Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.

github-actions · 2025-12-02T18:06:41Z

lib/avo/u_i/colors.rb

+      DEFINITIONS = {
+        'secondary' => { text: '#171717', bg: '#F6F6F6' },
+        'success' => { text: '#0D8E54', bg: '#D3F8E0' },
+        'informative' => { text: '#068AFF', bg: '#D6F1FF' },


[rubocop] _{reported by reviewdog 🐶}
[Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.

github-actions · 2025-12-02T18:06:41Z

lib/avo/u_i/colors.rb

+      DEFINITIONS = {
+        'secondary' => { text: '#171717', bg: '#F6F6F6' },
+        'success' => { text: '#0D8E54', bg: '#D3F8E0' },
+        'informative' => { text: '#068AFF', bg: '#D6F1FF' },


[rubocop] _{reported by reviewdog 🐶}
[Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside { detected.

github-actions · 2025-12-02T18:06:41Z

lib/avo/u_i/colors.rb

+      DEFINITIONS = {
+        'secondary' => { text: '#171717', bg: '#F6F6F6' },
+        'success' => { text: '#0D8E54', bg: '#D3F8E0' },
+        'informative' => { text: '#068AFF', bg: '#D6F1FF' },


[rubocop] _{reported by reviewdog 🐶}
[Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.

github-actions · 2025-12-02T18:06:41Z

lib/avo/u_i/colors.rb

+      DEFINITIONS = {
+        'secondary' => { text: '#171717', bg: '#F6F6F6' },
+        'success' => { text: '#0D8E54', bg: '#D3F8E0' },
+        'informative' => { text: '#068AFF', bg: '#D6F1FF' },


[rubocop] _{reported by reviewdog 🐶}
[Corrected] Style/StringLiterals: Prefer double-quoted strings unless you need single quotes to avoid extra backslashes for escaping.

github-actions · 2025-12-02T18:06:41Z

lib/avo/u_i/colors.rb

+      DEFINITIONS = {
+        'secondary' => { text: '#171717', bg: '#F6F6F6' },
+        'success' => { text: '#0D8E54', bg: '#D3F8E0' },
+        'informative' => { text: '#068AFF', bg: '#D6F1FF' },


[rubocop] _{reported by reviewdog 🐶}
[Corrected] Layout/SpaceInsideHashLiteralBraces: Space inside } detected.

add badge as a ui component

cdf5889

Mihai-Munteanu requested review from Paul-Bob and adrianthedev December 2, 2025 18:05

github-actions bot reviewed Dec 2, 2025

View reviewed changes

Uh oh!

add badge as a ui component #4144

Are you sure you want to change the base?

add badge as a ui component #4144

Conversation

Mihai-Munteanu commented Dec 2, 2025

Description

Checklist:

Screenshots & recording

Manual review steps

Uh oh!

linear bot commented Dec 2, 2025

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants