LoopOS UI v1.1.29.0-release.2025.q4.uxe.december.rc1

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<div class="flex flex-col gap-4">
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Enabled:</span>
    <button class="lui-filter_button lui-filter_button--medium lui-filter_button--enabled" data-controller="lui--filter-button" type="button">
      <span class="lui-filter_button__text">
        Filter
      </span>
    </button>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Hover:</span>
    <button class="lui-filter_button lui-filter_button--medium lui-filter_button--hover" data-controller="lui--filter-button" type="button">
      <span class="lui-filter_button__text">
        Filter
      </span>
    </button>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Active:</span>
    <button class="lui-filter_button lui-filter_button--medium lui-filter_button--active" data-controller="lui--filter-button" type="button">
      <span class="lui-filter_button__text">
        Filter
      </span>
    </button>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Loading:</span>
    <button class="lui-filter_button lui-filter_button--medium lui-filter_button--loading" data-controller="lui--filter-button" type="button">
      <svg aria-hidden="true" class="lui-filter_button__spinner" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
      </svg>
      <span class="lui-filter_button__text lui-filter_button__text--loading">
        Filter
      </span>
    </button>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Focus:</span>
    <button class="lui-filter_button lui-filter_button--medium lui-filter_button--focus" data-controller="lui--filter-button" type="button">
      <span class="lui-filter_button__text">
        Filter
      </span>
    </button>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Disabled:</span>
    <button class="lui-filter_button lui-filter_button--medium lui-filter_button--disabled" data-controller="lui--filter-button" type="button" disabled="disabled">
      <span class="lui-filter_button__text">
        Filter
      </span>
    </button>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Selected:</span>
    <button class="lui-filter_button lui-filter_button--medium lui-filter_button--enabled lui-filter_button--isselected" data-controller="lui--filter-button" type="button">
      <span class="lui-filter_button__text">
        Filter
      </span>
    </button>
  </div>
</div>

FilterButton

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="flex flex-col gap-4">
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Enabled:</span>
    <%= render LooposUi::FilterButton.new(text: "Filter", state: :enabled) %>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Hover:</span>
    <%= render LooposUi::FilterButton.new(text: "Filter", state: :hover) %>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Active:</span>
    <%= render LooposUi::FilterButton.new(text: "Filter", state: :active) %>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Loading:</span>
    <%= render LooposUi::FilterButton.new(text: "Filter", state: :loading) %>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Focus:</span>
    <%= render LooposUi::FilterButton.new(text: "Filter", state: :focus) %>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Disabled:</span>
    <%= render LooposUi::FilterButton.new(text: "Filter", state: :disabled) %>
  </div>
  <div class="flex items-center gap-4">
    <span class="w-32 text-sm">Selected:</span>
    <%= render LooposUi::FilterButton.new(text: "Filter", isSelected: true) %>
  </div>
</div>

No notes provided.

No params configured.

Description

FilterButton is a specialized button component designed for filter interfaces. It supports icons, counters, notifications, and various visual states. It's commonly used within the FilterBar component to provide interactive filter controls.

Arguments

Property Default Required Description
text nil - Text displayed on the button
size :medium - Size of the button (:large, :medium, :small)
state :enabled - Visual state (:enabled, :hover, :active, :loading, :focus, :disabled)
isSelected false - Indicates if the button is in a selected state
showNotification false - Shows a notification indicator on the button
showRightIcon false - Controls visibility of the right icon slot
showLeftIcon false - Controls visibility of the left icon slot
showCounter false - Controls visibility of the counter badge
counter_kind :neutral - Counter appearance kind (:success, :danger, :warning, :neutral, :informative)
left_icon nil - Icon to display on the left side. Can be an app icon name or FontAwesome icon class
right_icon nil - Icon to display on the right side. Can be an app icon name or FontAwesome icon class
count nil - Numeric value to display in the counter badge
href nil - If provided, the button will be rendered as an anchor tag instead of a button
tag nil - HTML tag to use (:button, :a, etc.). Defaults to :button or :a if href is present
tag_options {} - Hash of additional options to pass to the tag builder (e.g., data attributes, class, etc.)

Icon Support

The component supports two types of icons:

  1. App Icons: When left_icon or right_icon is one of the app icon names ("core", "manager", "submission", "hubs", "validation", "handling", "exits", "impact", "submission_extra"), the respective app icon will be rendered.

  2. FontAwesome Icons: When using MIcon compatible icons or FontAwesome classes (e.g., "fa-regular fa-info"), the icon will be rendered accordingly.

  3. Custom Icons: You can also pass custom icon classes that will be applied directly.

States

  • :enabled - Default state, button is interactive
  • :hover - Hover state (typically handled by CSS)
  • :active - Active/pressed state
  • :loading - Loading state
  • :focus - Focused state
  • :disabled - Disabled state, button is not interactive

Counter

When showCounter is true and count is provided and greater than zero, a counter badge is displayed. The counter_kind property controls the visual appearance of the counter.

Slots

left_icon

Renders an icon on the left side of the button:

<%= render LooposUi::FilterButton.new(text: "Filter") do |button| %>
  <% button.with_left_icon(icon: "info") %>
<% end %>

Slot attributes:

  • icon - Icon name or class (required)
  • Additional kwargs are passed to the icon component

right_icon

Renders an icon on the right side of the button:

<%= render LooposUi::FilterButton.new(text: "Filter") do |button| %>
  <% button.with_right_icon(icon: "chevron-down") %>
<% end %>

Slot attributes:

  • icon - Icon name or class (required)
  • Additional kwargs are passed to the icon component

JavaScript/Stimulus Controller

The FilterButton component includes a Stimulus controller (lui--filter-button) that provides dynamic functionality for button interactions.

Controller Behavior

The controller automatically handles:

  • Button state management
  • Integration with FilterBar component
  • Form submission handling when used within filter forms

Integration with FilterBar

When used within a FilterBar component, the FilterButton automatically:

  • Gets click handlers attached by the FilterBar controller
  • Manages selection state based on form inputs
  • Dispatches filter:toggle events when clicked

Usage Examples

Basic Filter Button

<%= render LooposUi::FilterButton.new(
  text: "Filter",
  size: :medium,
  state: :enabled
) %>

Button with Icon and Counter

<%= render LooposUi::FilterButton.new(
  text: "Issues",
  showLeftIcon: true,
  left_icon: "info",
  showCounter: true,
  count: 3,
  counter_kind: :danger
) %>

Selected Button

<%= render LooposUi::FilterButton.new(
  text: "Messages",
  isSelected: true,
  showCounter: true,
  count: 10
) %>
<%= render LooposUi::FilterButton.new(
  text: "Advanced Filters",
  href: "/advanced_filters",
  showRightIcon: true,
  right_icon: "chevron-right"
) %>

Button with Custom Data Attributes

<%= render LooposUi::FilterButton.new(
  text: "Filter",
  tag_options: {
    name: "only_issues",
    data: {
      action: "click->custom#handleFilter",
      filter_name: "only_issues"
    }
  }
) %>

Using Slots

<%= render LooposUi::FilterButton.new(text: "Filter") do |button| %>
  <% button.with_left_icon(icon: "info") %>
  <% button.with_right_icon(icon: "chevron-down") %>
<% end %>