rename FlashComponent to Flash

.changeset/large-beers-remember.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Rename FlashComponent to Flash

.erb-lint.yml

@@ -3,7 +3,7 @@ EnableDefaultLinters: true
 linters:
   ButtonComponentMigrationCounter:
     enabled: true
-  FlashComponentMigrationCounter:
+  FlashMigrationCounter:
     enabled: true
   LabelComponentMigrationCounter:
     enabled: true

app/components/primer/beta/flash.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Flash` to inform users of successful or pending actions.
+    class Flash < Primer::Component
+      status :beta
+
+      # Optional action content showed on the right side of the component.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :action, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "flash-action")
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :warning => "flash-warn",
+        :danger => "flash-error",
+        :success => "flash-success"
+      }.freeze
+      # @example Schemes
+      #   <%= render(Primer::Beta::Flash.new) { "This is a flash message!" } %>
+      #   <%= render(Primer::Beta::Flash.new(scheme: :warning)) { "This is a warning flash message!" } %>
+      #   <%= render(Primer::Beta::Flash.new(scheme: :danger)) { "This is a danger flash message!" } %>
+      #   <%= render(Primer::Beta::Flash.new(scheme: :success)) { "This is a success flash message!" } %>
+      #
+      # @example Full width
+      #   <%= render(Primer::Beta::Flash.new(full: true)) { "This is a full width flash message!" } %>
+      #
+      # @example Dismissible
+      #   <%= render(Primer::Beta::Flash.new(dismissible: true)) { "This is a dismissible flash message!" } %>
+      #
+      # @example Icon
+      #   <%= render(Primer::Beta::Flash.new(icon: :people)) { "This is a flash message with an icon!" } %>
+      #
+      # @example With actions
+      #   <%= render(Primer::Beta::Flash.new) do |component| %>
+      #     This is a flash message with actions!
+      #     <% component.action do %>
+      #       <%= render(Primer::ButtonComponent.new(size: :small)) { "Take action" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param full [Boolean] Whether the component should take up the full width of the screen.
+      # @param spacious [Boolean] Whether to add margin to the bottom of the component.
+      # @param dismissible [Boolean] Whether the component can be dismissed with an X button.
+      # @param icon [Symbol] Name of Octicon icon to use.
+      # @param scheme [Symbol] <%= one_of(Primer::Beta::Flash::SCHEME_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(full: false, spacious: false, dismissible: false, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
+        @icon = icon
+        @dismissible = dismissible
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "flash",
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
+          "flash-full": full
+        )
+        @system_arguments[:mb] ||= spacious ? 4 : nil
+      end
+    end
+  end
+end

lib/primer/view_components/linters/argument_mappers/flash.rb

@@ -8,7 +8,7 @@ module ArgumentMappers
       # Maps classes in a flash element to arguments for the Flash component.
       class Flash < Base
         SCHEME_MAPPINGS = Primer::ViewComponents::Constants.get(
-          component: "Primer::FlashComponent",
+          component: "Primer::Beta::Flash",
           constant: "SCHEME_MAPPINGS",
           symbolize: true
         ).freeze

lib/primer/view_components/linters/flash_component_migration_counter.rb → lib/primer/view_components/linters/flash_migration_counter.rb

@@ -7,14 +7,14 @@
 module ERBLint
   module Linters
     # Counts the number of times a HTML flash is used instead of the component.
-    class FlashComponentMigrationCounter < BaseLinter
+    class FlashMigrationCounter < BaseLinter
       include Autocorrectable
 
       TAGS = %w[div].freeze
       CLASSES = %w[flash].freeze
-      MESSAGE = "We are migrating flashes to use [Primer::FlashComponent](https://primer.style/view-components/components/flash), please try to use that instead of raw HTML."
+      MESSAGE = "We are migrating flashes to use [Primer::Beta::Flash](https://primer.style/view-components/components/flash), please try to use that instead of raw HTML."
       ARGUMENT_MAPPER = ArgumentMappers::Flash
-      COMPONENT = "Primer::FlashComponent"
+      COMPONENT = "Primer::Beta::Flash"
 
       def map_arguments(tag, tag_tree)
         # We can only autocorrect elements with simple text as content.

lib/tasks/docs.rake

@@ -55,7 +55,7 @@ namespace :docs do
       Primer::DetailsComponent,
       Primer::Dropdown,
       Primer::DropdownMenuComponent,
-      Primer::FlashComponent,
+      Primer::Beta::Flash,
       Primer::FlexComponent,
       Primer::FlexItemComponent,
       Primer::HeadingComponent,

lookbook/test/components/previews/beta/flash_component_preview.rb → lookbook/test/components/previews/beta/flash_preview.rb

@@ -11,8 +11,8 @@ class FlashComponentPreview < ViewComponent::Preview
     # @param icon [Symbol] select [alert, check, info, people]
     # @param scheme [Symbol] select [default, warning, danger, success]
     # @param content text
-    def playground(full: false, spacious: false, dismissible: false, icon: :people, scheme: Primer::FlashComponent::DEFAULT_SCHEME, content: "This is a flash message!")
-      render(Primer::FlashComponent.new(full: full, spacious: spacious, dismissible: dismissible, icon: icon, scheme: scheme)) { content }
+    def playground(full: false, spacious: false, dismissible: false, icon: :people, scheme: Primer::Beta::Flash::DEFAULT_SCHEME, content: "This is a flash message!")
+      render(Primer::Beta::Flash.new(full: full, spacious: spacious, dismissible: dismissible, icon: icon, scheme: scheme)) { content }
     end
   end
 end

static/arguments.yml

@@ -341,6 +341,33 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
+- component: Flash
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb
+  parameters:
+  - name: full
+    type: Boolean
+    default: "`false`"
+    description: Whether the component should take up the full width of the screen.
+  - name: spacious
+    type: Boolean
+    default: "`false`"
+    description: Whether to add margin to the bottom of the component.
+  - name: dismissible
+    type: Boolean
+    default: "`false`"
+    description: Whether the component can be dismissed with an X button.
+  - name: icon
+    type: Symbol
+    default: "`nil`"
+    description: Name of Octicon icon to use.
+  - name: scheme
+    type: Symbol
+    default: "`:default`"
+    description: One of `:danger`, `:default`, `:success`, or `:warning`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
 - component: Text
   source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb
   parameters:
@@ -546,33 +573,6 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
-- component: Flash
-  source: https://github.com/primer/view_components/tree/main/app/components/primer/flash_component.rb
-  parameters:
-  - name: full
-    type: Boolean
-    default: "`false`"
-    description: Whether the component should take up the full width of the screen.
-  - name: spacious
-    type: Boolean
-    default: "`false`"
-    description: Whether to add margin to the bottom of the component.
-  - name: dismissible
-    type: Boolean
-    default: "`false`"
-    description: Whether the component can be dismissed with an X button.
-  - name: icon
-    type: Symbol
-    default: "`nil`"
-    description: Name of Octicon icon to use.
-  - name: scheme
-    type: Symbol
-    default: "`:default`"
-    description: One of `:danger`, `:default`, `:success`, or `:warning`.
-  - name: system_arguments
-    type: Hash
-    default: N/A
-    description: "[System arguments](/system-arguments)"
 - component: Flex
   source: https://github.com/primer/view_components/tree/main/app/components/primer/flex_component.rb
   parameters:

static/audited_at.json

@@ -18,6 +18,7 @@
   "Primer::Beta::Blankslate": "",
   "Primer::Beta::Breadcrumbs": "",
   "Primer::Beta::Breadcrumbs::Item": "",
+  "Primer::Beta::Flash": "",
   "Primer::Beta::Text": "",
   "Primer::Beta::Truncate": "",
   "Primer::Beta::Truncate::TruncateText": "",
@@ -35,7 +36,6 @@
   "Primer::Dropdown::Menu": "",
   "Primer::Dropdown::Menu::Item": "",
   "Primer::DropdownMenuComponent": "",
-  "Primer::FlashComponent": "",
   "Primer::FlexComponent": "",
   "Primer::FlexItemComponent": "",
   "Primer::HeadingComponent": "",

static/constants.json

@@ -270,6 +270,15 @@
   },
   "Primer::Beta::Breadcrumbs::Item": {
   },
+  "Primer::Beta::Flash": {
+    "DEFAULT_SCHEME": "default",
+    "SCHEME_MAPPINGS": {
+      "default": "",
+      "warning": "flash-warn",
+      "danger": "flash-error",
+      "success": "flash-success"
+    }
+  },
   "Primer::Beta::Text": {
     "DEFAULT_TAG": "span"
   },
@@ -427,15 +436,6 @@
       "dark": "dropdown-menu-dark"
     }
   },
-  "Primer::FlashComponent": {
-    "DEFAULT_SCHEME": "default",
-    "SCHEME_MAPPINGS": {
-      "default": "",
-      "warning": "flash-warn",
-      "danger": "flash-error",
-      "success": "flash-success"
-    }
-  },
   "Primer::FlexComponent": {
     "ALIGN_ITEMS_DEFAULT": null,
     "ALIGN_ITEMS_MAPPINGS": {

static/statuses.json

@@ -18,6 +18,7 @@
   "Primer::Beta::Blankslate": "beta",
   "Primer::Beta::Breadcrumbs": "beta",
   "Primer::Beta::Breadcrumbs::Item": "alpha",
+  "Primer::Beta::Flash": "beta",
   "Primer::Beta::Text": "beta",
   "Primer::Beta::Truncate": "beta",
   "Primer::Beta::Truncate::TruncateText": "alpha",
@@ -35,7 +36,6 @@
   "Primer::Dropdown::Menu": "alpha",
   "Primer::Dropdown::Menu::Item": "alpha",
   "Primer::DropdownMenuComponent": "deprecated",
-  "Primer::FlashComponent": "beta",
   "Primer::FlexComponent": "deprecated",
   "Primer::FlexItemComponent": "deprecated",
   "Primer::HeadingComponent": "beta",

stories/primer/flash_component_stories.rb → stories/primer/beta/flash_stories.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
-class Primer::FlashComponentStories < ViewComponent::Storybook::Stories
+class Primer::Beta::FlashStories < ViewComponent::Storybook::Stories
   layout "storybook_preview"
 
   story(:flash) do
     controls do
       text(:icon, "people")
-      select(:scheme, Primer::FlashComponent::SCHEME_MAPPINGS.keys, :default)
+      select(:scheme, Primer::Beta::Flash::SCHEME_MAPPINGS.keys, :default)
       full false
       spacious false
       dismissible false