primer_view_components 0.0.30 → 0.0.35

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6a17e4735cb2057fb6c76458ff5cfdd4b833aeb4f6a7de14c4e6fbc3a556e010
-  data.tar.gz: 7677caa7f8f052b51d983eb8581e198f7daff976c3793015b811c9edf48ed891
+  metadata.gz: d70eee70c97f320cb4708c39c1e2d6f53dc001fd2e0f0bc8fa2c83a0e1faf97b
+  data.tar.gz: 3326a41fbcfafdf23247769e7fac8ceedaf21fdb047470e38390560db6267778
 SHA512:
-  metadata.gz: 600e505c9cdcc74243127140de5b5f5a6ff634ba6946d653f3473982b2affc2f343c78bc9f9d8913165b15f2986a9ffe16b174c694e8943f041c9b58814a04ae
-  data.tar.gz: 25828e4691fed95aa5b9eb8401ecdbea09d6248f5ee7521402fbf9c84bb81f542df5108c785270496604ce48f0d086d964271ff2f12662aebbbced19fa364509
+  metadata.gz: a1e87c126d6bb647e24a95b8b3b8be6042bc3eef7ca8412573a4619d2bc9bcc2942cdac4269a7a6c1984037327f14ea1a1fcaa343d970c95d5dd269d65f9ff8e
+  data.tar.gz: f6d1ecc686b02448b9f6b201c5de79898a8bbc79e588d849b49dfa956111d8b589a437eb03d8ae6ae0a4aafe757028efafb1c40dc217c7bb0132400a7169ec4a

data/CHANGELOG.md

@@ -2,6 +2,84 @@
 
 ## main
 
+## 0.0.35
+
+* Promote `AutoCompleteComponent`, `AutoCompleteItemComponent`, `AvatarStackComponent` and `ButtonComponent` to beta.
+
+    *Manuel Puyol*
+
+* Allow `UnderlineNav` tabs to be rendered as a `<ul><li>` list.
+
+    *Manuel Puyol*
+
+* _Accessibility:_ Don't add tab roles when `UnderlineNav` or `TabNav` use link redirects.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Make `label` required for `UnderlineNav` and `TabNav`.
+
+    *Manuel Puyol*
+
+## 0.0.34
+
+* Add `p: :responsive` and `m: :auto` system arguments.
+
+    *Manuel Puyol*
+
+* Remove `my: :auto` and negative `m:` system arguments.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Rename `FlashComponent` `variant` argument to `scheme`.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Rename `LinkComponent` `variant` argument to `scheme`.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Rename `ButtonComponent` `button_type` argument to `scheme`.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Rename `ButtonMarketingComponent` `button_type` argument to `scheme`.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Rename `StateComponent` `color` argument to `scheme`.
+
+    *Manuel Puyol*
+
+## 0.0.33
+
+* Remove `TabbedComponent` validation requiring a tab to be selected.
+
+    *Manuel Puyol*
+
+## 0.0.32
+
+* Allow passing the icon name as a positional argument to `OcticonComponent`.
+
+    *Manuel Puyol*
+
+* Promote `TimeAgoComponent` to beta.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Update `TabNav#tab` API to accept the tab content as a block and panel content as a slot.
+
+    *Manuel Puyol*
+
+* **Breaking change**: Update `UnderlineNavComponent` API be more strict and support `TabContainer`.
+
+    *Manuel Puyol*
+
+## 0.0.31
+
+* Fix `Popover` bug where body was only returning the last line of the HTML.
+
+    *Manuel Puyol, Blake Williams*
+
 ## 0.0.30
 
 * Make `color:`, `bg:` and `border_color:` accept string values.

data/README.md

@@ -1,12 +1,12 @@
 <p align="center">
-  <img width="300px" src="/static/assets/readme-components.png">
+  <img width="300px" src="/static/assets/view-components.svg">
 </p>
 
 <h1 align="center">Primer ViewComponents</h1>
 
 <p align="center">ViewComponents for the Primer Design System</p>
 
