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) used by [Primer React](primer.style/components/system-props).

Under the hood, system arguments are [mapped](github.com/primer/view_components/blob/main/app/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::HeadingComponent.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> “`

Constant Summary

Instance Method Summary collapse

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

## HTML attributes.

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(tag:, classes: nil, **system_arguments) ⇒ `BaseComponent`

## HTML attributes

System arguments include most HTML attributes. For example:

| 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’‘. | | `height` | `Integer` | Height. | | `hidden` | `Boolean` | Whether to assign the `hidden` attribute. | | `style` | `String` | Inline styles. | | `title` | `String` | The `title` attribute. | | `width` | `Integer` | Width. |

## Animation

## Border

## Color

## Flex

## Grid

## Layout

## Position

## Spacing

## Typography

## Other

Raises:

(ArgumentError)

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

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

  raise ArgumentError, "`class` is an invalid argument. Use `classes` instead." if system_arguments.key?(:class) && !Rails.env.production?

  if (denylist = system_arguments[:system_arguments_denylist])
    if force_system_arguments? && !ENV["PRIMER_WARNINGS_DISABLED"]
      # Convert denylist from:
      # { [:p, :pt] => "message" } to:
      # { p: "message", pt: "message" }
      unpacked_denylist =
        denylist.each_with_object({}) do |(keys, value), memo|
          keys.each { |key| memo[key] = value }
        end

      violations = unpacked_denylist.keys & @system_arguments.keys

      if violations.any?
        message = "Found #{violations.count} #{'violation'.pluralize(violations)}:"
        violations.each do |violation|
          message += "\n The #{violation} system argument is not allowed here. #{unpacked_denylist[violation]}"
        end

        raise(ArgumentError, message)
      end
    end

    # Remove :system_arguments_denylist key and any denied keys from system arguments
    @system_arguments.except!(:system_arguments_denylist)
    @system_arguments.except!(*denylist.keys.flatten)
  end

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

  @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::VALID_KEYS)
end

Instance Method Details

#call ⇒ `Object`



191
192
193

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

def call
  content_tag(@tag, content, @content_tag_args.merge(@result))
end

Class: Primer::BaseComponent

Overview

Constant Summary

Constants included from Status::Dsl

Constants included from ViewHelper

Constants included from TestSelectorHelper

Constants included from FetchOrFallbackHelper