From b6b0d81cd84c3a32a211cf30a46b50ca12be9551 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 29 Apr 2024 09:00:23 -0700 Subject: [PATCH 1/3] Bump postcss-mixins from 10.0.0 to 10.0.1 (#2815) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2895a13593..c4035577af 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9216,9 +9216,9 @@ } }, "node_modules/postcss-mixins": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-10.0.0.tgz", - "integrity": "sha512-CHw+Q8Y7Jz67lqyXbVezvWUsXPVEdPEVLKFb0u8hSRKWzdHMIGwwkZDf17tgAmFOYyoM529WyctZ1sNuVjZ9DQ==", + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-10.0.1.tgz", + "integrity": "sha512-5+cI9r8L5ChegVsLM9pXa53Ft03Mt9xAq+kvzqfrUHGPCArVGOfUvmQK2CLP3XWWP2dqxDLQI+lIcXG+GTqOBQ==", "dev": true, "funding": [ { @@ -18392,9 +18392,9 @@ } }, "postcss-mixins": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-10.0.0.tgz", - "integrity": "sha512-CHw+Q8Y7Jz67lqyXbVezvWUsXPVEdPEVLKFb0u8hSRKWzdHMIGwwkZDf17tgAmFOYyoM529WyctZ1sNuVjZ9DQ==", + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-10.0.1.tgz", + "integrity": "sha512-5+cI9r8L5ChegVsLM9pXa53Ft03Mt9xAq+kvzqfrUHGPCArVGOfUvmQK2CLP3XWWP2dqxDLQI+lIcXG+GTqOBQ==", "dev": true, "requires": { "fast-glob": "^3.3.2", From 7ee3bd2371e6329b28e79e0f0f90a766a1ba17dd Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 29 Apr 2024 14:06:33 -0700 Subject: [PATCH 2/3] Revert "Add multiple body options to Overlay body slot (#2781)" (#2820) --- .changeset/wild-knives-notice.md | 5 ---- app/components/primer/alpha/overlay.html.erb | 15 +---------- app/components/primer/alpha/overlay.pcss | 16 ------------ app/components/primer/alpha/overlay.rb | 14 ++--------- app/components/primer/alpha/overlay/body.rb | 8 +----- app/components/primer/alpha/tab_panels.rb | 2 +- previews/primer/alpha/overlay_preview.rb | 4 --- .../overlay_with_three_bodies.html.erb | 18 ------------- static/classes.json | 6 ----- test/components/primer/alpha/overlay_test.rb | 25 ------------------- 10 files changed, 5 insertions(+), 108 deletions(-) delete mode 100644 .changeset/wild-knives-notice.md delete mode 100644 previews/primer/alpha/overlay_preview/overlay_with_three_bodies.html.erb diff --git a/.changeset/wild-knives-notice.md b/.changeset/wild-knives-notice.md deleted file mode 100644 index 60d640161a..0000000000 --- a/.changeset/wild-knives-notice.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/view-components": minor ---- - -Update `Overlay.with_body` to allow multiple bodies. When the component has more than one we render in a `TabPanel` diff --git a/app/components/primer/alpha/overlay.html.erb b/app/components/primer/alpha/overlay.html.erb index ace6e2e10b..b0e32b061d 100644 --- a/app/components/primer/alpha/overlay.html.erb +++ b/app/components/primer/alpha/overlay.html.erb @@ -6,20 +6,7 @@ <% if content.present? %> <%= content %> <% else %> - <% if bodies.size > 1 %> - <%= render(Primer::Alpha::TabPanels.new(label: "label", wrapper_arguments: { classes: "Overlay-tabPanels" })) do |component| %> - <% bodies.each do |body| %> - <% component.with_tab(**body.tab_arguments) do |tab| %> - <% tab.with_panel(classes: "Overlay-tabPanel") do %> - <%= body %> - <% end %> - <% tab.with_text { body.tab_label } %> - <% end %> - <% end %> - <% end %> - <% else %> - <%= bodies.first %> - <% end %> + <%= body %> <%= footer %> <% end %> <% end %> diff --git a/app/components/primer/alpha/overlay.pcss b/app/components/primer/alpha/overlay.pcss index 72b2734577..7e083eda32 100644 --- a/app/components/primer/alpha/overlay.pcss +++ b/app/components/primer/alpha/overlay.pcss @@ -24,19 +24,3 @@ anchored-position.not-anchored::backdrop, dialog::backdrop { outline: solid 1px transparent; } } - -.Overlay-tabPanels { - display: flex; - flex-direction: column; - overflow-y: hidden; - - &::part(tablist-wrapper) { - margin: var(--base-size-8) 0; - padding: 0 var(--base-size-8); - } -} - -.Overlay-tabPanel { - overflow: hidden; - display: flex; -} diff --git a/app/components/primer/alpha/overlay.rb b/app/components/primer/alpha/overlay.rb index 2846bc77ee..d52919512e 100644 --- a/app/components/primer/alpha/overlay.rb +++ b/app/components/primer/alpha/overlay.rb @@ -106,11 +106,10 @@ class Overlay < Primer::Component } # Required body content. - # when multiple bodies are passed, they will be rendered in a TabPanels component. # # @param padding [Symbol] The padding. <%= one_of(Primer::Alpha::Overlay::PADDING_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_many :bodies, lambda { |padding: @padding, **system_arguments| + renders_one :body, lambda { |padding: @padding, **system_arguments| Primer::Alpha::Overlay::Body.new( padding: padding, **system_arguments @@ -186,16 +185,7 @@ def before_render @system_arguments[:aria][:label] = @title end end - if bodies? - if bodies.size > 1 - # confirm all bodies have tab_label - bodies.each do |body| - raise ArgumentError, "Multiple with_body slots require `tab_label` to be passed." unless body.tab_label.present? - end - end - else - with_body - end + with_body unless body? end private diff --git a/app/components/primer/alpha/overlay/body.rb b/app/components/primer/alpha/overlay/body.rb index 4da945012e..ff5f38eae8 100644 --- a/app/components/primer/alpha/overlay/body.rb +++ b/app/components/primer/alpha/overlay/body.rb @@ -6,12 +6,8 @@ class Overlay # A `Overlay::Body` is a compositional component, used to render the # Body of an overlay. See <%= link_to_component(Primer::Alpha::Overlay) %>. class Body < Primer::Component - - attr_reader :tab_arguments, :tab_label - - # @param tab_arguments [Hash] Arguments passed to TabPanels component # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - def initialize(padding: DEFAULT_PADDING, tab_label: nil, tab_arguments: {}, **system_arguments) + def initialize(padding: DEFAULT_PADDING, **system_arguments) @system_arguments = deny_tag_argument(**system_arguments) @system_arguments[:tag] = :div @system_arguments[:classes] = class_names( @@ -19,8 +15,6 @@ def initialize(padding: DEFAULT_PADDING, tab_label: nil, tab_arguments: {}, **sy PADDING_MAPPINGS[fetch_or_fallback(PADDING_OPTIONS, padding, DEFAULT_PADDING)], system_arguments[:classes] ) - @tab_arguments = tab_arguments - @tab_label = tab_label end def call diff --git a/app/components/primer/alpha/tab_panels.rb b/app/components/primer/alpha/tab_panels.rb index 55f964976e..d25a424d14 100644 --- a/app/components/primer/alpha/tab_panels.rb +++ b/app/components/primer/alpha/tab_panels.rb @@ -19,7 +19,7 @@ class TabPanels < Primer::Component # @param id [String] Unique ID of tab. # @param selected [Boolean] Whether the tab is selected. # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_many :tabs, lambda { |id: self.class.generate_id, selected: false, **system_arguments| + renders_many :tabs, lambda { |id:, selected: false, **system_arguments| system_arguments[:id] = id system_arguments[:classes] = tab_nav_tab_classes(system_arguments[:classes]) diff --git a/previews/primer/alpha/overlay_preview.rb b/previews/primer/alpha/overlay_preview.rb index 14b1622c3c..bf5960b9a7 100644 --- a/previews/primer/alpha/overlay_preview.rb +++ b/previews/primer/alpha/overlay_preview.rb @@ -195,10 +195,6 @@ def overlay_with_header_subtitle end end - def overlay_with_three_bodies - render_with_template(locals: {}) - end - def in_a_sticky_container render_with_template(locals: {}) end diff --git a/previews/primer/alpha/overlay_preview/overlay_with_three_bodies.html.erb b/previews/primer/alpha/overlay_preview/overlay_with_three_bodies.html.erb deleted file mode 100644 index fe1fa69756..0000000000 --- a/previews/primer/alpha/overlay_preview/overlay_with_three_bodies.html.erb +++ /dev/null @@ -1,18 +0,0 @@ -<%= render(Primer::Alpha::Overlay.new(title: "Dialog", role: :dialog, size: :large, padding: :condensed)) do |d| %> - <% d.with_header(title: "Large Dialog Header", divider: true) do |header| %> - <% header.with_filter do %> - <%= render Primer::Alpha::TextField.new( - autofocus: true, - visually_hide_label: - true, - name: "filter", - label: "Filter Overlay" - ) %> - <% end %> - <% end %> - <% d.with_show_button { "Show Overlay" } %> - <% d.with_footer { "Large Dialog Footer" } %> - <% d.with_body(tab_label: "Tab 1", tab_arguments: { selected: true }) { "This is the first tab
".html_safe * 20 } %> - <% d.with_body(tab_label: "Tab 2") { "This is the second tab
".html_safe * 20 } %> - <% d.with_body(tab_label: "Tab 3") { "This is the third tab
".html_safe * 20 } %> -<% end %> \ No newline at end of file diff --git a/static/classes.json b/static/classes.json index 3619bf1c93..9acc962bca 100644 --- a/static/classes.json +++ b/static/classes.json @@ -408,12 +408,6 @@ "Overlay-headerFilter": [ "Primer::Alpha::Dialog" ], - "Overlay-tabPanel": [ - "Primer::Alpha::Overlay" - ], - "Overlay-tabPanels": [ - "Primer::Alpha::Overlay" - ], "Popover": [ "Primer::Beta::Popover" ], diff --git a/test/components/primer/alpha/overlay_test.rb b/test/components/primer/alpha/overlay_test.rb index cb3ccca3ab..3627ec3d75 100644 --- a/test/components/primer/alpha/overlay_test.rb +++ b/test/components/primer/alpha/overlay_test.rb @@ -132,29 +132,4 @@ def test_renders_header_subtitle assert_selector(".Overlay-header .Overlay-description") end - - def test_renders_multiple_bodies_as_tabpanels - render_inline(Primer::Alpha::Overlay.new(title: "Title", role: :dialog)) do |component| - component.with_header - component.with_body(tab_label: "Tab 1") { "Hello" } - component.with_body(tab_label: "Tab 2") { "Hello" } - end - - assert_selector("tab-container.Overlay-tabPanels") do - assert_selector(".tabnav-tab", count: 2) - assert_selector(".Overlay-tabPanel", count: 2, visible: :all) - end - end - - def test_raises_argument_error_when_tab_label_is_missing - error = assert_raises(ArgumentError) do - render_inline(Primer::Alpha::Overlay.new(title: "Title", role: :dialog)) do |component| - component.with_header - component.with_body { "Hello" } - component.with_body { "Hello" } - end - end - - assert_includes(error.message, "Multiple with_body slots require `tab_label` to be passed.") - end end From 811fac4d337f3e7f37699d4702d74ee95625325c Mon Sep 17 00:00:00 2001 From: primer-css Date: Mon, 29 Apr 2024 21:07:27 +0000 Subject: [PATCH 3/3] Generating static files --- static/arguments.json | 6 ------ static/info_arch.json | 36 ++---------------------------------- static/previews.json | 13 ------------- 3 files changed, 2 insertions(+), 53 deletions(-) diff --git a/static/arguments.json b/static/arguments.json index 5a7e8f46b0..5c8d80c63d 100644 --- a/static/arguments.json +++ b/static/arguments.json @@ -1866,12 +1866,6 @@ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/overlay/body.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/overlay/body/default/", "parameters": [ - { - "name": "tab_arguments", - "type": "Hash", - "default": "`{}`", - "description": "Arguments passed to TabPanels component" - }, { "name": "system_arguments", "type": "Hash", diff --git a/static/info_arch.json b/static/info_arch.json index e44386554a..8f6a6f56eb 100644 --- a/static/info_arch.json +++ b/static/info_arch.json @@ -6000,8 +6000,8 @@ ] }, { - "name": "bodies", - "description": "Required body content.\nwhen multiple bodies are passed, they will be rendered in a TabPanels component.", + "name": "body", + "description": "Required body content.", "parameters": [ { "name": "padding", @@ -6157,19 +6157,6 @@ ] } }, - { - "preview_path": "primer/alpha/overlay/overlay_with_three_bodies", - "name": "overlay_with_three_bodies", - "snapshot": "false", - "skip_rules": { - "wont_fix": [ - "region" - ], - "will_fix": [ - "color-contrast" - ] - } - }, { "preview_path": "primer/alpha/overlay/in_a_sticky_container", "name": "in_a_sticky_container", @@ -6338,12 +6325,6 @@ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/overlay/body.rb", "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/overlay/body/default/", "parameters": [ - { - "name": "tab_arguments", - "type": "Hash", - "default": "`{}`", - "description": "Arguments passed to TabPanels component" - }, { "name": "system_arguments", "type": "Hash", @@ -6355,20 +6336,7 @@ ], "methods": [ - { - "name": "tab_arguments", - "description": "Returns the value of attribute tab_arguments.", - "parameters": [ - ] - }, - { - "name": "tab_label", - "description": "Returns the value of attribute tab_label.", - "parameters": [ - - ] - } ], "previews": [ diff --git a/static/previews.json b/static/previews.json index c99ea14ea4..d7ee7aac08 100644 --- a/static/previews.json +++ b/static/previews.json @@ -4979,19 +4979,6 @@ ] } }, - { - "preview_path": "primer/alpha/overlay/overlay_with_three_bodies", - "name": "overlay_with_three_bodies", - "snapshot": "false", - "skip_rules": { - "wont_fix": [ - "region" - ], - "will_fix": [ - "color-contrast" - ] - } - }, { "preview_path": "primer/alpha/overlay/in_a_sticky_container", "name": "in_a_sticky_container",