-_Note: This library is in pre-release development and should not be considered stable._
+_Note: This library is under active pre-1.0 development. Breaking changes are likely in patch releases._
 
 ## Documentation
 

data/app/components/primer/auto_complete_component.rb

@@ -3,7 +3,7 @@
 module Primer
   # Use AutoComplete to populate input values from server search results.
   class AutoCompleteComponent < Primer::Component
-    include ViewComponent::SlotableV2
+    status :beta
 
     DEFAULT_INPUT_TYPE = :text
     INPUT_TYPE_OPTIONS = [DEFAULT_INPUT_TYPE, :search].freeze

data/app/components/primer/auto_complete_item_component.rb

@@ -3,7 +3,7 @@
 module Primer
   # Use AutoCompleteItem to list results of an auto-completed search.
   class AutoCompleteItemComponent < Primer::Component
-    include ViewComponent::SlotableV2
+    status :beta
 
     # @example Default
     #   <%= render(Primer::AutoCompleteItemComponent.new(selected: true, value: "value")) do |c| %>

data/app/components/primer/avatar_stack_component.rb

@@ -3,7 +3,7 @@
 module Primer
   # Use AvatarStack to stack multiple avatars together.
   class AvatarStackComponent < Primer::Component
-    include ViewComponent::SlotableV2
+    status :beta
 
     ALIGN_DEFAULT = :left
     ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze

data/app/components/primer/base_component.rb

@@ -22,94 +22,124 @@ module Primer
   # ```html
   # <h1 class="mt-0 mt-lg-4 mt-xl-2">Hello world</h1>
   # ```
-  #
-  # ## HTML attributes
-  #
-  # System arguments include most HTML attributes. For example:
-  #
-  # | Name | Type | Description |
-  # | :- | :- | :- |
-  # | `width` | `Integer` | Width. |
-  # | `height` | `Integer` | Height. |
-  # | `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |
-  # | `aria` | `Hash` | Aria attributes: `aria: { label: "foo" }` renders `aria-label='foo'`. |
-  # | `title` | `String` | The `title` attribute. |
-  # | `style` | `String` | Inline styles. |
-  # | `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |
   class BaseComponent < Primer::Component
     status :beta
 
