From a06f52cf77eff76f5a9003a9b224dc425de78f4b Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 8 Nov 2022 17:12:20 -0800 Subject: [PATCH] Moving ProgressBar component css (#1583) Co-authored-by: Cameron Dutro --- .changeset/cool-kiwis-laugh.md | 5 ++ .../progress_bar.html.erb} | 0 app/components/primer/beta/progress_bar.pcss | 26 +++++++ app/components/primer/beta/progress_bar.rb | 72 +++++++++++++++++++ app/components/primer/primer.pcss | 1 + .../primer/progress_bar_component.rb | 67 +---------------- demo/app/assets/stylesheets/application.css | 1 - .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 +- lib/primer/deprecations.rb | 3 +- lib/tasks/docs.rake | 2 +- .../progress_bar_preview.rb} | 10 +-- static/audited_at.json | 1 + static/constants.json | 24 ++++--- static/statuses.json | 3 +- .../progress_bar_test.rb} | 18 ++--- test/components/component_test.rb | 3 +- 16 files changed, 143 insertions(+), 95 deletions(-) create mode 100644 .changeset/cool-kiwis-laugh.md rename app/components/primer/{progress_bar_component.html.erb => beta/progress_bar.html.erb} (100%) create mode 100644 app/components/primer/beta/progress_bar.pcss create mode 100644 app/components/primer/beta/progress_bar.rb rename previews/primer/{progress_bar_component_preview.rb => beta/progress_bar_preview.rb} (73%) rename test/components/{progress_bar_component_test.rb => beta/progress_bar_test.rb} (64%) diff --git a/.changeset/cool-kiwis-laugh.md b/.changeset/cool-kiwis-laugh.md new file mode 100644 index 0000000000..5d60faa5f7 --- /dev/null +++ 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/app/components/primer/progress_bar_component.html.erb b/app/components/primer/beta/progress_bar.html.erb similarity index 100% rename from app/components/primer/progress_bar_component.html.erb rename to app/components/primer/beta/progress_bar.html.erb diff --git a/app/components/primer/beta/progress_bar.pcss b/app/components/primer/beta/progress_bar.pcss new file mode 100644 index 0000000000..750ed39ae2 --- /dev/null +++ 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 new file mode 100644 index 0000000000..3471b574ae --- /dev/null +++ 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 index 9d77a75637..5d1267a1c0 100644 --- 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 index c426a9a2fe..fc2e6da583 100644 --- 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 index 12cfd4075e..31f621217e 100644 --- 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 index 83068d3d01..42625ccea0 100644 --- 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 index 95fdd4d265..b3651dfa38 100644 --- 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 index 3c37045c9d..f9b36bc9e0 100644 --- 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/previews/primer/progress_bar_component_preview.rb b/previews/primer/beta/progress_bar_preview.rb similarity index 73% rename from previews/primer/progress_bar_component_preview.rb rename to previews/primer/beta/progress_bar_preview.rb index 7b9a70fd04..ed165ab62f 100644 --- a/previews/primer/progress_bar_component_preview.rb +++ b/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 index 469f571713..67b075629a 100644 --- 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 index 8cc3242e14..92d4d71174 100644 --- 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 index 31d070c897..362c24419f 100644 --- 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/test/components/progress_bar_component_test.rb b/test/components/beta/progress_bar_test.rb similarity index 64% rename from test/components/progress_bar_component_test.rb rename to test/components/beta/progress_bar_test.rb index 9d06c51732..d3040ebf97 100644 --- a/test/components/progress_bar_component_test.rb +++ b/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,14 +27,14 @@ 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 @@ -42,7 +42,7 @@ def test_renders_percent_completed_progress 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 @@ -50,7 +50,7 @@ def test_renders_custom_styles 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 @@ -58,6 +58,6 @@ def test_renders_background_colors end def test_status - assert_component_state(Primer::ProgressBarComponent, :beta) + assert_component_state(Primer::Beta::ProgressBar, :beta) end end diff --git a/test/components/component_test.rb b/test/components/component_test.rb index e0719641fe..50aa266148 100644 --- a/test/components/component_test.rb +++ b/test/components/component_test.rb @@ -88,7 +88,7 @@ class PrimerComponentTest < Minitest::Test [Primer::Navigation::TabComponent, {}], [Primer::OcticonComponent, { icon: :people }], [Primer::PopoverComponent, {}, proc { |component| component.body { "Foo" } }], - [Primer::ProgressBarComponent, {}, proc { |component| component.item }], + [Primer::Beta::ProgressBar, {}, proc { |component| component.item }], [Primer::SpinnerComponent, {}], [Primer::StateComponent, { title: "Open" }], [Primer::SubheadComponent, { heading: "Foo" }, proc { |component| component.heading { "Foo" } }], @@ -112,6 +112,7 @@ def test_registered_components ignored_components = [ "Primer::LabelComponent", "Primer::LinkComponent", + "Primer::ProgressBarComponent", "Primer::Image", "Primer::Alpha::ActionList::Heading", "Primer::Alpha::ActionList::Item",