Moving ProgressBar component css (#1583)

Co-authored-by: Cameron Dutro <[email protected]>
primer · Nov 9, 2022 · a06f52c · a06f52c
1 parent 1677a6d
commit a06f52c
Show file tree

Hide file tree

Showing 16 changed files with 143 additions and 95 deletions.
diff --git a/.changeset/cool-kiwis-laugh.md b/.changeset/cool-kiwis-laugh.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Migrating progress bar component to beta folder, and adding progress bar css.
diff --git a/...ts/primer/progress_bar_component.html.erb → ...ponents/primer/beta/progress_bar.html.erb b/...ts/primer/progress_bar_component.html.erb → ...ponents/primer/beta/progress_bar.html.erb
diff --git a/app/components/primer/beta/progress_bar.pcss b/app/components/primer/beta/progress_bar.pcss
@@ -0,0 +1,26 @@
+/* Progress */
+
+.Progress {
+  display: flex;
+  height: 8px;
+  overflow: hidden;
+  background-color: var(--color-neutral-muted);
+  border-radius: 6px;
+  outline: 1px solid transparent; /* Support Firefox custom colors */
+}
+
+.Progress--large {
+  height: 10px;
+}
+
+.Progress--small {
+  height: 5px;
+}
+
+.Progress-item {
+  outline: 2px solid transparent; /* Support Firefox custom colors */
+}
+
+.Progress-item + .Progress-item {
+  margin-left: 2px;
+}
diff --git a/app/components/primer/beta/progress_bar.rb b/app/components/primer/beta/progress_bar.rb
@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `ProgressBar` to visualize task completion.
+    class ProgressBar < Primer::Component
+      status :beta
+
+      # Use the Item slot to add an item to the progress bar
+      #
+      # @param percentage [Integer] The percent complete
+      # @param bg [Symbol] The background color
+      # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
+      renders_many :items, lambda { |percentage: 0, bg: :success_emphasis, **system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :span
+        system_arguments[:bg] = bg
+        system_arguments[:style] = join_style_arguments(system_arguments[:style], "width: #{percentage}%;")
+        system_arguments[:classes] = class_names("Progress-item", system_arguments[:classes])
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      SIZE_DEFAULT = :default
+
+      SIZE_MAPPINGS = {
+        SIZE_DEFAULT => "",
+        :small => "Progress--small",
+        :large => "Progress--large"
+      }.freeze
+
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+      # @example Default
+      #   <%= render(Primer::Beta::ProgressBar.new) do |component| %>
+      #     <% component.item(percentage: 25) %>
+      #   <% end %>
+      #
+      # @example Small
+      #   <%= render(Primer::Beta::ProgressBar.new(size: :small)) do |component| %>
+      #     <% component.item(bg: :accent_emphasis, percentage: 50) %>
+      #   <% end %>
+      #
+      # @example Large
+      #   <%= render(Primer::Beta::ProgressBar.new(size: :large)) do |component| %>
+      #     <% component.item(bg: :danger_emphasis, percentage: 75) %>
+      #   <% end %>
+      #
+      # @example Multiple items
+      #   <%= render(Primer::Beta::ProgressBar.new) do |component| %>
+      #     <% component.item(percentage: 10) %>
+      #     <% component.item(bg: :accent_emphasis, percentage: 20) %>
+      #     <% component.item(bg: :danger_emphasis, percentage: 30) %>
+      #   <% end %>
+      #
+      # @param size [Symbol] <%= one_of(Primer::Beta::ProgressBar::SIZE_OPTIONS) %> Increases height.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(size: SIZE_DEFAULT, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "Progress",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+        )
+        @system_arguments[:tag] = :span
+      end
+
+      def render?
+        items.any?
+      end
+    end
+  end
+end
diff --git a/app/components/primer/primer.pcss b/app/components/primer/primer.pcss
@@ -3,3 +3,4 @@
 @import "./alpha/banner.pcss";
 @import './alpha/segmented_control.pcss';
 @import "./beta/button.pcss";
+@import "./beta/progress_bar.pcss";
diff --git a/app/components/primer/progress_bar_component.rb b/app/components/primer/progress_bar_component.rb
@@ -1,70 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `ProgressBar` to visualize task completion.
-  class ProgressBarComponent < Primer::Component
-    status :beta
-
-    # Use the Item slot to add an item to the progress bas
-    #
-    # @param percentage [Integer] The percent complete
-    # @param bg [Symbol] The background color
-    # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
-    renders_many :items, lambda { |percentage: 0, bg: :success_emphasis, **system_arguments|
-      deny_tag_argument(**system_arguments)
-      system_arguments[:tag] = :span
-      system_arguments[:bg] = bg
-      system_arguments[:style] = join_style_arguments(system_arguments[:style], "width: #{percentage}%;")
-      system_arguments[:classes] = class_names("Progress-item", system_arguments[:classes])
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    SIZE_DEFAULT = :default
-
-    SIZE_MAPPINGS = {
-      SIZE_DEFAULT => "",
-      :small => "Progress--small",
-      :large => "Progress--large"
-    }.freeze
-
-    SIZE_OPTIONS = SIZE_MAPPINGS.keys
-    # @example Default
-    #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
-    #     <% component.item(percentage: 25) %>
-    #   <% end %>
-    #
-    # @example Small
-    #   <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
-    #     <% component.item(bg: :accent_emphasis, percentage: 50) %>
-    #   <% end %>
-    #
-    # @example Large
-    #   <%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
-    #     <% component.item(bg: :danger_emphasis, percentage: 75) %>
-    #   <% end %>
-    #
-    # @example Multiple items
-    #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
-    #     <% component.item(percentage: 10) %>
-    #     <% component.item(bg: :accent_emphasis, percentage: 20) %>
-    #     <% component.item(bg: :danger_emphasis, percentage: 30) %>
-    #   <% end %>
-    #
-    # @param size [Symbol] <%= one_of(Primer::ProgressBarComponent::SIZE_OPTIONS) %> Increases height.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(size: SIZE_DEFAULT, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Progress",
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
-      )
-      @system_arguments[:tag] = :span
-    end
-
-    def render?
-      items.any?
-    end
+  class ProgressBarComponent < Primer::Beta::ProgressBar
+    status :deprecated
   end
 end
diff --git a/demo/app/assets/stylesheets/application.css b/demo/app/assets/stylesheets/application.css
@@ -28,7 +28,6 @@
  *= require @primer/css/dist/loaders.css
  *= require @primer/css/dist/markdown.css
  *= require @primer/css/dist/popover.css
- *= require @primer/css/dist/progress.css
  *= require @primer/css/dist/select-menu.css
  *= require @primer/css/dist/subhead.css
  *= require @primer/css/dist/timeline.css

diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -86,7 +86,7 @@
   - title: Popover
     url: "/components/popover"
   - title: ProgressBar
-    url: "/components/progressbar"
+    url: "/components/beta/progressbar"
   - title: SegmentedControl
     url: "/components/alpha/segmentedcontrol"
   - title: Spinner

diff --git a/lib/primer/deprecations.rb b/lib/primer/deprecations.rb
@@ -15,7 +15,8 @@ module Deprecations
       "Primer::CounterComponent" => "Primer::Beta::Counter",
       "Primer::DropdownMenuComponent" => nil,
       "Primer::IconButton" => "Primer::Beta::IconButton",
-      "Primer::Tooltip" => "Primer::Alpha::Tooltip"
+      "Primer::Tooltip" => "Primer::Alpha::Tooltip",
+      "Primer::ProgressBarComponent" => "Primer::Beta::ProgressBar"
     }.freeze
 
     def self.deprecated?(name)

diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake
@@ -71,7 +71,7 @@ namespace :docs do
       Primer::Navigation::TabComponent,
       Primer::OcticonComponent,
       Primer::PopoverComponent,
-      Primer::ProgressBarComponent,
+      Primer::Beta::ProgressBar,
       Primer::StateComponent,
       Primer::SpinnerComponent,
       Primer::SubheadComponent,

diff --git a/.../primer/progress_bar_component_preview.rb → previews/primer/beta/progress_bar_preview.rb b/.../primer/progress_bar_component_preview.rb → previews/primer/beta/progress_bar_preview.rb
@@ -1,13 +1,14 @@
 # frozen_string_literal: true
 
 module Primer
-  # @label ProgressBarComponent
-  class ProgressBarComponentPreview < ViewComponent::Preview
+  module Beta
+  # @label ProgressBar
+  class ProgressBarPreview < ViewComponent::Preview
     # @label Playground
     #
     # @param size [Symbol] select [default, small, large]
     def playground(size: :default)
-      render(Primer::ProgressBarComponent.new(size: size)) do |component|
+      render(Primer::Beta::ProgressBar.new(size: size)) do |component|
         component.with_item(percentage: 10)
         component.with_item(bg: :accent_emphasis, percentage: 20)
         component.with_item(bg: :danger_emphasis, percentage: 30)
@@ -18,11 +19,12 @@ def playground(size: :default)
     #
     # @param size [Symbol] select [default, small, large]
     def default(size: :default)
-      render(Primer::ProgressBarComponent.new(size: size)) do |component|
+      render(Primer::Beta::ProgressBar.new(size: size)) do |component|
         component.with_item(percentage: 10)
         component.with_item(bg: :accent_emphasis, percentage: 20)
         component.with_item(bg: :danger_emphasis, percentage: 30)
       end
     end
   end
+  end
 end
diff --git a/static/audited_at.json b/static/audited_at.json
@@ -50,6 +50,7 @@
   "Primer::Beta::IconButton": "",
   "Primer::Beta::Label": "",
   "Primer::Beta::Link": "",
+  "Primer::Beta::ProgressBar": "",
   "Primer::Beta::Text": "",
   "Primer::Beta::Truncate": "",
   "Primer::Beta::Truncate::TruncateText": "",

diff --git a/static/constants.json b/static/constants.json
@@ -670,6 +670,19 @@
       "span"
     ]
   },