-    include TestSelectorHelper
-
-    # @param test_selector [String] Adds `data-test-selector='given value'` in non-Production environments for testing purposes.
-    #
-    # @param m [Integer] Margin. <%= one_of((-6..6).to_a) %>
-    # @param mt [Integer] Margin top. <%= one_of((-6..6).to_a) %>
-    # @param mr [Integer] Margin right. <%= one_of((-6..6).to_a) %>
-    # @param mb [Integer] Margin bottom. <%= one_of((-6..6).to_a) %>
-    # @param ml [Integer] Margin left. <%= one_of((-6..6).to_a) %>
-    # @param mx [Integer] Horizontal margins. <%= one_of((-6..6).to_a + [:auto]) %>
-    # @param my [Integer] Vertical margins. <%= one_of((-6..6).to_a) %>
-    # @param p [Integer] Padding. <%= one_of((0..6).to_a) %>
-    # @param pt [Integer] Padding left. <%= one_of((0..6).to_a) %>
-    # @param pr [Integer] Padding right. <%= one_of((0..6).to_a) %>
-    # @param pb [Integer] Padding bottom. <%= one_of((0..6).to_a) %>
-    # @param pl [Integer] Padding left. <%= one_of((0..6).to_a) %>
-    # @param px [Integer] Horizontal padding. <%= one_of((0..6).to_a) %>
-    # @param py [Integer] Vertical padding. <%= one_of((0..6).to_a) %>
-    #
-    # @param position [Symbol] <%= one_of([:relative, :absolute, :fixed]) %>
-    #
-    # @param top [Boolean] If `false`, sets `top: 0`.
-    # @param right [Boolean] If `false`, sets `right: 0`.
-    # @param bottom [Boolean] If `false`, sets `bottom: 0`.
-    # @param left [Boolean] If `false`, sets `left: 0`.
-    #
-    # @param display [Symbol] <%= one_of([:none, :block, :flex, :inline, :inline_block, :table, :table_cell]) %>
-    #
-    # @param v [Symbol] Visibility. <%= one_of([:hidden, :visible]) %>
-    #
-    # @param hide [Symbol] Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %>
-    #
-    # @param vertical_align [Symbol] <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %>
-    #
-    # @param float [Symbol] <%= one_of([:left, :right]) %>
-    #
-    # @param col [Integer] Number of columns.
-    #
-    # @param underline [Boolean] Whether text should be underlined.
-    #
-    # @param color [Symbol] Text color. <br /> <%= one_of(Primer::Classify::FunctionalTextColors::OPTIONS) %> <br /> Deprecated options: <%= one_of(Primer::Classify::FunctionalTextColors::DEPRECATED_OPTIONS) %>
-    # @param bg [String, Symbol] Background color. Accepts either a hex value as a String or a color name as a Symbol.
-    #
-    # @param box_shadow [Boolean, Symbol] Box shadow. <%= one_of([true, :medium, :large, :extra_large, :none]) %>
-    # @param border [Symbol] <%= one_of([:left, :top, :bottom, :right, :y, :x, true]) %>
-    # @param border_color [Symbol] <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS) %> <br /> Deprecated options: <%= one_of(Primer::Classify::FunctionalBorderColors::DEPRECATED_OPTIONS) %>
-    # @param border_top [Integer] Set to `0` to remove the top border.
-    # @param border_bottom [Integer] Set to `0` to remove the bottom border.
-    # @param border_left [Integer] Set to `0` to remove the left border.
-    # @param border_right [Integer] Set to `0` to remove the right border.
-    # @param border_radius [Integer] <%= one_of([0, 1, 2, 3]) %>
-    #
-    # @param font_size [String, Integer] <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6]) %>
-    # @param text_align [Symbol] Text alignment. <%= one_of([:left, :right, :center]) %>
-    # @param font_weight [Symbol] Font weight. <%= one_of([:light, :normal, :bold]) %>
-    #
-    # @param flex [Integer, Symbol] <%= one_of([1, :auto]) %>
-    # @param flex_grow [Integer] To enable, set to `0`.
-    # @param flex_shrink [Integer] To enable, set to `0`.
-    # @param align_self [Symbol] <%= one_of([:auto, :start, :end, :center, :baseline, :stretch]) %>
-    # @param justify_content [Symbol] <%= one_of([:flex_start, :flex_end, :center, :space_between, :space_around]) %>
-    # @param align_items [Symbol] <%= one_of([:flex_start, :flex_end, :center, :baseline, :stretch]) %>
-    # @param width [Symbol] <%= one_of([:fit, :fill]) %>
-    # @param height [Symbol] <%= one_of([:fit, :fill]) %>
-    #
-    # @param word_break [Symbol] Whether to break words on line breaks. Can only be `:break_all`.
-    #
-    # @param animation [Symbol] <%= one_of([:fade_in, :fade_out, :fade_up, :fade_down, :scale_in, :pulse, :grow_x, :grow]) %>
-    #
-    # @param tag [Symbol] HTML tag name to be passed to `tag.send`.
-    # @param classes [String] CSS class name value to be concatenated with generated Primer CSS classes.
+    # ## 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
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `animation` | Symbol | <%= one_of([:fade_in, :fade_out, :fade_up, :fade_down, :scale_in, :pulse, :grow_x, :grow]) %> |
+    #
+    # ## Border
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `border_bottom` | Integer | Set to `0` to remove the bottom border. |
+    # | `border_left` | Integer | Set to `0` to remove the left border. |
+    # | `border_radius` | Integer | <%= one_of([0, 1, 2, 3]) %> |
+    # | `border_right` | Integer | Set to `0` to remove the right border. |
+    # | `border_top` | Integer | Set to `0` to remove the top border. |
+    # | `border` | Symbol | <%= one_of([:left, :top, :bottom, :right, :y, :x, true]) %> |
+    # | `box_shadow` | Boolean, Symbol | Box shadow. <%= one_of([true, :medium, :large, :extra_large, :none]) %> |
+    #
+    # ## Color
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `bg` | String, Symbol | Background color. Accepts either a hex value as a String or <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS, lower: true) %> |
+    # | `border_color` | Symbol | Border color. <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS) %> |
+    # | `color` | Symbol | Text color. <%= one_of(Primer::Classify::FunctionalTextColors::OPTIONS) %> |
+    #
+    # ## Flex
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `align_items` | Symbol | <%= one_of([:flex_start, :flex_end, :center, :baseline, :stretch]) %> |
+    # | `align_self` | Symbol | <%= one_of([:auto, :start, :end, :center, :baseline, :stretch]) %> |
+    # | `flex_grow` | Integer | To enable, set to `0`. |
+    # | `flex_shrink` | Integer | To enable, set to `0`. |
+    # | `flex` | Integer, Symbol | <%= one_of([1, :auto]) %> |
+    # | `justify_content` | Symbol | <%= one_of([:flex_start, :flex_end, :center, :space_between, :space_around]) %> |
+    # | `width` | Symbol | <%= one_of([:fit, :fill]) %> |
+    #
+    # ## Grid
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `col` | Integer | Number of columns. |
+    #
+    # ## Layout
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `display` | Symbol | <%= one_of([:none, :block, :flex, :inline, :inline_block, :table, :table_cell]) %> |
+    # | `height` | Symbol | <%= one_of([:fit, :fill]) %> |
+    # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %> |
+    # | `v` | Symbol | Visibility. <%= one_of([:hidden, :visible]) %> |
+    # | `vertical_align` | Symbol | <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %> |
+    #
+    # ## Position
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `bottom` | Boolean | If `false`, sets `bottom: 0`. |
+    # | `float` | Symbol | <%= one_of([:left, :right]) %> |
+    # | `left` | Boolean | If `false`, sets `left: 0`. |
+    # | `position` | Symbol | <%= one_of([:relative, :absolute, :fixed]) %> |
+    # | `right` | Boolean | If `false`, sets `right: 0`. |
+    # | `top` | Boolean | If `false`, sets `top: 0`. |
+    #
+    # ## Spacing
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `m` | Integer | Margin. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:m]) %> |
+    # | `mb` | Integer | Margin bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mb]) %> |
+    # | `ml` | Integer | Margin left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:ml]) %> |
+    # | `mr` | Integer | Margin right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mr]) %> |
+    # | `mt` | Integer | Margin top. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mt]) %> |
+    # | `mx` | Integer | Horizontal margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mx]) %> |
+    # | `my` | Integer | Vertical margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:my]) %> |
+    # | `p` | Integer | Padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:p]) %> |
+    # | `pb` | Integer | Padding bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pb]) %> |
+    # | `pl` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pl]) %> |
+    # | `pr` | Integer | Padding right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pr]) %> |
+    # | `pt` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pt]) %> |
+    # | `px` | Integer | Horizontal padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:px]) %> |
+    # | `py` | Integer | Vertical padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:py]) %> |
+    #
+    # ## Typography
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | `font_size` | String, Integer | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6]) %> |
+    # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold]) %> |
+    # | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
+    # | `underline` | Boolean | Whether text should be underlined. |
+    # | `word_break` | Symbol | Whether to break words on line breaks. Can only be `:break_all`. |
+    #
+    # ## Other
+    #
+    # | Name | Type | Description |
+    # | :- | :- | :- |
+    # | classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |
+    # | tag | Symbol | HTML tag name to be passed to `content_tag`. |
+    # | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |
     def initialize(tag:, classes: nil, **system_arguments)
       @tag = tag
       @result = Primer::Classify.call(**system_arguments.merge(classes: classes))

