Class: Primer::BaseComponent

Inherits:

Component

Object
ViewComponent::Base
Component
Primer::BaseComponent

show all

Defined in:: app/components/primer/base_component.rb

Overview

All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](styled-system.com/table) previously used by [Primer React](primer.style/guides/react/system-props).

Under the hood, system arguments are [mapped](github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails’ [content_tag](api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).

## Responsive values

To apply different values across responsive breakpoints, pass an array with up to five values in the order ‘[default, small, medium, large, xlarge]`. To skip a breakpoint, pass nil.

For example:

“‘erb <%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>

Hello world

<% end %> “‘

Renders:

“‘html <h1 class=“mt-0 mt-lg-4 mt-xl-2”>Hello world</h1> “`

Direct Known Subclasses

Alpha::SegmentedControl::Item

Constant Summary collapse

SELF_CLOSING_TAGS =

[:area, :base, :br, :col, :embed, :hr, :img, :input, :link, :meta, :param, :source, :track, :wbr].freeze

Instance Method Summary collapse

#call ⇒ Object
#initialize(tag:, classes: nil, **system_arguments) ⇒ BaseComponent constructor

## HTML attributes.

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

Methods included from AttributesHelper

#aria, #data, #extract_data, #merge_aria, #merge_data, #merge_prefixed_attribute_hashes

Methods included from ExperimentalSlotHelpers

included

Methods included from ExperimentalRenderHelpers

included

Constructor Details

#initialize(tag:, classes: nil, **system_arguments) ⇒ `BaseComponent`

## HTML attributes

Use system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to HTML attributes. For example, ‘render(Component.new(title: “Foo”))` will result in eg. `<div title=“foo”>`. However, ViewComponents applies special handling to certain system arguments. See the table below for details.

| Name | Type | Description | | :- | :- | :- | | aria | Hash | Aria attributes: ‘aria: { label: “foo” }` renders `aria-label=’foo’‘. | | data | Hash | Data attributes: `data: { foo: :bar }` renders `data-foo=’bar’‘. |

## Utility classes

ViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand documented in the tables below instead of adding CSS classes directly.

### Animation

### Border

### Color

### Flex

### Grid

### Layout

### Position

### Spacing

### Typography

### Other

# File 'app/components/primer/base_component.rb', line 155

def initialize(tag:, classes: nil, **system_arguments)
  @tag = tag

  @system_arguments = validate_arguments(tag: tag, **system_arguments)

  @result = Primer::Classify.call(**@system_arguments.merge(classes: classes))

  @trim = !!@system_arguments.delete(:trim)

  @system_arguments[:"data-view-component"] = true
  # Filter out Primer keys so they don't get assigned as HTML attributes
  @content_tag_args = add_test_selector(@system_arguments).except(*Primer::Classify::Utilities::UTILITIES.keys)
end

Instance Method Details

#call ⇒ `Object`

# File 'app/components/primer/base_component.rb', line 169

def call
  if SELF_CLOSING_TAGS.include?(@tag)
    tag(@tag, @content_tag_args.merge(@result))
  else
    content_tag(@tag, @trim ? trimmed_content : content, @content_tag_args.merge(@result))
  end
end

Class: Primer::BaseComponent

Overview

Direct Known Subclasses

Constant Summary collapse

Constants inherited from Component

Constants included from Status::Dsl

Constants included from ViewHelper

Constants included from TestSelectorHelper

Constants included from FetchOrFallbackHelper

Constants included from AttributesHelper