Class: Primer::FlexComponent

Inherits:
Component
  • Object
show all
Defined in:
app/components/primer/flex_component.rb

Overview

Use FlexComponent to make an element lay out its content using the flexbox model. Before using these utilities, you should be familiar with CSS3 Flexible Box spec. If you are not, check out MDN’s guide [Using CSS Flexible Boxes](developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).

Constant Summary collapse

JUSTIFY_CONTENT_DEFAULT = 
nil
JUSTIFY_CONTENT_MAPPINGS = 
{
  flex_start: "flex-justify-start",
  flex_end: "flex-justify-end",
  center: "flex-justify-center",
  space_between: "flex-justify-between",
  space_around: "flex-justify-around"
}.freeze
JUSTIFY_CONTENT_OPTIONS = 
[JUSTIFY_CONTENT_DEFAULT, *JUSTIFY_CONTENT_MAPPINGS.keys].freeze
ALIGN_ITEMS_DEFAULT = 
nil
ALIGN_ITEMS_MAPPINGS = 
{
  start: "flex-items-start",
  end: "flex-items-end",
  center: "flex-items-center",
  baseline: "flex-items-baseline",
  stretch: "flex-items-stretch"
}.freeze
ALIGN_ITEMS_OPTIONS = 
[ALIGN_ITEMS_DEFAULT, *ALIGN_ITEMS_MAPPINGS.keys].freeze
INLINE_DEFAULT = 
false
INLINE_OPTIONS = 
[INLINE_DEFAULT, true].freeze
FLEX_WRAP_DEFAULT = 
nil
FLEX_WRAP_OPTIONS = 
[FLEX_WRAP_DEFAULT, true, false].freeze
DEFAULT_DIRECTION = 
nil
ALLOWED_DIRECTIONS = 
[DEFAULT_DIRECTION, :column, :column_reverse, :row, :row_reverse].freeze

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

Primer::FetchOrFallbackHelper::InvalidValueError

Instance Method Summary collapse

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(justify_content: JUSTIFY_CONTENT_DEFAULT, inline: INLINE_DEFAULT, flex_wrap: FLEX_WRAP_DEFAULT, align_items: ALIGN_ITEMS_DEFAULT, direction: nil, **system_arguments) ⇒ FlexComponent

Returns a new instance of FlexComponent.

Examples:

Default

<%= render(Primer::FlexComponent.new(bg: :tertiary)) do %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
<% end %>

Justify center

<%= render(Primer::FlexComponent.new(justify_content: :center, bg: :tertiary)) do %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
<% end %>

Align end

<%= render(Primer::FlexComponent.new(align_items: :end, bg: :tertiary)) do %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
<% end %>

Direction column

<%= render(Primer::FlexComponent.new(direction: :column, bg: :tertiary)) do %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
  <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
<% end %>

Parameters:

  • justify_content (Symbol) (defaults to: JUSTIFY_CONTENT_DEFAULT) —

    Use this param to distribute space between and around flex items along the main axis of the container. <%= one_of(Primer::FlexComponent::JUSTIFY_CONTENT_OPTIONS) %>

  • inline (Boolean) (defaults to: INLINE_DEFAULT) —

    Defaults to false.

  • flex_wrap (Boolean) (defaults to: FLEX_WRAP_DEFAULT) —

    Defaults to nil.

  • align_items (Symbol) (defaults to: ALIGN_ITEMS_DEFAULT) —

    Use this param to align items on the cross axis. <%= one_of(Primer::FlexComponent::ALIGN_ITEMS_OPTIONS) %>

  • direction (Symbol) (defaults to: nil) —

    Use this param to define the orientation of the main axis (row or column). By default, flex items will display in a row. <%= one_of(Primer::FlexComponent::ALLOWED_DIRECTIONS) %>

  • system_arguments (Hash) —

    <%= link_to_system_arguments_docs %>



72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
# File 'app/components/primer/flex_component.rb', line 72

def initialize(
  justify_content: JUSTIFY_CONTENT_DEFAULT,
  inline: INLINE_DEFAULT,
  flex_wrap: FLEX_WRAP_DEFAULT,
  align_items: ALIGN_ITEMS_DEFAULT,
  direction: nil,
  **system_arguments
)
  @align_items = fetch_or_fallback(ALIGN_ITEMS_OPTIONS, align_items, ALIGN_ITEMS_DEFAULT)
  @justify_content = fetch_or_fallback(JUSTIFY_CONTENT_OPTIONS, justify_content, JUSTIFY_CONTENT_DEFAULT)
  @flex_wrap = fetch_or_fallback(FLEX_WRAP_OPTIONS, flex_wrap, FLEX_WRAP_DEFAULT)

  # Support direction argument that is an array
  @direction =
    if (Array(direction) - ALLOWED_DIRECTIONS).empty?
      direction
    else
      DEFAULT_DIRECTION
    end

  @system_arguments = system_arguments.merge({ direction: @direction }.compact)
  @system_arguments[:classes] = class_names(@system_arguments[:classes], component_class_names)
  @system_arguments[:display] = fetch_or_fallback(INLINE_OPTIONS, inline, INLINE_DEFAULT) ? :inline_flex : :flex
end

Instance Method Details

#call ⇒ Object 



97
98
99
 
# File 'app/components/primer/flex_component.rb', line 97

def call
  render(Primer::BoxComponent.new(**@system_arguments)) { content }
end