data/app/components/primer/blankslate_component.html.erb

@@ -2,7 +2,7 @@
   <% if spinner.present? %>
     <%= spinner %>
   <% elsif @icon.present? %>
-    <%= primer_octicon icon: @icon, size: @icon_size, classes: "blankslate-icon" %>
+    <%= primer_octicon @icon, size: @icon_size, classes: "blankslate-icon" %>
   <% elsif @image_src.present? && @image_alt.present? %>
     <%= image_tag "#{@image_src}", class: "mb-3", size: "56x56", alt: "#{@image_alt}" %>
   <% end %>

data/app/components/primer/blankslate_component.rb

@@ -5,8 +5,6 @@ module Primer
   class BlankslateComponent < Primer::Component
     status :beta
 
-    include ViewComponent::SlotableV2
-
     # Optional Spinner.
     #
     # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::SpinnerComponent) %>.

data/app/components/primer/border_box_component.rb

@@ -5,8 +5,6 @@ module Primer
   class BorderBoxComponent < Primer::Component
     status :beta
 
-    include ViewComponent::SlotableV2
-
     DEFAULT_PADDING = :default
     PADDING_MAPPINGS = {
       DEFAULT_PADDING => "",

data/app/components/primer/breadcrumb_component.rb

@@ -3,7 +3,6 @@
 module Primer
   # Use breadcrumbs to display page hierarchy within a section of the site. All of the items in the breadcrumb "trail" are links except for the final item, which is a plain string indicating the current page.
   class BreadcrumbComponent < Primer::Component
-    include ViewComponent::SlotableV2
     status :beta
 
     # _Note: if both `href` and `selected: true` are passed in, `href` will be ignored and the item will not be rendered as a link._

data/app/components/primer/button_component.rb

@@ -3,14 +3,16 @@
 module Primer
   # Use buttons for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
   class ButtonComponent < Primer::Component
-    DEFAULT_BUTTON_TYPE = :default
-    BUTTON_TYPE_MAPPINGS = {
-      DEFAULT_BUTTON_TYPE => "",
+    status :beta
+
+    DEFAULT_SCHEME = :default
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => "",
       :primary => "btn-primary",
       :danger => "btn-danger",
       :outline => "btn-outline"
     }.freeze
-    BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
 
     DEFAULT_VARIANT = :medium
     VARIANT_MAPPINGS = {
@@ -26,24 +28,24 @@ module Primer
     DEFAULT_TYPE = :button
     TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
 
-    # @example Button types
+    # @example Schemes
     #   <%= render(Primer::ButtonComponent.new) { "Default" } %>
-    #   <%= render(Primer::ButtonComponent.new(button_type: :primary)) { "Primary" } %>
-    #   <%= render(Primer::ButtonComponent.new(button_type: :danger)) { "Danger" } %>
-    #   <%= render(Primer::ButtonComponent.new(button_type: :outline)) { "Outline" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Primary" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :outline)) { "Outline" } %>
     #
     # @example Variants
     #   <%= render(Primer::ButtonComponent.new(variant: :small)) { "Small" } %>
     #   <%= render(Primer::ButtonComponent.new(variant: :medium)) { "Medium" } %>
     #   <%= render(Primer::ButtonComponent.new(variant: :large)) { "Large" } %>
     #
-    # @param button_type [Symbol] <%= one_of(Primer::ButtonComponent::BUTTON_TYPE_OPTIONS) %>
+    # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
     # @param variant [Symbol] <%= one_of(Primer::ButtonComponent::VARIANT_OPTIONS) %>
     # @param tag [Symbol] <%= one_of(Primer::ButtonComponent::TAG_OPTIONS) %>
     # @param type [Symbol] <%= one_of(Primer::ButtonComponent::TYPE_OPTIONS) %>
     # @param group_item [Boolean] Whether button is part of a ButtonGroup.
     def initialize(
-      button_type: DEFAULT_BUTTON_TYPE,
+      scheme: DEFAULT_SCHEME,
       variant: DEFAULT_VARIANT,
       tag: DEFAULT_TAG,
       type: DEFAULT_TYPE,
@@ -62,7 +64,7 @@ module Primer
       @system_arguments[:classes] = class_names(
         "btn",
         system_arguments[:classes],
-        BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type, DEFAULT_BUTTON_TYPE)],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
         VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
         "BtnGroup-item" => group_item
       )