Class: Yattho::Alpha::SegmentedControl

Inherits:
Component
  • Object
show all
Defined in:
app/components/yattho/alpha/segmented_control.rb,
app/components/yattho/alpha/segmented_control/item.rb

Overview

Use a segmented control to let users select an option from a short list and immediately apply the selection

Defined Under Namespace

Classes: Item

Constant Summary collapse

FULL_WIDTH_DEFAULT = 
false
HIDE_LABELS_DEFAULT = 
false

Constants inherited from Component

Component::INVALID_ARIA_LABEL_TAGS

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from TestSelectorHelper

TestSelectorHelper::TEST_SELECTOR_TAG

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Instance Method Summary collapse

Methods inherited from Component

deprecated?, generate_id

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from TestSelectorHelper

#add_test_selector

Methods included from FetchOrFallbackHelper

#fetch_or_fallback, #fetch_or_fallback_boolean, #silence_deprecations?

Methods included from ClassNameHelper

#class_names

Constructor Details

#initialize(hide_labels: HIDE_LABELS_DEFAULT, full_width: FULL_WIDTH_DEFAULT, size: Yattho::Beta::Button::DEFAULT_SIZE, **system_arguments) ⇒ SegmentedControl

Returns a new instance of SegmentedControl.

Examples:

Basic usage


<%= render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
  <%= component.with_item(label: "Preview", selected: true) %>
  <%= component.with_item(label: "Raw") %>
  <%= component.with_item(label: "Blame") %>
<% end %>

Small


<%= render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component| %>
  <%= component.with_item(label: "Preview", selected: true) %>
  <%= component.with_item(label: "Raw") %>
  <%= component.with_item(label: "Blame") %>
<% end %>

With icons

<%= render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
  <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
  <%= component.with_item(label: "Raw", icon: :"file-code") %>
  <%= component.with_item(label: "Blame", icon: :people) %>
<% end %>

With icons only

<%= render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true)) do |component| %>
  <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
  <%= component.with_item(label: "Raw", icon: :"file-code") %>
  <%= component.with_item(label: "Blame", icon: :people) %>
<% end %>

Fill width of parent

<%= render(Yattho::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true)) do |component| %>
  <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
  <%= component.with_item(label: "Raw", icon: :"file-code") %>
  <%= component.with_item(label: "Blame", icon: :people) %>
<% end %>

Parameters:

  • hide_labels (Boolean) (defaults to: HIDE_LABELS_DEFAULT) —

    Whether to hide the labels and only show the icons

  • full_width (Boolean) (defaults to: FULL_WIDTH_DEFAULT) —

    If the component should be full width

  • size (Symbol) (defaults to: Yattho::Beta::Button::DEFAULT_SIZE) —

    <%= one_of(Yattho::Beta::Button::SIZE_OPTIONS) %>

  • system_arguments (Hash) —

    <%= link_to_system_arguments_docs %>



68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
# File 'app/components/yattho/alpha/segmented_control.rb', line 68

def initialize(hide_labels: HIDE_LABELS_DEFAULT, full_width: FULL_WIDTH_DEFAULT,
               size: Yattho::Beta::Button::DEFAULT_SIZE, **system_arguments)
  @full_width = full_width
  @size = size
  @hide_labels = hide_labels

  @system_arguments = system_arguments
  @system_arguments[:tag] = :ul
  @system_arguments[:role] = "list"
  @system_arguments[:classes] = class_names(
    system_arguments[:classes],
    "SegmentedControl",
    'SegmentedControl--iconOnly': hide_labels,
    'SegmentedControl--fullWidth': full_width
  )
end

Instance Method Details

#render? ⇒ Boolean

Returns:

  • (Boolean) 


85
86
87
88
89
90
91
92
93
 
# File 'app/components/yattho/alpha/segmented_control.rb', line 85

def render?
  valid_items_count = items.count <= (@hide_labels ? 6 : 5) && items.count >= 2
  if !valid_items_count && !Rails.env.production?
    raise ArgumentError,
          "A segmented control should have 2-5 choices with text labels, or up to 6 icon-only buttons."
  end

  valid_items_count
end