+  "Primer::Beta::ProgressBar": {
+    "SIZE_DEFAULT": "default",
+    "SIZE_MAPPINGS": {
+      "default": "",
+      "small": "Progress--small",
+      "large": "Progress--large"
+    },
+    "SIZE_OPTIONS": [
+      "default",
+      "small",
+      "large"
+    ]
+  },
   "Primer::Beta::Text": {
     "DEFAULT_TAG": "span"
   },
@@ -889,17 +902,6 @@
     "DEFAULT_HEADING_TAG": "h4"
   },
   "Primer::ProgressBarComponent": {
-    "SIZE_DEFAULT": "default",
-    "SIZE_MAPPINGS": {
-      "default": "",
-      "small": "Progress--small",
-      "large": "Progress--large"
-    },
-    "SIZE_OPTIONS": [
-      "default",
-      "small",
-      "large"
-    ]
   },
   "Primer::SpinnerComponent": {
     "DEFAULT_SIZE": "medium",

diff --git a/static/statuses.json b/static/statuses.json
@@ -50,6 +50,7 @@
   "Primer::Beta::IconButton": "beta",
   "Primer::Beta::Label": "beta",
   "Primer::Beta::Link": "beta",
+  "Primer::Beta::ProgressBar": "beta",
   "Primer::Beta::Text": "beta",
   "Primer::Beta::Truncate": "beta",
   "Primer::Beta::Truncate::TruncateText": "alpha",
@@ -78,7 +79,7 @@
   "Primer::OcticonComponent": "beta",
   "Primer::OcticonSymbolsComponent": "alpha",
   "Primer::PopoverComponent": "beta",
-  "Primer::ProgressBarComponent": "beta",
+  "Primer::ProgressBarComponent": "deprecated",
   "Primer::SpinnerComponent": "beta",
   "Primer::StateComponent": "beta",
   "Primer::SubheadComponent": "beta",

diff --git a/...components/progress_bar_component_test.rb → test/components/beta/progress_bar_test.rb b/...components/progress_bar_component_test.rb → test/components/beta/progress_bar_test.rb
@@ -2,23 +2,23 @@
 
 require "components/test_helper"
 
-class Primer::ProgressBarComponentTest < Minitest::Test
+class PrimerBetaProgressBarTest < Minitest::Test
   include Primer::ComponentTestHelpers
 
   def test_does_not_render_if_no_items_provided
-    render_inline(Primer::ProgressBarComponent.new)
+    render_inline(Primer::Beta::ProgressBar.new)
 
     refute_component_rendered
   end
 
   def test_renders_empty_bar_if_percentage_is_not_provided
-    render_inline(Primer::ProgressBarComponent.new, &:item)
+    render_inline(Primer::Beta::ProgressBar.new, &:item)
 
     assert_selector("span.Progress .Progress-item")
   end
 
   def test_renders_large_option
-    render_inline(Primer::ProgressBarComponent.new(size: :large)) do |component|
+    render_inline(Primer::Beta::ProgressBar.new(size: :large)) do |component|
       component.item(percentage: 80)
     end
 
@@ -27,37 +27,37 @@ def test_renders_large_option
 
   def test_renders_default_when_invalid_size_arg_passed
     without_fetch_or_fallback_raises do
-      render_inline(Primer::ProgressBarComponent.new(size: "kittens"), &:item)
+      render_inline(Primer::Beta::ProgressBar.new(size: "kittens"), &:item)
 
       assert_selector("span.Progress")
     end
   end
 
   def test_renders_percent_completed_progress
-    render_inline(Primer::ProgressBarComponent.new) do |component|
+    render_inline(Primer::Beta::ProgressBar.new) do |component|
       component.item(percentage: 80)
     end
 
     assert_selector("[style='width: 80%;']")
   end
 
   def test_renders_custom_styles
-    render_inline(Primer::ProgressBarComponent.new) do |component|
+    render_inline(Primer::Beta::ProgressBar.new) do |component|
       component.item(percentage: 80, style: "color: red")
     end
 
     assert_selector("[style='color: red;width: 80%;']")
   end
 
   def test_renders_background_colors
-    render_inline(Primer::ProgressBarComponent.new) do |component|
+    render_inline(Primer::Beta::ProgressBar.new) do |component|
       component.item(bg: :danger)
     end
 
     assert_selector("span.Progress .Progress-item.color-bg-danger")
   end
 
   def test_status
-    assert_component_state(Primer::ProgressBarComponent, :beta)
+    assert_component_state(Primer::Beta::ProgressBar, :beta)
   end
 end