From 78e67e72a794eefadc0fd5b092b59d8212e50b06 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 7 Dec 2021 15:12:50 +0000 Subject: [PATCH 01/97] Add SplitLayout skeleton --- .../primer/beta/base_layout.html.erb | 15 ++++ .../primer/beta/split_layout.html.erb | 3 + app/components/primer/beta/split_layout.rb | 19 ++++ docs/content/components/beta/pagelayout.md | 86 +++++++++++++++++++ .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 + lib/tasks/docs.rake | 1 + stories/primer/beta/split_layout_stories.rb | 17 ++++ test/components/component_test.rb | 1 + .../primer/beta/split_layout_test.rb | 13 +++ 9 files changed, 157 insertions(+) create mode 100644 app/components/primer/beta/base_layout.html.erb create mode 100644 app/components/primer/beta/split_layout.html.erb create mode 100644 app/components/primer/beta/split_layout.rb create mode 100644 docs/content/components/beta/pagelayout.md create mode 100644 stories/primer/beta/split_layout_stories.rb create mode 100644 test/components/primer/beta/split_layout_test.rb diff --git a/app/components/primer/beta/base_layout.html.erb b/app/components/primer/beta/base_layout.html.erb new file mode 100644 index 0000000000..c6245dc7f2 --- /dev/null +++ b/app/components/primer/beta/base_layout.html.erb @@ -0,0 +1,15 @@ +<%= render Primer::BaseComponent.new(**@system_arguments) do %> + <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-wrapper #{@wrapper_sizing_class}")) do %> + <%= header %> + <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-regions")) do %> + <% if pane.render_first?%> + <%= pane %> + <%= main %> + <% else %> + <%= main %> + <%= pane %> + <% end %> + <% end %> + <%= footer %> + <% end %> +<% end %> \ No newline at end of file diff --git a/app/components/primer/beta/split_layout.html.erb b/app/components/primer/beta/split_layout.html.erb new file mode 100644 index 0000000000..7e7bfce0ea --- /dev/null +++ b/app/components/primer/beta/split_layout.html.erb @@ -0,0 +1,3 @@ +<%= render Primer::BaseComponent.new(**@system_arguments) do %> + <%= content %> +<% end %> diff --git a/app/components/primer/beta/split_layout.rb b/app/components/primer/beta/split_layout.rb new file mode 100644 index 0000000000..b1f31f6b51 --- /dev/null +++ b/app/components/primer/beta/split_layout.rb @@ -0,0 +1,19 @@ +# frozen_string_literal: true + +module Primer + module Beta + # Add a general description of component here + # Add additional usage considerations or best practices that may aid the user to use the component correctly. + # @accessibility Add any accessibility considerations + class SplitLayout < Primer::Component + # @example Example goes here + # + # <%= render(Primer::SplitLayout.new) { "Example" } %> + # + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + def initialize(**system_arguments) + @system_arguments = system_arguments + end + end + end +end diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md new file mode 100644 index 0000000000..43914b19cf --- /dev/null +++ b/docs/content/components/beta/pagelayout.md @@ -0,0 +1,86 @@ +--- +title: PageLayout +componentId: page_layout +status: Beta +source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/page_layout.rb +storybook: https://primer.style/view-components/stories/?path=/story/primer-beta-page-layout +--- + +import Example from '../../../src/@primer/gatsby-theme-doctocat/components/example' + + + +`Layout` provides foundational patterns for responsive pages. +`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. + On smaller screens, `Layout` uses vertically stacked rows to display content. + +`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane`side-by-side (on a desktop of tablet device, per instance); +or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). +`Layout` should always work in any screen size. + +`Layout` also provides `Header` and `Footer` slots, which can be used to provide a consistent header and footer across all pages. + +## Accessibility + +Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether +`main` or `pane` comes first in code. The code order won’t affect the visual position. + +## Arguments + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `wrapper_sizing` | `Symbol` | `BaseLayout::WRAPPER_SIZING_DEFAULT` | The size of the container wrapping `Layout`. One of `:fluid`, `:lg`, `:md`, or `:xl`. | +| `outer_spacing` | `Symbol` | `BaseLayout::OUTER_SPACING_DEFAULT` | Sets wrapper margins surrounding the component to distance itself from the viewport edges. One of `:condensed`, `:none`, or `:normal`. | +| `column_gap` | `Symbol` | `BaseLayout::COLUMN_GAP_DEFAULT` | Sets gap between columns. One of `:condensed`, `:none`, or `:normal`. | +| `row_gap` | `Symbol` | `BaseLayout::ROW_GAP_DEFAULT` | Sets the gap below the header and above the footer. One of `:condensed`, `:none`, or `:normal`. | +| `responsive_variant` | `Symbol` | `BaseLayout::RESPONSIVE_VARIANT_DEFAULT` | Defines how the layout component adapts to smaller viewports. `:stack_regions` presents the content in a vertical flow, with pane and content vertically arranged. `:separate_regions` presents pane and content as different pages on smaller viewports. | +| `responsive_primary_region` | `Symbol` | `BaseLayout::RESPONSIVE_PRIMARY_REGION_DEFAULT` | When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + +## Slots + +### `Main` + +The layout's main content. + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `width` | `Symbol` | N/A | One of `:fluid`, `:lg`, `:md`, or `:xl`. | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + +### `Pane` + +The layout's sidebar. + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `width` | `Symbol` | N/A | One of `:default`, `:narrow`, or `:wide`. | +| `position` | `Symbol` | N/A | Pane placement when `Layout` is in column modes. One of `:end` and `:start`. | +| `responsive_position` | `Symbol` | N/A | Pane placement when `Layout` is in column modes. One of `:end`, `:inherit`, or `:start`. | +| `divider` | `Boolean` | N/A | Whether to show a pane line divider. | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + +### `Header` + +The layout's header. + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `divider` | `Boolean` | N/A | Whether to show a header divider | +| `responsive_divider` | `Boolean` | N/A | Whether to show a divider below the `header` region if in responsive mode | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + +### `Footer` + +The layout's footer. + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `divider` | `Boolean` | N/A | Whether to show a footer divider | +| `responsive_divider` | `Boolean` | N/A | Whether to show a divider below the `footer` region if in responsive mode | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + +## Examples + +### Default + diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 628ee3f1ba..6fd2bd903f 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -87,6 +87,8 @@ url: "/components/progressbar" - title: Spinner url: "/components/spinner" + - title: SplitLayout + url: /components/splitlayout - title: State url: "/components/state" - title: Subhead diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake index aea6914f82..95a8f6bc8d 100644 --- a/lib/tasks/docs.rake +++ b/lib/tasks/docs.rake @@ -29,6 +29,7 @@ namespace :docs do # Rails controller for rendering arbitrary ERB view_context = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context components = [ + Primer::Beta::SplitLayout, Primer::Alpha::Layout, Primer::HellipButton, Primer::Alpha::BorderBox::Header, diff --git a/stories/primer/beta/split_layout_stories.rb b/stories/primer/beta/split_layout_stories.rb new file mode 100644 index 0000000000..0f701ed74c --- /dev/null +++ b/stories/primer/beta/split_layout_stories.rb @@ -0,0 +1,17 @@ +# frozen_string_literal: true + +require "primer/beta/split_layout" + +class Primer::Beta::SplitLayoutStories < ViewComponent::Storybook::Stories + layout "storybook_preview" + + story(:split_layout) do + controls do + classes "custom-class" + end + + content do + "Update your stories!" + end + end +end diff --git a/test/components/component_test.rb b/test/components/component_test.rb index 388dd32814..a33d12bf72 100644 --- a/test/components/component_test.rb +++ b/test/components/component_test.rb @@ -7,6 +7,7 @@ class PrimerComponentTest < Minitest::Test # Components with any arguments necessary to make them render COMPONENTS_WITH_ARGS = [ + [Primer::Beta::SplitLayout, {}], [Primer::Alpha::Layout, {}, proc { |component| component.main(tag: :div) { "Foo" } component.sidebar(tag: :div) { "Bar" } diff --git a/test/components/primer/beta/split_layout_test.rb b/test/components/primer/beta/split_layout_test.rb new file mode 100644 index 0000000000..e30ef58b9d --- /dev/null +++ b/test/components/primer/beta/split_layout_test.rb @@ -0,0 +1,13 @@ +# frozen_string_literal: true + +require "test_helper" + +class PrimerBetaSplitLayoutTest < Minitest::Test + include Primer::ComponentTestHelpers + + def test_renders + render_inline(Primer::SplitLayout.new) + + assert_text("Add a test here") + end +end From 67d0f6249425b26b68ae2077a6dfaa87ed9389b7 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 7 Dec 2021 18:08:40 +0000 Subject: [PATCH 02/97] Add SplitLayout --- .../primer/beta/split_layout.html.erb | 9 +- app/components/primer/beta/split_layout.rb | 176 +++++++++++++++++- demo/Gemfile.lock | 2 +- docs/content/components/beta/pagelayout.md | 86 --------- docs/content/components/beta/splitlayout.md | 91 +++++++++ .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 +- static/arguments.yml | 17 ++ static/classes.yml | 16 ++ stories/primer/beta/split_layout_stories.rb | 14 +- .../primer/beta/split_layout_test.rb | 100 +++++++++- 10 files changed, 409 insertions(+), 104 deletions(-) delete mode 100644 docs/content/components/beta/pagelayout.md create mode 100644 docs/content/components/beta/splitlayout.md diff --git a/app/components/primer/beta/split_layout.html.erb b/app/components/primer/beta/split_layout.html.erb index 7e7bfce0ea..a6d635476a 100644 --- a/app/components/primer/beta/split_layout.html.erb +++ b/app/components/primer/beta/split_layout.html.erb @@ -1,3 +1,8 @@ <%= render Primer::BaseComponent.new(**@system_arguments) do %> - <%= content %> -<% end %> + <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-wrapper")) do %> + <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-regions")) do %> + <%= pane %> + <%= main %> + <% end %> + <% end %> +<% end %> \ No newline at end of file diff --git a/app/components/primer/beta/split_layout.rb b/app/components/primer/beta/split_layout.rb index b1f31f6b51..9cef1bb65b 100644 --- a/app/components/primer/beta/split_layout.rb +++ b/app/components/primer/beta/split_layout.rb @@ -1,18 +1,180 @@ # frozen_string_literal: true - module Primer module Beta - # Add a general description of component here - # Add additional usage considerations or best practices that may aid the user to use the component correctly. - # @accessibility Add any accessibility considerations + # `Layout` provides foundational patterns for responsive pages. + # `Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. + # On smaller screens, `Layout` uses vertically stacked rows to display content. + # + # `Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane`side-by-side (on a desktop of tablet device, per instance); + # or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). + # `Layout` should always work in any screen size. + # + # `Layout` also provides `Header` and `Footer` slots, which can be used to provide a consistent header and footer across all pages. + # + # @accessibility + # Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether + # `main` or `pane` comes first in code. The code order won’t affect the visual position. class SplitLayout < Primer::Component - # @example Example goes here + status :beta + + PANE_TAG_DEFAULT = :div + PANE_TAG_OPTIONS = [PANE_TAG_DEFAULT, :aside, :nav, :section].freeze + + PANE_WIDTH_DEFAULT = :default + PANE_WIDTH_MAPPINGS = { + PANE_WIDTH_DEFAULT => "", + :narrow => "LayoutBeta--pane-width-narrow", + :wide => "LayoutBeta--pane-width-wide" + }.freeze + PANE_WIDTH_OPTIONS = PANE_WIDTH_MAPPINGS.keys.freeze + + INNER_SPACING_DEFAULT = :normal + INNER_SPACING_MAPPINGS = { + normal: "LayoutBeta--inner-spacing-normal", + condensed: "LayoutBeta--inner-spacing-condensed" + }.freeze + INNER_SPACING_OPTIONS = INNER_SPACING_MAPPINGS.keys.freeze + + RESPONSIVE_PRIMARY_REGION_DEFAULT = :content + RESPONSIVE_PRIMARY_REGION_MAPPINGS = { + RESPONSIVE_PRIMARY_REGION_DEFAULT => "LayoutBeta--primary-content", + :pane => "LayoutBeta--primary-pane" + }.freeze + RESPONSIVE_PRIMARY_REGION_OPTIONS = RESPONSIVE_PRIMARY_REGION_MAPPINGS.keys.freeze + # The layout's main content. # - # <%= render(Primer::SplitLayout.new) { "Example" } %> + # @param width [Symbol] <%= one_of(Primer::Beta::SplitLayout::Main::WIDTH_OPTIONS) %> + # @param tag [Symbol] <%= one_of(Primer::Beta::SplitLayout::Main::TAG_OPTIONS) %> + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + renders_one :main, "Primer::Beta::SplitLayout::Main" + + # The layout's sidebar. # + # @param width [Symbol] <%= one_of(Primer::Beta::SplitLayout::PANE_WIDTH_OPTIONS) %> + # @param tag [Symbol] <%= one_of(Primer::Beta::SplitLayout::PANE_TAG_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - def initialize(**system_arguments) + renders_one :pane, lambda { | + width: PANE_WIDTH_DEFAULT, + tag: PANE_TAG_DEFAULT, + **system_arguments + | + + @pane_system_arguments = system_arguments + @pane_system_arguments[:tag] = fetch_or_fallback(PANE_TAG_OPTIONS, tag, PANE_TAG_DEFAULT) + @pane_system_arguments[:classes] = class_names( + @pane_system_arguments[:classes], + "LayoutBeta-pane", + ) + + # These classes have to be set in the parent `Layout` element, so we modify its system arguments. + @system_arguments[:classes] = class_names( + @system_arguments[:classes], + "LayoutBeta--pane-position-start", + PANE_WIDTH_MAPPINGS[fetch_or_fallback(PANE_WIDTH_OPTIONS, width, PANE_WIDTH_DEFAULT)], + "LayoutBeta--pane-divider" + ) + + Primer::BaseComponent.new(**@pane_system_arguments) + } + + # @example Default + # + # <%= render(Primer::Beta::SplitLayout.new) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # + # @example Pane widths + # + # @description + # Sets the pane width. The width is predetermined according to the breakpoint instead of it being percentage-based. + # + # - `default`: + # - `narrow`: + # - `wide`: + # + # When flowing as a row, `Pane` takes the full width. + # + # @code + # <%= render(Primer::Beta::SplitLayout.new) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(width: :default, border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::SplitLayout.new(mt: 5)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(width: :narrow, border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::SplitLayout.new(mt: 5)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(width: :wide, border: true) { "Pane" } %> + # <% end %> + # + # + # @param inner_spacing [Symbol] Sets padding to regions individually. <%= one_of(Primer::Beta::SplitLayout::INNER_SPACING_OPTIONS) %> + # @param responsive_primary_region [Symbol] When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. <%= one_of(Primer::Beta::SplitLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS) %> + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + def initialize( + inner_spacing: INNER_SPACING_DEFAULT, + responsive_primary_region: RESPONSIVE_PRIMARY_REGION_DEFAULT, + **system_arguments + ) + @system_arguments = system_arguments + @system_arguments[:tag] = :div + @system_arguments[:classes] = class_names( + "LayoutBeta", + INNER_SPACING_MAPPINGS[fetch_or_fallback(INNER_SPACING_OPTIONS, inner_spacing, INNER_SPACING_DEFAULT)], + RESPONSIVE_PRIMARY_REGION_MAPPINGS[fetch_or_fallback(RESPONSIVE_PRIMARY_REGION_OPTIONS, responsive_primary_region, RESPONSIVE_PRIMARY_REGION_DEFAULT)], + "LayoutBeta--variant-separateRegions", + "LayoutBeta--column-gap-none", + "LayoutBeta--row-gap-none", + "LayoutBeta--pane-position-start", + "LayoutBeta--pane-divider", + "LayoutBeta--variant-md-multiColumns", + system_arguments[:classes] + ) + end + + def render? + main.present? && pane.present? + end + + # The layout's main content. + class Main < Primer::Component + WIDTH_DEFAULT = :fluid + WIDTH_OPTIONS = [WIDTH_DEFAULT, :md, :lg, :xl].freeze + + TAG_DEFAULT = :div + TAG_OPTIONS = [TAG_DEFAULT, :main].freeze + + # @param width [Symbol] <%= one_of(Primer::Beta::SplitLayout::Main::WIDTH_OPTIONS) %> + # @param tag [Symbol] <%= one_of(Primer::Beta::SplitLayout::Main::TAG_OPTIONS) %> + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + def initialize(tag: TAG_DEFAULT, width: WIDTH_DEFAULT, **system_arguments) + @width = fetch_or_fallback(WIDTH_OPTIONS, width, WIDTH_DEFAULT) + + @system_arguments = system_arguments + @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT) + @system_arguments[:classes] = class_names( + "LayoutBeta-region", + "LayoutBeta-content", + system_arguments[:classes] + ) + end + + def call + render(Primer::BaseComponent.new(**@system_arguments)) do + if @width == :fluid + content + else + render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-content-centered-#{@width}")) do + render(Primer::BaseComponent.new(tag: :div, container: @width)) do + content + end + end + end + end + end end end end diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock index 19a3cb5d05..7797d2a966 100644 --- a/demo/Gemfile.lock +++ b/demo/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: .. specs: - primer_view_components (0.0.61) + primer_view_components (0.0.63) actionview (>= 5.0.0) activesupport (>= 5.0.0) octicons (~> 15) diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md deleted file mode 100644 index 43914b19cf..0000000000 --- a/docs/content/components/beta/pagelayout.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: PageLayout -componentId: page_layout -status: Beta -source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/page_layout.rb -storybook: https://primer.style/view-components/stories/?path=/story/primer-beta-page-layout ---- - -import Example from '../../../src/@primer/gatsby-theme-doctocat/components/example' - - - -`Layout` provides foundational patterns for responsive pages. -`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. - On smaller screens, `Layout` uses vertically stacked rows to display content. - -`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane`side-by-side (on a desktop of tablet device, per instance); -or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). -`Layout` should always work in any screen size. - -`Layout` also provides `Header` and `Footer` slots, which can be used to provide a consistent header and footer across all pages. - -## Accessibility - -Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether -`main` or `pane` comes first in code. The code order won’t affect the visual position. - -## Arguments - -| Name | Type | Default | Description | -| :- | :- | :- | :- | -| `wrapper_sizing` | `Symbol` | `BaseLayout::WRAPPER_SIZING_DEFAULT` | The size of the container wrapping `Layout`. One of `:fluid`, `:lg`, `:md`, or `:xl`. | -| `outer_spacing` | `Symbol` | `BaseLayout::OUTER_SPACING_DEFAULT` | Sets wrapper margins surrounding the component to distance itself from the viewport edges. One of `:condensed`, `:none`, or `:normal`. | -| `column_gap` | `Symbol` | `BaseLayout::COLUMN_GAP_DEFAULT` | Sets gap between columns. One of `:condensed`, `:none`, or `:normal`. | -| `row_gap` | `Symbol` | `BaseLayout::ROW_GAP_DEFAULT` | Sets the gap below the header and above the footer. One of `:condensed`, `:none`, or `:normal`. | -| `responsive_variant` | `Symbol` | `BaseLayout::RESPONSIVE_VARIANT_DEFAULT` | Defines how the layout component adapts to smaller viewports. `:stack_regions` presents the content in a vertical flow, with pane and content vertically arranged. `:separate_regions` presents pane and content as different pages on smaller viewports. | -| `responsive_primary_region` | `Symbol` | `BaseLayout::RESPONSIVE_PRIMARY_REGION_DEFAULT` | When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. | -| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | - -## Slots - -### `Main` - -The layout's main content. - -| Name | Type | Default | Description | -| :- | :- | :- | :- | -| `width` | `Symbol` | N/A | One of `:fluid`, `:lg`, `:md`, or `:xl`. | -| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | - -### `Pane` - -The layout's sidebar. - -| Name | Type | Default | Description | -| :- | :- | :- | :- | -| `width` | `Symbol` | N/A | One of `:default`, `:narrow`, or `:wide`. | -| `position` | `Symbol` | N/A | Pane placement when `Layout` is in column modes. One of `:end` and `:start`. | -| `responsive_position` | `Symbol` | N/A | Pane placement when `Layout` is in column modes. One of `:end`, `:inherit`, or `:start`. | -| `divider` | `Boolean` | N/A | Whether to show a pane line divider. | -| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | - -### `Header` - -The layout's header. - -| Name | Type | Default | Description | -| :- | :- | :- | :- | -| `divider` | `Boolean` | N/A | Whether to show a header divider | -| `responsive_divider` | `Boolean` | N/A | Whether to show a divider below the `header` region if in responsive mode | -| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | - -### `Footer` - -The layout's footer. - -| Name | Type | Default | Description | -| :- | :- | :- | :- | -| `divider` | `Boolean` | N/A | Whether to show a footer divider | -| `responsive_divider` | `Boolean` | N/A | Whether to show a divider below the `footer` region if in responsive mode | -| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | - -## Examples - -### Default - diff --git a/docs/content/components/beta/splitlayout.md b/docs/content/components/beta/splitlayout.md new file mode 100644 index 0000000000..d32b7c618e --- /dev/null +++ b/docs/content/components/beta/splitlayout.md @@ -0,0 +1,91 @@ +--- +title: SplitLayout +componentId: split_layout +status: Beta +source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/split_layout.rb +storybook: https://primer.style/view-components/stories/?path=/story/primer-beta-split-layout +--- + +import Example from '../../../src/@primer/gatsby-theme-doctocat/components/example' + + + +`Layout` provides foundational patterns for responsive pages. +`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. + On smaller screens, `Layout` uses vertically stacked rows to display content. + +`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane`side-by-side (on a desktop of tablet device, per instance); +or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). +`Layout` should always work in any screen size. + +`Layout` also provides `Header` and `Footer` slots, which can be used to provide a consistent header and footer across all pages. + +## Accessibility + +Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether +`main` or `pane` comes first in code. The code order won’t affect the visual position. + +## Arguments + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `inner_spacing` | `Symbol` | `:normal` | Sets padding to regions individually. One of `:condensed` and `:normal`. | +| `responsive_primary_region` | `Symbol` | `:content` | When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. One of `:content` and `:pane`. | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + +## Slots + +### `Main` + +The layout's main content. + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `width` | `Symbol` | N/A | One of `:fluid`, `:lg`, `:md`, or `:xl`. | +| `tag` | `Symbol` | N/A | One of `:div` and `:main`. | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + +### `Pane` + +The layout's sidebar. + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `width` | `Symbol` | N/A | One of `:default`, `:narrow`, or `:wide`. | +| `tag` | `Symbol` | N/A | One of `:aside`, `:div`, `:nav`, or `:section`. | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + +## Examples + +### Default + + + +```erb + +<%= render(Primer::Beta::SplitLayout.new) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +``` + +### Pane widths + +Sets the pane width. The width is predetermined according to the breakpoint instead of it being percentage-based. - `default`: - `narrow`: - `wide`: When flowing as a row, `Pane` takes the full width. + + + +```erb +<%= render(Primer::Beta::SplitLayout.new) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(width: :default, border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::SplitLayout.new(mt: 5)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(width: :narrow, border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::SplitLayout.new(mt: 5)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(width: :wide, border: true) { "Pane" } %> +<% end %> +``` diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 6fd2bd903f..49a46d96e7 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -88,7 +88,7 @@ - title: Spinner url: "/components/spinner" - title: SplitLayout - url: /components/splitlayout + url: "/components/splitlayout" - title: State url: "/components/state" - title: Subhead diff --git a/static/arguments.yml b/static/arguments.yml index 1470b14e5a..abd4b32fb9 100644 --- a/static/arguments.yml +++ b/static/arguments.yml @@ -279,6 +279,23 @@ type: Hash default: N/A description: "[System arguments](/system-arguments)" +- component: SplitLayout + source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/split_layout.rb + parameters: + - name: inner_spacing + type: Symbol + default: "`:normal`" + description: Sets padding to regions individually. One of `:condensed` and `:normal`. + - name: responsive_primary_region + type: Symbol + default: "`:content`" + description: When `responsive_variant` is set to `:separate_regions`, defines + which region appears first on small viewports. `:content` is default. One of + `:content` and `:pane`. + - 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: diff --git a/static/classes.yml b/static/classes.yml index 9673577ca6..86ad193849 100644 --- a/static/classes.yml +++ b/static/classes.yml @@ -42,6 +42,22 @@ - ".Layout-main-centered-md" - ".Layout-main-centered-xl" - ".Layout-sidebar" +- ".LayoutBeta" +- ".LayoutBeta--column-gap-none" +- ".LayoutBeta--inner-spacing-normal" +- ".LayoutBeta--pane-divider" +- ".LayoutBeta--pane-position-start" +- ".LayoutBeta--pane-width-narrow" +- ".LayoutBeta--pane-width-wide" +- ".LayoutBeta--primary-content" +- ".LayoutBeta--row-gap-none" +- ".LayoutBeta--variant-md-multiColumns" +- ".LayoutBeta--variant-separateRegions" +- ".LayoutBeta-content" +- ".LayoutBeta-pane" +- ".LayoutBeta-region" +- ".LayoutBeta-regions" +- ".LayoutBeta-wrapper" - ".Link" - ".Link--muted" - ".Link--primary" diff --git a/stories/primer/beta/split_layout_stories.rb b/stories/primer/beta/split_layout_stories.rb index 0f701ed74c..3acb8d77c1 100644 --- a/stories/primer/beta/split_layout_stories.rb +++ b/stories/primer/beta/split_layout_stories.rb @@ -5,13 +5,19 @@ class Primer::Beta::SplitLayoutStories < ViewComponent::Storybook::Stories layout "storybook_preview" - story(:split_layout) do + story(:page_layout) do controls do - classes "custom-class" + select(:inner_spacing, Primer::Beta::SplitLayout::INNER_SPACING_OPTIONS, Primer::Beta::SplitLayout::INNER_SPACING_DEFAULT) + select(:responsive_primary_region, Primer::Beta::SplitLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS, Primer::Beta::SplitLayout::RESPONSIVE_PRIMARY_REGION_DEFAULT) end - content do - "Update your stories!" + content do |c| + c.main(border: true) do + "Main region" + end + c.pane(border: true) do + "Sidebar region" + end end end end diff --git a/test/components/primer/beta/split_layout_test.rb b/test/components/primer/beta/split_layout_test.rb index e30ef58b9d..34f5925625 100644 --- a/test/components/primer/beta/split_layout_test.rb +++ b/test/components/primer/beta/split_layout_test.rb @@ -5,9 +5,103 @@ class PrimerBetaSplitLayoutTest < Minitest::Test include Primer::ComponentTestHelpers - def test_renders - render_inline(Primer::SplitLayout.new) + def test_doesnt_render_without_both_slots + render_inline(Primer::Beta::SplitLayout.new) + refute_component_rendered - assert_text("Add a test here") + render_inline(Primer::Beta::SplitLayout.new) { |c| c.main { "Main" } } + refute_component_rendered + + render_inline(Primer::Beta::SplitLayout.new) { |c| c.pane { "Pane" } } + refute_component_rendered + end + + def test_renders_layout + render_inline(Primer::Beta::SplitLayout.new) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + assert_selector("div.LayoutBeta") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + + def test_renders_layout_with_correct_default_classes + render_inline(Primer::Beta::SplitLayout.new) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + expected_classes = [ + "LayoutBeta", + "LayoutBeta--variant-separateRegions", + "LayoutBeta--variant-md-multiColumns", + "LayoutBeta--primary-content", + "LayoutBeta--inner-spacing-normal", + "LayoutBeta--column-gap-none", + "LayoutBeta--row-gap-none", + "LayoutBeta--pane-position-start", + "LayoutBeta--pane-divider" + ].join(".") + assert_selector("div.#{expected_classes}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + + def test_responsive_primary_region + Primer::Beta::SplitLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS.each do |region| + render_inline(Primer::Beta::SplitLayout.new(responsive_primary_region: region)) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + region_class = Primer::Beta::SplitLayout::RESPONSIVE_PRIMARY_REGION_MAPPINGS[region] + assert_selector("div.LayoutBeta#{region_class.empty? ? '' : ".#{region_class}"}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end + + def test_pane_width + Primer::Beta::SplitLayout::PANE_WIDTH_OPTIONS.each do |size| + render_inline(Primer::Beta::SplitLayout.new) do |c| + c.main { "Main" } + c.pane(width: size) { "Pane" } + end + + width_class = Primer::Beta::SplitLayout::PANE_WIDTH_MAPPINGS[size] + assert_selector("div.LayoutBeta") do + assert_selector("div#{width_class.empty? ? '' : ".#{width_class}"}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end + end + + def test_main_width + Primer::Beta::SplitLayout::Main::WIDTH_OPTIONS.each do |width| + render_inline(Primer::Beta::SplitLayout.new) do |c| + c.main(width: width) { "Main" } + c.pane { "Pane" } + end + + assert_selector("div.LayoutBeta-regions") do + assert_selector("div.LayoutBeta-content") do + if width == :fluid + assert_text("Main") + else + assert_selector("div.LayoutBeta-content-centered-#{width}") do + assert_selector("div.container-#{width}", text: "Main") + end + end + end + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end end end From a3719ce45deefcc7f91010b003e87b87aa11577a Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 7 Dec 2021 18:25:41 +0000 Subject: [PATCH 03/97] Add PageLayout skeleton --- .../primer/beta/page_layout.html.erb | 3 +++ app/components/primer/beta/page_layout.rb | 19 ++++++++++++++++++ .../storybook_centered_preview.html.erb | 2 +- .../views/layouts/storybook_preview.html.erb | 2 +- docs/content/components/beta/splitlayout.md | 20 +++++++++++++++++++ .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 ++ lib/tasks/docs.rake | 1 + stories/primer/beta/page_layout_stories.rb | 17 ++++++++++++++++ test/components/component_test.rb | 1 + .../primer/beta/page_layout_test.rb | 13 ++++++++++++ 10 files changed, 78 insertions(+), 2 deletions(-) create mode 100644 app/components/primer/beta/page_layout.html.erb create mode 100644 app/components/primer/beta/page_layout.rb create mode 100644 stories/primer/beta/page_layout_stories.rb create mode 100644 test/components/primer/beta/page_layout_test.rb diff --git a/app/components/primer/beta/page_layout.html.erb b/app/components/primer/beta/page_layout.html.erb new file mode 100644 index 0000000000..7e7bfce0ea --- /dev/null +++ b/app/components/primer/beta/page_layout.html.erb @@ -0,0 +1,3 @@ +<%= render Primer::BaseComponent.new(**@system_arguments) do %> + <%= content %> +<% end %> diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb new file mode 100644 index 0000000000..5fdc09c1de --- /dev/null +++ b/app/components/primer/beta/page_layout.rb @@ -0,0 +1,19 @@ +# frozen_string_literal: true + +module Primer + module Beta + # Add a general description of component here + # Add additional usage considerations or best practices that may aid the user to use the component correctly. + # @accessibility Add any accessibility considerations + class PageLayout < Primer::Component + # @example Example goes here + # + # <%= render(Primer::PageLayout.new) { "Example" } %> + # + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + def initialize(**system_arguments) + @system_arguments = system_arguments + end + end + end +end diff --git a/demo/app/views/layouts/storybook_centered_preview.html.erb b/demo/app/views/layouts/storybook_centered_preview.html.erb index 045dddfb38..bb2fb6bf24 100644 --- a/demo/app/views/layouts/storybook_centered_preview.html.erb +++ b/demo/app/views/layouts/storybook_centered_preview.html.erb @@ -3,7 +3,7 @@ ActionView::Component Storybook Preview - + <% if Rails.env.development? %> <%= javascript_include_tag "primer_view_components", host: "localhost:4000" %> <% else %> diff --git a/demo/app/views/layouts/storybook_preview.html.erb b/demo/app/views/layouts/storybook_preview.html.erb index 1839e31505..ff9c5afc02 100644 --- a/demo/app/views/layouts/storybook_preview.html.erb +++ b/demo/app/views/layouts/storybook_preview.html.erb @@ -3,7 +3,7 @@ ActionView::Component Storybook Preview - + <% if Rails.env.development? %> <%= javascript_include_tag "primer_view_components", host: "localhost:4000" %> <% else %> diff --git a/docs/content/components/beta/splitlayout.md b/docs/content/components/beta/splitlayout.md index d32b7c618e..5889e0cdc9 100644 --- a/docs/content/components/beta/splitlayout.md +++ b/docs/content/components/beta/splitlayout.md @@ -55,6 +55,26 @@ The layout's sidebar. | `tag` | `Symbol` | N/A | One of `:aside`, `:div`, `:nav`, or `:section`. | | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | +### `Header` + +The layout's header. + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `divider` | `Boolean` | N/A | Whether to show a header divider | +| `responsive_divider` | `Boolean` | N/A | Whether to show a divider below the `header` region if in responsive mode | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + +### `Footer` + +The layout's footer. + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `divider` | `Boolean` | N/A | Whether to show a footer divider | +| `responsive_divider` | `Boolean` | N/A | Whether to show a divider below the `footer` region if in responsive mode | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + ## Examples ### Default diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 49a46d96e7..7fc2170279 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -81,6 +81,8 @@ url: "/components/octicon" - title: OcticonSymbols url: "/components/octiconsymbols" + - title: PageLayout + url: /components/pagelayout - title: Popover url: "/components/popover" - title: ProgressBar diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake index 95a8f6bc8d..40e4631958 100644 --- a/lib/tasks/docs.rake +++ b/lib/tasks/docs.rake @@ -29,6 +29,7 @@ namespace :docs do # Rails controller for rendering arbitrary ERB view_context = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context components = [ + Primer::Beta::PageLayout, Primer::Beta::SplitLayout, Primer::Alpha::Layout, Primer::HellipButton, diff --git a/stories/primer/beta/page_layout_stories.rb b/stories/primer/beta/page_layout_stories.rb new file mode 100644 index 0000000000..aca69edcde --- /dev/null +++ b/stories/primer/beta/page_layout_stories.rb @@ -0,0 +1,17 @@ +# frozen_string_literal: true + +require "primer/beta/page_layout" + +class Primer::Beta::PageLayoutStories < ViewComponent::Storybook::Stories + layout "storybook_preview" + + story(:page_layout) do + controls do + classes "custom-class" + end + + content do + "Update your stories!" + end + end +end diff --git a/test/components/component_test.rb b/test/components/component_test.rb index a33d12bf72..b44fd42317 100644 --- a/test/components/component_test.rb +++ b/test/components/component_test.rb @@ -7,6 +7,7 @@ class PrimerComponentTest < Minitest::Test # Components with any arguments necessary to make them render COMPONENTS_WITH_ARGS = [ + [Primer::Beta::PageLayout, {}], [Primer::Beta::SplitLayout, {}], [Primer::Alpha::Layout, {}, proc { |component| component.main(tag: :div) { "Foo" } diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb new file mode 100644 index 0000000000..e6bb4cbe24 --- /dev/null +++ b/test/components/primer/beta/page_layout_test.rb @@ -0,0 +1,13 @@ +# frozen_string_literal: true + +require "test_helper" + +class PrimerBetaPageLayoutTest < Minitest::Test + include Primer::ComponentTestHelpers + + def test_renders + render_inline(Primer::PageLayout.new) + + assert_text("Add a test here") + end +end From e1b3b25ab64fb16b8524477eeb561684f69ff52f Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 7 Dec 2021 19:01:11 +0000 Subject: [PATCH 04/97] Add wrapper sizes, header, and footer to layout --- .../primer/beta/page_layout.html.erb | 11 +- app/components/primer/beta/page_layout.rb | 285 +++++++++++++++++- .../primer/beta/page_layout_test.rb | 132 +++++++- 3 files changed, 416 insertions(+), 12 deletions(-) diff --git a/app/components/primer/beta/page_layout.html.erb b/app/components/primer/beta/page_layout.html.erb index 7e7bfce0ea..38472a5030 100644 --- a/app/components/primer/beta/page_layout.html.erb +++ b/app/components/primer/beta/page_layout.html.erb @@ -1,3 +1,10 @@ <%= render Primer::BaseComponent.new(**@system_arguments) do %> - <%= content %> -<% end %> + <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-wrapper #{@wrapper_sizing_class}")) do %> + <%= header %> + <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-regions")) do %> + <%= pane %> + <%= main %> + <% end %> + <%= footer %> + <% end %> +<% end %> \ No newline at end of file diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 5fdc09c1de..7938f82367 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -1,19 +1,290 @@ # frozen_string_literal: true - module Primer module Beta - # Add a general description of component here - # Add additional usage considerations or best practices that may aid the user to use the component correctly. - # @accessibility Add any accessibility considerations + # `Layout` provides foundational patterns for responsive pages. + # `Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. + # On smaller screens, `Layout` uses vertically stacked rows to display content. + # + # `Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane`side-by-side (on a desktop of tablet device, per instance); + # or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). + # `Layout` should always work in any screen size. + # + # `Layout` also provides `Header` and `Footer` slots, which can be used to provide a consistent header and footer across all pages. + # + # @accessibility + # Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether + # `main` or `pane` comes first in code. The code order won’t affect the visual position. class PageLayout < Primer::Component - # @example Example goes here + status :beta + + WRAPPER_SIZING_DEFAULT = :fluid + WRAPPER_SIZING_MAPPINGS = { + WRAPPER_SIZING_DEFAULT => "", + :md => "container-md", + :lg => "container-lg", + :xl => "container-xl" + }.freeze + WRAPPER_SIZING_OPTIONS = WRAPPER_SIZING_MAPPINGS.keys.freeze + + OUTER_SPACING_DEFAULT = :none + OUTER_SPACING_MAPPINGS = { + OUTER_SPACING_DEFAULT => "", + :normal => "LayoutBeta--outer-spacing-normal", + :condensed => "LayoutBeta--outer-spacing-condensed" + }.freeze + OUTER_SPACING_OPTIONS = OUTER_SPACING_MAPPINGS.keys.freeze + + INNER_SPACING_DEFAULT = :none + INNER_SPACING_MAPPINGS = { + INNER_SPACING_DEFAULT => "", + :normal => "LayoutBeta--inner-spacing-normal", + :condensed => "LayoutBeta--inner-spacing-condensed" + }.freeze + INNER_SPACING_OPTIONS = INNER_SPACING_MAPPINGS.keys.freeze + + COLUMN_GAP_DEFAULT = :none + COLUMN_GAP_MAPPINGS = { + COLUMN_GAP_DEFAULT => "", + :normal => "LayoutBeta--column-gap-normal", + :condensed => "LayoutBeta--column-gap-condensed" + }.freeze + COLUMN_GAP_OPTIONS = COLUMN_GAP_MAPPINGS.keys.freeze + + ROW_GAP_DEFAULT = :none + ROW_GAP_MAPPINGS = { + ROW_GAP_DEFAULT => "", + :normal => "LayoutBeta--row-gap-normal", + :condensed => "LayoutBeta--row-gap-condensed" + }.freeze + ROW_GAP_OPTIONS = ROW_GAP_MAPPINGS.keys.freeze + + PANE_TAG_DEFAULT = :div + PANE_TAG_OPTIONS = [PANE_TAG_DEFAULT, :aside, :nav, :section].freeze + + PANE_WIDTH_DEFAULT = :default + PANE_WIDTH_MAPPINGS = { + PANE_WIDTH_DEFAULT => "", + :narrow => "LayoutBeta--pane-width-narrow", + :wide => "LayoutBeta--pane-width-wide" + }.freeze + PANE_WIDTH_OPTIONS = PANE_WIDTH_MAPPINGS.keys.freeze + + INNER_SPACING_DEFAULT = :normal + INNER_SPACING_MAPPINGS = { + normal: "LayoutBeta--inner-spacing-normal", + condensed: "LayoutBeta--inner-spacing-condensed" + }.freeze + INNER_SPACING_OPTIONS = INNER_SPACING_MAPPINGS.keys.freeze + + RESPONSIVE_PRIMARY_REGION_DEFAULT = :content + RESPONSIVE_PRIMARY_REGION_MAPPINGS = { + RESPONSIVE_PRIMARY_REGION_DEFAULT => "LayoutBeta--primary-content", + :pane => "LayoutBeta--primary-pane" + }.freeze + RESPONSIVE_PRIMARY_REGION_OPTIONS = RESPONSIVE_PRIMARY_REGION_MAPPINGS.keys.freeze + # The layout's main content. + # + # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::Main::WIDTH_OPTIONS) %> + # @param tag [Symbol] <%= one_of(Primer::Beta::PageLayout::Main::TAG_OPTIONS) %> + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + renders_one :main, "Primer::Beta::PageLayout::Main" + + # The layout's header. + # + # @param divider [Boolean] Whether to show a header divider + # @param responsive_divider [Boolean] Whether to show a divider below the `header` region if in responsive mode + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + renders_one :header, lambda { |divider: false, **header_system_arguments| + # These classes have to be set in the parent `Layout` element, so we modify its system arguments. + @system_arguments[:classes] = class_names( + @system_arguments[:classes], + "LayoutBeta--header-divider" => divider + ) + + header_system_arguments[:classes] = class_names( + header_system_arguments[:classes], + "LayoutBeta-header" + ) + + Bookend.new(divider: divider, **header_system_arguments) + } + + # The layout's footer. + # + # @param divider [Boolean] Whether to show a footer divider + # @param responsive_divider [Boolean] Whether to show a divider below the `footer` region if in responsive mode + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + renders_one :footer, lambda { |divider: false, **footer_system_arguments| + # These classes have to be set in the parent `Layout` element, so we modify its system arguments. + @system_arguments[:classes] = class_names( + @system_arguments[:classes], + "LayoutBeta--has-footer", + "LayoutBeta--footer-divider" => divider + ) + + footer_system_arguments[:classes] = class_names( + footer_system_arguments[:classes], + "LayoutBeta-footer" + ) + + Bookend.new(divider: divider, **footer_system_arguments) + } + + # The layout's sidebar. + # + # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::PANE_WIDTH_OPTIONS) %> + # @param tag [Symbol] <%= one_of(Primer::Beta::PageLayout::PANE_TAG_OPTIONS) %> + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + renders_one :pane, lambda { | + width: PANE_WIDTH_DEFAULT, + tag: PANE_TAG_DEFAULT, + **system_arguments + | + + @pane_system_arguments = system_arguments + @pane_system_arguments[:tag] = fetch_or_fallback(PANE_TAG_OPTIONS, tag, PANE_TAG_DEFAULT) + @pane_system_arguments[:classes] = class_names( + @pane_system_arguments[:classes], + "LayoutBeta-pane", + ) + + # These classes have to be set in the parent `Layout` element, so we modify its system arguments. + @system_arguments[:classes] = class_names( + @system_arguments[:classes], + "LayoutBeta--pane-position-start", + PANE_WIDTH_MAPPINGS[fetch_or_fallback(PANE_WIDTH_OPTIONS, width, PANE_WIDTH_DEFAULT)], + "LayoutBeta--pane-divider" + ) + + Primer::BaseComponent.new(**@pane_system_arguments) + } + + # @example Default + # + # <%= render(Primer::Beta::PageLayout.new) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # + # @example Pane widths + # + # @description + # Sets the pane width. The width is predetermined according to the breakpoint instead of it being percentage-based. # - # <%= render(Primer::PageLayout.new) { "Example" } %> + # - `default`: + # - `narrow`: + # - `wide`: # + # When flowing as a row, `Pane` takes the full width. + # + # @code + # <%= render(Primer::Beta::PageLayout.new) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(width: :default, border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(width: :narrow, border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(width: :wide, border: true) { "Pane" } %> + # <% end %> + # + # + # @param inner_spacing [Symbol] Sets padding to regions individually. <%= one_of(Primer::Beta::PageLayout::INNER_SPACING_OPTIONS) %> + # @param responsive_primary_region [Symbol] When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. <%= one_of(Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - def initialize(**system_arguments) + def initialize( + wrapper_sizing: WRAPPER_SIZING_DEFAULT, + inner_spacing: INNER_SPACING_DEFAULT, + responsive_primary_region: RESPONSIVE_PRIMARY_REGION_DEFAULT, + **system_arguments + ) + + @wrapper_sizing_class = WRAPPER_SIZING_MAPPINGS[fetch_or_fallback(WRAPPER_SIZING_OPTIONS, wrapper_sizing, WRAPPER_SIZING_DEFAULT)] @system_arguments = system_arguments + @system_arguments[:tag] = :div + @system_arguments[:classes] = class_names( + "LayoutBeta", + INNER_SPACING_MAPPINGS[fetch_or_fallback(INNER_SPACING_OPTIONS, inner_spacing, INNER_SPACING_DEFAULT)], + RESPONSIVE_PRIMARY_REGION_MAPPINGS[fetch_or_fallback(RESPONSIVE_PRIMARY_REGION_OPTIONS, responsive_primary_region, RESPONSIVE_PRIMARY_REGION_DEFAULT)], + "LayoutBeta--variant-separateRegions", + "LayoutBeta--column-gap-none", + "LayoutBeta--row-gap-none", + "LayoutBeta--pane-position-start", + "LayoutBeta--pane-divider", + "LayoutBeta--variant-md-multiColumns", + system_arguments[:classes] + ) + end + + def render? + main.present? && pane.present? end + + # The layout's main content. + class Main < Primer::Component + WIDTH_DEFAULT = :fluid + WIDTH_OPTIONS = [WIDTH_DEFAULT, :md, :lg, :xl].freeze + + TAG_DEFAULT = :div + TAG_OPTIONS = [TAG_DEFAULT, :main].freeze + + # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::Main::WIDTH_OPTIONS) %> + # @param tag [Symbol] <%= one_of(Primer::Beta::PageLayout::Main::TAG_OPTIONS) %> + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + def initialize(tag: TAG_DEFAULT, width: WIDTH_DEFAULT, **system_arguments) + @width = fetch_or_fallback(WIDTH_OPTIONS, width, WIDTH_DEFAULT) + + @system_arguments = system_arguments + @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT) + @system_arguments[:classes] = class_names( + "LayoutBeta-region", + "LayoutBeta-content", + system_arguments[:classes] + ) + end + + def call + render(Primer::BaseComponent.new(**@system_arguments)) do + if @width == :fluid + content + else + render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-content-centered-#{@width}")) do + render(Primer::BaseComponent.new(tag: :div, container: @width)) do + content + end + end + end + end + end + end + end + end + + # The layout's header or footer content. This component is used by the `header` and `footer` slots and configured via those slots. + class Bookend < Primer::Component + RESPONSIVE_DIVIDER_DEFAULT = :none + RESPONSIVE_DIVIDER_MAPPINGS = { + RESPONSIVE_DIVIDER_DEFAULT => "", + :line => "LayoutBeta--divider-after", + :filled => "LayoutBeta--divider-after-filled" + }.freeze + RESPONSIVE_DIVIDER_OPTIONS = RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze + + # @param responsive_divider [Symbol] <%= one_of(Primer::Beta::BaseLayout::Bookend::RESPONSIVE_DIVIDER_OPTIONS) %> + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + def initialize(responsive_divider: RESPONSIVE_DIVIDER_DEFAULT, **system_arguments) + @system_arguments = system_arguments + @system_arguments[:classes] = class_names( + @system_arguments[:classes], + RESPONSIVE_DIVIDER_MAPPINGS[fetch_or_fallback(RESPONSIVE_DIVIDER_OPTIONS, responsive_divider, RESPONSIVE_DIVIDER_DEFAULT)] + ) + end + + def call + render(Primer::BaseComponent.new(tag: :div, **@system_arguments)) { content } end end end diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index e6bb4cbe24..e976ea84db 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -5,9 +5,135 @@ class PrimerBetaPageLayoutTest < Minitest::Test include Primer::ComponentTestHelpers - def test_renders - render_inline(Primer::PageLayout.new) + def test_doesnt_render_without_both_slots + render_inline(Primer::Beta::PageLayout.new) + refute_component_rendered - assert_text("Add a test here") + render_inline(Primer::Beta::PageLayout.new) { |c| c.main { "Main" } } + refute_component_rendered + + render_inline(Primer::Beta::PageLayout.new) { |c| c.pane { "Pane" } } + refute_component_rendered + end + + def test_renders_layout + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + assert_selector("div.LayoutBeta") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + + def test_optionally_renders_header_and_footer + render_inline(Primer::Beta::PageLayout.new) do |c| + c.header { "Header" } + c.main { "Main" } + c.pane { "Pane" } + c.footer { "Footer" } + end + + assert_selector("div.LayoutBeta") do + assert_selector("div.LayoutBeta-header", text: "Header") + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.LayoutBeta-footer", text: "Footer") + end + end + + def test_wrapper_sizing + Primer::Beta::PageLayout::WRAPPER_SIZING_OPTIONS.each do |size| + render_inline(Primer::Beta::PageLayout.new(wrapper_sizing: size)) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + assert_selector("div.LayoutBeta") do + assert_selector("div.LayoutBeta-wrapper#{size == :fluid ? '' : ".container-#{size}"}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end + end + + def test_renders_layout_with_correct_default_classes + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + expected_classes = [ + "LayoutBeta", + "LayoutBeta--variant-separateRegions", + "LayoutBeta--variant-md-multiColumns", + "LayoutBeta--primary-content", + "LayoutBeta--inner-spacing-normal", + "LayoutBeta--column-gap-none", + "LayoutBeta--row-gap-none", + "LayoutBeta--pane-position-start", + "LayoutBeta--pane-divider" + ].join(".") + assert_selector("div.#{expected_classes}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + + def test_responsive_primary_region + Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS.each do |region| + render_inline(Primer::Beta::PageLayout.new(responsive_primary_region: region)) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + region_class = Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_MAPPINGS[region] + assert_selector("div.LayoutBeta#{region_class.empty? ? '' : ".#{region_class}"}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end + + def test_pane_width + Primer::Beta::PageLayout::PANE_WIDTH_OPTIONS.each do |size| + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane(width: size) { "Pane" } + end + + width_class = Primer::Beta::PageLayout::PANE_WIDTH_MAPPINGS[size] + assert_selector("div.LayoutBeta") do + assert_selector("div#{width_class.empty? ? '' : ".#{width_class}"}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end + end + + def test_main_width + Primer::Beta::PageLayout::Main::WIDTH_OPTIONS.each do |width| + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main(width: width) { "Main" } + c.pane { "Pane" } + end + + assert_selector("div.LayoutBeta-regions") do + assert_selector("div.LayoutBeta-content") do + if width == :fluid + assert_text("Main") + else + assert_selector("div.LayoutBeta-content-centered-#{width}") do + assert_selector("div.container-#{width}", text: "Main") + end + end + end + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end end end From deadbb98c1c7e3f59b059807bdc32928c10f148a Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 7 Dec 2021 19:10:27 +0000 Subject: [PATCH 05/97] Add outer spacing and gaps --- app/components/primer/beta/page_layout.rb | 16 ++-- .../primer/beta/page_layout_test.rb | 81 ++++++++++++++----- 2 files changed, 69 insertions(+), 28 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 7938f82367..ecfbf5c9dd 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -34,14 +34,6 @@ class PageLayout < Primer::Component }.freeze OUTER_SPACING_OPTIONS = OUTER_SPACING_MAPPINGS.keys.freeze - INNER_SPACING_DEFAULT = :none - INNER_SPACING_MAPPINGS = { - INNER_SPACING_DEFAULT => "", - :normal => "LayoutBeta--inner-spacing-normal", - :condensed => "LayoutBeta--inner-spacing-condensed" - }.freeze - INNER_SPACING_OPTIONS = INNER_SPACING_MAPPINGS.keys.freeze - COLUMN_GAP_DEFAULT = :none COLUMN_GAP_MAPPINGS = { COLUMN_GAP_DEFAULT => "", @@ -197,7 +189,9 @@ class PageLayout < Primer::Component # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> def initialize( wrapper_sizing: WRAPPER_SIZING_DEFAULT, - inner_spacing: INNER_SPACING_DEFAULT, + outer_spacing: OUTER_SPACING_DEFAULT, + column_gap: COLUMN_GAP_DEFAULT, + row_gap: ROW_GAP_DEFAULT, responsive_primary_region: RESPONSIVE_PRIMARY_REGION_DEFAULT, **system_arguments ) @@ -207,7 +201,9 @@ def initialize( @system_arguments[:tag] = :div @system_arguments[:classes] = class_names( "LayoutBeta", - INNER_SPACING_MAPPINGS[fetch_or_fallback(INNER_SPACING_OPTIONS, inner_spacing, INNER_SPACING_DEFAULT)], + OUTER_SPACING_MAPPINGS[fetch_or_fallback(OUTER_SPACING_OPTIONS, outer_spacing, OUTER_SPACING_DEFAULT)], + COLUMN_GAP_MAPPINGS[fetch_or_fallback(COLUMN_GAP_OPTIONS, column_gap, COLUMN_GAP_DEFAULT)], + ROW_GAP_MAPPINGS[fetch_or_fallback(ROW_GAP_OPTIONS, row_gap, ROW_GAP_DEFAULT)], RESPONSIVE_PRIMARY_REGION_MAPPINGS[fetch_or_fallback(RESPONSIVE_PRIMARY_REGION_OPTIONS, responsive_primary_region, RESPONSIVE_PRIMARY_REGION_DEFAULT)], "LayoutBeta--variant-separateRegions", "LayoutBeta--column-gap-none", diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index e976ea84db..3e20db7b31 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -60,29 +60,74 @@ def test_wrapper_sizing end end - def test_renders_layout_with_correct_default_classes - render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane { "Pane" } + # def test_renders_layout_with_correct_default_classes + # render_inline(Primer::Beta::PageLayout.new) do |c| + # c.main { "Main" } + # c.pane { "Pane" } + # end + + # expected_classes = [ + # "LayoutBeta", + # "LayoutBeta--variant-separateRegions", + # "LayoutBeta--variant-md-multiColumns", + # "LayoutBeta--primary-content", + # "LayoutBeta--inner-spacing-normal", + # "LayoutBeta--column-gap-none", + # "LayoutBeta--row-gap-none", + # "LayoutBeta--pane-position-start", + # "LayoutBeta--pane-divider" + # ].join(".") + # assert_selector("div.#{expected_classes}") do + # assert_selector("div.LayoutBeta-content", text: "Main") + # assert_selector("div.LayoutBeta-pane", text: "Pane") + # end + # end + + def test_outer_spacing + Primer::Beta::PageLayout::OUTER_SPACING_OPTIONS.each do |size| + render_inline(Primer::Beta::PageLayout.new(outer_spacing: size)) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + size_class = Primer::Beta::PageLayout::OUTER_SPACING_MAPPINGS[size] + assert_selector("div.LayoutBeta#{size_class.empty? ? '' : ".#{size_class}"}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end end + end - expected_classes = [ - "LayoutBeta", - "LayoutBeta--variant-separateRegions", - "LayoutBeta--variant-md-multiColumns", - "LayoutBeta--primary-content", - "LayoutBeta--inner-spacing-normal", - "LayoutBeta--column-gap-none", - "LayoutBeta--row-gap-none", - "LayoutBeta--pane-position-start", - "LayoutBeta--pane-divider" - ].join(".") - assert_selector("div.#{expected_classes}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + def test_column_gap + Primer::Beta::PageLayout::COLUMN_GAP_OPTIONS.each do |size| + render_inline(Primer::Beta::PageLayout.new(column_gap: size)) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + size_class = Primer::Beta::PageLayout::COLUMN_GAP_MAPPINGS[size] + assert_selector("div.LayoutBeta#{size_class.empty? ? '' : ".#{size_class}"}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end end end + def test_row_gap + Primer::Beta::PageLayout::ROW_GAP_OPTIONS.each do |size| + render_inline(Primer::Beta::PageLayout.new(row_gap: size)) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + size_class = Primer::Beta::PageLayout::ROW_GAP_MAPPINGS[size] + assert_selector("div.LayoutBeta#{size_class.empty? ? '' : ".#{size_class}"}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end + def test_responsive_primary_region Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS.each do |region| render_inline(Primer::Beta::PageLayout.new(responsive_primary_region: region)) do |c| From a3b4b5df2a6d656a2806ea9d23bac10e66927c92 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 7 Dec 2021 19:27:08 +0000 Subject: [PATCH 06/97] add responsive_variant option to layout --- app/components/primer/beta/page_layout.rb | 16 ++++++++++------ test/components/primer/beta/page_layout_test.rb | 15 +++++++++++++++ 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index ecfbf5c9dd..55ef14be54 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -74,6 +74,14 @@ class PageLayout < Primer::Component :pane => "LayoutBeta--primary-pane" }.freeze RESPONSIVE_PRIMARY_REGION_OPTIONS = RESPONSIVE_PRIMARY_REGION_MAPPINGS.keys.freeze + + RESPONSIVE_VARIANT_DEFAULT = :stack_regions + RESPONSIVE_VARIANT_MAPPINGS = { + RESPONSIVE_VARIANT_DEFAULT => "LayoutBeta--variant-stackRegions", + :separate_regions => "LayoutBeta--variant-separateRegions" + }.freeze + RESPONSIVE_VARIANT_OPTIONS = RESPONSIVE_VARIANT_MAPPINGS.keys.freeze + # The layout's main content. # # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::Main::WIDTH_OPTIONS) %> @@ -192,6 +200,7 @@ def initialize( outer_spacing: OUTER_SPACING_DEFAULT, column_gap: COLUMN_GAP_DEFAULT, row_gap: ROW_GAP_DEFAULT, + responsive_variant: RESPONSIVE_VARIANT_DEFAULT, responsive_primary_region: RESPONSIVE_PRIMARY_REGION_DEFAULT, **system_arguments ) @@ -205,12 +214,7 @@ def initialize( COLUMN_GAP_MAPPINGS[fetch_or_fallback(COLUMN_GAP_OPTIONS, column_gap, COLUMN_GAP_DEFAULT)], ROW_GAP_MAPPINGS[fetch_or_fallback(ROW_GAP_OPTIONS, row_gap, ROW_GAP_DEFAULT)], RESPONSIVE_PRIMARY_REGION_MAPPINGS[fetch_or_fallback(RESPONSIVE_PRIMARY_REGION_OPTIONS, responsive_primary_region, RESPONSIVE_PRIMARY_REGION_DEFAULT)], - "LayoutBeta--variant-separateRegions", - "LayoutBeta--column-gap-none", - "LayoutBeta--row-gap-none", - "LayoutBeta--pane-position-start", - "LayoutBeta--pane-divider", - "LayoutBeta--variant-md-multiColumns", + RESPONSIVE_VARIANT_MAPPINGS[fetch_or_fallback(RESPONSIVE_VARIANT_OPTIONS, responsive_variant, RESPONSIVE_VARIANT_DEFAULT)], system_arguments[:classes] ) end diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 3e20db7b31..12bf92d3e2 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -143,6 +143,21 @@ def test_responsive_primary_region end end + def test_responsive_variant + Primer::Beta::PageLayout::RESPONSIVE_VARIANT_OPTIONS.each do |variant| + render_inline(Primer::Beta::PageLayout.new(responsive_variant: variant)) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + variant_class = Primer::Beta::PageLayout::RESPONSIVE_VARIANT_MAPPINGS[variant] + assert_selector("div.LayoutBeta#{variant_class.empty? ? '' : ".#{variant_class}"}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end + def test_pane_width Primer::Beta::PageLayout::PANE_WIDTH_OPTIONS.each do |size| render_inline(Primer::Beta::PageLayout.new) do |c| From 97ea4c24df8942d755663a8babd2d0e7f21d4e0b Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 7 Dec 2021 19:28:48 +0000 Subject: [PATCH 07/97] update documentation --- app/components/primer/beta/page_layout.rb | 195 +++++++++++++++++++++- 1 file changed, 189 insertions(+), 6 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 55ef14be54..62fe5cdd00 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -161,11 +161,117 @@ class PageLayout < Primer::Component # @example Default # - # <%= render(Primer::Beta::PageLayout.new) do |c| %> + # <%= render(Primer::Beta::BaseLayout.new) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> # + # @example Header and footer + # + # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <% c.header(border: true) { "Header" } %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% c.footer(border: true) { "Footer" } %> + # <% end %> + # + # @example Wrapper sizing + # + # @description + # When `:fluid` the layout will be set to full width. When the other sizing options are used the layout will be centered with corresponding widths. + # + # - `:fluid`: full width + # - `:md`: max-width: 768px + # - `:lg`: max-width: 1012px + # - `:xl`: max-width: 1280px + # + # @code + # <%= render(Primer::Beta::BaseLayout.new(wrapper_sizing: :fluid)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::BaseLayout.new(wrapper_sizing: :md)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::BaseLayout.new(wrapper_sizing: :lg)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::BaseLayout.new(wrapper_sizing: :xl)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # + # @example Outer spacing + # + # @description + # Sets wrapper margins surrounding the component to distance itself from the viewport edges. + # + # - `:none`` sets the margin to 0. + # - `:condensed` keeps the margin at 16px. + # - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. + # + # @code + # <%= render(Primer::Beta::BaseLayout.new(outer_spacing: :none)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::BaseLayout.new(outer_spacing: :condensed)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::BaseLayout.new(outer_spacing: :normal)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # + # @example Column gap + # + # @description + # Sets the gap between columns to distance them from each other. + # + # - `:none` sets the gap to 0. + # - `:condensed` keeps the gap always at 16px. + # - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. + # + # @code + # <%= render(Primer::Beta::BaseLayout.new(column_gap: :none)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::BaseLayout.new(column_gap: :condensed)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::BaseLayout.new(column_gap: :normal)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # + # @example Row gap + # + # @description + # Sets the gap below the header and above the footer. + # + # - `:none` sets the gap to 0. + # - `:condensed` keeps the gap always at 16px. + # - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. + # + # @code + # <%= render(Primer::Beta::BaseLayout.new(row_gap: :none)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::BaseLayout.new(row_gap: :condensed)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::BaseLayout.new(row_gap: :normal)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # # @example Pane widths # # @description @@ -178,22 +284,99 @@ class PageLayout < Primer::Component # When flowing as a row, `Pane` takes the full width. # # @code - # <%= render(Primer::Beta::PageLayout.new) do |c| %> + # <%= render(Primer::Beta::BaseLayout.new) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(width: :default, border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> + # <%= render(Primer::Beta::BaseLayout.new(mt: 5)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(width: :narrow, border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> + # <%= render(Primer::Beta::BaseLayout.new(mt: 5)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(width: :wide, border: true) { "Pane" } %> # <% end %> # + # @example Pane position + # + # @description + # Use `start` for sidebars that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information. + # + # @code + # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(position: :start, border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::BaseLayout.new( mt: 5)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(position: :end, border: true) { "Pane" } %> + # <% end %> + # + # @example Pane resposive position + # + # @description + # Defines the position of the pane in the responsive layout. + # + # - `:start` puts the pane above content + # - `:end` puts it below content. + # - `:inherit` uses the same value from `pane_position` + # + # @code + # <%= render(Primer::Beta::BaseLayout.new(mt: 5)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(pane_responsive_position: :inherit, border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(pane_responsive_position: :start, border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::BaseLayout.new(mt: 5)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(pane_responsive_position: :end, border: true) { "Pane" } %> + # <% end %> + # + # @example Header + # + # @description + # You can add an optional header to the layout and have spacing and positioning taken care of for you. + # You can optionally add a divider to the header. + # + # @code + # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <% c.header(border: true) { "Header" } %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <% c.header(divider: true, border: true) { "Header" } %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # + # @example Footer + # + # @description + # You can add an optional footer to the layout and have spacing and positioning taken care of for you. + # You can optionally add a divider to the footer. + # + # @code + # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% c.footer(border: true) { "Header" } %> + # <% end %> + # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% c.footer(divider: true, border: true) { "Header" } %> + # <% end %> # - # @param inner_spacing [Symbol] Sets padding to regions individually. <%= one_of(Primer::Beta::PageLayout::INNER_SPACING_OPTIONS) %> - # @param responsive_primary_region [Symbol] When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. <%= one_of(Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS) %> + # @param wrapper_sizing [Symbol] The size of the container wrapping `Layout`. <%= one_of(Primer::Beta::BaseLayout::WRAPPER_SIZING_OPTIONS) %> + # @param outer_spacing [Symbol] Sets wrapper margins surrounding the component to distance itself from the viewport edges. <%= one_of(Primer::Beta::BaseLayout::OUTER_SPACING_OPTIONS) %> + # @param column_gap [Symbol] Sets gap between columns. <%= one_of(Primer::Beta::BaseLayout::COLUMN_GAP_OPTIONS) %> + # @param row_gap [Symbol] Sets the gap below the header and above the footer. <%= one_of(Primer::Beta::BaseLayout::ROW_GAP_OPTIONS) %> + # @param responsive_variant [Symbol] Defines how the layout component adapts to smaller viewports. `:stack_regions` presents the content in a vertical flow, with pane and content vertically arranged. `:separate_regions` presents pane and content as different pages on smaller viewports. + # @param responsive_primary_region [Symbol] When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> def initialize( wrapper_sizing: WRAPPER_SIZING_DEFAULT, From 4c3505f419e15a7bab68e03f26a6d7ffe6288041 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 7 Dec 2021 20:43:28 +0000 Subject: [PATCH 08/97] Add pane options --- .../primer/beta/page_layout.html.erb | 9 +- app/components/primer/beta/page_layout.rb | 128 +++++++++++++----- .../primer/beta/page_layout_test.rb | 66 +++++++++ 3 files changed, 165 insertions(+), 38 deletions(-) diff --git a/app/components/primer/beta/page_layout.html.erb b/app/components/primer/beta/page_layout.html.erb index 38472a5030..c6245dc7f2 100644 --- a/app/components/primer/beta/page_layout.html.erb +++ b/app/components/primer/beta/page_layout.html.erb @@ -2,8 +2,13 @@ <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-wrapper #{@wrapper_sizing_class}")) do %> <%= header %> <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-regions")) do %> - <%= pane %> - <%= main %> + <% if pane.render_first?%> + <%= pane %> + <%= main %> + <% else %> + <%= main %> + <%= pane %> + <% end %> <% end %> <%= footer %> <% end %> diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 62fe5cdd00..0af9a338db 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -61,6 +61,21 @@ class PageLayout < Primer::Component }.freeze PANE_WIDTH_OPTIONS = PANE_WIDTH_MAPPINGS.keys.freeze + PANE_RESPONSIVE_POSITION_DEFAULT = :inherit + PANE_RESPONSIVE_POSITION_MAPPINGS = { + PANE_RESPONSIVE_POSITION_DEFAULT => "", + :start => "LayoutBeta--stackRegions-pane-position-start", + :end => "LayoutBeta--stackRegions-pane-position-end" + }.freeze + PANE_RESPONSIVE_POSITION_OPTIONS = PANE_RESPONSIVE_POSITION_MAPPINGS.keys.freeze + + PANE_DIVIDER_DEFAULT = :start + PANE_DIVIDER_MAPPINGS = { + PANE_DIVIDER_DEFAULT => "LayoutBeta--pane-position-start", + :end => "LayoutBeta--pane-position-start" + }.freeze + PANE_DIVIDER_OPTIONS = PANE_DIVIDER_MAPPINGS.keys.freeze + INNER_SPACING_DEFAULT = :normal INNER_SPACING_MAPPINGS = { normal: "LayoutBeta--inner-spacing-normal", @@ -132,31 +147,29 @@ class PageLayout < Primer::Component # The layout's sidebar. # - # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::PANE_WIDTH_OPTIONS) %> - # @param tag [Symbol] <%= one_of(Primer::Beta::PageLayout::PANE_TAG_OPTIONS) %> + # @param width [Symbol] <%= one_of(Primer::Beta::BaseLayout::PANE_WIDTH_OPTIONS) %> + # @param position [Symbol] Pane placement when `Layout` is in column modes. <%= one_of(Primer::Beta::BaseLayout::Pane::POSITION_OPTIONS) %> + # @param responsive_position [Symbol] Pane placement when `Layout` is in column modes. <%= one_of(Primer::Beta::BaseLayout::PANE_RESPONSIVE_POSITION_OPTIONS) %> + # @param divider [Boolean] Whether to show a pane line divider. # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> renders_one :pane, lambda { | width: PANE_WIDTH_DEFAULT, - tag: PANE_TAG_DEFAULT, + position: Pane::POSITION_DEFAULT, + responsive_position: PANE_RESPONSIVE_POSITION_DEFAULT, + divider: false, **system_arguments | - @pane_system_arguments = system_arguments - @pane_system_arguments[:tag] = fetch_or_fallback(PANE_TAG_OPTIONS, tag, PANE_TAG_DEFAULT) - @pane_system_arguments[:classes] = class_names( - @pane_system_arguments[:classes], - "LayoutBeta-pane", - ) - # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], - "LayoutBeta--pane-position-start", + Pane::POSITION_MAPPINGS[fetch_or_fallback(Pane::POSITION_OPTIONS, position, Pane::POSITION_DEFAULT)], + PANE_RESPONSIVE_POSITION_MAPPINGS[fetch_or_fallback(PANE_RESPONSIVE_POSITION_OPTIONS, responsive_position, PANE_RESPONSIVE_POSITION_DEFAULT)], PANE_WIDTH_MAPPINGS[fetch_or_fallback(PANE_WIDTH_OPTIONS, width, PANE_WIDTH_DEFAULT)], - "LayoutBeta--pane-divider" + { "LayoutBeta--pane-divider" => divider }, ) - Primer::BaseComponent.new(**@pane_system_arguments) + Pane.new(position: position, **system_arguments) } # @example Default @@ -443,31 +456,74 @@ def call end end end - end - end - # The layout's header or footer content. This component is used by the `header` and `footer` slots and configured via those slots. - class Bookend < Primer::Component - RESPONSIVE_DIVIDER_DEFAULT = :none - RESPONSIVE_DIVIDER_MAPPINGS = { - RESPONSIVE_DIVIDER_DEFAULT => "", - :line => "LayoutBeta--divider-after", - :filled => "LayoutBeta--divider-after-filled" - }.freeze - RESPONSIVE_DIVIDER_OPTIONS = RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze - - # @param responsive_divider [Symbol] <%= one_of(Primer::Beta::BaseLayout::Bookend::RESPONSIVE_DIVIDER_OPTIONS) %> - # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - def initialize(responsive_divider: RESPONSIVE_DIVIDER_DEFAULT, **system_arguments) - @system_arguments = system_arguments - @system_arguments[:classes] = class_names( - @system_arguments[:classes], - RESPONSIVE_DIVIDER_MAPPINGS[fetch_or_fallback(RESPONSIVE_DIVIDER_OPTIONS, responsive_divider, RESPONSIVE_DIVIDER_DEFAULT)] - ) - end + # The layout's header or footer content. This component is used by the `header` and `footer` slots and configured via those slots. + class Bookend < Primer::Component + RESPONSIVE_DIVIDER_DEFAULT = :none + RESPONSIVE_DIVIDER_MAPPINGS = { + RESPONSIVE_DIVIDER_DEFAULT => "", + :line => "LayoutBeta--divider-after", + :filled => "LayoutBeta--divider-after-filled" + }.freeze + RESPONSIVE_DIVIDER_OPTIONS = RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze - def call - render(Primer::BaseComponent.new(tag: :div, **@system_arguments)) { content } + # @param responsive_divider [Symbol] <%= one_of(Primer::Beta::BaseLayout::Bookend::RESPONSIVE_DIVIDER_OPTIONS) %> + # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> + def initialize(responsive_divider: RESPONSIVE_DIVIDER_DEFAULT, **system_arguments) + @system_arguments = system_arguments + @system_arguments[:classes] = class_names( + @system_arguments[:classes], + RESPONSIVE_DIVIDER_MAPPINGS[fetch_or_fallback(RESPONSIVE_DIVIDER_OPTIONS, responsive_divider, RESPONSIVE_DIVIDER_DEFAULT)] + ) + end + + def call + render(Primer::BaseComponent.new(tag: :div, **@system_arguments)) { content } + end + end + + # The layout's pane content. This is a secondary, smaller region that is paired with the `Main` region. + class Pane < Primer::Component + POSITION_DEFAULT = :start + POSITION_MAPPINGS = { + POSITION_DEFAULT => "LayoutBeta--pane-position-start", + :end => "LayoutBeta--pane-position-end" + }.freeze + POSITION_OPTIONS = POSITION_MAPPINGS.keys.freeze + + RESPONSIVE_DIVIDER_DEFAULT = :none + RESPONSIVE_DIVIDER_MAPPINGS = { + RESPONSIVE_DIVIDER_DEFAULT => "", + :line => "LayoutBeta--divider-after", + :filled => "LayoutBeta--divider-after-filled" + }.freeze + RESPONSIVE_DIVIDER_OPTIONS = RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze + + TAG_DEFAULT = :div + TAG_OPTIONS = [TAG_DEFAULT, :aside, :nav, :section].freeze + + # @param tag [Symbol] <%= one_of(Primer::Beta::PageLayout::Pane::TAG_OPTIONS) %> + def initialize(responsive_divider: RESPONSIVE_DIVIDER_DEFAULT, position: POSITION_DEFAULT, tag: TAG_DEFAULT, **system_arguments) + @system_arguments = system_arguments + @position = position + + @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT) + @system_arguments[:classes] = class_names( + "LayoutBeta-region", + "LayoutBeta-pane", + RESPONSIVE_DIVIDER_MAPPINGS[fetch_or_fallback(RESPONSIVE_DIVIDER_OPTIONS, responsive_divider, RESPONSIVE_DIVIDER_DEFAULT)], + @system_arguments[:classes] + ) + end + + def render_first? + @position == :start + end + + def call + render(Primer::BaseComponent.new(**@system_arguments)) { content } + end + end end end end diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 12bf92d3e2..f0de80d2c9 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -175,6 +175,72 @@ def test_pane_width end end + def test_pane_position_add_correct_class + Primer::Beta::PageLayout::Pane::POSITION_OPTIONS.each do |position| + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane(position: position) { "Pane" } + end + + assert_selector("div.LayoutBeta") do + assert_selector("div.LayoutBeta--pane-position-#{position}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end + end + + def test_pane_position_renders_pane_first + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane(position: :start) { "Pane" } + end + + assert_match(/LayoutBeta-pane.*LayoutBeta-content/m, @rendered_component) + end + + def test_pane_position_renders_pane_last + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane(position: :end) { "Pane" } + end + + assert_match(/LayoutBeta-content.*LayoutBeta-pane/m, @rendered_component) + end + + def test_pane_responsive_position + Primer::Beta::PageLayout::PANE_RESPONSIVE_POSITION_OPTIONS.each do |position| + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane(responsive_position: position) { "Pane" } + end + + position_class = Primer::Beta::PageLayout::PANE_RESPONSIVE_POSITION_MAPPINGS[position] + assert_selector("div.LayoutBeta#{position_class.empty? ? '' : ".#{position_class}"}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end + + def test_pane_width + Primer::Beta::PageLayout::PANE_WIDTH_OPTIONS.each do |size| + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane(width: size) { "Pane" } + end + + width_class = Primer::Beta::PageLayout::PANE_WIDTH_MAPPINGS[size] + assert_selector("div.LayoutBeta") do + assert_selector("div#{width_class.empty? ? '' : ".#{width_class}"}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end + end + def test_main_width Primer::Beta::PageLayout::Main::WIDTH_OPTIONS.each do |width| render_inline(Primer::Beta::PageLayout.new) do |c| From 684b6f65553a73a1fc14380624950cd07702af56 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 7 Dec 2021 21:02:32 +0000 Subject: [PATCH 09/97] update docs, stories for layouts --- app/components/primer/beta/page_layout.rb | 70 ++--- docs/content/components/beta/pagelayout.md | 295 ++++++++++++++++++ docs/content/components/beta/splitlayout.md | 20 -- .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 +- static/arguments.yml | 38 +++ static/classes.yml | 13 + stories/primer/beta/page_layout_stories.rb | 42 ++- 7 files changed, 421 insertions(+), 59 deletions(-) create mode 100644 docs/content/components/beta/pagelayout.md diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 0af9a338db..70f7148d7b 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -147,9 +147,9 @@ class PageLayout < Primer::Component # The layout's sidebar. # - # @param width [Symbol] <%= one_of(Primer::Beta::BaseLayout::PANE_WIDTH_OPTIONS) %> - # @param position [Symbol] Pane placement when `Layout` is in column modes. <%= one_of(Primer::Beta::BaseLayout::Pane::POSITION_OPTIONS) %> - # @param responsive_position [Symbol] Pane placement when `Layout` is in column modes. <%= one_of(Primer::Beta::BaseLayout::PANE_RESPONSIVE_POSITION_OPTIONS) %> + # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::PANE_WIDTH_OPTIONS) %> + # @param position [Symbol] Pane placement when `Layout` is in column modes. <%= one_of(Primer::Beta::PageLayout::Pane::POSITION_OPTIONS) %> + # @param responsive_position [Symbol] Pane placement when `Layout` is in column modes. <%= one_of(Primer::Beta::PageLayout::PANE_RESPONSIVE_POSITION_OPTIONS) %> # @param divider [Boolean] Whether to show a pane line divider. # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> renders_one :pane, lambda { | @@ -174,14 +174,14 @@ class PageLayout < Primer::Component # @example Default # - # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <%= render(Primer::Beta::PageLayout.new) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> # # @example Header and footer # - # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <%= render(Primer::Beta::PageLayout.new) do |c| %> # <% c.header(border: true) { "Header" } %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> @@ -199,19 +199,19 @@ class PageLayout < Primer::Component # - `:xl`: max-width: 1280px # # @code - # <%= render(Primer::Beta::BaseLayout.new(wrapper_sizing: :fluid)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :fluid)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new(wrapper_sizing: :md)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :md)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new(wrapper_sizing: :lg)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :lg)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new(wrapper_sizing: :xl)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :xl)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> @@ -226,15 +226,15 @@ class PageLayout < Primer::Component # - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. # # @code - # <%= render(Primer::Beta::BaseLayout.new(outer_spacing: :none)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(outer_spacing: :none)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new(outer_spacing: :condensed)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(outer_spacing: :condensed)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new(outer_spacing: :normal)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(outer_spacing: :normal)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> @@ -249,15 +249,15 @@ class PageLayout < Primer::Component # - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. # # @code - # <%= render(Primer::Beta::BaseLayout.new(column_gap: :none)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(column_gap: :none)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new(column_gap: :condensed)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(column_gap: :condensed)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new(column_gap: :normal)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(column_gap: :normal)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> @@ -272,15 +272,15 @@ class PageLayout < Primer::Component # - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. # # @code - # <%= render(Primer::Beta::BaseLayout.new(row_gap: :none)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(row_gap: :none)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new(row_gap: :condensed)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(row_gap: :condensed)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new(row_gap: :normal)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(row_gap: :normal)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> @@ -297,15 +297,15 @@ class PageLayout < Primer::Component # When flowing as a row, `Pane` takes the full width. # # @code - # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <%= render(Primer::Beta::PageLayout.new) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(width: :default, border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new(mt: 5)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(width: :narrow, border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new(mt: 5)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(width: :wide, border: true) { "Pane" } %> # <% end %> @@ -316,11 +316,11 @@ class PageLayout < Primer::Component # Use `start` for sidebars that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information. # # @code - # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <%= render(Primer::Beta::PageLayout.new) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(position: :start, border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new( mt: 5)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new( mt: 5)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(position: :end, border: true) { "Pane" } %> # <% end %> @@ -335,15 +335,15 @@ class PageLayout < Primer::Component # - `:inherit` uses the same value from `pane_position` # # @code - # <%= render(Primer::Beta::BaseLayout.new(mt: 5)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(pane_responsive_position: :inherit, border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <%= render(Primer::Beta::PageLayout.new) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(pane_responsive_position: :start, border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new(mt: 5)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(pane_responsive_position: :end, border: true) { "Pane" } %> # <% end %> @@ -355,12 +355,12 @@ class PageLayout < Primer::Component # You can optionally add a divider to the header. # # @code - # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <%= render(Primer::Beta::PageLayout.new) do |c| %> # <% c.header(border: true) { "Header" } %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <%= render(Primer::Beta::PageLayout.new) do |c| %> # <% c.header(divider: true, border: true) { "Header" } %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> @@ -373,21 +373,21 @@ class PageLayout < Primer::Component # You can optionally add a divider to the footer. # # @code - # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <%= render(Primer::Beta::PageLayout.new) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% c.footer(border: true) { "Header" } %> # <% end %> - # <%= render(Primer::Beta::BaseLayout.new) do |c| %> + # <%= render(Primer::Beta::PageLayout.new) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% c.footer(divider: true, border: true) { "Header" } %> # <% end %> # - # @param wrapper_sizing [Symbol] The size of the container wrapping `Layout`. <%= one_of(Primer::Beta::BaseLayout::WRAPPER_SIZING_OPTIONS) %> - # @param outer_spacing [Symbol] Sets wrapper margins surrounding the component to distance itself from the viewport edges. <%= one_of(Primer::Beta::BaseLayout::OUTER_SPACING_OPTIONS) %> - # @param column_gap [Symbol] Sets gap between columns. <%= one_of(Primer::Beta::BaseLayout::COLUMN_GAP_OPTIONS) %> - # @param row_gap [Symbol] Sets the gap below the header and above the footer. <%= one_of(Primer::Beta::BaseLayout::ROW_GAP_OPTIONS) %> + # @param wrapper_sizing [Symbol] The size of the container wrapping `Layout`. <%= one_of(Primer::Beta::PageLayout::WRAPPER_SIZING_OPTIONS) %> + # @param outer_spacing [Symbol] Sets wrapper margins surrounding the component to distance itself from the viewport edges. <%= one_of(Primer::Beta::PageLayout::OUTER_SPACING_OPTIONS) %> + # @param column_gap [Symbol] Sets gap between columns. <%= one_of(Primer::Beta::PageLayout::COLUMN_GAP_OPTIONS) %> + # @param row_gap [Symbol] Sets the gap below the header and above the footer. <%= one_of(Primer::Beta::PageLayout::ROW_GAP_OPTIONS) %> # @param responsive_variant [Symbol] Defines how the layout component adapts to smaller viewports. `:stack_regions` presents the content in a vertical flow, with pane and content vertically arranged. `:separate_regions` presents pane and content as different pages on smaller viewports. # @param responsive_primary_region [Symbol] When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> @@ -467,7 +467,7 @@ class Bookend < Primer::Component }.freeze RESPONSIVE_DIVIDER_OPTIONS = RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze - # @param responsive_divider [Symbol] <%= one_of(Primer::Beta::BaseLayout::Bookend::RESPONSIVE_DIVIDER_OPTIONS) %> + # @param responsive_divider [Symbol] <%= one_of(Primer::Beta::PageLayout::Bookend::RESPONSIVE_DIVIDER_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> def initialize(responsive_divider: RESPONSIVE_DIVIDER_DEFAULT, **system_arguments) @system_arguments = system_arguments diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md new file mode 100644 index 0000000000..18bc3bb7a2 --- /dev/null +++ b/docs/content/components/beta/pagelayout.md @@ -0,0 +1,295 @@ +--- +title: PageLayout +componentId: page_layout +status: Beta +source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/page_layout.rb +storybook: https://primer.style/view-components/stories/?path=/story/primer-beta-page-layout +--- + +import Example from '../../../src/@primer/gatsby-theme-doctocat/components/example' + + + +`Layout` provides foundational patterns for responsive pages. +`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. + On smaller screens, `Layout` uses vertically stacked rows to display content. + +`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane`side-by-side (on a desktop of tablet device, per instance); +or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). +`Layout` should always work in any screen size. + +`Layout` also provides `Header` and `Footer` slots, which can be used to provide a consistent header and footer across all pages. + +## Accessibility + +Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether +`main` or `pane` comes first in code. The code order won’t affect the visual position. + +## Arguments + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `wrapper_sizing` | `Symbol` | `:fluid` | The size of the container wrapping `Layout`. One of `:fluid`, `:lg`, `:md`, or `:xl`. | +| `outer_spacing` | `Symbol` | `:none` | Sets wrapper margins surrounding the component to distance itself from the viewport edges. One of `:condensed`, `:none`, or `:normal`. | +| `column_gap` | `Symbol` | `:none` | Sets gap between columns. One of `:condensed`, `:none`, or `:normal`. | +| `row_gap` | `Symbol` | `:none` | Sets the gap below the header and above the footer. One of `:condensed`, `:none`, or `:normal`. | +| `responsive_variant` | `Symbol` | `:stack_regions` | Defines how the layout component adapts to smaller viewports. `:stack_regions` presents the content in a vertical flow, with pane and content vertically arranged. `:separate_regions` presents pane and content as different pages on smaller viewports. | +| `responsive_primary_region` | `Symbol` | `:content` | When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + +## Slots + +### `Main` + +The layout's main content. + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `width` | `Symbol` | N/A | One of `:fluid`, `:lg`, `:md`, or `:xl`. | +| `tag` | `Symbol` | N/A | One of `:div` and `:main`. | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + +### `Header` + +The layout's header. + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `divider` | `Boolean` | N/A | Whether to show a header divider | +| `responsive_divider` | `Boolean` | N/A | Whether to show a divider below the `header` region if in responsive mode | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + +### `Footer` + +The layout's footer. + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `divider` | `Boolean` | N/A | Whether to show a footer divider | +| `responsive_divider` | `Boolean` | N/A | Whether to show a divider below the `footer` region if in responsive mode | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + +### `Pane` + +The layout's sidebar. + +| Name | Type | Default | Description | +| :- | :- | :- | :- | +| `width` | `Symbol` | N/A | One of `:default`, `:narrow`, or `:wide`. | +| `position` | `Symbol` | N/A | Pane placement when `Layout` is in column modes. One of `:end` and `:start`. | +| `responsive_position` | `Symbol` | N/A | Pane placement when `Layout` is in column modes. One of `:end`, `:inherit`, or `:start`. | +| `divider` | `Boolean` | N/A | Whether to show a pane line divider. | +| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | + +## Examples + +### Default + + + +```erb + +<%= render(Primer::Beta::PageLayout.new) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +``` + +### Header and footer + + + +```erb + +<%= render(Primer::Beta::PageLayout.new) do |c| %> + <% c.header(border: true) { "Header" } %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> + <% c.footer(border: true) { "Footer" } %> +<% end %> +``` + +### Wrapper sizing + +When `:fluid` the layout will be set to full width. When the other sizing options are used the layout will be centered with corresponding widths. - `:fluid`: full width - `:md`: max-width: 768px - `:lg`: max-width: 1012px - `:xl`: max-width: 1280px + + + +```erb +<%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :fluid)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :md)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :lg)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :xl)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +``` + +### Outer spacing + +Sets wrapper margins surrounding the component to distance itself from the viewport edges. - `:none`` sets the margin to 0. - `:condensed` keeps the margin at 16px. - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. + + + +```erb +<%= render(Primer::Beta::PageLayout.new(outer_spacing: :none)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new(outer_spacing: :condensed)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new(outer_spacing: :normal)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +``` + +### Column gap + +Sets the gap between columns to distance them from each other. - `:none` sets the gap to 0. - `:condensed` keeps the gap always at 16px. - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. + + + +```erb +<%= render(Primer::Beta::PageLayout.new(column_gap: :none)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new(column_gap: :condensed)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new(column_gap: :normal)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +``` + +### Row gap + +Sets the gap below the header and above the footer. - `:none` sets the gap to 0. - `:condensed` keeps the gap always at 16px. - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. + + + +```erb +<%= render(Primer::Beta::PageLayout.new(row_gap: :none)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new(row_gap: :condensed)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new(row_gap: :normal)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +``` + +### Pane widths + +Sets the pane width. The width is predetermined according to the breakpoint instead of it being percentage-based. - `default`: - `narrow`: - `wide`: When flowing as a row, `Pane` takes the full width. + + + +```erb +<%= render(Primer::Beta::PageLayout.new) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(width: :default, border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(width: :narrow, border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(width: :wide, border: true) { "Pane" } %> +<% end %> +``` + +### Pane position + +Use `start` for sidebars that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information. + + + +```erb +<%= render(Primer::Beta::PageLayout.new) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(position: :start, border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new( mt: 5)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(position: :end, border: true) { "Pane" } %> +<% end %> +``` + +### Pane resposive position + +Defines the position of the pane in the responsive layout. - `:start` puts the pane above content - `:end` puts it below content. - `:inherit` uses the same value from `pane_position` + + + +```erb +<%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(pane_responsive_position: :inherit, border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(pane_responsive_position: :start, border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(pane_responsive_position: :end, border: true) { "Pane" } %> +<% end %> +``` + +### Header + +You can add an optional header to the layout and have spacing and positioning taken care of for you. You can optionally add a divider to the header. + + + +```erb +<%= render(Primer::Beta::PageLayout.new) do |c| %> + <% c.header(border: true) { "Header" } %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new) do |c| %> + <% c.header(divider: true, border: true) { "Header" } %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +``` + +### Footer + +You can add an optional footer to the layout and have spacing and positioning taken care of for you. You can optionally add a divider to the footer. + + + +```erb +<%= render(Primer::Beta::PageLayout.new) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> + <% c.footer(border: true) { "Header" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> + <% c.footer(divider: true, border: true) { "Header" } %> +<% end %> +``` diff --git a/docs/content/components/beta/splitlayout.md b/docs/content/components/beta/splitlayout.md index 5889e0cdc9..d32b7c618e 100644 --- a/docs/content/components/beta/splitlayout.md +++ b/docs/content/components/beta/splitlayout.md @@ -55,26 +55,6 @@ The layout's sidebar. | `tag` | `Symbol` | N/A | One of `:aside`, `:div`, `:nav`, or `:section`. | | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | -### `Header` - -The layout's header. - -| Name | Type | Default | Description | -| :- | :- | :- | :- | -| `divider` | `Boolean` | N/A | Whether to show a header divider | -| `responsive_divider` | `Boolean` | N/A | Whether to show a divider below the `header` region if in responsive mode | -| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | - -### `Footer` - -The layout's footer. - -| Name | Type | Default | Description | -| :- | :- | :- | :- | -| `divider` | `Boolean` | N/A | Whether to show a footer divider | -| `responsive_divider` | `Boolean` | N/A | Whether to show a divider below the `footer` region if in responsive mode | -| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | - ## Examples ### Default diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 7fc2170279..76fe2eb9c3 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -82,7 +82,7 @@ - title: OcticonSymbols url: "/components/octiconsymbols" - title: PageLayout - url: /components/pagelayout + url: "/components/pagelayout" - title: Popover url: "/components/popover" - title: ProgressBar diff --git a/static/arguments.yml b/static/arguments.yml index abd4b32fb9..805bcbadd1 100644 --- a/static/arguments.yml +++ b/static/arguments.yml @@ -279,6 +279,44 @@ type: Hash default: N/A description: "[System arguments](/system-arguments)" +- component: PageLayout + source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/page_layout.rb + parameters: + - name: wrapper_sizing + type: Symbol + default: "`:fluid`" + description: The size of the container wrapping `Layout`. One of `:fluid`, `:lg`, + `:md`, or `:xl`. + - name: outer_spacing + type: Symbol + default: "`:none`" + description: Sets wrapper margins surrounding the component to distance itself + from the viewport edges. One of `:condensed`, `:none`, or `:normal`. + - name: column_gap + type: Symbol + default: "`:none`" + description: Sets gap between columns. One of `:condensed`, `:none`, or `:normal`. + - name: row_gap + type: Symbol + default: "`:none`" + description: Sets the gap below the header and above the footer. One of `:condensed`, + `:none`, or `:normal`. + - name: responsive_variant + type: Symbol + default: "`:stack_regions`" + description: Defines how the layout component adapts to smaller viewports. `:stack_regions` + presents the content in a vertical flow, with pane and content vertically arranged. + `:separate_regions` presents pane and content as different pages on smaller + viewports. + - name: responsive_primary_region + type: Symbol + default: "`:content`" + description: When `responsive_variant` is set to `:separate_regions`, defines + which region appears first on small viewports. `:content` is default. + - name: system_arguments + type: Hash + default: N/A + description: "[System arguments](/system-arguments)" - component: SplitLayout source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/split_layout.rb parameters: diff --git a/static/classes.yml b/static/classes.yml index 86ad193849..5a66f0f44a 100644 --- a/static/classes.yml +++ b/static/classes.yml @@ -43,17 +43,30 @@ - ".Layout-main-centered-xl" - ".Layout-sidebar" - ".LayoutBeta" +- ".LayoutBeta--column-gap-condensed" - ".LayoutBeta--column-gap-none" +- ".LayoutBeta--column-gap-normal" +- ".LayoutBeta--footer-divider" +- ".LayoutBeta--has-footer" +- ".LayoutBeta--header-divider" - ".LayoutBeta--inner-spacing-normal" +- ".LayoutBeta--outer-spacing-condensed" +- ".LayoutBeta--outer-spacing-normal" - ".LayoutBeta--pane-divider" +- ".LayoutBeta--pane-position-end" - ".LayoutBeta--pane-position-start" - ".LayoutBeta--pane-width-narrow" - ".LayoutBeta--pane-width-wide" - ".LayoutBeta--primary-content" +- ".LayoutBeta--row-gap-condensed" - ".LayoutBeta--row-gap-none" +- ".LayoutBeta--row-gap-normal" - ".LayoutBeta--variant-md-multiColumns" - ".LayoutBeta--variant-separateRegions" +- ".LayoutBeta--variant-stackRegions" - ".LayoutBeta-content" +- ".LayoutBeta-footer" +- ".LayoutBeta-header" - ".LayoutBeta-pane" - ".LayoutBeta-region" - ".LayoutBeta-regions" diff --git a/stories/primer/beta/page_layout_stories.rb b/stories/primer/beta/page_layout_stories.rb index aca69edcde..4238168c64 100644 --- a/stories/primer/beta/page_layout_stories.rb +++ b/stories/primer/beta/page_layout_stories.rb @@ -7,11 +7,47 @@ class Primer::Beta::PageLayoutStories < ViewComponent::Storybook::Stories story(:page_layout) do controls do - classes "custom-class" + select(:wrapper_sizing, Primer::Beta::PageLayout::WRAPPER_SIZING_OPTIONS, Primer::Beta::PageLayout::WRAPPER_SIZING_DEFAULT) + select(:outer_spacing, Primer::Beta::PageLayout::OUTER_SPACING_OPTIONS, Primer::Beta::PageLayout::OUTER_SPACING_DEFAULT) + select(:column_gap, Primer::Beta::PageLayout::COLUMN_GAP_OPTIONS, Primer::Beta::PageLayout::COLUMN_GAP_DEFAULT) + select(:row_gap, Primer::Beta::PageLayout::ROW_GAP_OPTIONS, Primer::Beta::PageLayout::ROW_GAP_DEFAULT) + select(:responsive_primary_region, Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS, Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_DEFAULT) + select(:responsive_variant, Primer::Beta::PageLayout::RESPONSIVE_VARIANT_OPTIONS, Primer::Beta::PageLayout::RESPONSIVE_VARIANT_DEFAULT) end - content do - "Update your stories!" + content do |c| + c.main(border: true) do + "Main region" + end + c.pane(border: true) do + "Sidebar region" + end + end + end + + story(:page_layout_with_header_and_footer) do + controls do + select(:wrapper_sizing, Primer::Beta::PageLayout::WRAPPER_SIZING_OPTIONS, Primer::Beta::PageLayout::WRAPPER_SIZING_DEFAULT) + select(:outer_spacing, Primer::Beta::PageLayout::OUTER_SPACING_OPTIONS, Primer::Beta::PageLayout::OUTER_SPACING_DEFAULT) + select(:column_gap, Primer::Beta::PageLayout::COLUMN_GAP_OPTIONS, Primer::Beta::PageLayout::COLUMN_GAP_DEFAULT) + select(:row_gap, Primer::Beta::PageLayout::ROW_GAP_OPTIONS, Primer::Beta::PageLayout::ROW_GAP_DEFAULT) + select(:responsive_primary_region, Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS, Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_DEFAULT) + select(:responsive_variant, Primer::Beta::PageLayout::RESPONSIVE_VARIANT_OPTIONS, Primer::Beta::PageLayout::RESPONSIVE_VARIANT_DEFAULT) + end + + content do |c| + c.header(border: true) do + "Header region" + end + c.main(border: true) do + "Main region" + end + c.pane(border: true) do + "Pane region" + end + c.footer(border: true) do + "Footer region" + end end end end From 58879914bfcd3194b9070dde0e2ba7a1a9c19a06 Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Tue, 7 Dec 2021 21:05:37 +0000 Subject: [PATCH 10/97] docs: build docs --- static/audited_at.json | 6 ++ static/constants.json | 225 +++++++++++++++++++++++++++++++++++++++++ static/statuses.json | 6 ++ 3 files changed, 237 insertions(+) diff --git a/static/audited_at.json b/static/audited_at.json index f8b5f502be..7574ef9e20 100644 --- a/static/audited_at.json +++ b/static/audited_at.json @@ -18,6 +18,12 @@ "Primer::Beta::Blankslate": "", "Primer::Beta::Breadcrumbs": "", "Primer::Beta::Breadcrumbs::Item": "", + "Primer::Beta::PageLayout": "", + "Primer::Beta::PageLayout::Bookend": "", + "Primer::Beta::PageLayout::Main": "", + "Primer::Beta::PageLayout::Pane": "", + "Primer::Beta::SplitLayout": "", + "Primer::Beta::SplitLayout::Main": "", "Primer::Beta::Text": "", "Primer::Beta::Truncate": "", "Primer::Beta::Truncate::TruncateText": "", diff --git a/static/constants.json b/static/constants.json index 800abda905..fe93701847 100644 --- a/static/constants.json +++ b/static/constants.json @@ -249,6 +249,231 @@ }, "Primer::Beta::Breadcrumbs::Item": { }, + "Primer::Beta::PageLayout": { + "Bookend": "Primer::Beta::PageLayout::Bookend", + "COLUMN_GAP_DEFAULT": "none", + "COLUMN_GAP_MAPPINGS": { + "none": "", + "normal": "LayoutBeta--column-gap-normal", + "condensed": "LayoutBeta--column-gap-condensed" + }, + "COLUMN_GAP_OPTIONS": [ + "none", + "normal", + "condensed" + ], + "INNER_SPACING_DEFAULT": "normal", + "INNER_SPACING_MAPPINGS": { + "normal": "LayoutBeta--inner-spacing-normal", + "condensed": "LayoutBeta--inner-spacing-condensed" + }, + "INNER_SPACING_OPTIONS": [ + "normal", + "condensed" + ], + "Main": "Primer::Beta::PageLayout::Main", + "OUTER_SPACING_DEFAULT": "none", + "OUTER_SPACING_MAPPINGS": { + "none": "", + "normal": "LayoutBeta--outer-spacing-normal", + "condensed": "LayoutBeta--outer-spacing-condensed" + }, + "OUTER_SPACING_OPTIONS": [ + "none", + "normal", + "condensed" + ], + "PANE_DIVIDER_DEFAULT": "start", + "PANE_DIVIDER_MAPPINGS": { + "start": "LayoutBeta--pane-position-start", + "end": "LayoutBeta--pane-position-start" + }, + "PANE_DIVIDER_OPTIONS": [ + "start", + "end" + ], + "PANE_RESPONSIVE_POSITION_DEFAULT": "inherit", + "PANE_RESPONSIVE_POSITION_MAPPINGS": { + "inherit": "", + "start": "LayoutBeta--stackRegions-pane-position-start", + "end": "LayoutBeta--stackRegions-pane-position-end" + }, + "PANE_RESPONSIVE_POSITION_OPTIONS": [ + "inherit", + "start", + "end" + ], + "PANE_TAG_DEFAULT": "div", + "PANE_TAG_OPTIONS": [ + "div", + "aside", + "nav", + "section" + ], + "PANE_WIDTH_DEFAULT": "default", + "PANE_WIDTH_MAPPINGS": { + "default": "", + "narrow": "LayoutBeta--pane-width-narrow", + "wide": "LayoutBeta--pane-width-wide" + }, + "PANE_WIDTH_OPTIONS": [ + "default", + "narrow", + "wide" + ], + "Pane": "Primer::Beta::PageLayout::Pane", + "RESPONSIVE_PRIMARY_REGION_DEFAULT": "content", + "RESPONSIVE_PRIMARY_REGION_MAPPINGS": { + "content": "LayoutBeta--primary-content", + "pane": "LayoutBeta--primary-pane" + }, + "RESPONSIVE_PRIMARY_REGION_OPTIONS": [ + "content", + "pane" + ], + "RESPONSIVE_VARIANT_DEFAULT": "stack_regions", + "RESPONSIVE_VARIANT_MAPPINGS": { + "stack_regions": "LayoutBeta--variant-stackRegions", + "separate_regions": "LayoutBeta--variant-separateRegions" + }, + "RESPONSIVE_VARIANT_OPTIONS": [ + "stack_regions", + "separate_regions" + ], + "ROW_GAP_DEFAULT": "none", + "ROW_GAP_MAPPINGS": { + "none": "", + "normal": "LayoutBeta--row-gap-normal", + "condensed": "LayoutBeta--row-gap-condensed" + }, + "ROW_GAP_OPTIONS": [ + "none", + "normal", + "condensed" + ], + "WRAPPER_SIZING_DEFAULT": "fluid", + "WRAPPER_SIZING_MAPPINGS": { + "fluid": "", + "md": "container-md", + "lg": "container-lg", + "xl": "container-xl" + }, + "WRAPPER_SIZING_OPTIONS": [ + "fluid", + "md", + "lg", + "xl" + ] + }, + "Primer::Beta::PageLayout::Bookend": { + "RESPONSIVE_DIVIDER_DEFAULT": "none", + "RESPONSIVE_DIVIDER_MAPPINGS": { + "none": "", + "line": "LayoutBeta--divider-after", + "filled": "LayoutBeta--divider-after-filled" + }, + "RESPONSIVE_DIVIDER_OPTIONS": [ + "none", + "line", + "filled" + ] + }, + "Primer::Beta::PageLayout::Main": { + "TAG_DEFAULT": "div", + "TAG_OPTIONS": [ + "div", + "main" + ], + "WIDTH_DEFAULT": "fluid", + "WIDTH_OPTIONS": [ + "fluid", + "md", + "lg", + "xl" + ] + }, + "Primer::Beta::PageLayout::Pane": { + "POSITION_DEFAULT": "start", + "POSITION_MAPPINGS": { + "start": "LayoutBeta--pane-position-start", + "end": "LayoutBeta--pane-position-end" + }, + "POSITION_OPTIONS": [ + "start", + "end" + ], + "RESPONSIVE_DIVIDER_DEFAULT": "none", + "RESPONSIVE_DIVIDER_MAPPINGS": { + "none": "", + "line": "LayoutBeta--divider-after", + "filled": "LayoutBeta--divider-after-filled" + }, + "RESPONSIVE_DIVIDER_OPTIONS": [ + "none", + "line", + "filled" + ], + "TAG_DEFAULT": "div", + "TAG_OPTIONS": [ + "div", + "aside", + "nav", + "section" + ] + }, + "Primer::Beta::SplitLayout": { + "INNER_SPACING_DEFAULT": "normal", + "INNER_SPACING_MAPPINGS": { + "normal": "LayoutBeta--inner-spacing-normal", + "condensed": "LayoutBeta--inner-spacing-condensed" + }, + "INNER_SPACING_OPTIONS": [ + "normal", + "condensed" + ], + "Main": "Primer::Beta::SplitLayout::Main", + "PANE_TAG_DEFAULT": "div", + "PANE_TAG_OPTIONS": [ + "div", + "aside", + "nav", + "section" + ], + "PANE_WIDTH_DEFAULT": "default", + "PANE_WIDTH_MAPPINGS": { + "default": "", + "narrow": "LayoutBeta--pane-width-narrow", + "wide": "LayoutBeta--pane-width-wide" + }, + "PANE_WIDTH_OPTIONS": [ + "default", + "narrow", + "wide" + ], + "RESPONSIVE_PRIMARY_REGION_DEFAULT": "content", + "RESPONSIVE_PRIMARY_REGION_MAPPINGS": { + "content": "LayoutBeta--primary-content", + "pane": "LayoutBeta--primary-pane" + }, + "RESPONSIVE_PRIMARY_REGION_OPTIONS": [ + "content", + "pane" + ] + }, + "Primer::Beta::SplitLayout::Main": { + "TAG_DEFAULT": "div", + "TAG_OPTIONS": [ + "div", + "main" + ], + "WIDTH_DEFAULT": "fluid", + "WIDTH_OPTIONS": [ + "fluid", + "md", + "lg", + "xl" + ] + }, "Primer::Beta::Text": { "DEFAULT_TAG": "span" }, diff --git a/static/statuses.json b/static/statuses.json index d0ad91bb65..bb75ccb576 100644 --- a/static/statuses.json +++ b/static/statuses.json @@ -18,6 +18,12 @@ "Primer::Beta::Blankslate": "beta", "Primer::Beta::Breadcrumbs": "beta", "Primer::Beta::Breadcrumbs::Item": "alpha", + "Primer::Beta::PageLayout": "beta", + "Primer::Beta::PageLayout::Bookend": "alpha", + "Primer::Beta::PageLayout::Main": "alpha", + "Primer::Beta::PageLayout::Pane": "alpha", + "Primer::Beta::SplitLayout": "beta", + "Primer::Beta::SplitLayout::Main": "alpha", "Primer::Beta::Text": "beta", "Primer::Beta::Truncate": "beta", "Primer::Beta::Truncate::TruncateText": "alpha", From 0fdb1c604343a07157ab5d2dff56433e9f4e2809 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 13:55:11 +0000 Subject: [PATCH 11/97] sync possible values, test default config --- app/components/primer/beta/page_layout.rb | 18 ++++---- .../primer/beta/page_layout_test.rb | 43 +++++++++---------- 2 files changed, 29 insertions(+), 32 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 70f7148d7b..56ffb60efb 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -26,26 +26,23 @@ class PageLayout < Primer::Component }.freeze WRAPPER_SIZING_OPTIONS = WRAPPER_SIZING_MAPPINGS.keys.freeze - OUTER_SPACING_DEFAULT = :none + OUTER_SPACING_DEFAULT = :normal OUTER_SPACING_MAPPINGS = { - OUTER_SPACING_DEFAULT => "", - :normal => "LayoutBeta--outer-spacing-normal", + OUTER_SPACING_DEFAULT => "LayoutBeta--outer-spacing-normal", :condensed => "LayoutBeta--outer-spacing-condensed" }.freeze OUTER_SPACING_OPTIONS = OUTER_SPACING_MAPPINGS.keys.freeze - COLUMN_GAP_DEFAULT = :none + COLUMN_GAP_DEFAULT = :normal COLUMN_GAP_MAPPINGS = { - COLUMN_GAP_DEFAULT => "", - :normal => "LayoutBeta--column-gap-normal", + COLUMN_GAP_DEFAULT => "LayoutBeta--column-gap-normal", :condensed => "LayoutBeta--column-gap-condensed" }.freeze COLUMN_GAP_OPTIONS = COLUMN_GAP_MAPPINGS.keys.freeze - ROW_GAP_DEFAULT = :none + ROW_GAP_DEFAULT = :normal ROW_GAP_MAPPINGS = { - ROW_GAP_DEFAULT => "", - :normal => "LayoutBeta--row-gap-normal", + ROW_GAP_DEFAULT => "LayoutBeta--row-gap-normal", :condensed => "LayoutBeta--row-gap-condensed" }.freeze ROW_GAP_OPTIONS = ROW_GAP_MAPPINGS.keys.freeze @@ -159,7 +156,7 @@ class PageLayout < Primer::Component divider: false, **system_arguments | - + responsive_position = position if responsive_position == PANE_RESPONSIVE_POSITION_DEFAULT # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], @@ -411,6 +408,7 @@ def initialize( ROW_GAP_MAPPINGS[fetch_or_fallback(ROW_GAP_OPTIONS, row_gap, ROW_GAP_DEFAULT)], RESPONSIVE_PRIMARY_REGION_MAPPINGS[fetch_or_fallback(RESPONSIVE_PRIMARY_REGION_OPTIONS, responsive_primary_region, RESPONSIVE_PRIMARY_REGION_DEFAULT)], RESPONSIVE_VARIANT_MAPPINGS[fetch_or_fallback(RESPONSIVE_VARIANT_OPTIONS, responsive_variant, RESPONSIVE_VARIANT_DEFAULT)], + "LayoutBeta--variant-md-multiColumns", system_arguments[:classes] ) end diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index f0de80d2c9..b1965f6276 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -60,28 +60,27 @@ def test_wrapper_sizing end end - # def test_renders_layout_with_correct_default_classes - # render_inline(Primer::Beta::PageLayout.new) do |c| - # c.main { "Main" } - # c.pane { "Pane" } - # end - - # expected_classes = [ - # "LayoutBeta", - # "LayoutBeta--variant-separateRegions", - # "LayoutBeta--variant-md-multiColumns", - # "LayoutBeta--primary-content", - # "LayoutBeta--inner-spacing-normal", - # "LayoutBeta--column-gap-none", - # "LayoutBeta--row-gap-none", - # "LayoutBeta--pane-position-start", - # "LayoutBeta--pane-divider" - # ].join(".") - # assert_selector("div.#{expected_classes}") do - # assert_selector("div.LayoutBeta-content", text: "Main") - # assert_selector("div.LayoutBeta-pane", text: "Pane") - # end - # end + def test_renders_layout_with_correct_default_classes + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + expected_classes = [ + "LayoutBeta", + "LayoutBeta--variant-stackRegions", + "LayoutBeta--variant-md-multiColumns", + "LayoutBeta--outer-spacing-normal", + "LayoutBeta--column-gap-normal", + "LayoutBeta--row-gap-normal", + "LayoutBeta--pane-position-start", + "LayoutBeta--stackRegions-pane-position-start" + ].join(".") + assert_selector("div.#{expected_classes}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end def test_outer_spacing Primer::Beta::PageLayout::OUTER_SPACING_OPTIONS.each do |size| From 190c6f53812bdc50a3dbcdc2231ef3e55082e2a3 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 14:06:14 +0000 Subject: [PATCH 12/97] sync documentation with name changes --- app/components/primer/beta/page_layout.rb | 12 ++++++------ docs/content/components/beta/pagelayout.md | 12 ++++++------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 56ffb60efb..54abe63aa7 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -1,15 +1,15 @@ # frozen_string_literal: true module Primer module Beta - # `Layout` provides foundational patterns for responsive pages. - # `Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. - # On smaller screens, `Layout` uses vertically stacked rows to display content. + # `PageLayout` provides foundational patterns for responsive pages. + # `PageLayout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. + # On smaller screens, `PageLayout` uses vertically stacked rows to display content. # - # `Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane`side-by-side (on a desktop of tablet device, per instance); + # `PageLayout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane`side-by-side (on a desktop of tablet device, per instance); # or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). - # `Layout` should always work in any screen size. + # `PageLayout` should always work in any screen size. # - # `Layout` also provides `Header` and `Footer` slots, which can be used to provide a consistent header and footer across all pages. + # `PageLayout` also provides `Header` and `Footer` slots, which can be used to provide a consistent header and footer across all pages. # # @accessibility # Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md index 18bc3bb7a2..5b8b1e54a6 100644 --- a/docs/content/components/beta/pagelayout.md +++ b/docs/content/components/beta/pagelayout.md @@ -10,15 +10,15 @@ import Example from '../../../src/@primer/gatsby-theme-doctocat/components/examp -`Layout` provides foundational patterns for responsive pages. -`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. - On smaller screens, `Layout` uses vertically stacked rows to display content. +`PageLayout` provides foundational patterns for responsive pages. +`PageLayout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. + On smaller screens, `PageLayout` uses vertically stacked rows to display content. -`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane`side-by-side (on a desktop of tablet device, per instance); +`PageLayout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane`side-by-side (on a desktop of tablet device, per instance); or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). -`Layout` should always work in any screen size. +`PageLayout` should always work in any screen size. -`Layout` also provides `Header` and `Footer` slots, which can be used to provide a consistent header and footer across all pages. +`PageLayout` also provides `Header` and `Footer` slots, which can be used to provide a consistent header and footer across all pages. ## Accessibility From 32b56372600fa868616a7dc3ee81bc52c15cab0a Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 14:24:52 +0000 Subject: [PATCH 13/97] further sync documentation to args --- app/components/primer/beta/page_layout.rb | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 54abe63aa7..57bbe92c57 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -218,15 +218,10 @@ class PageLayout < Primer::Component # @description # Sets wrapper margins surrounding the component to distance itself from the viewport edges. # - # - `:none`` sets the margin to 0. # - `:condensed` keeps the margin at 16px. # - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. # # @code - # <%= render(Primer::Beta::PageLayout.new(outer_spacing: :none)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> - # <% end %> # <%= render(Primer::Beta::PageLayout.new(outer_spacing: :condensed)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> @@ -241,15 +236,10 @@ class PageLayout < Primer::Component # @description # Sets the gap between columns to distance them from each other. # - # - `:none` sets the gap to 0. # - `:condensed` keeps the gap always at 16px. # - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. # # @code - # <%= render(Primer::Beta::PageLayout.new(column_gap: :none)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> - # <% end %> # <%= render(Primer::Beta::PageLayout.new(column_gap: :condensed)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> @@ -264,15 +254,10 @@ class PageLayout < Primer::Component # @description # Sets the gap below the header and above the footer. # - # - `:none` sets the gap to 0. # - `:condensed` keeps the gap always at 16px. # - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. # # @code - # <%= render(Primer::Beta::PageLayout.new(row_gap: :none)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> - # <% end %> # <%= render(Primer::Beta::PageLayout.new(row_gap: :condensed)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> From b8443784e8fbbda04aded7fc3f5929c5bf40964f Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 14:30:40 +0000 Subject: [PATCH 14/97] generate new docs to keep in sync w api --- app/components/primer/beta/split_layout.rb | 12 +++--- docs/content/components/beta/pagelayout.md | 46 ++++++++------------- docs/content/components/beta/splitlayout.md | 12 +++--- static/arguments.yml | 14 +++---- static/classes.yml | 2 + 5 files changed, 36 insertions(+), 50 deletions(-) diff --git a/app/components/primer/beta/split_layout.rb b/app/components/primer/beta/split_layout.rb index 9cef1bb65b..6ae6912b19 100644 --- a/app/components/primer/beta/split_layout.rb +++ b/app/components/primer/beta/split_layout.rb @@ -1,15 +1,13 @@ # frozen_string_literal: true module Primer module Beta - # `Layout` provides foundational patterns for responsive pages. - # `Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. - # On smaller screens, `Layout` uses vertically stacked rows to display content. + # In the `SplitLayout`, changes in the Pane region are reflected in the Content region. This is also known as a "List/Detail" or "Master/Detail" pattern. # - # `Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane`side-by-side (on a desktop of tablet device, per instance); - # or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). - # `Layout` should always work in any screen size. + # On larger screens, the user sees both regions side by side, with the Pane region appearing flushed to the left. # - # `Layout` also provides `Header` and `Footer` slots, which can be used to provide a consistent header and footer across all pages. + # On smaller screens, the user only sees one of pane or content regions at a time. + # Pages may decide if it's more important to show the Pane region or the Content region first by the responsiveLandingRegion property. + # For example, opening "Repository settings" on mobile will have the user land on the Pane region, since in that case showing the menu options first is more important. # # @accessibility # Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md index 5b8b1e54a6..c4f2c3dacf 100644 --- a/docs/content/components/beta/pagelayout.md +++ b/docs/content/components/beta/pagelayout.md @@ -30,9 +30,9 @@ Keyboard navigation follows the markup order. Decide carefully how the focus ord | Name | Type | Default | Description | | :- | :- | :- | :- | | `wrapper_sizing` | `Symbol` | `:fluid` | The size of the container wrapping `Layout`. One of `:fluid`, `:lg`, `:md`, or `:xl`. | -| `outer_spacing` | `Symbol` | `:none` | Sets wrapper margins surrounding the component to distance itself from the viewport edges. One of `:condensed`, `:none`, or `:normal`. | -| `column_gap` | `Symbol` | `:none` | Sets gap between columns. One of `:condensed`, `:none`, or `:normal`. | -| `row_gap` | `Symbol` | `:none` | Sets the gap below the header and above the footer. One of `:condensed`, `:none`, or `:normal`. | +| `outer_spacing` | `Symbol` | `:normal` | Sets wrapper margins surrounding the component to distance itself from the viewport edges. One of `:condensed` and `:normal`. | +| `column_gap` | `Symbol` | `:normal` | Sets gap between columns. One of `:condensed` and `:normal`. | +| `row_gap` | `Symbol` | `:normal` | Sets the gap below the header and above the footer. One of `:condensed` and `:normal`. | | `responsive_variant` | `Symbol` | `:stack_regions` | Defines how the layout component adapts to smaller viewports. `:stack_regions` presents the content in a vertical flow, with pane and content vertically arranged. `:separate_regions` presents pane and content as different pages on smaller viewports. | | `responsive_primary_region` | `Symbol` | `:content` | When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. | | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | @@ -85,7 +85,7 @@ The layout's sidebar. ### Default - + ```erb @@ -97,7 +97,7 @@ The layout's sidebar. ### Header and footer - + ```erb @@ -113,7 +113,7 @@ The layout's sidebar. When `:fluid` the layout will be set to full width. When the other sizing options are used the layout will be centered with corresponding widths. - `:fluid`: full width - `:md`: max-width: 768px - `:lg`: max-width: 1012px - `:xl`: max-width: 1280px - + ```erb <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :fluid)) do |c| %> @@ -136,15 +136,11 @@ When `:fluid` the layout will be set to full width. When the other sizing option ### Outer spacing -Sets wrapper margins surrounding the component to distance itself from the viewport edges. - `:none`` sets the margin to 0. - `:condensed` keeps the margin at 16px. - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. +Sets wrapper margins surrounding the component to distance itself from the viewport edges. - `:condensed` keeps the margin at 16px. - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. - + ```erb -<%= render(Primer::Beta::PageLayout.new(outer_spacing: :none)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> -<% end %> <%= render(Primer::Beta::PageLayout.new(outer_spacing: :condensed)) do |c| %> <% c.main(border: true) { "Main" } %> <% c.pane(border: true) { "Pane" } %> @@ -157,15 +153,11 @@ Sets wrapper margins surrounding the component to distance itself from the viewp ### Column gap -Sets the gap between columns to distance them from each other. - `:none` sets the gap to 0. - `:condensed` keeps the gap always at 16px. - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. +Sets the gap between columns to distance them from each other. - `:condensed` keeps the gap always at 16px. - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. - + ```erb -<%= render(Primer::Beta::PageLayout.new(column_gap: :none)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> -<% end %> <%= render(Primer::Beta::PageLayout.new(column_gap: :condensed)) do |c| %> <% c.main(border: true) { "Main" } %> <% c.pane(border: true) { "Pane" } %> @@ -178,15 +170,11 @@ Sets the gap between columns to distance them from each other. - `:none` sets th ### Row gap -Sets the gap below the header and above the footer. - `:none` sets the gap to 0. - `:condensed` keeps the gap always at 16px. - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. +Sets the gap below the header and above the footer. - `:condensed` keeps the gap always at 16px. - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. - + ```erb -<%= render(Primer::Beta::PageLayout.new(row_gap: :none)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> -<% end %> <%= render(Primer::Beta::PageLayout.new(row_gap: :condensed)) do |c| %> <% c.main(border: true) { "Main" } %> <% c.pane(border: true) { "Pane" } %> @@ -201,7 +189,7 @@ Sets the gap below the header and above the footer. - `:none` sets the gap to 0. Sets the pane width. The width is predetermined according to the breakpoint instead of it being percentage-based. - `default`: - `narrow`: - `wide`: When flowing as a row, `Pane` takes the full width. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> @@ -222,7 +210,7 @@ Sets the pane width. The width is predetermined according to the breakpoint inst Use `start` for sidebars that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> @@ -239,7 +227,7 @@ Use `start` for sidebars that manipulate local navigation, while right-aligned ` Defines the position of the pane in the responsive layout. - `:start` puts the pane above content - `:end` puts it below content. - `:inherit` uses the same value from `pane_position` - + ```erb <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> @@ -260,7 +248,7 @@ Defines the position of the pane in the responsive layout. - `:start` puts the p You can add an optional header to the layout and have spacing and positioning taken care of for you. You can optionally add a divider to the header. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> @@ -279,7 +267,7 @@ You can add an optional header to the layout and have spacing and positioning ta You can add an optional footer to the layout and have spacing and positioning taken care of for you. You can optionally add a divider to the footer. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> diff --git a/docs/content/components/beta/splitlayout.md b/docs/content/components/beta/splitlayout.md index d32b7c618e..ef409042cc 100644 --- a/docs/content/components/beta/splitlayout.md +++ b/docs/content/components/beta/splitlayout.md @@ -10,15 +10,13 @@ import Example from '../../../src/@primer/gatsby-theme-doctocat/components/examp -`Layout` provides foundational patterns for responsive pages. -`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. - On smaller screens, `Layout` uses vertically stacked rows to display content. +In the `SplitLayout`, changes in the Pane region are reflected in the Content region. This is also known as a "List/Detail" or "Master/Detail" pattern. -`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane`side-by-side (on a desktop of tablet device, per instance); -or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). -`Layout` should always work in any screen size. +On larger screens, the user sees both regions side by side, with the Pane region appearing flushed to the left. -`Layout` also provides `Header` and `Footer` slots, which can be used to provide a consistent header and footer across all pages. +On smaller screens, the user only sees one of pane or content regions at a time. +Pages may decide if it's more important to show the Pane region or the Content region first by the responsiveLandingRegion property. +For example, opening "Repository settings" on mobile will have the user land on the Pane region, since in that case showing the menu options first is more important. ## Accessibility diff --git a/static/arguments.yml b/static/arguments.yml index 805bcbadd1..88133b2c12 100644 --- a/static/arguments.yml +++ b/static/arguments.yml @@ -289,18 +289,18 @@ `:md`, or `:xl`. - name: outer_spacing type: Symbol - default: "`:none`" + default: "`:normal`" description: Sets wrapper margins surrounding the component to distance itself - from the viewport edges. One of `:condensed`, `:none`, or `:normal`. + from the viewport edges. One of `:condensed` and `:normal`. - name: column_gap type: Symbol - default: "`:none`" - description: Sets gap between columns. One of `:condensed`, `:none`, or `:normal`. + default: "`:normal`" + description: Sets gap between columns. One of `:condensed` and `:normal`. - name: row_gap type: Symbol - default: "`:none`" - description: Sets the gap below the header and above the footer. One of `:condensed`, - `:none`, or `:normal`. + default: "`:normal`" + description: Sets the gap below the header and above the footer. One of `:condensed` + and `:normal`. - name: responsive_variant type: Symbol default: "`:stack_regions`" diff --git a/static/classes.yml b/static/classes.yml index 5a66f0f44a..f35b1b9e1b 100644 --- a/static/classes.yml +++ b/static/classes.yml @@ -61,6 +61,8 @@ - ".LayoutBeta--row-gap-condensed" - ".LayoutBeta--row-gap-none" - ".LayoutBeta--row-gap-normal" +- ".LayoutBeta--stackRegions-pane-position-end" +- ".LayoutBeta--stackRegions-pane-position-start" - ".LayoutBeta--variant-md-multiColumns" - ".LayoutBeta--variant-separateRegions" - ".LayoutBeta--variant-stackRegions" From 8151329339f48e69afcd0f62e8b4506c1fb7f60c Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Wed, 8 Dec 2021 14:31:40 +0000 Subject: [PATCH 15/97] docs: build docs --- static/constants.json | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/static/constants.json b/static/constants.json index fe93701847..74bf711784 100644 --- a/static/constants.json +++ b/static/constants.json @@ -251,14 +251,12 @@ }, "Primer::Beta::PageLayout": { "Bookend": "Primer::Beta::PageLayout::Bookend", - "COLUMN_GAP_DEFAULT": "none", + "COLUMN_GAP_DEFAULT": "normal", "COLUMN_GAP_MAPPINGS": { - "none": "", "normal": "LayoutBeta--column-gap-normal", "condensed": "LayoutBeta--column-gap-condensed" }, "COLUMN_GAP_OPTIONS": [ - "none", "normal", "condensed" ], @@ -272,14 +270,12 @@ "condensed" ], "Main": "Primer::Beta::PageLayout::Main", - "OUTER_SPACING_DEFAULT": "none", + "OUTER_SPACING_DEFAULT": "normal", "OUTER_SPACING_MAPPINGS": { - "none": "", "normal": "LayoutBeta--outer-spacing-normal", "condensed": "LayoutBeta--outer-spacing-condensed" }, "OUTER_SPACING_OPTIONS": [ - "none", "normal", "condensed" ], @@ -340,14 +336,12 @@ "stack_regions", "separate_regions" ], - "ROW_GAP_DEFAULT": "none", + "ROW_GAP_DEFAULT": "normal", "ROW_GAP_MAPPINGS": { - "none": "", "normal": "LayoutBeta--row-gap-normal", "condensed": "LayoutBeta--row-gap-condensed" }, "ROW_GAP_OPTIONS": [ - "none", "normal", "condensed" ], From 3d2ff3f2eba58afdced240c533d2487e743685c3 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 14:43:08 +0000 Subject: [PATCH 16/97] remove replaced base_layout template --- app/components/primer/beta/base_layout.html.erb | 15 --------------- 1 file changed, 15 deletions(-) delete mode 100644 app/components/primer/beta/base_layout.html.erb diff --git a/app/components/primer/beta/base_layout.html.erb b/app/components/primer/beta/base_layout.html.erb deleted file mode 100644 index c6245dc7f2..0000000000 --- a/app/components/primer/beta/base_layout.html.erb +++ /dev/null @@ -1,15 +0,0 @@ -<%= render Primer::BaseComponent.new(**@system_arguments) do %> - <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-wrapper #{@wrapper_sizing_class}")) do %> - <%= header %> - <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-regions")) do %> - <% if pane.render_first?%> - <%= pane %> - <%= main %> - <% else %> - <%= main %> - <%= pane %> - <% end %> - <% end %> - <%= footer %> - <% end %> -<% end %> \ No newline at end of file From 26f3f86c0726fb422ecb3271f596a617292b43ee Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 14:55:31 +0000 Subject: [PATCH 17/97] remove duplicate test --- test/components/primer/beta/page_layout_test.rb | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index b1965f6276..b502325918 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -223,23 +223,6 @@ def test_pane_responsive_position end end - def test_pane_width - Primer::Beta::PageLayout::PANE_WIDTH_OPTIONS.each do |size| - render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane(width: size) { "Pane" } - end - - width_class = Primer::Beta::PageLayout::PANE_WIDTH_MAPPINGS[size] - assert_selector("div.LayoutBeta") do - assert_selector("div#{width_class.empty? ? '' : ".#{width_class}"}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") - end - end - end - end - def test_main_width Primer::Beta::PageLayout::Main::WIDTH_OPTIONS.each do |width| render_inline(Primer::Beta::PageLayout.new) do |c| From 1094b7f1c55557145c4d259eb48e4a9e5b5cb097 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 15:13:45 +0000 Subject: [PATCH 18/97] test header and footer --- .../primer/beta/page_layout_test.rb | 97 ++++++++++++++++++- 1 file changed, 96 insertions(+), 1 deletion(-) diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index b502325918..f026fe0061 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -126,7 +126,7 @@ def test_row_gap end end end - + def test_responsive_primary_region Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS.each do |region| render_inline(Primer::Beta::PageLayout.new(responsive_primary_region: region)) do |c| @@ -174,6 +174,27 @@ def test_pane_width end end + def test_pane_divider_present_when_set + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane(divider: true) { "Pane" } + end + + assert_selector("div.LayoutBeta.LayoutBeta--pane-divider") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + + def test_pane_divider_absent_when_not_set + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + refute_selector("div.LayoutBeta.LayoutBeta--pane-divider") + end + def test_pane_position_add_correct_class Primer::Beta::PageLayout::Pane::POSITION_OPTIONS.each do |position| render_inline(Primer::Beta::PageLayout.new) do |c| @@ -244,4 +265,78 @@ def test_main_width end end end + + def test_header_divider_present_when_set + render_inline(Primer::Beta::PageLayout.new) do |c| + c.header(divider: true) { "Header" } + c.main { "Main" } + c.pane { "Pane" } + end + + assert_selector("div.LayoutBeta.LayoutBeta--header-divider") + end + + def test_header_divider_not_present_when_not_set + render_inline(Primer::Beta::PageLayout.new) do |c| + c.header { "Header" } + c.main { "Main" } + c.pane { "Pane" } + end + + refute_selector("div.LayoutBeta.LayoutBeta--has-header.LayoutBeta--header-divider") + end + + def test_header_responsive_divider + Primer::Beta::PageLayout::Bookend::RESPONSIVE_DIVIDER_OPTIONS.each do |opt| + render_inline(Primer::Beta::PageLayout.new) do |c| + c.header(responsive_divider: opt) { "Header" } + c.main { "Main" } + c.pane { "Pane" } + end + + divider_class = Primer::Beta::PageLayout::Bookend::RESPONSIVE_DIVIDER_MAPPINGS[opt] + assert_selector("div.LayoutBeta") do + assert_selector("div.LayoutBeta-header#{divider_class.empty? ? '' : ".#{divider_class}"}", text: "Header") + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end + + def test_footer_divider_present_when_set + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane { "Pane" } + c.footer(divider: true) { "Footer" } + end + + assert_selector("div.LayoutBeta.LayoutBeta--has-footer.LayoutBeta--footer-divider") + end + + def test_footer_divider_not_present_when_not_set + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane { "Pane" } + c.footer { "Footer" } + end + + refute_selector("div.LayoutBeta.LayoutBeta--has-footer.LayoutBeta--footer-divider") + end + + def test_footer_responsive_divider + Primer::Beta::PageLayout::Bookend::RESPONSIVE_DIVIDER_OPTIONS.each do |opt| + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane { "Pane" } + c.footer(responsive_divider: opt) { "Footer" } + end + + divider_class = Primer::Beta::PageLayout::Bookend::RESPONSIVE_DIVIDER_MAPPINGS[opt] + assert_selector("div.LayoutBeta") do + assert_selector("div.LayoutBeta-footer#{divider_class.empty? ? '' : ".#{divider_class}"}", text: "Footer") + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end end From 64345e6dbc9d290436f4357662b9c1bcd1b1f947 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 15:22:59 +0000 Subject: [PATCH 19/97] remove unused mappings --- app/components/primer/beta/page_layout.rb | 7 ------- 1 file changed, 7 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 57bbe92c57..9aa0caf331 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -73,13 +73,6 @@ class PageLayout < Primer::Component }.freeze PANE_DIVIDER_OPTIONS = PANE_DIVIDER_MAPPINGS.keys.freeze - INNER_SPACING_DEFAULT = :normal - INNER_SPACING_MAPPINGS = { - normal: "LayoutBeta--inner-spacing-normal", - condensed: "LayoutBeta--inner-spacing-condensed" - }.freeze - INNER_SPACING_OPTIONS = INNER_SPACING_MAPPINGS.keys.freeze - RESPONSIVE_PRIMARY_REGION_DEFAULT = :content RESPONSIVE_PRIMARY_REGION_MAPPINGS = { RESPONSIVE_PRIMARY_REGION_DEFAULT => "LayoutBeta--primary-content", From 3b3331ef0e6a69b577b298e37f839b46e5f1c088 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 15:23:14 +0000 Subject: [PATCH 20/97] test different pane tags --- test/components/primer/beta/page_layout_test.rb | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index f026fe0061..46edbf7673 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -244,6 +244,20 @@ def test_pane_responsive_position end end + def test_pane_tags + Primer::Beta::PageLayout::PANE_TAG_OPTIONS.each do |tag| + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane(tag: tag) { "Pane" } + end + + assert_selector("div.LayoutBeta") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("#{tag}.LayoutBeta-pane", text: "Pane") + end + end + end + def test_main_width Primer::Beta::PageLayout::Main::WIDTH_OPTIONS.each do |width| render_inline(Primer::Beta::PageLayout.new) do |c| From d195b9671f61b94d0914fbc88ef87b0e060fe37a Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Wed, 8 Dec 2021 15:24:11 +0000 Subject: [PATCH 21/97] docs: build docs --- static/constants.json | 9 --------- 1 file changed, 9 deletions(-) diff --git a/static/constants.json b/static/constants.json index 74bf711784..611393dae4 100644 --- a/static/constants.json +++ b/static/constants.json @@ -260,15 +260,6 @@ "normal", "condensed" ], - "INNER_SPACING_DEFAULT": "normal", - "INNER_SPACING_MAPPINGS": { - "normal": "LayoutBeta--inner-spacing-normal", - "condensed": "LayoutBeta--inner-spacing-condensed" - }, - "INNER_SPACING_OPTIONS": [ - "normal", - "condensed" - ], "Main": "Primer::Beta::PageLayout::Main", "OUTER_SPACING_DEFAULT": "normal", "OUTER_SPACING_MAPPINGS": { From d4d5aa714b87b366505ebb2db371aa4f43ba47cd Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 15:28:55 +0000 Subject: [PATCH 22/97] remove duplicate tag options --- app/components/primer/beta/page_layout.rb | 3 --- test/components/primer/beta/page_layout_test.rb | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 9aa0caf331..daa4632abb 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -47,9 +47,6 @@ class PageLayout < Primer::Component }.freeze ROW_GAP_OPTIONS = ROW_GAP_MAPPINGS.keys.freeze - PANE_TAG_DEFAULT = :div - PANE_TAG_OPTIONS = [PANE_TAG_DEFAULT, :aside, :nav, :section].freeze - PANE_WIDTH_DEFAULT = :default PANE_WIDTH_MAPPINGS = { PANE_WIDTH_DEFAULT => "", diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 46edbf7673..cf1c5f97d2 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -245,7 +245,7 @@ def test_pane_responsive_position end def test_pane_tags - Primer::Beta::PageLayout::PANE_TAG_OPTIONS.each do |tag| + Primer::Beta::PageLayout::Pane::TAG_OPTIONS.each do |tag| render_inline(Primer::Beta::PageLayout.new) do |c| c.main { "Main" } c.pane(tag: tag) { "Pane" } From 5fdc2ed98b1d451fba3c9aeb61cc1b34576fe896 Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Wed, 8 Dec 2021 15:30:13 +0000 Subject: [PATCH 23/97] docs: build docs --- static/constants.json | 7 ------- 1 file changed, 7 deletions(-) diff --git a/static/constants.json b/static/constants.json index 611393dae4..897fb5f009 100644 --- a/static/constants.json +++ b/static/constants.json @@ -290,13 +290,6 @@ "start", "end" ], - "PANE_TAG_DEFAULT": "div", - "PANE_TAG_OPTIONS": [ - "div", - "aside", - "nav", - "section" - ], "PANE_WIDTH_DEFAULT": "default", "PANE_WIDTH_MAPPINGS": { "default": "", From 3dfbca511ab05383900df44e604564f1f95d1a06 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 15:39:15 +0000 Subject: [PATCH 24/97] add space between sections --- app/components/primer/beta/split_layout.rb | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/primer/beta/split_layout.rb b/app/components/primer/beta/split_layout.rb index 6ae6912b19..488c4f49b0 100644 --- a/app/components/primer/beta/split_layout.rb +++ b/app/components/primer/beta/split_layout.rb @@ -39,6 +39,7 @@ class SplitLayout < Primer::Component :pane => "LayoutBeta--primary-pane" }.freeze RESPONSIVE_PRIMARY_REGION_OPTIONS = RESPONSIVE_PRIMARY_REGION_MAPPINGS.keys.freeze + # The layout's main content. # # @param width [Symbol] <%= one_of(Primer::Beta::SplitLayout::Main::WIDTH_OPTIONS) %> From 60b99a8e45dd3255c4fc4de92892f8923441a25e Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 15:42:16 +0000 Subject: [PATCH 25/97] test pane tag options on SplitLayout --- test/components/primer/beta/split_layout_test.rb | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/test/components/primer/beta/split_layout_test.rb b/test/components/primer/beta/split_layout_test.rb index 34f5925625..54ef2d61ab 100644 --- a/test/components/primer/beta/split_layout_test.rb +++ b/test/components/primer/beta/split_layout_test.rb @@ -83,6 +83,20 @@ def test_pane_width end end + def test_pane_tags + Primer::Beta::SplitLayout::PANE_TAG_OPTIONS.each do |tag| + render_inline(Primer::Beta::SplitLayout.new) do |c| + c.main { "Main" } + c.pane(tag: tag) { "Pane" } + end + + assert_selector("div.LayoutBeta") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("#{tag}.LayoutBeta-pane", text: "Pane") + end + end + end + def test_main_width Primer::Beta::SplitLayout::Main::WIDTH_OPTIONS.each do |width| render_inline(Primer::Beta::SplitLayout.new) do |c| From 42de455cf87017ece5136b1ce2af2e0647b0bedf Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 17:37:29 +0000 Subject: [PATCH 26/97] add arg documentation to SplitLayout --- app/components/primer/beta/split_layout.rb | 36 ++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/app/components/primer/beta/split_layout.rb b/app/components/primer/beta/split_layout.rb index 488c4f49b0..99da1dfda0 100644 --- a/app/components/primer/beta/split_layout.rb +++ b/app/components/primer/beta/split_layout.rb @@ -83,6 +83,42 @@ class SplitLayout < Primer::Component # <% c.pane(border: true) { "Pane" } %> # <% end %> # + # @example Inner spacing + # + # @description + # Sets padding to regions individually. + # + # - `:condensed` keeps the margin at 16px. + # - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. + # + # @code + # <%= render(Primer::Beta::PageLayout.new(inner_spacing: :condensed)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::PageLayout.new(inner_spacing: :normal)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # + # @example Responsive primary region + # + # @description + # When responsiveVariant is set to separateRegions, defines which region appears first on small viewports. content is default. + # + # - `:content` + # - `:pane` + # + # @code + # <%= render(Primer::Beta::PageLayout.new(resposive_primary_region: :content)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # <%= render(Primer::Beta::PageLayout.new(responsive_primary_region: :pane)) do |c| %> + # <% c.main(border: true) { "Main" } %> + # <% c.pane(border: true) { "Pane" } %> + # <% end %> + # # @example Pane widths # # @description From 14675abe62de7ca51d7753fac5387d6cc48f8c3e Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Wed, 8 Dec 2021 17:38:37 +0000 Subject: [PATCH 27/97] docs: build docs --- docs/content/components/beta/splitlayout.md | 34 +++++++++++++++++++++ static/classes.yml | 1 + 2 files changed, 35 insertions(+) diff --git a/docs/content/components/beta/splitlayout.md b/docs/content/components/beta/splitlayout.md index ef409042cc..ef57dd6c15 100644 --- a/docs/content/components/beta/splitlayout.md +++ b/docs/content/components/beta/splitlayout.md @@ -67,6 +67,40 @@ The layout's sidebar. <% end %> ``` +### Inner spacing + +Sets padding to regions individually. - `:condensed` keeps the margin at 16px. - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. + + + +```erb +<%= render(Primer::Beta::PageLayout.new(inner_spacing: :condensed)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new(inner_spacing: :normal)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +``` + +### Responsive primary region + +When responsiveVariant is set to separateRegions, defines which region appears first on small viewports. content is default. - `:content` - `:pane` + + + +```erb +<%= render(Primer::Beta::PageLayout.new(resposive_primary_region: :content)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +<%= render(Primer::Beta::PageLayout.new(responsive_primary_region: :pane)) do |c| %> + <% c.main(border: true) { "Main" } %> + <% c.pane(border: true) { "Pane" } %> +<% end %> +``` + ### Pane widths Sets the pane width. The width is predetermined according to the breakpoint instead of it being percentage-based. - `default`: - `narrow`: - `wide`: When flowing as a row, `Pane` takes the full width. diff --git a/static/classes.yml b/static/classes.yml index f35b1b9e1b..95bc77bbe5 100644 --- a/static/classes.yml +++ b/static/classes.yml @@ -58,6 +58,7 @@ - ".LayoutBeta--pane-width-narrow" - ".LayoutBeta--pane-width-wide" - ".LayoutBeta--primary-content" +- ".LayoutBeta--primary-pane" - ".LayoutBeta--row-gap-condensed" - ".LayoutBeta--row-gap-none" - ".LayoutBeta--row-gap-normal" From ccb84a00c40e7b753b2dcb438086c7a8406e380c Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 17:59:43 +0000 Subject: [PATCH 28/97] set status for sub components --- app/components/primer/beta/page_layout.rb | 6 ++++++ app/components/primer/beta/split_layout.rb | 2 ++ 2 files changed, 8 insertions(+) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index daa4632abb..45e71ebc22 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -394,6 +394,8 @@ def render? # The layout's main content. class Main < Primer::Component + status :beta + WIDTH_DEFAULT = :fluid WIDTH_OPTIONS = [WIDTH_DEFAULT, :md, :lg, :xl].freeze @@ -432,6 +434,8 @@ def call # The layout's header or footer content. This component is used by the `header` and `footer` slots and configured via those slots. class Bookend < Primer::Component + status :beta + RESPONSIVE_DIVIDER_DEFAULT = :none RESPONSIVE_DIVIDER_MAPPINGS = { RESPONSIVE_DIVIDER_DEFAULT => "", @@ -457,6 +461,8 @@ def call # The layout's pane content. This is a secondary, smaller region that is paired with the `Main` region. class Pane < Primer::Component + status :beta + POSITION_DEFAULT = :start POSITION_MAPPINGS = { POSITION_DEFAULT => "LayoutBeta--pane-position-start", diff --git a/app/components/primer/beta/split_layout.rb b/app/components/primer/beta/split_layout.rb index 99da1dfda0..a03cae4970 100644 --- a/app/components/primer/beta/split_layout.rb +++ b/app/components/primer/beta/split_layout.rb @@ -176,6 +176,8 @@ def render? # The layout's main content. class Main < Primer::Component + status :beta + WIDTH_DEFAULT = :fluid WIDTH_OPTIONS = [WIDTH_DEFAULT, :md, :lg, :xl].freeze From 5b9372a252afcad4841cbca84e90a03191bd2e2c Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 18:00:21 +0000 Subject: [PATCH 29/97] set proper requirements for component testing --- test/components/component_test.rb | 10 ++++++++-- test/components/primer/beta/split_layout_test.rb | 14 ++++++++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/test/components/component_test.rb b/test/components/component_test.rb index b44fd42317..3157f72a9f 100644 --- a/test/components/component_test.rb +++ b/test/components/component_test.rb @@ -7,8 +7,14 @@ class PrimerComponentTest < Minitest::Test # Components with any arguments necessary to make them render COMPONENTS_WITH_ARGS = [ - [Primer::Beta::PageLayout, {}], - [Primer::Beta::SplitLayout, {}], + [Primer::Beta::PageLayout, {}, proc { |component| + component.main(tag: :div) { "Foo" } + component.pane(tag: :div) { "Bar" } + }], + [Primer::Beta::SplitLayout, {}, proc { |component| + component.main(tag: :div) { "Foo" } + component.pane(tag: :div) { "Bar" } + }], [Primer::Alpha::Layout, {}, proc { |component| component.main(tag: :div) { "Foo" } component.sidebar(tag: :div) { "Bar" } diff --git a/test/components/primer/beta/split_layout_test.rb b/test/components/primer/beta/split_layout_test.rb index 54ef2d61ab..a4a0a778d3 100644 --- a/test/components/primer/beta/split_layout_test.rb +++ b/test/components/primer/beta/split_layout_test.rb @@ -118,4 +118,18 @@ def test_main_width end end end + + def test_main_tags + Primer::Beta::SplitLayout::Main::TAG_OPTIONS.each do |tag| + render_inline(Primer::Beta::SplitLayout.new) do |c| + c.main(tag: tag) { "Main" } + c.pane { "Pane" } + end + + assert_selector("div.LayoutBeta") do + assert_selector("#{tag}.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end end From a6d331b741994e6dd302a085c7748af2a8d56bf7 Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Wed, 8 Dec 2021 18:01:28 +0000 Subject: [PATCH 30/97] docs: build docs --- static/statuses.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/static/statuses.json b/static/statuses.json index bb75ccb576..777495ee05 100644 --- a/static/statuses.json +++ b/static/statuses.json @@ -19,11 +19,11 @@ "Primer::Beta::Breadcrumbs": "beta", "Primer::Beta::Breadcrumbs::Item": "alpha", "Primer::Beta::PageLayout": "beta", - "Primer::Beta::PageLayout::Bookend": "alpha", - "Primer::Beta::PageLayout::Main": "alpha", - "Primer::Beta::PageLayout::Pane": "alpha", + "Primer::Beta::PageLayout::Bookend": "beta", + "Primer::Beta::PageLayout::Main": "beta", + "Primer::Beta::PageLayout::Pane": "beta", "Primer::Beta::SplitLayout": "beta", - "Primer::Beta::SplitLayout::Main": "alpha", + "Primer::Beta::SplitLayout::Main": "beta", "Primer::Beta::Text": "beta", "Primer::Beta::Truncate": "beta", "Primer::Beta::Truncate::TruncateText": "alpha", From df442e0e36030fe257fffd7ac4a521ea997d1e45 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 18:06:56 +0000 Subject: [PATCH 31/97] add test for main tags --- .../primer/beta/page_layout_test.rb | 66 +++++++++++-------- 1 file changed, 40 insertions(+), 26 deletions(-) diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index cf1c5f97d2..ab65595af2 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -44,22 +44,6 @@ def test_optionally_renders_header_and_footer end end - def test_wrapper_sizing - Primer::Beta::PageLayout::WRAPPER_SIZING_OPTIONS.each do |size| - render_inline(Primer::Beta::PageLayout.new(wrapper_sizing: size)) do |c| - c.main { "Main" } - c.pane { "Pane" } - end - - assert_selector("div.LayoutBeta") do - assert_selector("div.LayoutBeta-wrapper#{size == :fluid ? '' : ".container-#{size}"}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") - end - end - end - end - def test_renders_layout_with_correct_default_classes render_inline(Primer::Beta::PageLayout.new) do |c| c.main { "Main" } @@ -82,6 +66,22 @@ def test_renders_layout_with_correct_default_classes end end + def test_wrapper_sizing + Primer::Beta::PageLayout::WRAPPER_SIZING_OPTIONS.each do |size| + render_inline(Primer::Beta::PageLayout.new(wrapper_sizing: size)) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + assert_selector("div.LayoutBeta") do + assert_selector("div.LayoutBeta-wrapper#{size == :fluid ? '' : ".container-#{size}"}") do + assert_selector("div.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end + end + def test_outer_spacing Primer::Beta::PageLayout::OUTER_SPACING_OPTIONS.each do |size| render_inline(Primer::Beta::PageLayout.new(outer_spacing: size)) do |c| @@ -127,30 +127,30 @@ def test_row_gap end end - def test_responsive_primary_region - Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS.each do |region| - render_inline(Primer::Beta::PageLayout.new(responsive_primary_region: region)) do |c| + def test_responsive_variant + Primer::Beta::PageLayout::RESPONSIVE_VARIANT_OPTIONS.each do |variant| + render_inline(Primer::Beta::PageLayout.new(responsive_variant: variant)) do |c| c.main { "Main" } c.pane { "Pane" } end - region_class = Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_MAPPINGS[region] - assert_selector("div.LayoutBeta#{region_class.empty? ? '' : ".#{region_class}"}") do + variant_class = Primer::Beta::PageLayout::RESPONSIVE_VARIANT_MAPPINGS[variant] + assert_selector("div.LayoutBeta#{variant_class.empty? ? '' : ".#{variant_class}"}") do assert_selector("div.LayoutBeta-content", text: "Main") assert_selector("div.LayoutBeta-pane", text: "Pane") end end end - def test_responsive_variant - Primer::Beta::PageLayout::RESPONSIVE_VARIANT_OPTIONS.each do |variant| - render_inline(Primer::Beta::PageLayout.new(responsive_variant: variant)) do |c| + def test_responsive_primary_region + Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS.each do |region| + render_inline(Primer::Beta::PageLayout.new(responsive_primary_region: region)) do |c| c.main { "Main" } c.pane { "Pane" } end - variant_class = Primer::Beta::PageLayout::RESPONSIVE_VARIANT_MAPPINGS[variant] - assert_selector("div.LayoutBeta#{variant_class.empty? ? '' : ".#{variant_class}"}") do + region_class = Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_MAPPINGS[region] + assert_selector("div.LayoutBeta#{region_class.empty? ? '' : ".#{region_class}"}") do assert_selector("div.LayoutBeta-content", text: "Main") assert_selector("div.LayoutBeta-pane", text: "Pane") end @@ -280,6 +280,20 @@ def test_main_width end end + def test_main_tags + Primer::Beta::PageLayout::Main::TAG_OPTIONS.each do |tag| + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main(tag: tag) { "Main" } + c.pane { "Pane" } + end + + assert_selector("div.LayoutBeta") do + assert_selector("#{tag}.LayoutBeta-content", text: "Main") + assert_selector("div.LayoutBeta-pane", text: "Pane") + end + end + end + def test_header_divider_present_when_set render_inline(Primer::Beta::PageLayout.new) do |c| c.header(divider: true) { "Header" } From 7a8f1caae171dccf830362364604053334b3d26c Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 18:12:49 +0000 Subject: [PATCH 32/97] fix linting errors --- app/components/primer/beta/page_layout.rb | 3 ++- app/components/primer/beta/split_layout.rb | 10 +++------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 45e71ebc22..4ab97486aa 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -1,4 +1,5 @@ # frozen_string_literal: true + module Primer module Beta # `PageLayout` provides foundational patterns for responsive pages. @@ -153,7 +154,7 @@ class PageLayout < Primer::Component Pane::POSITION_MAPPINGS[fetch_or_fallback(Pane::POSITION_OPTIONS, position, Pane::POSITION_DEFAULT)], PANE_RESPONSIVE_POSITION_MAPPINGS[fetch_or_fallback(PANE_RESPONSIVE_POSITION_OPTIONS, responsive_position, PANE_RESPONSIVE_POSITION_DEFAULT)], PANE_WIDTH_MAPPINGS[fetch_or_fallback(PANE_WIDTH_OPTIONS, width, PANE_WIDTH_DEFAULT)], - { "LayoutBeta--pane-divider" => divider }, + { "LayoutBeta--pane-divider" => divider } ) Pane.new(position: position, **system_arguments) diff --git a/app/components/primer/beta/split_layout.rb b/app/components/primer/beta/split_layout.rb index a03cae4970..deed36e4bc 100644 --- a/app/components/primer/beta/split_layout.rb +++ b/app/components/primer/beta/split_layout.rb @@ -1,4 +1,5 @@ # frozen_string_literal: true + module Primer module Beta # In the `SplitLayout`, changes in the Pane region are reflected in the Content region. This is also known as a "List/Detail" or "Master/Detail" pattern. @@ -52,17 +53,12 @@ class SplitLayout < Primer::Component # @param width [Symbol] <%= one_of(Primer::Beta::SplitLayout::PANE_WIDTH_OPTIONS) %> # @param tag [Symbol] <%= one_of(Primer::Beta::SplitLayout::PANE_TAG_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_one :pane, lambda { | - width: PANE_WIDTH_DEFAULT, - tag: PANE_TAG_DEFAULT, - **system_arguments - | - + renders_one :pane, lambda { |width: PANE_WIDTH_DEFAULT, tag: PANE_TAG_DEFAULT, **system_arguments| @pane_system_arguments = system_arguments @pane_system_arguments[:tag] = fetch_or_fallback(PANE_TAG_OPTIONS, tag, PANE_TAG_DEFAULT) @pane_system_arguments[:classes] = class_names( @pane_system_arguments[:classes], - "LayoutBeta-pane", + "LayoutBeta-pane" ) # These classes have to be set in the parent `Layout` element, so we modify its system arguments. From dd829108d62435dc83258d9d822ff262b404e0ef Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 8 Dec 2021 18:16:13 +0000 Subject: [PATCH 33/97] fix erblinter errors --- app/components/primer/beta/page_layout.html.erb | 4 ++-- app/components/primer/beta/split_layout.html.erb | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/primer/beta/page_layout.html.erb b/app/components/primer/beta/page_layout.html.erb index c6245dc7f2..6ab8a20b6e 100644 --- a/app/components/primer/beta/page_layout.html.erb +++ b/app/components/primer/beta/page_layout.html.erb @@ -2,7 +2,7 @@ <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-wrapper #{@wrapper_sizing_class}")) do %> <%= header %> <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-regions")) do %> - <% if pane.render_first?%> + <% if pane.render_first? %> <%= pane %> <%= main %> <% else %> @@ -12,4 +12,4 @@ <% end %> <%= footer %> <% end %> -<% end %> \ No newline at end of file +<% end %> diff --git a/app/components/primer/beta/split_layout.html.erb b/app/components/primer/beta/split_layout.html.erb index a6d635476a..f6f13e144f 100644 --- a/app/components/primer/beta/split_layout.html.erb +++ b/app/components/primer/beta/split_layout.html.erb @@ -5,4 +5,4 @@ <%= main %> <% end %> <% end %> -<% end %> \ No newline at end of file +<% end %> From 1f6384ae1b22db9f7912485f9619393c1e898e57 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Fri, 10 Dec 2021 13:31:26 +0000 Subject: [PATCH 34/97] move pane consts in Pane --- app/components/primer/beta/page_layout.rb | 60 +++++++++---------- .../primer/beta/page_layout_test.rb | 8 +-- test/components/stories_test.rb | 4 ++ 3 files changed, 38 insertions(+), 34 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 4ab97486aa..258ab8c9d8 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -48,29 +48,6 @@ class PageLayout < Primer::Component }.freeze ROW_GAP_OPTIONS = ROW_GAP_MAPPINGS.keys.freeze - PANE_WIDTH_DEFAULT = :default - PANE_WIDTH_MAPPINGS = { - PANE_WIDTH_DEFAULT => "", - :narrow => "LayoutBeta--pane-width-narrow", - :wide => "LayoutBeta--pane-width-wide" - }.freeze - PANE_WIDTH_OPTIONS = PANE_WIDTH_MAPPINGS.keys.freeze - - PANE_RESPONSIVE_POSITION_DEFAULT = :inherit - PANE_RESPONSIVE_POSITION_MAPPINGS = { - PANE_RESPONSIVE_POSITION_DEFAULT => "", - :start => "LayoutBeta--stackRegions-pane-position-start", - :end => "LayoutBeta--stackRegions-pane-position-end" - }.freeze - PANE_RESPONSIVE_POSITION_OPTIONS = PANE_RESPONSIVE_POSITION_MAPPINGS.keys.freeze - - PANE_DIVIDER_DEFAULT = :start - PANE_DIVIDER_MAPPINGS = { - PANE_DIVIDER_DEFAULT => "LayoutBeta--pane-position-start", - :end => "LayoutBeta--pane-position-start" - }.freeze - PANE_DIVIDER_OPTIONS = PANE_DIVIDER_MAPPINGS.keys.freeze - RESPONSIVE_PRIMARY_REGION_DEFAULT = :content RESPONSIVE_PRIMARY_REGION_MAPPINGS = { RESPONSIVE_PRIMARY_REGION_DEFAULT => "LayoutBeta--primary-content", @@ -135,25 +112,25 @@ class PageLayout < Primer::Component # The layout's sidebar. # - # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::PANE_WIDTH_OPTIONS) %> + # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::Pane::WIDTH_OPTIONS) %> # @param position [Symbol] Pane placement when `Layout` is in column modes. <%= one_of(Primer::Beta::PageLayout::Pane::POSITION_OPTIONS) %> - # @param responsive_position [Symbol] Pane placement when `Layout` is in column modes. <%= one_of(Primer::Beta::PageLayout::PANE_RESPONSIVE_POSITION_OPTIONS) %> + # @param responsive_position [Symbol] Pane placement when `Layout` is in column modes. <%= one_of(Primer::Beta::PageLayout::Pane::RESPONSIVE_POSITION_OPTIONS) %> # @param divider [Boolean] Whether to show a pane line divider. # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> renders_one :pane, lambda { | - width: PANE_WIDTH_DEFAULT, + width: Pane::WIDTH_DEFAULT, position: Pane::POSITION_DEFAULT, - responsive_position: PANE_RESPONSIVE_POSITION_DEFAULT, + responsive_position: Pane::RESPONSIVE_POSITION_DEFAULT, divider: false, **system_arguments | - responsive_position = position if responsive_position == PANE_RESPONSIVE_POSITION_DEFAULT + responsive_position = position if responsive_position == Pane::RESPONSIVE_POSITION_DEFAULT # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], Pane::POSITION_MAPPINGS[fetch_or_fallback(Pane::POSITION_OPTIONS, position, Pane::POSITION_DEFAULT)], - PANE_RESPONSIVE_POSITION_MAPPINGS[fetch_or_fallback(PANE_RESPONSIVE_POSITION_OPTIONS, responsive_position, PANE_RESPONSIVE_POSITION_DEFAULT)], - PANE_WIDTH_MAPPINGS[fetch_or_fallback(PANE_WIDTH_OPTIONS, width, PANE_WIDTH_DEFAULT)], + Pane::RESPONSIVE_POSITION_MAPPINGS[fetch_or_fallback(Pane::RESPONSIVE_POSITION_OPTIONS, responsive_position, Pane::RESPONSIVE_POSITION_DEFAULT)], + Pane::WIDTH_MAPPINGS[fetch_or_fallback(Pane::WIDTH_OPTIONS, width, Pane::WIDTH_DEFAULT)], { "LayoutBeta--pane-divider" => divider } ) @@ -464,6 +441,29 @@ def call class Pane < Primer::Component status :beta + WIDTH_DEFAULT = :default + WIDTH_MAPPINGS = { + WIDTH_DEFAULT => "", + :narrow => "LayoutBeta--pane-width-narrow", + :wide => "LayoutBeta--pane-width-wide" + }.freeze + WIDTH_OPTIONS = WIDTH_MAPPINGS.keys.freeze + + RESPONSIVE_POSITION_DEFAULT = :inherit + RESPONSIVE_POSITION_MAPPINGS = { + RESPONSIVE_POSITION_DEFAULT => "", + :start => "LayoutBeta--stackRegions-pane-position-start", + :end => "LayoutBeta--stackRegions-pane-position-end" + }.freeze + RESPONSIVE_POSITION_OPTIONS = RESPONSIVE_POSITION_MAPPINGS.keys.freeze + + DIVIDER_DEFAULT = :start + DIVIDER_MAPPINGS = { + DIVIDER_DEFAULT => "LayoutBeta--pane-position-start", + :end => "LayoutBeta--pane-position-start" + }.freeze + DIVIDER_OPTIONS = DIVIDER_MAPPINGS.keys.freeze + POSITION_DEFAULT = :start POSITION_MAPPINGS = { POSITION_DEFAULT => "LayoutBeta--pane-position-start", diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index ab65595af2..66479cbb7a 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -158,13 +158,13 @@ def test_responsive_primary_region end def test_pane_width - Primer::Beta::PageLayout::PANE_WIDTH_OPTIONS.each do |size| + Primer::Beta::PageLayout::Pane::WIDTH_OPTIONS.each do |size| render_inline(Primer::Beta::PageLayout.new) do |c| c.main { "Main" } c.pane(width: size) { "Pane" } end - width_class = Primer::Beta::PageLayout::PANE_WIDTH_MAPPINGS[size] + width_class = Primer::Beta::PageLayout::Pane::WIDTH_MAPPINGS[size] assert_selector("div.LayoutBeta") do assert_selector("div#{width_class.empty? ? '' : ".#{width_class}"}") do assert_selector("div.LayoutBeta-content", text: "Main") @@ -230,13 +230,13 @@ def test_pane_position_renders_pane_last end def test_pane_responsive_position - Primer::Beta::PageLayout::PANE_RESPONSIVE_POSITION_OPTIONS.each do |position| + Primer::Beta::PageLayout::Pane::RESPONSIVE_POSITION_OPTIONS.each do |position| render_inline(Primer::Beta::PageLayout.new) do |c| c.main { "Main" } c.pane(responsive_position: position) { "Pane" } end - position_class = Primer::Beta::PageLayout::PANE_RESPONSIVE_POSITION_MAPPINGS[position] + position_class = Primer::Beta::PageLayout::Pane::RESPONSIVE_POSITION_MAPPINGS[position] assert_selector("div.LayoutBeta#{position_class.empty? ? '' : ".#{position_class}"}") do assert_selector("div.LayoutBeta-content", text: "Main") assert_selector("div.LayoutBeta-pane", text: "Pane") diff --git a/test/components/stories_test.rb b/test/components/stories_test.rb index 5c608574bf..770fa63f2f 100644 --- a/test/components/stories_test.rb +++ b/test/components/stories_test.rb @@ -8,6 +8,10 @@ class AllComponentsHaveStoriesTest < Minitest::Test Primer::FlexItemComponent, Primer::OcticonSymbolsComponent, Primer::Beta::Breadcrumbs::Item, + Primer::Beta::SplitLayout::Main, + Primer::Beta::PageLayout::Pane, + Primer::Beta::PageLayout::Bookend, + Primer::Beta::PageLayout::Main, Primer::Alpha::Layout::Main, Primer::Alpha::Layout::Sidebar ].freeze From cb132ca848b2b89ec47997f49ba265df3e48d3af Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Fri, 10 Dec 2021 13:32:33 +0000 Subject: [PATCH 35/97] docs: build docs --- static/constants.json | 62 +++++++++++++++++++++---------------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/static/constants.json b/static/constants.json index 897fb5f009..596b587477 100644 --- a/static/constants.json +++ b/static/constants.json @@ -270,37 +270,6 @@ "normal", "condensed" ], - "PANE_DIVIDER_DEFAULT": "start", - "PANE_DIVIDER_MAPPINGS": { - "start": "LayoutBeta--pane-position-start", - "end": "LayoutBeta--pane-position-start" - }, - "PANE_DIVIDER_OPTIONS": [ - "start", - "end" - ], - "PANE_RESPONSIVE_POSITION_DEFAULT": "inherit", - "PANE_RESPONSIVE_POSITION_MAPPINGS": { - "inherit": "", - "start": "LayoutBeta--stackRegions-pane-position-start", - "end": "LayoutBeta--stackRegions-pane-position-end" - }, - "PANE_RESPONSIVE_POSITION_OPTIONS": [ - "inherit", - "start", - "end" - ], - "PANE_WIDTH_DEFAULT": "default", - "PANE_WIDTH_MAPPINGS": { - "default": "", - "narrow": "LayoutBeta--pane-width-narrow", - "wide": "LayoutBeta--pane-width-wide" - }, - "PANE_WIDTH_OPTIONS": [ - "default", - "narrow", - "wide" - ], "Pane": "Primer::Beta::PageLayout::Pane", "RESPONSIVE_PRIMARY_REGION_DEFAULT": "content", "RESPONSIVE_PRIMARY_REGION_MAPPINGS": { @@ -371,6 +340,15 @@ ] }, "Primer::Beta::PageLayout::Pane": { + "DIVIDER_DEFAULT": "start", + "DIVIDER_MAPPINGS": { + "start": "LayoutBeta--pane-position-start", + "end": "LayoutBeta--pane-position-start" + }, + "DIVIDER_OPTIONS": [ + "start", + "end" + ], "POSITION_DEFAULT": "start", "POSITION_MAPPINGS": { "start": "LayoutBeta--pane-position-start", @@ -391,12 +369,34 @@ "line", "filled" ], + "RESPONSIVE_POSITION_DEFAULT": "inherit", + "RESPONSIVE_POSITION_MAPPINGS": { + "inherit": "", + "start": "LayoutBeta--stackRegions-pane-position-start", + "end": "LayoutBeta--stackRegions-pane-position-end" + }, + "RESPONSIVE_POSITION_OPTIONS": [ + "inherit", + "start", + "end" + ], "TAG_DEFAULT": "div", "TAG_OPTIONS": [ "div", "aside", "nav", "section" + ], + "WIDTH_DEFAULT": "default", + "WIDTH_MAPPINGS": { + "default": "", + "narrow": "LayoutBeta--pane-width-narrow", + "wide": "LayoutBeta--pane-width-wide" + }, + "WIDTH_OPTIONS": [ + "default", + "narrow", + "wide" ] }, "Primer::Beta::SplitLayout": { From 4d741ef69c39112d6316036aa9df642ce1677abc Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Fri, 10 Dec 2021 13:46:55 +0000 Subject: [PATCH 36/97] use updated css class name --- .../primer/beta/page_layout.html.erb | 4 +- app/components/primer/beta/page_layout.rb | 70 ++++---- .../primer/beta/page_layout_test.rb | 150 +++++++++--------- 3 files changed, 112 insertions(+), 112 deletions(-) diff --git a/app/components/primer/beta/page_layout.html.erb b/app/components/primer/beta/page_layout.html.erb index 6ab8a20b6e..22fee653f3 100644 --- a/app/components/primer/beta/page_layout.html.erb +++ b/app/components/primer/beta/page_layout.html.erb @@ -1,7 +1,7 @@ <%= render Primer::BaseComponent.new(**@system_arguments) do %> - <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-wrapper #{@wrapper_sizing_class}")) do %> + <%= render(Primer::BaseComponent.new(tag: :div, classes: "PageLayout-wrapper #{@wrapper_sizing_class}")) do %> <%= header %> - <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-regions")) do %> + <%= render(Primer::BaseComponent.new(tag: :div, classes: "PageLayout-regions")) do %> <% if pane.render_first? %> <%= pane %> <%= main %> diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 258ab8c9d8..302d745db3 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -29,36 +29,36 @@ class PageLayout < Primer::Component OUTER_SPACING_DEFAULT = :normal OUTER_SPACING_MAPPINGS = { - OUTER_SPACING_DEFAULT => "LayoutBeta--outer-spacing-normal", - :condensed => "LayoutBeta--outer-spacing-condensed" + OUTER_SPACING_DEFAULT => "PageLayout--outer-spacing-normal", + :condensed => "PageLayout--outer-spacing-condensed" }.freeze OUTER_SPACING_OPTIONS = OUTER_SPACING_MAPPINGS.keys.freeze COLUMN_GAP_DEFAULT = :normal COLUMN_GAP_MAPPINGS = { - COLUMN_GAP_DEFAULT => "LayoutBeta--column-gap-normal", - :condensed => "LayoutBeta--column-gap-condensed" + COLUMN_GAP_DEFAULT => "PageLayout--column-gap-normal", + :condensed => "PageLayout--column-gap-condensed" }.freeze COLUMN_GAP_OPTIONS = COLUMN_GAP_MAPPINGS.keys.freeze ROW_GAP_DEFAULT = :normal ROW_GAP_MAPPINGS = { - ROW_GAP_DEFAULT => "LayoutBeta--row-gap-normal", - :condensed => "LayoutBeta--row-gap-condensed" + ROW_GAP_DEFAULT => "PageLayout--row-gap-normal", + :condensed => "PageLayout--row-gap-condensed" }.freeze ROW_GAP_OPTIONS = ROW_GAP_MAPPINGS.keys.freeze RESPONSIVE_PRIMARY_REGION_DEFAULT = :content RESPONSIVE_PRIMARY_REGION_MAPPINGS = { - RESPONSIVE_PRIMARY_REGION_DEFAULT => "LayoutBeta--primary-content", - :pane => "LayoutBeta--primary-pane" + RESPONSIVE_PRIMARY_REGION_DEFAULT => "PageLayout--primary-content", + :pane => "PageLayout--primary-pane" }.freeze RESPONSIVE_PRIMARY_REGION_OPTIONS = RESPONSIVE_PRIMARY_REGION_MAPPINGS.keys.freeze RESPONSIVE_VARIANT_DEFAULT = :stack_regions RESPONSIVE_VARIANT_MAPPINGS = { - RESPONSIVE_VARIANT_DEFAULT => "LayoutBeta--variant-stackRegions", - :separate_regions => "LayoutBeta--variant-separateRegions" + RESPONSIVE_VARIANT_DEFAULT => "PageLayout--variant-stackRegions", + :separate_regions => "PageLayout--variant-separateRegions" }.freeze RESPONSIVE_VARIANT_OPTIONS = RESPONSIVE_VARIANT_MAPPINGS.keys.freeze @@ -78,12 +78,12 @@ class PageLayout < Primer::Component # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], - "LayoutBeta--header-divider" => divider + "PageLayout--header-divider" => divider ) header_system_arguments[:classes] = class_names( header_system_arguments[:classes], - "LayoutBeta-header" + "PageLayout-header" ) Bookend.new(divider: divider, **header_system_arguments) @@ -98,13 +98,13 @@ class PageLayout < Primer::Component # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], - "LayoutBeta--has-footer", - "LayoutBeta--footer-divider" => divider + "PageLayout--has-footer", + "PageLayout--footer-divider" => divider ) footer_system_arguments[:classes] = class_names( footer_system_arguments[:classes], - "LayoutBeta-footer" + "PageLayout-footer" ) Bookend.new(divider: divider, **footer_system_arguments) @@ -131,7 +131,7 @@ class PageLayout < Primer::Component Pane::POSITION_MAPPINGS[fetch_or_fallback(Pane::POSITION_OPTIONS, position, Pane::POSITION_DEFAULT)], Pane::RESPONSIVE_POSITION_MAPPINGS[fetch_or_fallback(Pane::RESPONSIVE_POSITION_OPTIONS, responsive_position, Pane::RESPONSIVE_POSITION_DEFAULT)], Pane::WIDTH_MAPPINGS[fetch_or_fallback(Pane::WIDTH_OPTIONS, width, Pane::WIDTH_DEFAULT)], - { "LayoutBeta--pane-divider" => divider } + { "PageLayout--pane-divider" => divider } ) Pane.new(position: position, **system_arguments) @@ -355,13 +355,13 @@ def initialize( @system_arguments = system_arguments @system_arguments[:tag] = :div @system_arguments[:classes] = class_names( - "LayoutBeta", + "PageLayout", OUTER_SPACING_MAPPINGS[fetch_or_fallback(OUTER_SPACING_OPTIONS, outer_spacing, OUTER_SPACING_DEFAULT)], COLUMN_GAP_MAPPINGS[fetch_or_fallback(COLUMN_GAP_OPTIONS, column_gap, COLUMN_GAP_DEFAULT)], ROW_GAP_MAPPINGS[fetch_or_fallback(ROW_GAP_OPTIONS, row_gap, ROW_GAP_DEFAULT)], RESPONSIVE_PRIMARY_REGION_MAPPINGS[fetch_or_fallback(RESPONSIVE_PRIMARY_REGION_OPTIONS, responsive_primary_region, RESPONSIVE_PRIMARY_REGION_DEFAULT)], RESPONSIVE_VARIANT_MAPPINGS[fetch_or_fallback(RESPONSIVE_VARIANT_OPTIONS, responsive_variant, RESPONSIVE_VARIANT_DEFAULT)], - "LayoutBeta--variant-md-multiColumns", + "PageLayout--variant-md-multiColumns", system_arguments[:classes] ) end @@ -389,8 +389,8 @@ def initialize(tag: TAG_DEFAULT, width: WIDTH_DEFAULT, **system_arguments) @system_arguments = system_arguments @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT) @system_arguments[:classes] = class_names( - "LayoutBeta-region", - "LayoutBeta-content", + "PageLayout-region", + "PageLayout-content", system_arguments[:classes] ) end @@ -400,7 +400,7 @@ def call if @width == :fluid content else - render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-content-centered-#{@width}")) do + render(Primer::BaseComponent.new(tag: :div, classes: "PageLayout-content-centered-#{@width}")) do render(Primer::BaseComponent.new(tag: :div, container: @width)) do content end @@ -417,8 +417,8 @@ class Bookend < Primer::Component RESPONSIVE_DIVIDER_DEFAULT = :none RESPONSIVE_DIVIDER_MAPPINGS = { RESPONSIVE_DIVIDER_DEFAULT => "", - :line => "LayoutBeta--divider-after", - :filled => "LayoutBeta--divider-after-filled" + :line => "PageLayout--divider-after", + :filled => "PageLayout--divider-after-filled" }.freeze RESPONSIVE_DIVIDER_OPTIONS = RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze @@ -444,38 +444,38 @@ class Pane < Primer::Component WIDTH_DEFAULT = :default WIDTH_MAPPINGS = { WIDTH_DEFAULT => "", - :narrow => "LayoutBeta--pane-width-narrow", - :wide => "LayoutBeta--pane-width-wide" + :narrow => "PageLayout--pane-width-narrow", + :wide => "PageLayout--pane-width-wide" }.freeze WIDTH_OPTIONS = WIDTH_MAPPINGS.keys.freeze RESPONSIVE_POSITION_DEFAULT = :inherit RESPONSIVE_POSITION_MAPPINGS = { RESPONSIVE_POSITION_DEFAULT => "", - :start => "LayoutBeta--stackRegions-pane-position-start", - :end => "LayoutBeta--stackRegions-pane-position-end" + :start => "PageLayout--stackRegions-pane-position-start", + :end => "PageLayout--stackRegions-pane-position-end" }.freeze RESPONSIVE_POSITION_OPTIONS = RESPONSIVE_POSITION_MAPPINGS.keys.freeze DIVIDER_DEFAULT = :start DIVIDER_MAPPINGS = { - DIVIDER_DEFAULT => "LayoutBeta--pane-position-start", - :end => "LayoutBeta--pane-position-start" + DIVIDER_DEFAULT => "PageLayout--pane-position-start", + :end => "PageLayout--pane-position-start" }.freeze DIVIDER_OPTIONS = DIVIDER_MAPPINGS.keys.freeze POSITION_DEFAULT = :start POSITION_MAPPINGS = { - POSITION_DEFAULT => "LayoutBeta--pane-position-start", - :end => "LayoutBeta--pane-position-end" + POSITION_DEFAULT => "PageLayout--pane-position-start", + :end => "PageLayout--pane-position-end" }.freeze POSITION_OPTIONS = POSITION_MAPPINGS.keys.freeze RESPONSIVE_DIVIDER_DEFAULT = :none RESPONSIVE_DIVIDER_MAPPINGS = { RESPONSIVE_DIVIDER_DEFAULT => "", - :line => "LayoutBeta--divider-after", - :filled => "LayoutBeta--divider-after-filled" + :line => "PageLayout--divider-after", + :filled => "PageLayout--divider-after-filled" }.freeze RESPONSIVE_DIVIDER_OPTIONS = RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze @@ -489,8 +489,8 @@ def initialize(responsive_divider: RESPONSIVE_DIVIDER_DEFAULT, position: POSITIO @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT) @system_arguments[:classes] = class_names( - "LayoutBeta-region", - "LayoutBeta-pane", + "PageLayout-region", + "PageLayout-pane", RESPONSIVE_DIVIDER_MAPPINGS[fetch_or_fallback(RESPONSIVE_DIVIDER_OPTIONS, responsive_divider, RESPONSIVE_DIVIDER_DEFAULT)], @system_arguments[:classes] ) diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 66479cbb7a..80b10c58ed 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -22,9 +22,9 @@ def test_renders_layout c.pane { "Pane" } end - assert_selector("div.LayoutBeta") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -36,11 +36,11 @@ def test_optionally_renders_header_and_footer c.footer { "Footer" } end - assert_selector("div.LayoutBeta") do - assert_selector("div.LayoutBeta-header", text: "Header") - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") - assert_selector("div.LayoutBeta-footer", text: "Footer") + assert_selector("div.PageLayout") do + assert_selector("div.PageLayout-header", text: "Header") + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") + assert_selector("div.PageLayout-footer", text: "Footer") end end @@ -51,18 +51,18 @@ def test_renders_layout_with_correct_default_classes end expected_classes = [ - "LayoutBeta", - "LayoutBeta--variant-stackRegions", - "LayoutBeta--variant-md-multiColumns", - "LayoutBeta--outer-spacing-normal", - "LayoutBeta--column-gap-normal", - "LayoutBeta--row-gap-normal", - "LayoutBeta--pane-position-start", - "LayoutBeta--stackRegions-pane-position-start" + "PageLayout", + "PageLayout--variant-stackRegions", + "PageLayout--variant-md-multiColumns", + "PageLayout--outer-spacing-normal", + "PageLayout--column-gap-normal", + "PageLayout--row-gap-normal", + "PageLayout--pane-position-start", + "PageLayout--stackRegions-pane-position-start" ].join(".") assert_selector("div.#{expected_classes}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -73,10 +73,10 @@ def test_wrapper_sizing c.pane { "Pane" } end - assert_selector("div.LayoutBeta") do - assert_selector("div.LayoutBeta-wrapper#{size == :fluid ? '' : ".container-#{size}"}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout") do + assert_selector("div.PageLayout-wrapper#{size == :fluid ? '' : ".container-#{size}"}") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -90,9 +90,9 @@ def test_outer_spacing end size_class = Primer::Beta::PageLayout::OUTER_SPACING_MAPPINGS[size] - assert_selector("div.LayoutBeta#{size_class.empty? ? '' : ".#{size_class}"}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout#{size_class.empty? ? '' : ".#{size_class}"}") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -105,9 +105,9 @@ def test_column_gap end size_class = Primer::Beta::PageLayout::COLUMN_GAP_MAPPINGS[size] - assert_selector("div.LayoutBeta#{size_class.empty? ? '' : ".#{size_class}"}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout#{size_class.empty? ? '' : ".#{size_class}"}") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -120,9 +120,9 @@ def test_row_gap end size_class = Primer::Beta::PageLayout::ROW_GAP_MAPPINGS[size] - assert_selector("div.LayoutBeta#{size_class.empty? ? '' : ".#{size_class}"}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout#{size_class.empty? ? '' : ".#{size_class}"}") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -135,9 +135,9 @@ def test_responsive_variant end variant_class = Primer::Beta::PageLayout::RESPONSIVE_VARIANT_MAPPINGS[variant] - assert_selector("div.LayoutBeta#{variant_class.empty? ? '' : ".#{variant_class}"}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout#{variant_class.empty? ? '' : ".#{variant_class}"}") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -150,9 +150,9 @@ def test_responsive_primary_region end region_class = Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_MAPPINGS[region] - assert_selector("div.LayoutBeta#{region_class.empty? ? '' : ".#{region_class}"}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout#{region_class.empty? ? '' : ".#{region_class}"}") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -165,10 +165,10 @@ def test_pane_width end width_class = Primer::Beta::PageLayout::Pane::WIDTH_MAPPINGS[size] - assert_selector("div.LayoutBeta") do + assert_selector("div.PageLayout") do assert_selector("div#{width_class.empty? ? '' : ".#{width_class}"}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -180,9 +180,9 @@ def test_pane_divider_present_when_set c.pane(divider: true) { "Pane" } end - assert_selector("div.LayoutBeta.LayoutBeta--pane-divider") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout.PageLayout--pane-divider") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -192,7 +192,7 @@ def test_pane_divider_absent_when_not_set c.pane { "Pane" } end - refute_selector("div.LayoutBeta.LayoutBeta--pane-divider") + refute_selector("div.PageLayout.PageLayout--pane-divider") end def test_pane_position_add_correct_class @@ -202,10 +202,10 @@ def test_pane_position_add_correct_class c.pane(position: position) { "Pane" } end - assert_selector("div.LayoutBeta") do - assert_selector("div.LayoutBeta--pane-position-#{position}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout") do + assert_selector("div.PageLayout--pane-position-#{position}") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -217,7 +217,7 @@ def test_pane_position_renders_pane_first c.pane(position: :start) { "Pane" } end - assert_match(/LayoutBeta-pane.*LayoutBeta-content/m, @rendered_component) + assert_match(/PageLayout-pane.*PageLayout-content/m, @rendered_component) end def test_pane_position_renders_pane_last @@ -226,7 +226,7 @@ def test_pane_position_renders_pane_last c.pane(position: :end) { "Pane" } end - assert_match(/LayoutBeta-content.*LayoutBeta-pane/m, @rendered_component) + assert_match(/PageLayout-content.*PageLayout-pane/m, @rendered_component) end def test_pane_responsive_position @@ -237,9 +237,9 @@ def test_pane_responsive_position end position_class = Primer::Beta::PageLayout::Pane::RESPONSIVE_POSITION_MAPPINGS[position] - assert_selector("div.LayoutBeta#{position_class.empty? ? '' : ".#{position_class}"}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout#{position_class.empty? ? '' : ".#{position_class}"}") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -251,9 +251,9 @@ def test_pane_tags c.pane(tag: tag) { "Pane" } end - assert_selector("div.LayoutBeta") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("#{tag}.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("#{tag}.PageLayout-pane", text: "Pane") end end end @@ -265,17 +265,17 @@ def test_main_width c.pane { "Pane" } end - assert_selector("div.LayoutBeta-regions") do - assert_selector("div.LayoutBeta-content") do + assert_selector("div.PageLayout-regions") do + assert_selector("div.PageLayout-content") do if width == :fluid assert_text("Main") else - assert_selector("div.LayoutBeta-content-centered-#{width}") do + assert_selector("div.PageLayout-content-centered-#{width}") do assert_selector("div.container-#{width}", text: "Main") end end end - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -287,9 +287,9 @@ def test_main_tags c.pane { "Pane" } end - assert_selector("div.LayoutBeta") do - assert_selector("#{tag}.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout") do + assert_selector("#{tag}.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -301,7 +301,7 @@ def test_header_divider_present_when_set c.pane { "Pane" } end - assert_selector("div.LayoutBeta.LayoutBeta--header-divider") + assert_selector("div.PageLayout.PageLayout--header-divider") end def test_header_divider_not_present_when_not_set @@ -311,7 +311,7 @@ def test_header_divider_not_present_when_not_set c.pane { "Pane" } end - refute_selector("div.LayoutBeta.LayoutBeta--has-header.LayoutBeta--header-divider") + refute_selector("div.PageLayout.PageLayout--has-header.PageLayout--header-divider") end def test_header_responsive_divider @@ -323,10 +323,10 @@ def test_header_responsive_divider end divider_class = Primer::Beta::PageLayout::Bookend::RESPONSIVE_DIVIDER_MAPPINGS[opt] - assert_selector("div.LayoutBeta") do - assert_selector("div.LayoutBeta-header#{divider_class.empty? ? '' : ".#{divider_class}"}", text: "Header") - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout") do + assert_selector("div.PageLayout-header#{divider_class.empty? ? '' : ".#{divider_class}"}", text: "Header") + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -338,7 +338,7 @@ def test_footer_divider_present_when_set c.footer(divider: true) { "Footer" } end - assert_selector("div.LayoutBeta.LayoutBeta--has-footer.LayoutBeta--footer-divider") + assert_selector("div.PageLayout.PageLayout--has-footer.PageLayout--footer-divider") end def test_footer_divider_not_present_when_not_set @@ -348,7 +348,7 @@ def test_footer_divider_not_present_when_not_set c.footer { "Footer" } end - refute_selector("div.LayoutBeta.LayoutBeta--has-footer.LayoutBeta--footer-divider") + refute_selector("div.PageLayout.PageLayout--has-footer.PageLayout--footer-divider") end def test_footer_responsive_divider @@ -360,10 +360,10 @@ def test_footer_responsive_divider end divider_class = Primer::Beta::PageLayout::Bookend::RESPONSIVE_DIVIDER_MAPPINGS[opt] - assert_selector("div.LayoutBeta") do - assert_selector("div.LayoutBeta-footer#{divider_class.empty? ? '' : ".#{divider_class}"}", text: "Footer") - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout") do + assert_selector("div.PageLayout-footer#{divider_class.empty? ? '' : ".#{divider_class}"}", text: "Footer") + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end From e79a67b5a39b0bc2dfc57f1246ee4bf1b61e50f2 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Fri, 10 Dec 2021 13:50:50 +0000 Subject: [PATCH 37/97] use latest CSS classes --- app/components/primer/beta/page_layout.rb | 12 ++++++------ test/components/primer/beta/page_layout_test.rb | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 302d745db3..3f8d5efb7a 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -29,22 +29,22 @@ class PageLayout < Primer::Component OUTER_SPACING_DEFAULT = :normal OUTER_SPACING_MAPPINGS = { - OUTER_SPACING_DEFAULT => "PageLayout--outer-spacing-normal", - :condensed => "PageLayout--outer-spacing-condensed" + OUTER_SPACING_DEFAULT => "PageLayout--outerSpacing-normal", + :condensed => "PageLayout--outerSpacing-condensed" }.freeze OUTER_SPACING_OPTIONS = OUTER_SPACING_MAPPINGS.keys.freeze COLUMN_GAP_DEFAULT = :normal COLUMN_GAP_MAPPINGS = { - COLUMN_GAP_DEFAULT => "PageLayout--column-gap-normal", - :condensed => "PageLayout--column-gap-condensed" + COLUMN_GAP_DEFAULT => "PageLayout--columnGap-normal", + :condensed => "PageLayout--columnGap-condensed" }.freeze COLUMN_GAP_OPTIONS = COLUMN_GAP_MAPPINGS.keys.freeze ROW_GAP_DEFAULT = :normal ROW_GAP_MAPPINGS = { - ROW_GAP_DEFAULT => "PageLayout--row-gap-normal", - :condensed => "PageLayout--row-gap-condensed" + ROW_GAP_DEFAULT => "PageLayout--rowGap-normal", + :condensed => "PageLayout--rowGap-condensed" }.freeze ROW_GAP_OPTIONS = ROW_GAP_MAPPINGS.keys.freeze diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 80b10c58ed..e81e548666 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -54,9 +54,9 @@ def test_renders_layout_with_correct_default_classes "PageLayout", "PageLayout--variant-stackRegions", "PageLayout--variant-md-multiColumns", - "PageLayout--outer-spacing-normal", - "PageLayout--column-gap-normal", - "PageLayout--row-gap-normal", + "PageLayout--outerSpacing-normal", + "PageLayout--columnGap-normal", + "PageLayout--rowGap-normal", "PageLayout--pane-position-start", "PageLayout--stackRegions-pane-position-start" ].join(".") From 976bb89d6c874bb80c5b5f87149ebb84e7fd7ab4 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Fri, 10 Dec 2021 15:16:06 +0000 Subject: [PATCH 38/97] update pane positioning to new spec --- app/components/primer/beta/page_layout.rb | 29 +++++++----- .../primer/beta/page_layout_test.rb | 44 +++++++++++++++++-- 2 files changed, 59 insertions(+), 14 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 3f8d5efb7a..a3ec334888 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -50,8 +50,8 @@ class PageLayout < Primer::Component RESPONSIVE_PRIMARY_REGION_DEFAULT = :content RESPONSIVE_PRIMARY_REGION_MAPPINGS = { - RESPONSIVE_PRIMARY_REGION_DEFAULT => "PageLayout--primary-content", - :pane => "PageLayout--primary-pane" + RESPONSIVE_PRIMARY_REGION_DEFAULT => "PageLayout--variant-separateRegions-primary-pane", + :pane => "PageLayout--variant-separateRegions-primary-pane" }.freeze RESPONSIVE_PRIMARY_REGION_OPTIONS = RESPONSIVE_PRIMARY_REGION_MAPPINGS.keys.freeze @@ -62,6 +62,13 @@ class PageLayout < Primer::Component }.freeze RESPONSIVE_VARIANT_OPTIONS = RESPONSIVE_VARIANT_MAPPINGS.keys.freeze + STACK_REGIONS_PANE_POSITION_DEFAULT = :start + STACK_REGIONS_PANE_POSITION_MAPPINGS = { + STACK_REGIONS_PANE_POSITION_DEFAULT => "PageLayout--variant-stackRegions-panePos-start", + :end => "PageLayout--variant-stackRegions-panePos-end" + }.freeze + STACK_REGIONS_PANE_POSITION_OPTIONS = STACK_REGIONS_PANE_POSITION_MAPPINGS.keys.freeze + # The layout's main content. # # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::Main::WIDTH_OPTIONS) %> @@ -131,6 +138,7 @@ class PageLayout < Primer::Component Pane::POSITION_MAPPINGS[fetch_or_fallback(Pane::POSITION_OPTIONS, position, Pane::POSITION_DEFAULT)], Pane::RESPONSIVE_POSITION_MAPPINGS[fetch_or_fallback(Pane::RESPONSIVE_POSITION_OPTIONS, responsive_position, Pane::RESPONSIVE_POSITION_DEFAULT)], Pane::WIDTH_MAPPINGS[fetch_or_fallback(Pane::WIDTH_OPTIONS, width, Pane::WIDTH_DEFAULT)], + { STACK_REGIONS_PANE_POSITION_MAPPINGS[fetch_or_fallback(STACK_REGIONS_PANE_POSITION_OPTIONS, position, STACK_REGIONS_PANE_POSITION_DEFAULT)] => @responsive_variant == :stack_regions }, { "PageLayout--pane-divider" => divider } ) @@ -352,6 +360,7 @@ def initialize( ) @wrapper_sizing_class = WRAPPER_SIZING_MAPPINGS[fetch_or_fallback(WRAPPER_SIZING_OPTIONS, wrapper_sizing, WRAPPER_SIZING_DEFAULT)] + @responsive_variant = responsive_variant @system_arguments = system_arguments @system_arguments[:tag] = :div @system_arguments[:classes] = class_names( @@ -359,8 +368,8 @@ def initialize( OUTER_SPACING_MAPPINGS[fetch_or_fallback(OUTER_SPACING_OPTIONS, outer_spacing, OUTER_SPACING_DEFAULT)], COLUMN_GAP_MAPPINGS[fetch_or_fallback(COLUMN_GAP_OPTIONS, column_gap, COLUMN_GAP_DEFAULT)], ROW_GAP_MAPPINGS[fetch_or_fallback(ROW_GAP_OPTIONS, row_gap, ROW_GAP_DEFAULT)], - RESPONSIVE_PRIMARY_REGION_MAPPINGS[fetch_or_fallback(RESPONSIVE_PRIMARY_REGION_OPTIONS, responsive_primary_region, RESPONSIVE_PRIMARY_REGION_DEFAULT)], - RESPONSIVE_VARIANT_MAPPINGS[fetch_or_fallback(RESPONSIVE_VARIANT_OPTIONS, responsive_variant, RESPONSIVE_VARIANT_DEFAULT)], + RESPONSIVE_VARIANT_MAPPINGS[fetch_or_fallback(RESPONSIVE_VARIANT_OPTIONS, @responsive_variant, RESPONSIVE_VARIANT_DEFAULT)], + { RESPONSIVE_PRIMARY_REGION_MAPPINGS[fetch_or_fallback(RESPONSIVE_PRIMARY_REGION_OPTIONS, responsive_primary_region, RESPONSIVE_PRIMARY_REGION_DEFAULT)] => @responsive_variant == :separate_regions }, "PageLayout--variant-md-multiColumns", system_arguments[:classes] ) @@ -452,22 +461,22 @@ class Pane < Primer::Component RESPONSIVE_POSITION_DEFAULT = :inherit RESPONSIVE_POSITION_MAPPINGS = { RESPONSIVE_POSITION_DEFAULT => "", - :start => "PageLayout--stackRegions-pane-position-start", - :end => "PageLayout--stackRegions-pane-position-end" + :start => "PageLayout--stackRegions-panePos-start", + :end => "PageLayout--stackRegions-panePos-end" }.freeze RESPONSIVE_POSITION_OPTIONS = RESPONSIVE_POSITION_MAPPINGS.keys.freeze DIVIDER_DEFAULT = :start DIVIDER_MAPPINGS = { - DIVIDER_DEFAULT => "PageLayout--pane-position-start", - :end => "PageLayout--pane-position-start" + DIVIDER_DEFAULT => "PageLayout--panePos-start", + :end => "PageLayout--panePos-start" }.freeze DIVIDER_OPTIONS = DIVIDER_MAPPINGS.keys.freeze POSITION_DEFAULT = :start POSITION_MAPPINGS = { - POSITION_DEFAULT => "PageLayout--pane-position-start", - :end => "PageLayout--pane-position-end" + POSITION_DEFAULT => "PageLayout--panePos-start", + :end => "PageLayout--panePos-end" }.freeze POSITION_OPTIONS = POSITION_MAPPINGS.keys.freeze diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index e81e548666..26d54b4727 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -57,8 +57,8 @@ def test_renders_layout_with_correct_default_classes "PageLayout--outerSpacing-normal", "PageLayout--columnGap-normal", "PageLayout--rowGap-normal", - "PageLayout--pane-position-start", - "PageLayout--stackRegions-pane-position-start" + "PageLayout--panePos-start", + "PageLayout--stackRegions-panePos-start" ].join(".") assert_selector("div.#{expected_classes}") do assert_selector("div.PageLayout-content", text: "Main") @@ -142,9 +142,35 @@ def test_responsive_variant end end + def test_stack_regions_variant_with_pane_position + Primer::Beta::PageLayout::Pane::POSITION_OPTIONS.each do |position| + render_inline(Primer::Beta::PageLayout.new(responsive_variant: :stack_regions)) do |c| + c.main { "Main" } + c.pane(position: position) { "Pane" } + end + + assert_selector("div.PageLayout") do + assert_selector("div.PageLayout--panePos-#{position}.PageLayout--variant-stackRegions-panePos-#{position}") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") + end + end + end + end + + def test_variant_pane_position_not_set_when_separate_regions + render_inline(Primer::Beta::PageLayout.new(responsive_variant: :separate_regions)) do |c| + c.main { "Main" } + c.pane(position: :start) { "Pane" } + end + + refute_selector("div.PageLayout--variant-stackRegions-panePos-end") + refute_selector("div.PageLayout--variant-stackRegions-panePos-start") + end + def test_responsive_primary_region Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS.each do |region| - render_inline(Primer::Beta::PageLayout.new(responsive_primary_region: region)) do |c| + render_inline(Primer::Beta::PageLayout.new(responsive_variant: :separate_regions, responsive_primary_region: region)) do |c| c.main { "Main" } c.pane { "Pane" } end @@ -157,6 +183,16 @@ def test_responsive_primary_region end end + def test_responsive_primary_region_not_set_when_stack_regions + render_inline(Primer::Beta::PageLayout.new(responsive_variant: :stack_regions)) do |c| + c.main { "Main" } + c.pane { "Pane" } + end + + refute_selector("div.PageLayout--variant-separateRegions-primary-pane") + refute_selector("div.PageLayout--variant-separateRegions-primary-content") + end + def test_pane_width Primer::Beta::PageLayout::Pane::WIDTH_OPTIONS.each do |size| render_inline(Primer::Beta::PageLayout.new) do |c| @@ -203,7 +239,7 @@ def test_pane_position_add_correct_class end assert_selector("div.PageLayout") do - assert_selector("div.PageLayout--pane-position-#{position}") do + assert_selector("div.PageLayout--panePos-#{position}") do assert_selector("div.PageLayout-content", text: "Main") assert_selector("div.PageLayout-pane", text: "Pane") end From dbef809ae34017de817b49ee4435e29026acff56 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Fri, 10 Dec 2021 18:22:36 +0000 Subject: [PATCH 39/97] update header and footer classes --- .../primer/beta/page_layout.html.erb | 2 +- app/components/primer/beta/page_layout.rb | 34 ++++++------ .../primer/beta/page_layout_test.rb | 53 ++++++++++++------- 3 files changed, 53 insertions(+), 36 deletions(-) diff --git a/app/components/primer/beta/page_layout.html.erb b/app/components/primer/beta/page_layout.html.erb index 22fee653f3..2ed887af4d 100644 --- a/app/components/primer/beta/page_layout.html.erb +++ b/app/components/primer/beta/page_layout.html.erb @@ -1,7 +1,7 @@ <%= render Primer::BaseComponent.new(**@system_arguments) do %> <%= render(Primer::BaseComponent.new(tag: :div, classes: "PageLayout-wrapper #{@wrapper_sizing_class}")) do %> <%= header %> - <%= render(Primer::BaseComponent.new(tag: :div, classes: "PageLayout-regions")) do %> + <%= render(Primer::BaseComponent.new(tag: :div, classes: "PageLayout-columns")) do %> <% if pane.render_first? %> <%= pane %> <%= main %> diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index a3ec334888..93c8a29480 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -62,13 +62,6 @@ class PageLayout < Primer::Component }.freeze RESPONSIVE_VARIANT_OPTIONS = RESPONSIVE_VARIANT_MAPPINGS.keys.freeze - STACK_REGIONS_PANE_POSITION_DEFAULT = :start - STACK_REGIONS_PANE_POSITION_MAPPINGS = { - STACK_REGIONS_PANE_POSITION_DEFAULT => "PageLayout--variant-stackRegions-panePos-start", - :end => "PageLayout--variant-stackRegions-panePos-end" - }.freeze - STACK_REGIONS_PANE_POSITION_OPTIONS = STACK_REGIONS_PANE_POSITION_MAPPINGS.keys.freeze - # The layout's main content. # # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::Main::WIDTH_OPTIONS) %> @@ -105,8 +98,7 @@ class PageLayout < Primer::Component # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], - "PageLayout--has-footer", - "PageLayout--footer-divider" => divider + "PageLayout--hasFooterDivider" => divider ) footer_system_arguments[:classes] = class_names( @@ -129,20 +121,24 @@ class PageLayout < Primer::Component position: Pane::POSITION_DEFAULT, responsive_position: Pane::RESPONSIVE_POSITION_DEFAULT, divider: false, - **system_arguments + **pane_system_arguments | responsive_position = position if responsive_position == Pane::RESPONSIVE_POSITION_DEFAULT # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], Pane::POSITION_MAPPINGS[fetch_or_fallback(Pane::POSITION_OPTIONS, position, Pane::POSITION_DEFAULT)], - Pane::RESPONSIVE_POSITION_MAPPINGS[fetch_or_fallback(Pane::RESPONSIVE_POSITION_OPTIONS, responsive_position, Pane::RESPONSIVE_POSITION_DEFAULT)], Pane::WIDTH_MAPPINGS[fetch_or_fallback(Pane::WIDTH_OPTIONS, width, Pane::WIDTH_DEFAULT)], - { STACK_REGIONS_PANE_POSITION_MAPPINGS[fetch_or_fallback(STACK_REGIONS_PANE_POSITION_OPTIONS, position, STACK_REGIONS_PANE_POSITION_DEFAULT)] => @responsive_variant == :stack_regions }, + { Pane::RESPONSIVE_POSITION_MAPPINGS[fetch_or_fallback(Pane::RESPONSIVE_POSITION_OPTIONS, responsive_position, Pane::RESPONSIVE_POSITION_DEFAULT)] => @responsive_variant == :stack_regions }, { "PageLayout--pane-divider" => divider } ) - Pane.new(position: position, **system_arguments) + pane_system_arguments[:classes] = class_names( + pane_system_arguments[:classes], + Pane::HAS_DIVIDER_NONE_MAPPINGS[responsive_position] + ) + + Pane.new(position: position, **pane_system_arguments) } # @example Default @@ -437,7 +433,8 @@ def initialize(responsive_divider: RESPONSIVE_DIVIDER_DEFAULT, **system_argument @system_arguments = system_arguments @system_arguments[:classes] = class_names( @system_arguments[:classes], - RESPONSIVE_DIVIDER_MAPPINGS[fetch_or_fallback(RESPONSIVE_DIVIDER_OPTIONS, responsive_divider, RESPONSIVE_DIVIDER_DEFAULT)] + RESPONSIVE_DIVIDER_MAPPINGS[fetch_or_fallback(RESPONSIVE_DIVIDER_OPTIONS, responsive_divider, RESPONSIVE_DIVIDER_DEFAULT)], + "PageLayout-region" ) end @@ -461,8 +458,8 @@ class Pane < Primer::Component RESPONSIVE_POSITION_DEFAULT = :inherit RESPONSIVE_POSITION_MAPPINGS = { RESPONSIVE_POSITION_DEFAULT => "", - :start => "PageLayout--stackRegions-panePos-start", - :end => "PageLayout--stackRegions-panePos-end" + :start => "PageLayout--variant-stackRegions-panePos-start", + :end => "PageLayout--variant-stackRegions-panePos-end" }.freeze RESPONSIVE_POSITION_OPTIONS = RESPONSIVE_POSITION_MAPPINGS.keys.freeze @@ -488,6 +485,11 @@ class Pane < Primer::Component }.freeze RESPONSIVE_DIVIDER_OPTIONS = RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze + HAS_DIVIDER_NONE_MAPPINGS = { + start: "PageLayout-region--hasDivider-none-before", + end: "PageLayout-region--hasDivider-none-after" + }.freeze + TAG_DEFAULT = :div TAG_OPTIONS = [TAG_DEFAULT, :aside, :nav, :section].freeze diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 26d54b4727..13b1319868 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -23,8 +23,10 @@ def test_renders_layout end assert_selector("div.PageLayout") do - assert_selector("div.PageLayout-content", text: "Main") - assert_selector("div.PageLayout-pane", text: "Pane") + assert_selector("div.PageLayout-columns") do + assert_selector("div.PageLayout-region.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-region.PageLayout-pane.PageLayout-region--hasDivider-none-before", text: "Pane") + end end end @@ -37,10 +39,12 @@ def test_optionally_renders_header_and_footer end assert_selector("div.PageLayout") do - assert_selector("div.PageLayout-header", text: "Header") - assert_selector("div.PageLayout-content", text: "Main") - assert_selector("div.PageLayout-pane", text: "Pane") - assert_selector("div.PageLayout-footer", text: "Footer") + assert_selector("div.PageLayout-header.PageLayout-region", text: "Header") + assert_selector("div.PageLayout-columns") do + assert_selector("div.PageLayout-region.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-region.PageLayout-pane.PageLayout-region--hasDivider-none-before", text: "Pane") + end + assert_selector("div.PageLayout-footer.PageLayout-region", text: "Footer") end end @@ -58,7 +62,7 @@ def test_renders_layout_with_correct_default_classes "PageLayout--columnGap-normal", "PageLayout--rowGap-normal", "PageLayout--panePos-start", - "PageLayout--stackRegions-panePos-start" + "PageLayout--variant-stackRegions-panePos-start" ].join(".") assert_selector("div.#{expected_classes}") do assert_selector("div.PageLayout-content", text: "Main") @@ -142,17 +146,28 @@ def test_responsive_variant end end - def test_stack_regions_variant_with_pane_position + def test_stack_regions_variant_with_responsive_pane_position Primer::Beta::PageLayout::Pane::POSITION_OPTIONS.each do |position| - render_inline(Primer::Beta::PageLayout.new(responsive_variant: :stack_regions)) do |c| - c.main { "Main" } - c.pane(position: position) { "Pane" } - end + Primer::Beta::PageLayout::Pane::RESPONSIVE_POSITION_OPTIONS.each do |responsive_position| + render_inline(Primer::Beta::PageLayout.new(responsive_variant: :stack_regions)) do |c| + c.main { "Main" } + c.pane(position: position, responsive_position: responsive_position) { "Pane" } + end - assert_selector("div.PageLayout") do - assert_selector("div.PageLayout--panePos-#{position}.PageLayout--variant-stackRegions-panePos-#{position}") do - assert_selector("div.PageLayout-content", text: "Main") - assert_selector("div.PageLayout-pane", text: "Pane") + if responsive_position == :inherit + assert_selector("div.PageLayout") do + assert_selector("div.PageLayout--panePos-#{position}.PageLayout--variant-stackRegions-panePos-#{position}") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") + end + end + else + assert_selector("div.PageLayout") do + assert_selector("div.PageLayout--panePos-#{position}.PageLayout--variant-stackRegions-panePos-#{responsive_position}") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") + end + end end end end @@ -301,7 +316,7 @@ def test_main_width c.pane { "Pane" } end - assert_selector("div.PageLayout-regions") do + assert_selector("div.PageLayout-columns") do assert_selector("div.PageLayout-content") do if width == :fluid assert_text("Main") @@ -374,7 +389,7 @@ def test_footer_divider_present_when_set c.footer(divider: true) { "Footer" } end - assert_selector("div.PageLayout.PageLayout--has-footer.PageLayout--footer-divider") + assert_selector("div.PageLayout.PageLayout--hasFooterDivider") end def test_footer_divider_not_present_when_not_set @@ -384,7 +399,7 @@ def test_footer_divider_not_present_when_not_set c.footer { "Footer" } end - refute_selector("div.PageLayout.PageLayout--has-footer.PageLayout--footer-divider") + refute_selector("div.PageLayout.PageLayout--hasFooterDivider") end def test_footer_responsive_divider From 8205ff2e6b5940a55b02d17a0a7792fc77eb6212 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Fri, 10 Dec 2021 19:56:24 +0000 Subject: [PATCH 40/97] continue updating class names to new spec --- app/components/primer/beta/page_layout.rb | 6 +- .../primer/beta/page_layout_test.rb | 92 +++++++++---------- 2 files changed, 46 insertions(+), 52 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 93c8a29480..b0b50fd42a 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -130,7 +130,7 @@ class PageLayout < Primer::Component Pane::POSITION_MAPPINGS[fetch_or_fallback(Pane::POSITION_OPTIONS, position, Pane::POSITION_DEFAULT)], Pane::WIDTH_MAPPINGS[fetch_or_fallback(Pane::WIDTH_OPTIONS, width, Pane::WIDTH_DEFAULT)], { Pane::RESPONSIVE_POSITION_MAPPINGS[fetch_or_fallback(Pane::RESPONSIVE_POSITION_OPTIONS, responsive_position, Pane::RESPONSIVE_POSITION_DEFAULT)] => @responsive_variant == :stack_regions }, - { "PageLayout--pane-divider" => divider } + { "PageLayout--hasPaneDivider" => divider } ) pane_system_arguments[:classes] = class_names( @@ -450,8 +450,8 @@ class Pane < Primer::Component WIDTH_DEFAULT = :default WIDTH_MAPPINGS = { WIDTH_DEFAULT => "", - :narrow => "PageLayout--pane-width-narrow", - :wide => "PageLayout--pane-width-wide" + :narrow => "PageLayout--paneWidth-narrow", + :wide => "PageLayout--paneWidth-wide" }.freeze WIDTH_OPTIONS = WIDTH_MAPPINGS.keys.freeze diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 13b1319868..227bf90e23 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -146,43 +146,6 @@ def test_responsive_variant end end - def test_stack_regions_variant_with_responsive_pane_position - Primer::Beta::PageLayout::Pane::POSITION_OPTIONS.each do |position| - Primer::Beta::PageLayout::Pane::RESPONSIVE_POSITION_OPTIONS.each do |responsive_position| - render_inline(Primer::Beta::PageLayout.new(responsive_variant: :stack_regions)) do |c| - c.main { "Main" } - c.pane(position: position, responsive_position: responsive_position) { "Pane" } - end - - if responsive_position == :inherit - assert_selector("div.PageLayout") do - assert_selector("div.PageLayout--panePos-#{position}.PageLayout--variant-stackRegions-panePos-#{position}") do - assert_selector("div.PageLayout-content", text: "Main") - assert_selector("div.PageLayout-pane", text: "Pane") - end - end - else - assert_selector("div.PageLayout") do - assert_selector("div.PageLayout--panePos-#{position}.PageLayout--variant-stackRegions-panePos-#{responsive_position}") do - assert_selector("div.PageLayout-content", text: "Main") - assert_selector("div.PageLayout-pane", text: "Pane") - end - end - end - end - end - end - - def test_variant_pane_position_not_set_when_separate_regions - render_inline(Primer::Beta::PageLayout.new(responsive_variant: :separate_regions)) do |c| - c.main { "Main" } - c.pane(position: :start) { "Pane" } - end - - refute_selector("div.PageLayout--variant-stackRegions-panePos-end") - refute_selector("div.PageLayout--variant-stackRegions-panePos-start") - end - def test_responsive_primary_region Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS.each do |region| render_inline(Primer::Beta::PageLayout.new(responsive_variant: :separate_regions, responsive_primary_region: region)) do |c| @@ -231,7 +194,7 @@ def test_pane_divider_present_when_set c.pane(divider: true) { "Pane" } end - assert_selector("div.PageLayout.PageLayout--pane-divider") do + assert_selector("div.PageLayout.PageLayout--hasPaneDivider") do assert_selector("div.PageLayout-content", text: "Main") assert_selector("div.PageLayout-pane", text: "Pane") end @@ -243,7 +206,24 @@ def test_pane_divider_absent_when_not_set c.pane { "Pane" } end - refute_selector("div.PageLayout.PageLayout--pane-divider") + refute_selector("div.PageLayout.PageLayout--hasPaneDivider") + end + + def test_pane_responsive_divider + Primer::Beta::PageLayout::Pane::RESPONSIVE_DIVIDER_OPTIONS.each do |type| + render_inline(Primer::Beta::PageLayout.new) do |c| + c.main { "Main" } + c.pane(responsive_divider: type) { "Pane" } + end + + type_class = Primer::Beta::PageLayout::Pane::RESPONSIVE_DIVIDER_MAPPINGS[type] + assert_selector("div.PageLayout") do + assert_selector("div#{type_class.empty? ? '' : ".#{type_class}"}") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") + end + end + end end def test_pane_position_add_correct_class @@ -280,21 +260,35 @@ def test_pane_position_renders_pane_last assert_match(/PageLayout-content.*PageLayout-pane/m, @rendered_component) end - def test_pane_responsive_position - Primer::Beta::PageLayout::Pane::RESPONSIVE_POSITION_OPTIONS.each do |position| - render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane(responsive_position: position) { "Pane" } - end + def test_stack_regions_variant_with_responsive_pane_position + Primer::Beta::PageLayout::Pane::POSITION_OPTIONS.each do |position| + Primer::Beta::PageLayout::Pane::RESPONSIVE_POSITION_OPTIONS.each do |responsive_position| + render_inline(Primer::Beta::PageLayout.new(responsive_variant: :stack_regions)) do |c| + c.main { "Main" } + c.pane(position: position, responsive_position: responsive_position) { "Pane" } + end - position_class = Primer::Beta::PageLayout::Pane::RESPONSIVE_POSITION_MAPPINGS[position] - assert_selector("div.PageLayout#{position_class.empty? ? '' : ".#{position_class}"}") do - assert_selector("div.PageLayout-content", text: "Main") - assert_selector("div.PageLayout-pane", text: "Pane") + responsive_position = position if responsive_position == :inherit + assert_selector("div.PageLayout") do + assert_selector("div.PageLayout--panePos-#{position}.PageLayout--variant-stackRegions-panePos-#{responsive_position}") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") + end + end end end end + def test_variant_pane_position_not_set_when_separate_regions + render_inline(Primer::Beta::PageLayout.new(responsive_variant: :separate_regions)) do |c| + c.main { "Main" } + c.pane(position: :start) { "Pane" } + end + + refute_selector("div.PageLayout--variant-stackRegions-panePos-end") + refute_selector("div.PageLayout--variant-stackRegions-panePos-start") + end + def test_pane_tags Primer::Beta::PageLayout::Pane::TAG_OPTIONS.each do |tag| render_inline(Primer::Beta::PageLayout.new) do |c| From b595f79df6c8d5c023f82736af69f380d6d2d854 Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Fri, 10 Dec 2021 19:57:19 +0000 Subject: [PATCH 41/97] docs: build docs --- docs/content/components/beta/pagelayout.md | 22 +++++----- docs/content/components/beta/splitlayout.md | 4 +- static/classes.yml | 42 +++++++++++------- static/constants.json | 48 +++++++++++---------- 4 files changed, 65 insertions(+), 51 deletions(-) diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md index c4f2c3dacf..83be678a12 100644 --- a/docs/content/components/beta/pagelayout.md +++ b/docs/content/components/beta/pagelayout.md @@ -85,7 +85,7 @@ The layout's sidebar. ### Default - + ```erb @@ -97,7 +97,7 @@ The layout's sidebar. ### Header and footer - + ```erb @@ -113,7 +113,7 @@ The layout's sidebar. When `:fluid` the layout will be set to full width. When the other sizing options are used the layout will be centered with corresponding widths. - `:fluid`: full width - `:md`: max-width: 768px - `:lg`: max-width: 1012px - `:xl`: max-width: 1280px - + ```erb <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :fluid)) do |c| %> @@ -138,7 +138,7 @@ When `:fluid` the layout will be set to full width. When the other sizing option Sets wrapper margins surrounding the component to distance itself from the viewport edges. - `:condensed` keeps the margin at 16px. - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(outer_spacing: :condensed)) do |c| %> @@ -155,7 +155,7 @@ Sets wrapper margins surrounding the component to distance itself from the viewp Sets the gap between columns to distance them from each other. - `:condensed` keeps the gap always at 16px. - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(column_gap: :condensed)) do |c| %> @@ -172,7 +172,7 @@ Sets the gap between columns to distance them from each other. - `:condensed` ke Sets the gap below the header and above the footer. - `:condensed` keeps the gap always at 16px. - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(row_gap: :condensed)) do |c| %> @@ -189,7 +189,7 @@ Sets the gap below the header and above the footer. - `:condensed` keeps the gap Sets the pane width. The width is predetermined according to the breakpoint instead of it being percentage-based. - `default`: - `narrow`: - `wide`: When flowing as a row, `Pane` takes the full width. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> @@ -210,7 +210,7 @@ Sets the pane width. The width is predetermined according to the breakpoint inst Use `start` for sidebars that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> @@ -227,7 +227,7 @@ Use `start` for sidebars that manipulate local navigation, while right-aligned ` Defines the position of the pane in the responsive layout. - `:start` puts the pane above content - `:end` puts it below content. - `:inherit` uses the same value from `pane_position` - + ```erb <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> @@ -248,7 +248,7 @@ Defines the position of the pane in the responsive layout. - `:start` puts the p You can add an optional header to the layout and have spacing and positioning taken care of for you. You can optionally add a divider to the header. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> @@ -267,7 +267,7 @@ You can add an optional header to the layout and have spacing and positioning ta You can add an optional footer to the layout and have spacing and positioning taken care of for you. You can optionally add a divider to the footer. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> diff --git a/docs/content/components/beta/splitlayout.md b/docs/content/components/beta/splitlayout.md index ef57dd6c15..6f057571c0 100644 --- a/docs/content/components/beta/splitlayout.md +++ b/docs/content/components/beta/splitlayout.md @@ -71,7 +71,7 @@ The layout's sidebar. Sets padding to regions individually. - `:condensed` keeps the margin at 16px. - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(inner_spacing: :condensed)) do |c| %> @@ -88,7 +88,7 @@ Sets padding to regions individually. - `:condensed` keeps the margin at 16px. - When responsiveVariant is set to separateRegions, defines which region appears first on small viewports. content is default. - `:content` - `:pane` - + ```erb <%= render(Primer::Beta::PageLayout.new(resposive_primary_region: :content)) do |c| %> diff --git a/static/classes.yml b/static/classes.yml index 95bc77bbe5..615b286784 100644 --- a/static/classes.yml +++ b/static/classes.yml @@ -43,33 +43,17 @@ - ".Layout-main-centered-xl" - ".Layout-sidebar" - ".LayoutBeta" -- ".LayoutBeta--column-gap-condensed" - ".LayoutBeta--column-gap-none" -- ".LayoutBeta--column-gap-normal" -- ".LayoutBeta--footer-divider" -- ".LayoutBeta--has-footer" -- ".LayoutBeta--header-divider" - ".LayoutBeta--inner-spacing-normal" -- ".LayoutBeta--outer-spacing-condensed" -- ".LayoutBeta--outer-spacing-normal" - ".LayoutBeta--pane-divider" -- ".LayoutBeta--pane-position-end" - ".LayoutBeta--pane-position-start" - ".LayoutBeta--pane-width-narrow" - ".LayoutBeta--pane-width-wide" - ".LayoutBeta--primary-content" -- ".LayoutBeta--primary-pane" -- ".LayoutBeta--row-gap-condensed" - ".LayoutBeta--row-gap-none" -- ".LayoutBeta--row-gap-normal" -- ".LayoutBeta--stackRegions-pane-position-end" -- ".LayoutBeta--stackRegions-pane-position-start" - ".LayoutBeta--variant-md-multiColumns" - ".LayoutBeta--variant-separateRegions" -- ".LayoutBeta--variant-stackRegions" - ".LayoutBeta-content" -- ".LayoutBeta-footer" -- ".LayoutBeta-header" - ".LayoutBeta-pane" - ".LayoutBeta-region" - ".LayoutBeta-regions" @@ -78,6 +62,32 @@ - ".Link--muted" - ".Link--primary" - ".Link--secondary" +- ".PageLayout" +- ".PageLayout--columnGap-condensed" +- ".PageLayout--columnGap-normal" +- ".PageLayout--hasFooterDivider" +- ".PageLayout--header-divider" +- ".PageLayout--outerSpacing-condensed" +- ".PageLayout--outerSpacing-normal" +- ".PageLayout--panePos-end" +- ".PageLayout--panePos-start" +- ".PageLayout--paneWidth-narrow" +- ".PageLayout--paneWidth-wide" +- ".PageLayout--rowGap-condensed" +- ".PageLayout--rowGap-normal" +- ".PageLayout--variant-md-multiColumns" +- ".PageLayout--variant-stackRegions" +- ".PageLayout--variant-stackRegions-panePos-end" +- ".PageLayout--variant-stackRegions-panePos-start" +- ".PageLayout-columns" +- ".PageLayout-content" +- ".PageLayout-footer" +- ".PageLayout-header" +- ".PageLayout-pane" +- ".PageLayout-region" +- ".PageLayout-region--hasDivider-none-after" +- ".PageLayout-region--hasDivider-none-before" +- ".PageLayout-wrapper" - ".Popover" - ".Popover-message" - ".Popover-message--large" diff --git a/static/constants.json b/static/constants.json index 596b587477..37b76fca80 100644 --- a/static/constants.json +++ b/static/constants.json @@ -253,8 +253,8 @@ "Bookend": "Primer::Beta::PageLayout::Bookend", "COLUMN_GAP_DEFAULT": "normal", "COLUMN_GAP_MAPPINGS": { - "normal": "LayoutBeta--column-gap-normal", - "condensed": "LayoutBeta--column-gap-condensed" + "normal": "PageLayout--columnGap-normal", + "condensed": "PageLayout--columnGap-condensed" }, "COLUMN_GAP_OPTIONS": [ "normal", @@ -263,8 +263,8 @@ "Main": "Primer::Beta::PageLayout::Main", "OUTER_SPACING_DEFAULT": "normal", "OUTER_SPACING_MAPPINGS": { - "normal": "LayoutBeta--outer-spacing-normal", - "condensed": "LayoutBeta--outer-spacing-condensed" + "normal": "PageLayout--outerSpacing-normal", + "condensed": "PageLayout--outerSpacing-condensed" }, "OUTER_SPACING_OPTIONS": [ "normal", @@ -273,8 +273,8 @@ "Pane": "Primer::Beta::PageLayout::Pane", "RESPONSIVE_PRIMARY_REGION_DEFAULT": "content", "RESPONSIVE_PRIMARY_REGION_MAPPINGS": { - "content": "LayoutBeta--primary-content", - "pane": "LayoutBeta--primary-pane" + "content": "PageLayout--variant-separateRegions-primary-pane", + "pane": "PageLayout--variant-separateRegions-primary-pane" }, "RESPONSIVE_PRIMARY_REGION_OPTIONS": [ "content", @@ -282,8 +282,8 @@ ], "RESPONSIVE_VARIANT_DEFAULT": "stack_regions", "RESPONSIVE_VARIANT_MAPPINGS": { - "stack_regions": "LayoutBeta--variant-stackRegions", - "separate_regions": "LayoutBeta--variant-separateRegions" + "stack_regions": "PageLayout--variant-stackRegions", + "separate_regions": "PageLayout--variant-separateRegions" }, "RESPONSIVE_VARIANT_OPTIONS": [ "stack_regions", @@ -291,8 +291,8 @@ ], "ROW_GAP_DEFAULT": "normal", "ROW_GAP_MAPPINGS": { - "normal": "LayoutBeta--row-gap-normal", - "condensed": "LayoutBeta--row-gap-condensed" + "normal": "PageLayout--rowGap-normal", + "condensed": "PageLayout--rowGap-condensed" }, "ROW_GAP_OPTIONS": [ "normal", @@ -316,8 +316,8 @@ "RESPONSIVE_DIVIDER_DEFAULT": "none", "RESPONSIVE_DIVIDER_MAPPINGS": { "none": "", - "line": "LayoutBeta--divider-after", - "filled": "LayoutBeta--divider-after-filled" + "line": "PageLayout--divider-after", + "filled": "PageLayout--divider-after-filled" }, "RESPONSIVE_DIVIDER_OPTIONS": [ "none", @@ -342,17 +342,21 @@ "Primer::Beta::PageLayout::Pane": { "DIVIDER_DEFAULT": "start", "DIVIDER_MAPPINGS": { - "start": "LayoutBeta--pane-position-start", - "end": "LayoutBeta--pane-position-start" + "start": "PageLayout--panePos-start", + "end": "PageLayout--panePos-start" }, "DIVIDER_OPTIONS": [ "start", "end" ], + "HAS_DIVIDER_NONE_MAPPINGS": { + "start": "PageLayout-region--hasDivider-none-before", + "end": "PageLayout-region--hasDivider-none-after" + }, "POSITION_DEFAULT": "start", "POSITION_MAPPINGS": { - "start": "LayoutBeta--pane-position-start", - "end": "LayoutBeta--pane-position-end" + "start": "PageLayout--panePos-start", + "end": "PageLayout--panePos-end" }, "POSITION_OPTIONS": [ "start", @@ -361,8 +365,8 @@ "RESPONSIVE_DIVIDER_DEFAULT": "none", "RESPONSIVE_DIVIDER_MAPPINGS": { "none": "", - "line": "LayoutBeta--divider-after", - "filled": "LayoutBeta--divider-after-filled" + "line": "PageLayout--divider-after", + "filled": "PageLayout--divider-after-filled" }, "RESPONSIVE_DIVIDER_OPTIONS": [ "none", @@ -372,8 +376,8 @@ "RESPONSIVE_POSITION_DEFAULT": "inherit", "RESPONSIVE_POSITION_MAPPINGS": { "inherit": "", - "start": "LayoutBeta--stackRegions-pane-position-start", - "end": "LayoutBeta--stackRegions-pane-position-end" + "start": "PageLayout--variant-stackRegions-panePos-start", + "end": "PageLayout--variant-stackRegions-panePos-end" }, "RESPONSIVE_POSITION_OPTIONS": [ "inherit", @@ -390,8 +394,8 @@ "WIDTH_DEFAULT": "default", "WIDTH_MAPPINGS": { "default": "", - "narrow": "LayoutBeta--pane-width-narrow", - "wide": "LayoutBeta--pane-width-wide" + "narrow": "PageLayout--paneWidth-narrow", + "wide": "PageLayout--paneWidth-wide" }, "WIDTH_OPTIONS": [ "default", From 947129f8117d1720d61da2a3689014d675f675be Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Fri, 10 Dec 2021 20:56:01 +0000 Subject: [PATCH 42/97] remove Bookend sub component --- app/components/primer/beta/page_layout.rb | 68 ++++++++----------- .../primer/beta/page_layout_test.rb | 12 ++-- 2 files changed, 36 insertions(+), 44 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index b0b50fd42a..b9ce758480 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -62,6 +62,22 @@ class PageLayout < Primer::Component }.freeze RESPONSIVE_VARIANT_OPTIONS = RESPONSIVE_VARIANT_MAPPINGS.keys.freeze + HEADER_RESPONSIVE_DIVIDER_DEFAULT = :none + HEADER_RESPONSIVE_DIVIDER_MAPPINGS = { + HEADER_RESPONSIVE_DIVIDER_DEFAULT => "", + :line => "PageLayout-region--hasDivider-line-before", + :filled => "PageLayout-region--hasDivider-filled-before" + }.freeze + HEADER_RESPONSIVE_DIVIDER_OPTIONS = HEADER_RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze + + FOOTER_RESPONSIVE_DIVIDER_DEFAULT = :none + FOOTER_RESPONSIVE_DIVIDER_MAPPINGS = { + FOOTER_RESPONSIVE_DIVIDER_DEFAULT => "", + :line => "PageLayout-region--hasDivider-line-before", + :filled => "PageLayout-region--hasDivider-filled-before" + }.freeze + FOOTER_RESPONSIVE_DIVIDER_OPTIONS = FOOTER_RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze + # The layout's main content. # # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::Main::WIDTH_OPTIONS) %> @@ -72,29 +88,31 @@ class PageLayout < Primer::Component # The layout's header. # # @param divider [Boolean] Whether to show a header divider - # @param responsive_divider [Boolean] Whether to show a divider below the `header` region if in responsive mode + # @param responsive_divider [Symbol] Whether to show a divider below the `header` region if in responsive mode. <%= one_of(Primer::Beta::PageLayout::HEADER_RESPONSIVE_DIVIDER_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_one :header, lambda { |divider: false, **header_system_arguments| + renders_one :header, lambda { |divider: false, responsive_divider: :line, **header_system_arguments| # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], - "PageLayout--header-divider" => divider + "PageLayout--hasHeaderDivider" => divider ) header_system_arguments[:classes] = class_names( header_system_arguments[:classes], - "PageLayout-header" + HEADER_RESPONSIVE_DIVIDER_MAPPINGS[fetch_or_fallback(HEADER_RESPONSIVE_DIVIDER_OPTIONS, responsive_divider, HEADER_RESPONSIVE_DIVIDER_DEFAULT)], + "PageLayout-header", + "PageLayout-region" ) - Bookend.new(divider: divider, **header_system_arguments) + Primer::BaseComponent.new(tag: :div, **header_system_arguments) } # The layout's footer. # # @param divider [Boolean] Whether to show a footer divider - # @param responsive_divider [Boolean] Whether to show a divider below the `footer` region if in responsive mode + # @param responsive_divider [Symbol] Whether to show a divider below the `footer` region if in responsive mode. <%= one_of(Primer::Beta::PageLayout::FOOTER_RESPONSIVE_DIVIDER_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_one :footer, lambda { |divider: false, **footer_system_arguments| + renders_one :footer, lambda { |divider: false, responsive_divider: FOOTER_RESPONSIVE_DIVIDER_DEFAULT, **footer_system_arguments| # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], @@ -103,10 +121,12 @@ class PageLayout < Primer::Component footer_system_arguments[:classes] = class_names( footer_system_arguments[:classes], - "PageLayout-footer" + FOOTER_RESPONSIVE_DIVIDER_MAPPINGS[fetch_or_fallback(FOOTER_RESPONSIVE_DIVIDER_OPTIONS, responsive_divider, FOOTER_RESPONSIVE_DIVIDER_DEFAULT)], + "PageLayout-footer", + "PageLayout-region" ) - Bookend.new(divider: divider, **footer_system_arguments) + Primer::BaseComponent.new(tag: :div, **footer_system_arguments) } # The layout's sidebar. @@ -338,7 +358,7 @@ class PageLayout < Primer::Component # <% c.footer(divider: true, border: true) { "Header" } %> # <% end %> # - # @param wrapper_sizing [Symbol] The size of the container wrapping `Layout`. <%= one_of(Primer::Beta::PageLayout::WRAPPER_SIZING_OPTIONS) %> + # @param wrapper_sizing [Symbol] Define the maximum width of the component. `:fluid` sets it to full-width. Other values center Layout horizontally. <%= one_of(Primer::Beta::PageLayout::WRAPPER_SIZING_OPTIONS) %> # @param outer_spacing [Symbol] Sets wrapper margins surrounding the component to distance itself from the viewport edges. <%= one_of(Primer::Beta::PageLayout::OUTER_SPACING_OPTIONS) %> # @param column_gap [Symbol] Sets gap between columns. <%= one_of(Primer::Beta::PageLayout::COLUMN_GAP_OPTIONS) %> # @param row_gap [Symbol] Sets the gap below the header and above the footer. <%= one_of(Primer::Beta::PageLayout::ROW_GAP_OPTIONS) %> @@ -415,34 +435,6 @@ def call end end - # The layout's header or footer content. This component is used by the `header` and `footer` slots and configured via those slots. - class Bookend < Primer::Component - status :beta - - RESPONSIVE_DIVIDER_DEFAULT = :none - RESPONSIVE_DIVIDER_MAPPINGS = { - RESPONSIVE_DIVIDER_DEFAULT => "", - :line => "PageLayout--divider-after", - :filled => "PageLayout--divider-after-filled" - }.freeze - RESPONSIVE_DIVIDER_OPTIONS = RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze - - # @param responsive_divider [Symbol] <%= one_of(Primer::Beta::PageLayout::Bookend::RESPONSIVE_DIVIDER_OPTIONS) %> - # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - def initialize(responsive_divider: RESPONSIVE_DIVIDER_DEFAULT, **system_arguments) - @system_arguments = system_arguments - @system_arguments[:classes] = class_names( - @system_arguments[:classes], - RESPONSIVE_DIVIDER_MAPPINGS[fetch_or_fallback(RESPONSIVE_DIVIDER_OPTIONS, responsive_divider, RESPONSIVE_DIVIDER_DEFAULT)], - "PageLayout-region" - ) - end - - def call - render(Primer::BaseComponent.new(tag: :div, **@system_arguments)) { content } - end - end - # The layout's pane content. This is a secondary, smaller region that is paired with the `Main` region. class Pane < Primer::Component status :beta diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 227bf90e23..1471d8182e 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -346,7 +346,7 @@ def test_header_divider_present_when_set c.pane { "Pane" } end - assert_selector("div.PageLayout.PageLayout--header-divider") + assert_selector("div.PageLayout.PageLayout--hasHeaderDivider") end def test_header_divider_not_present_when_not_set @@ -356,18 +356,18 @@ def test_header_divider_not_present_when_not_set c.pane { "Pane" } end - refute_selector("div.PageLayout.PageLayout--has-header.PageLayout--header-divider") + refute_selector("div.PageLayout.PageLayout--hasHeaderDivider") end def test_header_responsive_divider - Primer::Beta::PageLayout::Bookend::RESPONSIVE_DIVIDER_OPTIONS.each do |opt| + Primer::Beta::PageLayout::HEADER_RESPONSIVE_DIVIDER_OPTIONS.each do |opt| render_inline(Primer::Beta::PageLayout.new) do |c| c.header(responsive_divider: opt) { "Header" } c.main { "Main" } c.pane { "Pane" } end - divider_class = Primer::Beta::PageLayout::Bookend::RESPONSIVE_DIVIDER_MAPPINGS[opt] + divider_class = Primer::Beta::PageLayout::HEADER_RESPONSIVE_DIVIDER_MAPPINGS[opt] assert_selector("div.PageLayout") do assert_selector("div.PageLayout-header#{divider_class.empty? ? '' : ".#{divider_class}"}", text: "Header") assert_selector("div.PageLayout-content", text: "Main") @@ -397,14 +397,14 @@ def test_footer_divider_not_present_when_not_set end def test_footer_responsive_divider - Primer::Beta::PageLayout::Bookend::RESPONSIVE_DIVIDER_OPTIONS.each do |opt| + Primer::Beta::PageLayout::FOOTER_RESPONSIVE_DIVIDER_OPTIONS.each do |opt| render_inline(Primer::Beta::PageLayout.new) do |c| c.main { "Main" } c.pane { "Pane" } c.footer(responsive_divider: opt) { "Footer" } end - divider_class = Primer::Beta::PageLayout::Bookend::RESPONSIVE_DIVIDER_MAPPINGS[opt] + divider_class = Primer::Beta::PageLayout::FOOTER_RESPONSIVE_DIVIDER_MAPPINGS[opt] assert_selector("div.PageLayout") do assert_selector("div.PageLayout-footer#{divider_class.empty? ? '' : ".#{divider_class}"}", text: "Footer") assert_selector("div.PageLayout-content", text: "Main") From d6447437c6bd2360f1245e162ef23988c8b5e271 Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Fri, 10 Dec 2021 20:57:03 +0000 Subject: [PATCH 43/97] docs: build docs --- docs/content/components/beta/pagelayout.md | 12 ++++---- static/arguments.yml | 4 +-- static/audited_at.json | 1 - static/classes.yml | 3 +- static/constants.json | 36 +++++++++++++--------- static/statuses.json | 1 - 6 files changed, 32 insertions(+), 25 deletions(-) diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md index 83be678a12..6ad246ef2b 100644 --- a/docs/content/components/beta/pagelayout.md +++ b/docs/content/components/beta/pagelayout.md @@ -29,7 +29,7 @@ Keyboard navigation follows the markup order. Decide carefully how the focus ord | Name | Type | Default | Description | | :- | :- | :- | :- | -| `wrapper_sizing` | `Symbol` | `:fluid` | The size of the container wrapping `Layout`. One of `:fluid`, `:lg`, `:md`, or `:xl`. | +| `wrapper_sizing` | `Symbol` | `:fluid` | Define the maximum width of the component. `:fluid` sets it to full-width. Other values center Layout horizontally. One of `:fluid`, `:lg`, `:md`, or `:xl`. | | `outer_spacing` | `Symbol` | `:normal` | Sets wrapper margins surrounding the component to distance itself from the viewport edges. One of `:condensed` and `:normal`. | | `column_gap` | `Symbol` | `:normal` | Sets gap between columns. One of `:condensed` and `:normal`. | | `row_gap` | `Symbol` | `:normal` | Sets the gap below the header and above the footer. One of `:condensed` and `:normal`. | @@ -56,7 +56,7 @@ The layout's header. | Name | Type | Default | Description | | :- | :- | :- | :- | | `divider` | `Boolean` | N/A | Whether to show a header divider | -| `responsive_divider` | `Boolean` | N/A | Whether to show a divider below the `header` region if in responsive mode | +| `responsive_divider` | `Symbol` | N/A | Whether to show a divider below the `header` region if in responsive mode. One of `:filled`, `:line`, or `:none`. | | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | ### `Footer` @@ -66,7 +66,7 @@ The layout's footer. | Name | Type | Default | Description | | :- | :- | :- | :- | | `divider` | `Boolean` | N/A | Whether to show a footer divider | -| `responsive_divider` | `Boolean` | N/A | Whether to show a divider below the `footer` region if in responsive mode | +| `responsive_divider` | `Symbol` | N/A | Whether to show a divider below the `footer` region if in responsive mode. One of `:filled`, `:line`, or `:none`. | | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | ### `Pane` @@ -97,7 +97,7 @@ The layout's sidebar. ### Header and footer - + ```erb @@ -248,7 +248,7 @@ Defines the position of the pane in the responsive layout. - `:start` puts the p You can add an optional header to the layout and have spacing and positioning taken care of for you. You can optionally add a divider to the header. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> @@ -267,7 +267,7 @@ You can add an optional header to the layout and have spacing and positioning ta You can add an optional footer to the layout and have spacing and positioning taken care of for you. You can optionally add a divider to the footer. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> diff --git a/static/arguments.yml b/static/arguments.yml index 88133b2c12..bf92922880 100644 --- a/static/arguments.yml +++ b/static/arguments.yml @@ -285,8 +285,8 @@ - name: wrapper_sizing type: Symbol default: "`:fluid`" - description: The size of the container wrapping `Layout`. One of `:fluid`, `:lg`, - `:md`, or `:xl`. + description: Define the maximum width of the component. `:fluid` sets it to full-width. + Other values center Layout horizontally. One of `:fluid`, `:lg`, `:md`, or `:xl`. - name: outer_spacing type: Symbol default: "`:normal`" diff --git a/static/audited_at.json b/static/audited_at.json index 7574ef9e20..de13eb0ee1 100644 --- a/static/audited_at.json +++ b/static/audited_at.json @@ -19,7 +19,6 @@ "Primer::Beta::Breadcrumbs": "", "Primer::Beta::Breadcrumbs::Item": "", "Primer::Beta::PageLayout": "", - "Primer::Beta::PageLayout::Bookend": "", "Primer::Beta::PageLayout::Main": "", "Primer::Beta::PageLayout::Pane": "", "Primer::Beta::SplitLayout": "", diff --git a/static/classes.yml b/static/classes.yml index 615b286784..cdb3427d33 100644 --- a/static/classes.yml +++ b/static/classes.yml @@ -66,7 +66,7 @@ - ".PageLayout--columnGap-condensed" - ".PageLayout--columnGap-normal" - ".PageLayout--hasFooterDivider" -- ".PageLayout--header-divider" +- ".PageLayout--hasHeaderDivider" - ".PageLayout--outerSpacing-condensed" - ".PageLayout--outerSpacing-normal" - ".PageLayout--panePos-end" @@ -85,6 +85,7 @@ - ".PageLayout-header" - ".PageLayout-pane" - ".PageLayout-region" +- ".PageLayout-region--hasDivider-line-before" - ".PageLayout-region--hasDivider-none-after" - ".PageLayout-region--hasDivider-none-before" - ".PageLayout-wrapper" diff --git a/static/constants.json b/static/constants.json index 37b76fca80..69cccbd054 100644 --- a/static/constants.json +++ b/static/constants.json @@ -250,7 +250,6 @@ "Primer::Beta::Breadcrumbs::Item": { }, "Primer::Beta::PageLayout": { - "Bookend": "Primer::Beta::PageLayout::Bookend", "COLUMN_GAP_DEFAULT": "normal", "COLUMN_GAP_MAPPINGS": { "normal": "PageLayout--columnGap-normal", @@ -260,6 +259,28 @@ "normal", "condensed" ], + "FOOTER_RESPONSIVE_DIVIDER_DEFAULT": "none", + "FOOTER_RESPONSIVE_DIVIDER_MAPPINGS": { + "none": "", + "line": "PageLayout-region--hasDivider-line-before", + "filled": "PageLayout-region--hasDivider-filled-before" + }, + "FOOTER_RESPONSIVE_DIVIDER_OPTIONS": [ + "none", + "line", + "filled" + ], + "HEADER_RESPONSIVE_DIVIDER_DEFAULT": "none", + "HEADER_RESPONSIVE_DIVIDER_MAPPINGS": { + "none": "", + "line": "PageLayout-region--hasDivider-line-before", + "filled": "PageLayout-region--hasDivider-filled-before" + }, + "HEADER_RESPONSIVE_DIVIDER_OPTIONS": [ + "none", + "line", + "filled" + ], "Main": "Primer::Beta::PageLayout::Main", "OUTER_SPACING_DEFAULT": "normal", "OUTER_SPACING_MAPPINGS": { @@ -312,19 +333,6 @@ "xl" ] }, - "Primer::Beta::PageLayout::Bookend": { - "RESPONSIVE_DIVIDER_DEFAULT": "none", - "RESPONSIVE_DIVIDER_MAPPINGS": { - "none": "", - "line": "PageLayout--divider-after", - "filled": "PageLayout--divider-after-filled" - }, - "RESPONSIVE_DIVIDER_OPTIONS": [ - "none", - "line", - "filled" - ] - }, "Primer::Beta::PageLayout::Main": { "TAG_DEFAULT": "div", "TAG_OPTIONS": [ diff --git a/static/statuses.json b/static/statuses.json index 777495ee05..9dc0b3c592 100644 --- a/static/statuses.json +++ b/static/statuses.json @@ -19,7 +19,6 @@ "Primer::Beta::Breadcrumbs": "beta", "Primer::Beta::Breadcrumbs::Item": "alpha", "Primer::Beta::PageLayout": "beta", - "Primer::Beta::PageLayout::Bookend": "beta", "Primer::Beta::PageLayout::Main": "beta", "Primer::Beta::PageLayout::Pane": "beta", "Primer::Beta::SplitLayout": "beta", From ab54155cd5677d672a7182eabdcdc7e4629ec8b6 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Mon, 13 Dec 2021 14:11:14 +0000 Subject: [PATCH 44/97] update css classes for splitlayout --- .../primer/beta/split_layout.html.erb | 4 +- app/components/primer/beta/split_layout.rb | 36 +++++------ .../storybook_centered_preview.html.erb | 2 +- .../views/layouts/storybook_preview.html.erb | 2 +- .../primer/beta/split_layout_test.rb | 63 ++++++++++--------- 5 files changed, 54 insertions(+), 53 deletions(-) diff --git a/app/components/primer/beta/split_layout.html.erb b/app/components/primer/beta/split_layout.html.erb index f6f13e144f..53d06ae405 100644 --- a/app/components/primer/beta/split_layout.html.erb +++ b/app/components/primer/beta/split_layout.html.erb @@ -1,6 +1,6 @@ <%= render Primer::BaseComponent.new(**@system_arguments) do %> - <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-wrapper")) do %> - <%= render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-regions")) do %> + <%= render(Primer::BaseComponent.new(tag: :div, classes: "PageLayout-wrapper")) do %> + <%= render(Primer::BaseComponent.new(tag: :div, classes: "PageLayout-columns")) do %> <%= pane %> <%= main %> <% end %> diff --git a/app/components/primer/beta/split_layout.rb b/app/components/primer/beta/split_layout.rb index deed36e4bc..adc4c26db9 100644 --- a/app/components/primer/beta/split_layout.rb +++ b/app/components/primer/beta/split_layout.rb @@ -22,22 +22,22 @@ class SplitLayout < Primer::Component PANE_WIDTH_DEFAULT = :default PANE_WIDTH_MAPPINGS = { PANE_WIDTH_DEFAULT => "", - :narrow => "LayoutBeta--pane-width-narrow", - :wide => "LayoutBeta--pane-width-wide" + :narrow => "PageLayout--paneWidth-narrow", + :wide => "PageLayout--paneWidth-wide" }.freeze PANE_WIDTH_OPTIONS = PANE_WIDTH_MAPPINGS.keys.freeze INNER_SPACING_DEFAULT = :normal INNER_SPACING_MAPPINGS = { - normal: "LayoutBeta--inner-spacing-normal", - condensed: "LayoutBeta--inner-spacing-condensed" + normal: "PageLayout--innerSpacing-normal", + condensed: "PageLayout--innerSpacing-condensed" }.freeze INNER_SPACING_OPTIONS = INNER_SPACING_MAPPINGS.keys.freeze RESPONSIVE_PRIMARY_REGION_DEFAULT = :content RESPONSIVE_PRIMARY_REGION_MAPPINGS = { - RESPONSIVE_PRIMARY_REGION_DEFAULT => "LayoutBeta--primary-content", - :pane => "LayoutBeta--primary-pane" + RESPONSIVE_PRIMARY_REGION_DEFAULT => "PageLayout--variant-separateRegions-primary-content", + :pane => "PageLayout--variant-separateRegions-primary-pane" }.freeze RESPONSIVE_PRIMARY_REGION_OPTIONS = RESPONSIVE_PRIMARY_REGION_MAPPINGS.keys.freeze @@ -58,15 +58,14 @@ class SplitLayout < Primer::Component @pane_system_arguments[:tag] = fetch_or_fallback(PANE_TAG_OPTIONS, tag, PANE_TAG_DEFAULT) @pane_system_arguments[:classes] = class_names( @pane_system_arguments[:classes], - "LayoutBeta-pane" + "PageLayout-region", + "PageLayout-pane" ) # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], - "LayoutBeta--pane-position-start", PANE_WIDTH_MAPPINGS[fetch_or_fallback(PANE_WIDTH_OPTIONS, width, PANE_WIDTH_DEFAULT)], - "LayoutBeta--pane-divider" ) Primer::BaseComponent.new(**@pane_system_arguments) @@ -153,15 +152,14 @@ def initialize( @system_arguments = system_arguments @system_arguments[:tag] = :div @system_arguments[:classes] = class_names( - "LayoutBeta", + "PageLayout", INNER_SPACING_MAPPINGS[fetch_or_fallback(INNER_SPACING_OPTIONS, inner_spacing, INNER_SPACING_DEFAULT)], RESPONSIVE_PRIMARY_REGION_MAPPINGS[fetch_or_fallback(RESPONSIVE_PRIMARY_REGION_OPTIONS, responsive_primary_region, RESPONSIVE_PRIMARY_REGION_DEFAULT)], - "LayoutBeta--variant-separateRegions", - "LayoutBeta--column-gap-none", - "LayoutBeta--row-gap-none", - "LayoutBeta--pane-position-start", - "LayoutBeta--pane-divider", - "LayoutBeta--variant-md-multiColumns", + "PageLayout--variant-separateRegions", + "PageLayout--columnGap-none", + "PageLayout--rowGap-none", + "PageLayout--panePos-start", + "PageLayout--hasPaneDivider", system_arguments[:classes] ) end @@ -189,8 +187,8 @@ def initialize(tag: TAG_DEFAULT, width: WIDTH_DEFAULT, **system_arguments) @system_arguments = system_arguments @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT) @system_arguments[:classes] = class_names( - "LayoutBeta-region", - "LayoutBeta-content", + "PageLayout-region", + "PageLayout-content", system_arguments[:classes] ) end @@ -200,7 +198,7 @@ def call if @width == :fluid content else - render(Primer::BaseComponent.new(tag: :div, classes: "LayoutBeta-content-centered-#{@width}")) do + render(Primer::BaseComponent.new(tag: :div, classes: "PageLayout-content-centered-#{@width}")) do render(Primer::BaseComponent.new(tag: :div, container: @width)) do content end diff --git a/demo/app/views/layouts/storybook_centered_preview.html.erb b/demo/app/views/layouts/storybook_centered_preview.html.erb index bb2fb6bf24..5e63259a39 100644 --- a/demo/app/views/layouts/storybook_centered_preview.html.erb +++ b/demo/app/views/layouts/storybook_centered_preview.html.erb @@ -3,7 +3,7 @@ ActionView::Component Storybook Preview - + <% if Rails.env.development? %> <%= javascript_include_tag "primer_view_components", host: "localhost:4000" %> <% else %> diff --git a/demo/app/views/layouts/storybook_preview.html.erb b/demo/app/views/layouts/storybook_preview.html.erb index ff9c5afc02..135f744303 100644 --- a/demo/app/views/layouts/storybook_preview.html.erb +++ b/demo/app/views/layouts/storybook_preview.html.erb @@ -3,7 +3,7 @@ ActionView::Component Storybook Preview - + <% if Rails.env.development? %> <%= javascript_include_tag "primer_view_components", host: "localhost:4000" %> <% else %> diff --git a/test/components/primer/beta/split_layout_test.rb b/test/components/primer/beta/split_layout_test.rb index a4a0a778d3..95ac64f46f 100644 --- a/test/components/primer/beta/split_layout_test.rb +++ b/test/components/primer/beta/split_layout_test.rb @@ -22,9 +22,9 @@ def test_renders_layout c.pane { "Pane" } end - assert_selector("div.LayoutBeta") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -35,19 +35,22 @@ def test_renders_layout_with_correct_default_classes end expected_classes = [ - "LayoutBeta", - "LayoutBeta--variant-separateRegions", - "LayoutBeta--variant-md-multiColumns", - "LayoutBeta--primary-content", - "LayoutBeta--inner-spacing-normal", - "LayoutBeta--column-gap-none", - "LayoutBeta--row-gap-none", - "LayoutBeta--pane-position-start", - "LayoutBeta--pane-divider" + "PageLayout", + "PageLayout--innerSpacing-normal", + "PageLayout--columnGap-none", + "PageLayout--rowGap-none", + "PageLayout--panePos-start", + "PageLayout--hasPaneDivider", + "PageLayout--variant-separateRegions", + "PageLayout--variant-separateRegions-primary-content", ].join(".") assert_selector("div.#{expected_classes}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout-wrapper") do + assert_selector("div.PageLayout-columns") do + assert_selector("div.PageLayout-region.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-region.PageLayout-pane", text: "Pane") + end + end end end @@ -59,9 +62,9 @@ def test_responsive_primary_region end region_class = Primer::Beta::SplitLayout::RESPONSIVE_PRIMARY_REGION_MAPPINGS[region] - assert_selector("div.LayoutBeta#{region_class.empty? ? '' : ".#{region_class}"}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout#{region_class.empty? ? '' : ".#{region_class}"}") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -74,10 +77,10 @@ def test_pane_width end width_class = Primer::Beta::SplitLayout::PANE_WIDTH_MAPPINGS[size] - assert_selector("div.LayoutBeta") do + assert_selector("div.PageLayout") do assert_selector("div#{width_class.empty? ? '' : ".#{width_class}"}") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -90,9 +93,9 @@ def test_pane_tags c.pane(tag: tag) { "Pane" } end - assert_selector("div.LayoutBeta") do - assert_selector("div.LayoutBeta-content", text: "Main") - assert_selector("#{tag}.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout") do + assert_selector("div.PageLayout-content", text: "Main") + assert_selector("#{tag}.PageLayout-pane", text: "Pane") end end end @@ -104,17 +107,17 @@ def test_main_width c.pane { "Pane" } end - assert_selector("div.LayoutBeta-regions") do - assert_selector("div.LayoutBeta-content") do + assert_selector("div.PageLayout-columns") do + assert_selector("div.PageLayout-content") do if width == :fluid assert_text("Main") else - assert_selector("div.LayoutBeta-content-centered-#{width}") do + assert_selector("div.PageLayout-content-centered-#{width}") do assert_selector("div.container-#{width}", text: "Main") end end end - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout-pane", text: "Pane") end end end @@ -126,9 +129,9 @@ def test_main_tags c.pane { "Pane" } end - assert_selector("div.LayoutBeta") do - assert_selector("#{tag}.LayoutBeta-content", text: "Main") - assert_selector("div.LayoutBeta-pane", text: "Pane") + assert_selector("div.PageLayout") do + assert_selector("#{tag}.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-pane", text: "Pane") end end end From 1f2458bfea2dee70f187156d48f06f23376284f2 Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Mon, 13 Dec 2021 14:12:30 +0000 Subject: [PATCH 45/97] docs: build docs --- docs/content/components/beta/splitlayout.md | 4 ++-- static/classes.yml | 22 ++++++--------------- static/constants.json | 12 +++++------ 3 files changed, 14 insertions(+), 24 deletions(-) diff --git a/docs/content/components/beta/splitlayout.md b/docs/content/components/beta/splitlayout.md index 6f057571c0..c1e0966690 100644 --- a/docs/content/components/beta/splitlayout.md +++ b/docs/content/components/beta/splitlayout.md @@ -57,7 +57,7 @@ The layout's sidebar. ### Default - + ```erb @@ -105,7 +105,7 @@ When responsiveVariant is set to separateRegions, defines which region appears f Sets the pane width. The width is predetermined according to the breakpoint instead of it being percentage-based. - `default`: - `narrow`: - `wide`: When flowing as a row, `Pane` takes the full width. - + ```erb <%= render(Primer::Beta::SplitLayout.new) do |c| %> diff --git a/static/classes.yml b/static/classes.yml index cdb3427d33..0f386831a2 100644 --- a/static/classes.yml +++ b/static/classes.yml @@ -42,31 +42,18 @@ - ".Layout-main-centered-md" - ".Layout-main-centered-xl" - ".Layout-sidebar" -- ".LayoutBeta" -- ".LayoutBeta--column-gap-none" -- ".LayoutBeta--inner-spacing-normal" -- ".LayoutBeta--pane-divider" -- ".LayoutBeta--pane-position-start" -- ".LayoutBeta--pane-width-narrow" -- ".LayoutBeta--pane-width-wide" -- ".LayoutBeta--primary-content" -- ".LayoutBeta--row-gap-none" -- ".LayoutBeta--variant-md-multiColumns" -- ".LayoutBeta--variant-separateRegions" -- ".LayoutBeta-content" -- ".LayoutBeta-pane" -- ".LayoutBeta-region" -- ".LayoutBeta-regions" -- ".LayoutBeta-wrapper" - ".Link" - ".Link--muted" - ".Link--primary" - ".Link--secondary" - ".PageLayout" - ".PageLayout--columnGap-condensed" +- ".PageLayout--columnGap-none" - ".PageLayout--columnGap-normal" - ".PageLayout--hasFooterDivider" - ".PageLayout--hasHeaderDivider" +- ".PageLayout--hasPaneDivider" +- ".PageLayout--innerSpacing-normal" - ".PageLayout--outerSpacing-condensed" - ".PageLayout--outerSpacing-normal" - ".PageLayout--panePos-end" @@ -74,8 +61,11 @@ - ".PageLayout--paneWidth-narrow" - ".PageLayout--paneWidth-wide" - ".PageLayout--rowGap-condensed" +- ".PageLayout--rowGap-none" - ".PageLayout--rowGap-normal" - ".PageLayout--variant-md-multiColumns" +- ".PageLayout--variant-separateRegions" +- ".PageLayout--variant-separateRegions-primary-content" - ".PageLayout--variant-stackRegions" - ".PageLayout--variant-stackRegions-panePos-end" - ".PageLayout--variant-stackRegions-panePos-start" diff --git a/static/constants.json b/static/constants.json index 69cccbd054..62dd4bb9df 100644 --- a/static/constants.json +++ b/static/constants.json @@ -414,8 +414,8 @@ "Primer::Beta::SplitLayout": { "INNER_SPACING_DEFAULT": "normal", "INNER_SPACING_MAPPINGS": { - "normal": "LayoutBeta--inner-spacing-normal", - "condensed": "LayoutBeta--inner-spacing-condensed" + "normal": "PageLayout--innerSpacing-normal", + "condensed": "PageLayout--innerSpacing-condensed" }, "INNER_SPACING_OPTIONS": [ "normal", @@ -432,8 +432,8 @@ "PANE_WIDTH_DEFAULT": "default", "PANE_WIDTH_MAPPINGS": { "default": "", - "narrow": "LayoutBeta--pane-width-narrow", - "wide": "LayoutBeta--pane-width-wide" + "narrow": "PageLayout--paneWidth-narrow", + "wide": "PageLayout--paneWidth-wide" }, "PANE_WIDTH_OPTIONS": [ "default", @@ -442,8 +442,8 @@ ], "RESPONSIVE_PRIMARY_REGION_DEFAULT": "content", "RESPONSIVE_PRIMARY_REGION_MAPPINGS": { - "content": "LayoutBeta--primary-content", - "pane": "LayoutBeta--primary-pane" + "content": "PageLayout--variant-separateRegions-primary-content", + "pane": "PageLayout--variant-separateRegions-primary-pane" }, "RESPONSIVE_PRIMARY_REGION_OPTIONS": [ "content", From d8e9907d95297a1271fa4cddae8fff25e669c32b Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Mon, 13 Dec 2021 15:23:16 +0000 Subject: [PATCH 46/97] use correct class name --- app/components/primer/beta/page_layout.rb | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index b9ce758480..edbbb87777 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -50,7 +50,7 @@ class PageLayout < Primer::Component RESPONSIVE_PRIMARY_REGION_DEFAULT = :content RESPONSIVE_PRIMARY_REGION_MAPPINGS = { - RESPONSIVE_PRIMARY_REGION_DEFAULT => "PageLayout--variant-separateRegions-primary-pane", + RESPONSIVE_PRIMARY_REGION_DEFAULT => "PageLayout--variant-separateRegions-primary-content", :pane => "PageLayout--variant-separateRegions-primary-pane" }.freeze RESPONSIVE_PRIMARY_REGION_OPTIONS = RESPONSIVE_PRIMARY_REGION_MAPPINGS.keys.freeze @@ -386,7 +386,6 @@ def initialize( ROW_GAP_MAPPINGS[fetch_or_fallback(ROW_GAP_OPTIONS, row_gap, ROW_GAP_DEFAULT)], RESPONSIVE_VARIANT_MAPPINGS[fetch_or_fallback(RESPONSIVE_VARIANT_OPTIONS, @responsive_variant, RESPONSIVE_VARIANT_DEFAULT)], { RESPONSIVE_PRIMARY_REGION_MAPPINGS[fetch_or_fallback(RESPONSIVE_PRIMARY_REGION_OPTIONS, responsive_primary_region, RESPONSIVE_PRIMARY_REGION_DEFAULT)] => @responsive_variant == :separate_regions }, - "PageLayout--variant-md-multiColumns", system_arguments[:classes] ) end From 13f998fe2033f7b901f66443ea1ef1add0239105 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Mon, 13 Dec 2021 15:24:49 +0000 Subject: [PATCH 47/97] remove unused class name --- docs/content/components/beta/pagelayout.md | 22 +++++++++---------- docs/content/components/beta/splitlayout.md | 4 ++-- static/classes.yml | 1 - .../primer/beta/page_layout_test.rb | 1 - 4 files changed, 13 insertions(+), 15 deletions(-) diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md index 6ad246ef2b..52c82b2cc1 100644 --- a/docs/content/components/beta/pagelayout.md +++ b/docs/content/components/beta/pagelayout.md @@ -85,7 +85,7 @@ The layout's sidebar. ### Default - + ```erb @@ -97,7 +97,7 @@ The layout's sidebar. ### Header and footer - + ```erb @@ -113,7 +113,7 @@ The layout's sidebar. When `:fluid` the layout will be set to full width. When the other sizing options are used the layout will be centered with corresponding widths. - `:fluid`: full width - `:md`: max-width: 768px - `:lg`: max-width: 1012px - `:xl`: max-width: 1280px - + ```erb <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :fluid)) do |c| %> @@ -138,7 +138,7 @@ When `:fluid` the layout will be set to full width. When the other sizing option Sets wrapper margins surrounding the component to distance itself from the viewport edges. - `:condensed` keeps the margin at 16px. - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(outer_spacing: :condensed)) do |c| %> @@ -155,7 +155,7 @@ Sets wrapper margins surrounding the component to distance itself from the viewp Sets the gap between columns to distance them from each other. - `:condensed` keeps the gap always at 16px. - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(column_gap: :condensed)) do |c| %> @@ -172,7 +172,7 @@ Sets the gap between columns to distance them from each other. - `:condensed` ke Sets the gap below the header and above the footer. - `:condensed` keeps the gap always at 16px. - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(row_gap: :condensed)) do |c| %> @@ -189,7 +189,7 @@ Sets the gap below the header and above the footer. - `:condensed` keeps the gap Sets the pane width. The width is predetermined according to the breakpoint instead of it being percentage-based. - `default`: - `narrow`: - `wide`: When flowing as a row, `Pane` takes the full width. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> @@ -210,7 +210,7 @@ Sets the pane width. The width is predetermined according to the breakpoint inst Use `start` for sidebars that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> @@ -227,7 +227,7 @@ Use `start` for sidebars that manipulate local navigation, while right-aligned ` Defines the position of the pane in the responsive layout. - `:start` puts the pane above content - `:end` puts it below content. - `:inherit` uses the same value from `pane_position` - + ```erb <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> @@ -248,7 +248,7 @@ Defines the position of the pane in the responsive layout. - `:start` puts the p You can add an optional header to the layout and have spacing and positioning taken care of for you. You can optionally add a divider to the header. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> @@ -267,7 +267,7 @@ You can add an optional header to the layout and have spacing and positioning ta You can add an optional footer to the layout and have spacing and positioning taken care of for you. You can optionally add a divider to the footer. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> diff --git a/docs/content/components/beta/splitlayout.md b/docs/content/components/beta/splitlayout.md index c1e0966690..af06630726 100644 --- a/docs/content/components/beta/splitlayout.md +++ b/docs/content/components/beta/splitlayout.md @@ -71,7 +71,7 @@ The layout's sidebar. Sets padding to regions individually. - `:condensed` keeps the margin at 16px. - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(inner_spacing: :condensed)) do |c| %> @@ -88,7 +88,7 @@ Sets padding to regions individually. - `:condensed` keeps the margin at 16px. - When responsiveVariant is set to separateRegions, defines which region appears first on small viewports. content is default. - `:content` - `:pane` - + ```erb <%= render(Primer::Beta::PageLayout.new(resposive_primary_region: :content)) do |c| %> diff --git a/static/classes.yml b/static/classes.yml index 0f386831a2..05fbe768b5 100644 --- a/static/classes.yml +++ b/static/classes.yml @@ -63,7 +63,6 @@ - ".PageLayout--rowGap-condensed" - ".PageLayout--rowGap-none" - ".PageLayout--rowGap-normal" -- ".PageLayout--variant-md-multiColumns" - ".PageLayout--variant-separateRegions" - ".PageLayout--variant-separateRegions-primary-content" - ".PageLayout--variant-stackRegions" diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 1471d8182e..8cd57fff39 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -57,7 +57,6 @@ def test_renders_layout_with_correct_default_classes expected_classes = [ "PageLayout", "PageLayout--variant-stackRegions", - "PageLayout--variant-md-multiColumns", "PageLayout--outerSpacing-normal", "PageLayout--columnGap-normal", "PageLayout--rowGap-normal", From 3d323ea2ce9e0ffc8d2d6f04e2f49b7115e90678 Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Mon, 13 Dec 2021 15:25:47 +0000 Subject: [PATCH 48/97] docs: build docs --- static/constants.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/constants.json b/static/constants.json index 62dd4bb9df..00d1527043 100644 --- a/static/constants.json +++ b/static/constants.json @@ -294,7 +294,7 @@ "Pane": "Primer::Beta::PageLayout::Pane", "RESPONSIVE_PRIMARY_REGION_DEFAULT": "content", "RESPONSIVE_PRIMARY_REGION_MAPPINGS": { - "content": "PageLayout--variant-separateRegions-primary-pane", + "content": "PageLayout--variant-separateRegions-primary-content", "pane": "PageLayout--variant-separateRegions-primary-pane" }, "RESPONSIVE_PRIMARY_REGION_OPTIONS": [ From e300bcbcb6ee2055b51c6c3e425fc2616c07029a Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Mon, 13 Dec 2021 15:39:31 +0000 Subject: [PATCH 49/97] update description with latest version --- app/components/primer/beta/page_layout.rb | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index edbbb87777..fa3ee84282 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -5,13 +5,14 @@ module Beta # `PageLayout` provides foundational patterns for responsive pages. # `PageLayout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. # On smaller screens, `PageLayout` uses vertically stacked rows to display content. + # `PageLayout` is responsible to determine the arrangement of the main regions that compose a page. This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer. # - # `PageLayout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane`side-by-side (on a desktop of tablet device, per instance); + # PageLayout controls the page spacings, supports header and footer regions, provides different styles of sidebars, and handles responsive strategies. + # + # `PageLayout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane` side-by-side (on a desktop of tablet device, per instance); # or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). # `PageLayout` should always work in any screen size. # - # `PageLayout` also provides `Header` and `Footer` slots, which can be used to provide a consistent header and footer across all pages. - # # @accessibility # Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether # `main` or `pane` comes first in code. The code order won’t affect the visual position. From efa9f7c071eb6d3ed86b8631e791e49ccef5273f Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Mon, 13 Dec 2021 15:41:00 +0000 Subject: [PATCH 50/97] docs: build docs --- docs/content/components/beta/pagelayout.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md index 52c82b2cc1..6a2df9641c 100644 --- a/docs/content/components/beta/pagelayout.md +++ b/docs/content/components/beta/pagelayout.md @@ -13,13 +13,14 @@ import Example from '../../../src/@primer/gatsby-theme-doctocat/components/examp `PageLayout` provides foundational patterns for responsive pages. `PageLayout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. On smaller screens, `PageLayout` uses vertically stacked rows to display content. + `PageLayout` is responsible to determine the arrangement of the main regions that compose a page. This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer. -`PageLayout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane`side-by-side (on a desktop of tablet device, per instance); + PageLayout controls the page spacings, supports header and footer regions, provides different styles of sidebars, and handles responsive strategies. + +`PageLayout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane` side-by-side (on a desktop of tablet device, per instance); or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). `PageLayout` should always work in any screen size. -`PageLayout` also provides `Header` and `Footer` slots, which can be used to provide a consistent header and footer across all pages. - ## Accessibility Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether From b9dbe7e51d83864fb319018b0a7e988a3227cd4e Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Mon, 13 Dec 2021 17:18:57 +0000 Subject: [PATCH 51/97] appease linter --- app/components/primer/beta/split_layout.rb | 2 +- test/components/primer/beta/split_layout_test.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/primer/beta/split_layout.rb b/app/components/primer/beta/split_layout.rb index adc4c26db9..3684b19cf7 100644 --- a/app/components/primer/beta/split_layout.rb +++ b/app/components/primer/beta/split_layout.rb @@ -65,7 +65,7 @@ class SplitLayout < Primer::Component # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], - PANE_WIDTH_MAPPINGS[fetch_or_fallback(PANE_WIDTH_OPTIONS, width, PANE_WIDTH_DEFAULT)], + PANE_WIDTH_MAPPINGS[fetch_or_fallback(PANE_WIDTH_OPTIONS, width, PANE_WIDTH_DEFAULT)] ) Primer::BaseComponent.new(**@pane_system_arguments) diff --git a/test/components/primer/beta/split_layout_test.rb b/test/components/primer/beta/split_layout_test.rb index 95ac64f46f..4fe9fb6b1a 100644 --- a/test/components/primer/beta/split_layout_test.rb +++ b/test/components/primer/beta/split_layout_test.rb @@ -42,7 +42,7 @@ def test_renders_layout_with_correct_default_classes "PageLayout--panePos-start", "PageLayout--hasPaneDivider", "PageLayout--variant-separateRegions", - "PageLayout--variant-separateRegions-primary-content", + "PageLayout--variant-separateRegions-primary-content" ].join(".") assert_selector("div.#{expected_classes}") do assert_selector("div.PageLayout-wrapper") do From c8dd211f641c37827729545e1c7095cafff66a3a Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Mon, 13 Dec 2021 17:51:18 +0000 Subject: [PATCH 52/97] remove reference to removed component --- test/components/stories_test.rb | 1 - 1 file changed, 1 deletion(-) diff --git a/test/components/stories_test.rb b/test/components/stories_test.rb index 770fa63f2f..89f3c0cc2c 100644 --- a/test/components/stories_test.rb +++ b/test/components/stories_test.rb @@ -10,7 +10,6 @@ class AllComponentsHaveStoriesTest < Minitest::Test Primer::Beta::Breadcrumbs::Item, Primer::Beta::SplitLayout::Main, Primer::Beta::PageLayout::Pane, - Primer::Beta::PageLayout::Bookend, Primer::Beta::PageLayout::Main, Primer::Alpha::Layout::Main, Primer::Alpha::Layout::Sidebar From ac7a4401cb0b3f8b144ef65a64aea103679062ca Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Mon, 13 Dec 2021 17:51:33 +0000 Subject: [PATCH 53/97] sidebar renamed pane --- app/components/primer/beta/page_layout.rb | 6 +++--- app/components/primer/beta/split_layout.rb | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index fa3ee84282..cfa10d6ccf 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -7,7 +7,7 @@ module Beta # On smaller screens, `PageLayout` uses vertically stacked rows to display content. # `PageLayout` is responsible to determine the arrangement of the main regions that compose a page. This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer. # - # PageLayout controls the page spacings, supports header and footer regions, provides different styles of sidebars, and handles responsive strategies. + # PageLayout controls the page spacings, supports header and footer regions, provides different styles of panes, and handles responsive strategies. # # `PageLayout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane` side-by-side (on a desktop of tablet device, per instance); # or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). @@ -130,7 +130,7 @@ class PageLayout < Primer::Component Primer::BaseComponent.new(tag: :div, **footer_system_arguments) } - # The layout's sidebar. + # The layout's pane. # # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::Pane::WIDTH_OPTIONS) %> # @param position [Symbol] Pane placement when `Layout` is in column modes. <%= one_of(Primer::Beta::PageLayout::Pane::POSITION_OPTIONS) %> @@ -288,7 +288,7 @@ class PageLayout < Primer::Component # @example Pane position # # @description - # Use `start` for sidebars that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information. + # Use `start` for panes that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information. # # @code # <%= render(Primer::Beta::PageLayout.new) do |c| %> diff --git a/app/components/primer/beta/split_layout.rb b/app/components/primer/beta/split_layout.rb index 3684b19cf7..e05fe0e25c 100644 --- a/app/components/primer/beta/split_layout.rb +++ b/app/components/primer/beta/split_layout.rb @@ -48,7 +48,7 @@ class SplitLayout < Primer::Component # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> renders_one :main, "Primer::Beta::SplitLayout::Main" - # The layout's sidebar. + # The layout's pane. # # @param width [Symbol] <%= one_of(Primer::Beta::SplitLayout::PANE_WIDTH_OPTIONS) %> # @param tag [Symbol] <%= one_of(Primer::Beta::SplitLayout::PANE_TAG_OPTIONS) %> From a6dfc8f32b9caa04560241372161f14c690947b1 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Mon, 13 Dec 2021 18:04:09 +0000 Subject: [PATCH 54/97] rename split_layout to split_page_layout --- ...ut.html.erb => split_page_layout.html.erb} | 0 .../{split_layout.rb => split_page_layout.rb} | 30 ++++++++-------- demo/Gemfile.lock | 2 +- docs/content/components/beta/pagelayout.md | 6 ++-- .../{splitlayout.md => splitpagelayout.md} | 20 +++++------ .../src/@primer/gatsby-theme-doctocat/nav.yml | 4 +-- lib/tasks/docs.rake | 2 +- static/arguments.yml | 4 +-- static/audited_at.json | 4 +-- static/constants.json | 9 ++--- static/statuses.json | 4 +-- stories/primer/beta/split_layout_stories.rb | 23 ------------ .../primer/beta/split_page_layout_stories.rb | 23 ++++++++++++ test/components/component_test.rb | 2 +- ...yout_test.rb => split_page_layout_test.rb} | 36 +++++++++---------- test/components/stories_test.rb | 2 +- 16 files changed, 86 insertions(+), 85 deletions(-) rename app/components/primer/beta/{split_layout.html.erb => split_page_layout.html.erb} (100%) rename app/components/primer/beta/{split_layout.rb => split_page_layout.rb} (86%) rename docs/content/components/beta/{splitlayout.md => splitpagelayout.md} (94%) delete mode 100644 stories/primer/beta/split_layout_stories.rb create mode 100644 stories/primer/beta/split_page_layout_stories.rb rename test/components/primer/beta/{split_layout_test.rb => split_page_layout_test.rb} (71%) diff --git a/app/components/primer/beta/split_layout.html.erb b/app/components/primer/beta/split_page_layout.html.erb similarity index 100% rename from app/components/primer/beta/split_layout.html.erb rename to app/components/primer/beta/split_page_layout.html.erb diff --git a/app/components/primer/beta/split_layout.rb b/app/components/primer/beta/split_page_layout.rb similarity index 86% rename from app/components/primer/beta/split_layout.rb rename to app/components/primer/beta/split_page_layout.rb index e05fe0e25c..2beb44fef3 100644 --- a/app/components/primer/beta/split_layout.rb +++ b/app/components/primer/beta/split_page_layout.rb @@ -2,7 +2,7 @@ module Primer module Beta - # In the `SplitLayout`, changes in the Pane region are reflected in the Content region. This is also known as a "List/Detail" or "Master/Detail" pattern. + # In the `SplitPageLayout`, changes in the Pane region are reflected in the Content region. This is also known as a "List/Detail" or "Master/Detail" pattern. # # On larger screens, the user sees both regions side by side, with the Pane region appearing flushed to the left. # @@ -13,7 +13,7 @@ module Beta # @accessibility # Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether # `main` or `pane` comes first in code. The code order won’t affect the visual position. - class SplitLayout < Primer::Component + class SplitPageLayout < Primer::Component status :beta PANE_TAG_DEFAULT = :div @@ -43,15 +43,15 @@ class SplitLayout < Primer::Component # The layout's main content. # - # @param width [Symbol] <%= one_of(Primer::Beta::SplitLayout::Main::WIDTH_OPTIONS) %> - # @param tag [Symbol] <%= one_of(Primer::Beta::SplitLayout::Main::TAG_OPTIONS) %> + # @param width [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::Main::WIDTH_OPTIONS) %> + # @param tag [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::Main::TAG_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_one :main, "Primer::Beta::SplitLayout::Main" + renders_one :main, "Primer::Beta::SplitPageLayout::Main" # The layout's pane. # - # @param width [Symbol] <%= one_of(Primer::Beta::SplitLayout::PANE_WIDTH_OPTIONS) %> - # @param tag [Symbol] <%= one_of(Primer::Beta::SplitLayout::PANE_TAG_OPTIONS) %> + # @param width [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::PANE_WIDTH_OPTIONS) %> + # @param tag [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::PANE_TAG_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> renders_one :pane, lambda { |width: PANE_WIDTH_DEFAULT, tag: PANE_TAG_DEFAULT, **system_arguments| @pane_system_arguments = system_arguments @@ -73,7 +73,7 @@ class SplitLayout < Primer::Component # @example Default # - # <%= render(Primer::Beta::SplitLayout.new) do |c| %> + # <%= render(Primer::Beta::SplitPageLayout.new) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(border: true) { "Pane" } %> # <% end %> @@ -126,22 +126,22 @@ class SplitLayout < Primer::Component # When flowing as a row, `Pane` takes the full width. # # @code - # <%= render(Primer::Beta::SplitLayout.new) do |c| %> + # <%= render(Primer::Beta::SplitPageLayout.new) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(width: :default, border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::SplitLayout.new(mt: 5)) do |c| %> + # <%= render(Primer::Beta::SplitPageLayout.new(mt: 5)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(width: :narrow, border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::SplitLayout.new(mt: 5)) do |c| %> + # <%= render(Primer::Beta::SplitPageLayout.new(mt: 5)) do |c| %> # <% c.main(border: true) { "Main" } %> # <% c.pane(width: :wide, border: true) { "Pane" } %> # <% end %> # # - # @param inner_spacing [Symbol] Sets padding to regions individually. <%= one_of(Primer::Beta::SplitLayout::INNER_SPACING_OPTIONS) %> - # @param responsive_primary_region [Symbol] When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. <%= one_of(Primer::Beta::SplitLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS) %> + # @param inner_spacing [Symbol] Sets padding to regions individually. <%= one_of(Primer::Beta::SplitPageLayout::INNER_SPACING_OPTIONS) %> + # @param responsive_primary_region [Symbol] When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. <%= one_of(Primer::Beta::SplitPageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> def initialize( inner_spacing: INNER_SPACING_DEFAULT, @@ -178,8 +178,8 @@ class Main < Primer::Component TAG_DEFAULT = :div TAG_OPTIONS = [TAG_DEFAULT, :main].freeze - # @param width [Symbol] <%= one_of(Primer::Beta::SplitLayout::Main::WIDTH_OPTIONS) %> - # @param tag [Symbol] <%= one_of(Primer::Beta::SplitLayout::Main::TAG_OPTIONS) %> + # @param width [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::Main::WIDTH_OPTIONS) %> + # @param tag [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::Main::TAG_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> def initialize(tag: TAG_DEFAULT, width: WIDTH_DEFAULT, **system_arguments) @width = fetch_or_fallback(WIDTH_OPTIONS, width, WIDTH_DEFAULT) diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock index 7797d2a966..0b301aea4c 100644 --- a/demo/Gemfile.lock +++ b/demo/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: .. specs: - primer_view_components (0.0.63) + primer_view_components (0.0.64) actionview (>= 5.0.0) activesupport (>= 5.0.0) octicons (~> 15) diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md index 6a2df9641c..63a7d229a9 100644 --- a/docs/content/components/beta/pagelayout.md +++ b/docs/content/components/beta/pagelayout.md @@ -15,7 +15,7 @@ import Example from '../../../src/@primer/gatsby-theme-doctocat/components/examp On smaller screens, `PageLayout` uses vertically stacked rows to display content. `PageLayout` is responsible to determine the arrangement of the main regions that compose a page. This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer. - PageLayout controls the page spacings, supports header and footer regions, provides different styles of sidebars, and handles responsive strategies. + PageLayout controls the page spacings, supports header and footer regions, provides different styles of panes, and handles responsive strategies. `PageLayout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane` side-by-side (on a desktop of tablet device, per instance); or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). @@ -72,7 +72,7 @@ The layout's footer. ### `Pane` -The layout's sidebar. +The layout's pane. | Name | Type | Default | Description | | :- | :- | :- | :- | @@ -209,7 +209,7 @@ Sets the pane width. The width is predetermined according to the breakpoint inst ### Pane position -Use `start` for sidebars that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information. +Use `start` for panes that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information. diff --git a/docs/content/components/beta/splitlayout.md b/docs/content/components/beta/splitpagelayout.md similarity index 94% rename from docs/content/components/beta/splitlayout.md rename to docs/content/components/beta/splitpagelayout.md index af06630726..d4e6e7dd0d 100644 --- a/docs/content/components/beta/splitlayout.md +++ b/docs/content/components/beta/splitpagelayout.md @@ -1,16 +1,16 @@ --- -title: SplitLayout -componentId: split_layout +title: SplitPageLayout +componentId: split_page_layout status: Beta -source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/split_layout.rb -storybook: https://primer.style/view-components/stories/?path=/story/primer-beta-split-layout +source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/split_page_layout.rb +storybook: https://primer.style/view-components/stories/?path=/story/primer-beta-split-page-layout --- import Example from '../../../src/@primer/gatsby-theme-doctocat/components/example' -In the `SplitLayout`, changes in the Pane region are reflected in the Content region. This is also known as a "List/Detail" or "Master/Detail" pattern. +In the `SplitPageLayout`, changes in the Pane region are reflected in the Content region. This is also known as a "List/Detail" or "Master/Detail" pattern. On larger screens, the user sees both regions side by side, with the Pane region appearing flushed to the left. @@ -45,7 +45,7 @@ The layout's main content. ### `Pane` -The layout's sidebar. +The layout's pane. | Name | Type | Default | Description | | :- | :- | :- | :- | @@ -61,7 +61,7 @@ The layout's sidebar. ```erb -<%= render(Primer::Beta::SplitLayout.new) do |c| %> +<%= render(Primer::Beta::SplitPageLayout.new) do |c| %> <% c.main(border: true) { "Main" } %> <% c.pane(border: true) { "Pane" } %> <% end %> @@ -108,15 +108,15 @@ Sets the pane width. The width is predetermined according to the breakpoint inst ```erb -<%= render(Primer::Beta::SplitLayout.new) do |c| %> +<%= render(Primer::Beta::SplitPageLayout.new) do |c| %> <% c.main(border: true) { "Main" } %> <% c.pane(width: :default, border: true) { "Pane" } %> <% end %> -<%= render(Primer::Beta::SplitLayout.new(mt: 5)) do |c| %> +<%= render(Primer::Beta::SplitPageLayout.new(mt: 5)) do |c| %> <% c.main(border: true) { "Main" } %> <% c.pane(width: :narrow, border: true) { "Pane" } %> <% end %> -<%= render(Primer::Beta::SplitLayout.new(mt: 5)) do |c| %> +<%= render(Primer::Beta::SplitPageLayout.new(mt: 5)) do |c| %> <% c.main(border: true) { "Main" } %> <% c.pane(width: :wide, border: true) { "Pane" } %> <% end %> diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 76fe2eb9c3..3c68f64308 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -89,8 +89,8 @@ url: "/components/progressbar" - title: Spinner url: "/components/spinner" - - title: SplitLayout - url: "/components/splitlayout" + - title: SplitPageLayout + url: "/components/splitpagelayout" - title: State url: "/components/state" - title: Subhead diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake index 40e4631958..96c427cabd 100644 --- a/lib/tasks/docs.rake +++ b/lib/tasks/docs.rake @@ -30,7 +30,7 @@ namespace :docs do view_context = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context components = [ Primer::Beta::PageLayout, - Primer::Beta::SplitLayout, + Primer::Beta::SplitPageLayout, Primer::Alpha::Layout, Primer::HellipButton, Primer::Alpha::BorderBox::Header, diff --git a/static/arguments.yml b/static/arguments.yml index 1300f0ab1c..372751d6c2 100644 --- a/static/arguments.yml +++ b/static/arguments.yml @@ -317,8 +317,8 @@ type: Hash default: N/A description: "[System arguments](/system-arguments)" -- component: SplitLayout - source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/split_layout.rb +- component: SplitPageLayout + source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/split_page_layout.rb parameters: - name: inner_spacing type: Symbol diff --git a/static/audited_at.json b/static/audited_at.json index de13eb0ee1..17c3cb07cf 100644 --- a/static/audited_at.json +++ b/static/audited_at.json @@ -21,8 +21,8 @@ "Primer::Beta::PageLayout": "", "Primer::Beta::PageLayout::Main": "", "Primer::Beta::PageLayout::Pane": "", - "Primer::Beta::SplitLayout": "", - "Primer::Beta::SplitLayout::Main": "", + "Primer::Beta::SplitPageLayout": "", + "Primer::Beta::SplitPageLayout::Main": "", "Primer::Beta::Text": "", "Primer::Beta::Truncate": "", "Primer::Beta::Truncate::TruncateText": "", diff --git a/static/constants.json b/static/constants.json index 3d5dce3d9d..822a0d369f 100644 --- a/static/constants.json +++ b/static/constants.json @@ -411,7 +411,7 @@ "wide" ] }, - "Primer::Beta::SplitLayout": { + "Primer::Beta::SplitPageLayout": { "INNER_SPACING_DEFAULT": "normal", "INNER_SPACING_MAPPINGS": { "normal": "PageLayout--innerSpacing-normal", @@ -421,7 +421,7 @@ "normal", "condensed" ], - "Main": "Primer::Beta::SplitLayout::Main", + "Main": "Primer::Beta::SplitPageLayout::Main", "PANE_TAG_DEFAULT": "div", "PANE_TAG_OPTIONS": [ "div", @@ -450,7 +450,7 @@ "pane" ] }, - "Primer::Beta::SplitLayout::Main": { + "Primer::Beta::SplitPageLayout::Main": { "TAG_DEFAULT": "div", "TAG_OPTIONS": [ "div", @@ -567,7 +567,8 @@ } }, "Primer::Dropdown": { - "Menu": "Primer::Dropdown::Menu" + "Menu": "Primer::Dropdown::Menu", + "MenuTest": "Primer::Dropdown::MenuTest" }, "Primer::Dropdown::Menu": { "AS_DEFAULT": "default", diff --git a/static/statuses.json b/static/statuses.json index 9dc0b3c592..95abe62dad 100644 --- a/static/statuses.json +++ b/static/statuses.json @@ -21,8 +21,8 @@ "Primer::Beta::PageLayout": "beta", "Primer::Beta::PageLayout::Main": "beta", "Primer::Beta::PageLayout::Pane": "beta", - "Primer::Beta::SplitLayout": "beta", - "Primer::Beta::SplitLayout::Main": "beta", + "Primer::Beta::SplitPageLayout": "beta", + "Primer::Beta::SplitPageLayout::Main": "beta", "Primer::Beta::Text": "beta", "Primer::Beta::Truncate": "beta", "Primer::Beta::Truncate::TruncateText": "alpha", diff --git a/stories/primer/beta/split_layout_stories.rb b/stories/primer/beta/split_layout_stories.rb deleted file mode 100644 index 3acb8d77c1..0000000000 --- a/stories/primer/beta/split_layout_stories.rb +++ /dev/null @@ -1,23 +0,0 @@ -# frozen_string_literal: true - -require "primer/beta/split_layout" - -class Primer::Beta::SplitLayoutStories < ViewComponent::Storybook::Stories - layout "storybook_preview" - - story(:page_layout) do - controls do - select(:inner_spacing, Primer::Beta::SplitLayout::INNER_SPACING_OPTIONS, Primer::Beta::SplitLayout::INNER_SPACING_DEFAULT) - select(:responsive_primary_region, Primer::Beta::SplitLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS, Primer::Beta::SplitLayout::RESPONSIVE_PRIMARY_REGION_DEFAULT) - end - - content do |c| - c.main(border: true) do - "Main region" - end - c.pane(border: true) do - "Sidebar region" - end - end - end -end diff --git a/stories/primer/beta/split_page_layout_stories.rb b/stories/primer/beta/split_page_layout_stories.rb new file mode 100644 index 0000000000..d3ff028bfe --- /dev/null +++ b/stories/primer/beta/split_page_layout_stories.rb @@ -0,0 +1,23 @@ +# frozen_string_literal: true + +require "primer/beta/split_page_layout" + +class Primer::Beta::SplitPageLayoutStories < ViewComponent::Storybook::Stories + layout "storybook_preview" + + story(:page_layout) do + controls do + select(:inner_spacing, Primer::Beta::SplitPageLayout::INNER_SPACING_OPTIONS, Primer::Beta::SplitPageLayout::INNER_SPACING_DEFAULT) + select(:responsive_primary_region, Primer::Beta::SplitPageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS, Primer::Beta::SplitPageLayout::RESPONSIVE_PRIMARY_REGION_DEFAULT) + end + + content do |c| + c.main(border: true) do + "Main region" + end + c.pane(border: true) do + "Sidebar region" + end + end + end +end diff --git a/test/components/component_test.rb b/test/components/component_test.rb index 3157f72a9f..0b53442578 100644 --- a/test/components/component_test.rb +++ b/test/components/component_test.rb @@ -11,7 +11,7 @@ class PrimerComponentTest < Minitest::Test component.main(tag: :div) { "Foo" } component.pane(tag: :div) { "Bar" } }], - [Primer::Beta::SplitLayout, {}, proc { |component| + [Primer::Beta::SplitPageLayout, {}, proc { |component| component.main(tag: :div) { "Foo" } component.pane(tag: :div) { "Bar" } }], diff --git a/test/components/primer/beta/split_layout_test.rb b/test/components/primer/beta/split_page_layout_test.rb similarity index 71% rename from test/components/primer/beta/split_layout_test.rb rename to test/components/primer/beta/split_page_layout_test.rb index 4fe9fb6b1a..bab631eb92 100644 --- a/test/components/primer/beta/split_layout_test.rb +++ b/test/components/primer/beta/split_page_layout_test.rb @@ -2,22 +2,22 @@ require "test_helper" -class PrimerBetaSplitLayoutTest < Minitest::Test +class PrimerBetaSplitPageLayoutTest < Minitest::Test include Primer::ComponentTestHelpers def test_doesnt_render_without_both_slots - render_inline(Primer::Beta::SplitLayout.new) + render_inline(Primer::Beta::SplitPageLayout.new) refute_component_rendered - render_inline(Primer::Beta::SplitLayout.new) { |c| c.main { "Main" } } + render_inline(Primer::Beta::SplitPageLayout.new) { |c| c.main { "Main" } } refute_component_rendered - render_inline(Primer::Beta::SplitLayout.new) { |c| c.pane { "Pane" } } + render_inline(Primer::Beta::SplitPageLayout.new) { |c| c.pane { "Pane" } } refute_component_rendered end def test_renders_layout - render_inline(Primer::Beta::SplitLayout.new) do |c| + render_inline(Primer::Beta::SplitPageLayout.new) do |c| c.main { "Main" } c.pane { "Pane" } end @@ -29,7 +29,7 @@ def test_renders_layout end def test_renders_layout_with_correct_default_classes - render_inline(Primer::Beta::SplitLayout.new) do |c| + render_inline(Primer::Beta::SplitPageLayout.new) do |c| c.main { "Main" } c.pane { "Pane" } end @@ -55,13 +55,13 @@ def test_renders_layout_with_correct_default_classes end def test_responsive_primary_region - Primer::Beta::SplitLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS.each do |region| - render_inline(Primer::Beta::SplitLayout.new(responsive_primary_region: region)) do |c| + Primer::Beta::SplitPageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS.each do |region| + render_inline(Primer::Beta::SplitPageLayout.new(responsive_primary_region: region)) do |c| c.main { "Main" } c.pane { "Pane" } end - region_class = Primer::Beta::SplitLayout::RESPONSIVE_PRIMARY_REGION_MAPPINGS[region] + region_class = Primer::Beta::SplitPageLayout::RESPONSIVE_PRIMARY_REGION_MAPPINGS[region] assert_selector("div.PageLayout#{region_class.empty? ? '' : ".#{region_class}"}") do assert_selector("div.PageLayout-content", text: "Main") assert_selector("div.PageLayout-pane", text: "Pane") @@ -70,13 +70,13 @@ def test_responsive_primary_region end def test_pane_width - Primer::Beta::SplitLayout::PANE_WIDTH_OPTIONS.each do |size| - render_inline(Primer::Beta::SplitLayout.new) do |c| + Primer::Beta::SplitPageLayout::PANE_WIDTH_OPTIONS.each do |size| + render_inline(Primer::Beta::SplitPageLayout.new) do |c| c.main { "Main" } c.pane(width: size) { "Pane" } end - width_class = Primer::Beta::SplitLayout::PANE_WIDTH_MAPPINGS[size] + width_class = Primer::Beta::SplitPageLayout::PANE_WIDTH_MAPPINGS[size] assert_selector("div.PageLayout") do assert_selector("div#{width_class.empty? ? '' : ".#{width_class}"}") do assert_selector("div.PageLayout-content", text: "Main") @@ -87,8 +87,8 @@ def test_pane_width end def test_pane_tags - Primer::Beta::SplitLayout::PANE_TAG_OPTIONS.each do |tag| - render_inline(Primer::Beta::SplitLayout.new) do |c| + Primer::Beta::SplitPageLayout::PANE_TAG_OPTIONS.each do |tag| + render_inline(Primer::Beta::SplitPageLayout.new) do |c| c.main { "Main" } c.pane(tag: tag) { "Pane" } end @@ -101,8 +101,8 @@ def test_pane_tags end def test_main_width - Primer::Beta::SplitLayout::Main::WIDTH_OPTIONS.each do |width| - render_inline(Primer::Beta::SplitLayout.new) do |c| + Primer::Beta::SplitPageLayout::Main::WIDTH_OPTIONS.each do |width| + render_inline(Primer::Beta::SplitPageLayout.new) do |c| c.main(width: width) { "Main" } c.pane { "Pane" } end @@ -123,8 +123,8 @@ def test_main_width end def test_main_tags - Primer::Beta::SplitLayout::Main::TAG_OPTIONS.each do |tag| - render_inline(Primer::Beta::SplitLayout.new) do |c| + Primer::Beta::SplitPageLayout::Main::TAG_OPTIONS.each do |tag| + render_inline(Primer::Beta::SplitPageLayout.new) do |c| c.main(tag: tag) { "Main" } c.pane { "Pane" } end diff --git a/test/components/stories_test.rb b/test/components/stories_test.rb index 89f3c0cc2c..6a89eda4ea 100644 --- a/test/components/stories_test.rb +++ b/test/components/stories_test.rb @@ -8,7 +8,7 @@ class AllComponentsHaveStoriesTest < Minitest::Test Primer::FlexItemComponent, Primer::OcticonSymbolsComponent, Primer::Beta::Breadcrumbs::Item, - Primer::Beta::SplitLayout::Main, + Primer::Beta::SplitPageLayout::Main, Primer::Beta::PageLayout::Pane, Primer::Beta::PageLayout::Main, Primer::Alpha::Layout::Main, From 98e60ccbc9bd794ffd40d35dcf682b2adbfe8c72 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Mon, 13 Dec 2021 18:05:39 +0000 Subject: [PATCH 55/97] remove more Sidebar references --- stories/primer/beta/page_layout_stories.rb | 2 +- stories/primer/beta/split_page_layout_stories.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/stories/primer/beta/page_layout_stories.rb b/stories/primer/beta/page_layout_stories.rb index 4238168c64..34354d5bde 100644 --- a/stories/primer/beta/page_layout_stories.rb +++ b/stories/primer/beta/page_layout_stories.rb @@ -20,7 +20,7 @@ class Primer::Beta::PageLayoutStories < ViewComponent::Storybook::Stories "Main region" end c.pane(border: true) do - "Sidebar region" + "Pane region" end end end diff --git a/stories/primer/beta/split_page_layout_stories.rb b/stories/primer/beta/split_page_layout_stories.rb index d3ff028bfe..6f396d248e 100644 --- a/stories/primer/beta/split_page_layout_stories.rb +++ b/stories/primer/beta/split_page_layout_stories.rb @@ -16,7 +16,7 @@ class Primer::Beta::SplitPageLayoutStories < ViewComponent::Storybook::Stories "Main region" end c.pane(border: true) do - "Sidebar region" + "Pane region" end end end From 091b29baee397baed624b6d07ad619a9a6f98038 Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Mon, 13 Dec 2021 18:09:28 +0000 Subject: [PATCH 56/97] docs: build docs --- static/constants.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/static/constants.json b/static/constants.json index 822a0d369f..73dd5688ba 100644 --- a/static/constants.json +++ b/static/constants.json @@ -567,8 +567,7 @@ } }, "Primer::Dropdown": { - "Menu": "Primer::Dropdown::Menu", - "MenuTest": "Primer::Dropdown::MenuTest" + "Menu": "Primer::Dropdown::Menu" }, "Primer::Dropdown::Menu": { "AS_DEFAULT": "default", From e815af44dfe3562dcda389f42dcdf9ab33be01a8 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Mon, 13 Dec 2021 18:36:22 +0000 Subject: [PATCH 57/97] add additional info about keyboard selection order --- app/components/primer/beta/page_layout.rb | 2 +- app/components/primer/beta/split_page_layout.rb | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index cfa10d6ccf..f1a9730e5a 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -15,7 +15,7 @@ module Beta # # @accessibility # Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether - # `main` or `pane` comes first in code. The code order won’t affect the visual position. + # `main` or `pane` comes first in code. This is determined by the `position` argrument to the `pane` slot. class PageLayout < Primer::Component status :beta diff --git a/app/components/primer/beta/split_page_layout.rb b/app/components/primer/beta/split_page_layout.rb index 2beb44fef3..28be6cb5ce 100644 --- a/app/components/primer/beta/split_page_layout.rb +++ b/app/components/primer/beta/split_page_layout.rb @@ -11,8 +11,7 @@ module Beta # For example, opening "Repository settings" on mobile will have the user land on the Pane region, since in that case showing the menu options first is more important. # # @accessibility - # Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether - # `main` or `pane` comes first in code. The code order won’t affect the visual position. + # Keyboard navigation follows the markup order. In the case of the `SplitPageLayout`, the `Pane` region is the first region, and the `Content` region is the second. class SplitPageLayout < Primer::Component status :beta From 87d685a3e2d698bc35fe8ffb49cdbec8e49fb76f Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Mon, 13 Dec 2021 18:37:26 +0000 Subject: [PATCH 58/97] docs: build docs --- docs/content/components/beta/pagelayout.md | 2 +- docs/content/components/beta/splitpagelayout.md | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md index 63a7d229a9..88386195ec 100644 --- a/docs/content/components/beta/pagelayout.md +++ b/docs/content/components/beta/pagelayout.md @@ -24,7 +24,7 @@ or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a m ## Accessibility Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether -`main` or `pane` comes first in code. The code order won’t affect the visual position. +`main` or `pane` comes first in code. This is determined by the `position` argrument to the `pane` slot. ## Arguments diff --git a/docs/content/components/beta/splitpagelayout.md b/docs/content/components/beta/splitpagelayout.md index d4e6e7dd0d..d422e7d95c 100644 --- a/docs/content/components/beta/splitpagelayout.md +++ b/docs/content/components/beta/splitpagelayout.md @@ -20,8 +20,7 @@ For example, opening "Repository settings" on mobile will have the user land on ## Accessibility -Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether -`main` or `pane` comes first in code. The code order won’t affect the visual position. +Keyboard navigation follows the markup order. In the case of the `SplitPageLayout`, the `Pane` region is the first region, and the `Content` region is the second. ## Arguments From aa6c7d359322f1d82bc27aa761573343699f1274 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 14 Dec 2021 13:44:40 +0000 Subject: [PATCH 59/97] Namespace PageLayout slots One of the slots `content` is a reserved keyword for the ViewComponents library. Because of this we're namespacing the slots with the suffix, `_region` to avoid collisions. --- .../primer/beta/page_layout.html.erb | 14 +- app/components/primer/beta/page_layout.rb | 132 ++++++------- .../primer/beta/page_layout_test.rb | 176 +++++++++--------- 3 files changed, 161 insertions(+), 161 deletions(-) diff --git a/app/components/primer/beta/page_layout.html.erb b/app/components/primer/beta/page_layout.html.erb index 2ed887af4d..4e261ecfdd 100644 --- a/app/components/primer/beta/page_layout.html.erb +++ b/app/components/primer/beta/page_layout.html.erb @@ -1,15 +1,15 @@ <%= render Primer::BaseComponent.new(**@system_arguments) do %> <%= render(Primer::BaseComponent.new(tag: :div, classes: "PageLayout-wrapper #{@wrapper_sizing_class}")) do %> - <%= header %> + <%= header_region %> <%= render(Primer::BaseComponent.new(tag: :div, classes: "PageLayout-columns")) do %> - <% if pane.render_first? %> - <%= pane %> - <%= main %> + <% if pane_region.render_first? %> + <%= pane_region %> + <%= content_region %> <% else %> - <%= main %> - <%= pane %> + <%= content_region %> + <%= pane_region %> <% end %> <% end %> - <%= footer %> + <%= footer_region %> <% end %> <% end %> diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index f1a9730e5a..8b4e7891ed 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -9,13 +9,13 @@ module Beta # # PageLayout controls the page spacings, supports header and footer regions, provides different styles of panes, and handles responsive strategies. # - # `PageLayout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane` side-by-side (on a desktop of tablet device, per instance); - # or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). + # `PageLayout` flows as both column, when there's enough horizontal space to render both `Content` and `Pane` side-by-side (on a desktop of tablet device, per instance); + # or it flows as a row, when `Content` and `Pane` are stacked vertically (e.g. on a mobile device). # `PageLayout` should always work in any screen size. # # @accessibility # Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether - # `main` or `pane` comes first in code. This is determined by the `position` argrument to the `pane` slot. + # `content` or `pane` comes first in code. This is determined by the `position` argrument to the `pane` slot. class PageLayout < Primer::Component status :beta @@ -79,19 +79,19 @@ class PageLayout < Primer::Component }.freeze FOOTER_RESPONSIVE_DIVIDER_OPTIONS = FOOTER_RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze - # The layout's main content. + # The layout's content. # - # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::Main::WIDTH_OPTIONS) %> - # @param tag [Symbol] <%= one_of(Primer::Beta::PageLayout::Main::TAG_OPTIONS) %> + # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::Content::WIDTH_OPTIONS) %> + # @param tag [Symbol] <%= one_of(Primer::Beta::PageLayout::Content::TAG_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_one :main, "Primer::Beta::PageLayout::Main" + renders_one :content_region, "Primer::Beta::PageLayout::Content" # The layout's header. # # @param divider [Boolean] Whether to show a header divider # @param responsive_divider [Symbol] Whether to show a divider below the `header` region if in responsive mode. <%= one_of(Primer::Beta::PageLayout::HEADER_RESPONSIVE_DIVIDER_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_one :header, lambda { |divider: false, responsive_divider: :line, **header_system_arguments| + renders_one :header_region, lambda { |divider: false, responsive_divider: :line, **header_system_arguments| # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], @@ -113,7 +113,7 @@ class PageLayout < Primer::Component # @param divider [Boolean] Whether to show a footer divider # @param responsive_divider [Symbol] Whether to show a divider below the `footer` region if in responsive mode. <%= one_of(Primer::Beta::PageLayout::FOOTER_RESPONSIVE_DIVIDER_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_one :footer, lambda { |divider: false, responsive_divider: FOOTER_RESPONSIVE_DIVIDER_DEFAULT, **footer_system_arguments| + renders_one :footer_region, lambda { |divider: false, responsive_divider: FOOTER_RESPONSIVE_DIVIDER_DEFAULT, **footer_system_arguments| # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], @@ -137,7 +137,7 @@ class PageLayout < Primer::Component # @param responsive_position [Symbol] Pane placement when `Layout` is in column modes. <%= one_of(Primer::Beta::PageLayout::Pane::RESPONSIVE_POSITION_OPTIONS) %> # @param divider [Boolean] Whether to show a pane line divider. # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_one :pane, lambda { | + renders_one :pane_region, lambda { | width: Pane::WIDTH_DEFAULT, position: Pane::POSITION_DEFAULT, responsive_position: Pane::RESPONSIVE_POSITION_DEFAULT, @@ -165,17 +165,17 @@ class PageLayout < Primer::Component # @example Default # # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # # @example Header and footer # # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.header(border: true) { "Header" } %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> - # <% c.footer(border: true) { "Footer" } %> + # <% c.header_region(border: true) { "Header" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> + # <% c.footer_region(border: true) { "Footer" } %> # <% end %> # # @example Wrapper sizing @@ -190,20 +190,20 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :fluid)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :md)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :lg)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :xl)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # # @example Outer spacing @@ -216,12 +216,12 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new(outer_spacing: :condensed)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(outer_spacing: :normal)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # # @example Column gap @@ -234,12 +234,12 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new(column_gap: :condensed)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(column_gap: :normal)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # # @example Row gap @@ -252,12 +252,12 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new(row_gap: :condensed)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(row_gap: :normal)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # # @example Pane widths @@ -273,16 +273,16 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(width: :default, border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(width: :default, border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(width: :narrow, border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(width: :narrow, border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(width: :wide, border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(width: :wide, border: true) { "Pane" } %> # <% end %> # # @example Pane position @@ -292,12 +292,12 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(position: :start, border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(position: :start, border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new( mt: 5)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(position: :end, border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(position: :end, border: true) { "Pane" } %> # <% end %> # # @example Pane resposive position @@ -311,16 +311,16 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(pane_responsive_position: :inherit, border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(pane_responsive_position: :inherit, border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(pane_responsive_position: :start, border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(pane_responsive_position: :start, border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(pane_responsive_position: :end, border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(pane_responsive_position: :end, border: true) { "Pane" } %> # <% end %> # # @example Header @@ -331,14 +331,14 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.header(border: true) { "Header" } %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.header_region(border: true) { "Header" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.header(divider: true, border: true) { "Header" } %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.header_region(divider: true, border: true) { "Header" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # # @example Footer @@ -349,14 +349,14 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> - # <% c.footer(border: true) { "Header" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> + # <% c.footer_region(border: true) { "Header" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> - # <% c.footer(divider: true, border: true) { "Header" } %> + # <% c.content_region(border: true) { "Main" } %> + # <% c.pane_region(border: true) { "Pane" } %> + # <% c.footer_region(divider: true, border: true) { "Header" } %> # <% end %> # # @param wrapper_sizing [Symbol] Define the maximum width of the component. `:fluid` sets it to full-width. Other values center Layout horizontally. <%= one_of(Primer::Beta::PageLayout::WRAPPER_SIZING_OPTIONS) %> @@ -392,11 +392,11 @@ def initialize( end def render? - main.present? && pane.present? + content_region.present? && pane_region.present? end # The layout's main content. - class Main < Primer::Component + class Content < Primer::Component status :beta WIDTH_DEFAULT = :fluid diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 8cd57fff39..7cb0d196e9 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -9,22 +9,22 @@ def test_doesnt_render_without_both_slots render_inline(Primer::Beta::PageLayout.new) refute_component_rendered - render_inline(Primer::Beta::PageLayout.new) { |c| c.main { "Main" } } + render_inline(Primer::Beta::PageLayout.new) { |c| c.content_region { "Content" } } refute_component_rendered - render_inline(Primer::Beta::PageLayout.new) { |c| c.pane { "Pane" } } + render_inline(Primer::Beta::PageLayout.new) { |c| c.pane_region { "Pane" } } refute_component_rendered end def test_renders_layout render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane { "Pane" } + c.content_region { "Content" } + c.pane_region { "Pane" } end assert_selector("div.PageLayout") do assert_selector("div.PageLayout-columns") do - assert_selector("div.PageLayout-region.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-region.PageLayout-content", text: "Content") assert_selector("div.PageLayout-region.PageLayout-pane.PageLayout-region--hasDivider-none-before", text: "Pane") end end @@ -32,16 +32,16 @@ def test_renders_layout def test_optionally_renders_header_and_footer render_inline(Primer::Beta::PageLayout.new) do |c| - c.header { "Header" } - c.main { "Main" } - c.pane { "Pane" } - c.footer { "Footer" } + c.header_region { "Header" } + c.content_region { "Content" } + c.pane_region { "Pane" } + c.footer_region { "Footer" } end assert_selector("div.PageLayout") do assert_selector("div.PageLayout-header.PageLayout-region", text: "Header") assert_selector("div.PageLayout-columns") do - assert_selector("div.PageLayout-region.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-region.PageLayout-content", text: "Content") assert_selector("div.PageLayout-region.PageLayout-pane.PageLayout-region--hasDivider-none-before", text: "Pane") end assert_selector("div.PageLayout-footer.PageLayout-region", text: "Footer") @@ -50,8 +50,8 @@ def test_optionally_renders_header_and_footer def test_renders_layout_with_correct_default_classes render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane { "Pane" } + c.content_region { "Content" } + c.pane_region { "Pane" } end expected_classes = [ @@ -64,7 +64,7 @@ def test_renders_layout_with_correct_default_classes "PageLayout--variant-stackRegions-panePos-start" ].join(".") assert_selector("div.#{expected_classes}") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -72,13 +72,13 @@ def test_renders_layout_with_correct_default_classes def test_wrapper_sizing Primer::Beta::PageLayout::WRAPPER_SIZING_OPTIONS.each do |size| render_inline(Primer::Beta::PageLayout.new(wrapper_sizing: size)) do |c| - c.main { "Main" } - c.pane { "Pane" } + c.content_region { "Content" } + c.pane_region { "Pane" } end assert_selector("div.PageLayout") do assert_selector("div.PageLayout-wrapper#{size == :fluid ? '' : ".container-#{size}"}") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -88,13 +88,13 @@ def test_wrapper_sizing def test_outer_spacing Primer::Beta::PageLayout::OUTER_SPACING_OPTIONS.each do |size| render_inline(Primer::Beta::PageLayout.new(outer_spacing: size)) do |c| - c.main { "Main" } - c.pane { "Pane" } + c.content_region { "Content" } + c.pane_region { "Pane" } end size_class = Primer::Beta::PageLayout::OUTER_SPACING_MAPPINGS[size] assert_selector("div.PageLayout#{size_class.empty? ? '' : ".#{size_class}"}") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -103,13 +103,13 @@ def test_outer_spacing def test_column_gap Primer::Beta::PageLayout::COLUMN_GAP_OPTIONS.each do |size| render_inline(Primer::Beta::PageLayout.new(column_gap: size)) do |c| - c.main { "Main" } - c.pane { "Pane" } + c.content_region { "Content" } + c.pane_region { "Pane" } end size_class = Primer::Beta::PageLayout::COLUMN_GAP_MAPPINGS[size] assert_selector("div.PageLayout#{size_class.empty? ? '' : ".#{size_class}"}") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -118,13 +118,13 @@ def test_column_gap def test_row_gap Primer::Beta::PageLayout::ROW_GAP_OPTIONS.each do |size| render_inline(Primer::Beta::PageLayout.new(row_gap: size)) do |c| - c.main { "Main" } - c.pane { "Pane" } + c.content_region { "Content" } + c.pane_region { "Pane" } end size_class = Primer::Beta::PageLayout::ROW_GAP_MAPPINGS[size] assert_selector("div.PageLayout#{size_class.empty? ? '' : ".#{size_class}"}") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -133,13 +133,13 @@ def test_row_gap def test_responsive_variant Primer::Beta::PageLayout::RESPONSIVE_VARIANT_OPTIONS.each do |variant| render_inline(Primer::Beta::PageLayout.new(responsive_variant: variant)) do |c| - c.main { "Main" } - c.pane { "Pane" } + c.content_region { "Content" } + c.pane_region { "Pane" } end variant_class = Primer::Beta::PageLayout::RESPONSIVE_VARIANT_MAPPINGS[variant] assert_selector("div.PageLayout#{variant_class.empty? ? '' : ".#{variant_class}"}") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -148,13 +148,13 @@ def test_responsive_variant def test_responsive_primary_region Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS.each do |region| render_inline(Primer::Beta::PageLayout.new(responsive_variant: :separate_regions, responsive_primary_region: region)) do |c| - c.main { "Main" } - c.pane { "Pane" } + c.content_region { "Content" } + c.pane_region { "Pane" } end region_class = Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_MAPPINGS[region] assert_selector("div.PageLayout#{region_class.empty? ? '' : ".#{region_class}"}") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -162,8 +162,8 @@ def test_responsive_primary_region def test_responsive_primary_region_not_set_when_stack_regions render_inline(Primer::Beta::PageLayout.new(responsive_variant: :stack_regions)) do |c| - c.main { "Main" } - c.pane { "Pane" } + c.content_region { "Content" } + c.pane_region { "Pane" } end refute_selector("div.PageLayout--variant-separateRegions-primary-pane") @@ -173,14 +173,14 @@ def test_responsive_primary_region_not_set_when_stack_regions def test_pane_width Primer::Beta::PageLayout::Pane::WIDTH_OPTIONS.each do |size| render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane(width: size) { "Pane" } + c.content_region { "Content" } + c.pane_region(width: size) { "Pane" } end width_class = Primer::Beta::PageLayout::Pane::WIDTH_MAPPINGS[size] assert_selector("div.PageLayout") do assert_selector("div#{width_class.empty? ? '' : ".#{width_class}"}") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -189,20 +189,20 @@ def test_pane_width def test_pane_divider_present_when_set render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane(divider: true) { "Pane" } + c.content_region { "Content" } + c.pane_region(divider: true) { "Pane" } end assert_selector("div.PageLayout.PageLayout--hasPaneDivider") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end def test_pane_divider_absent_when_not_set render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane { "Pane" } + c.content_region { "Content" } + c.pane_region { "Pane" } end refute_selector("div.PageLayout.PageLayout--hasPaneDivider") @@ -211,14 +211,14 @@ def test_pane_divider_absent_when_not_set def test_pane_responsive_divider Primer::Beta::PageLayout::Pane::RESPONSIVE_DIVIDER_OPTIONS.each do |type| render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane(responsive_divider: type) { "Pane" } + c.content_region { "Content" } + c.pane_region(responsive_divider: type) { "Pane" } end type_class = Primer::Beta::PageLayout::Pane::RESPONSIVE_DIVIDER_MAPPINGS[type] assert_selector("div.PageLayout") do assert_selector("div#{type_class.empty? ? '' : ".#{type_class}"}") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -228,13 +228,13 @@ def test_pane_responsive_divider def test_pane_position_add_correct_class Primer::Beta::PageLayout::Pane::POSITION_OPTIONS.each do |position| render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane(position: position) { "Pane" } + c.content_region { "Content" } + c.pane_region(position: position) { "Pane" } end assert_selector("div.PageLayout") do assert_selector("div.PageLayout--panePos-#{position}") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -243,8 +243,8 @@ def test_pane_position_add_correct_class def test_pane_position_renders_pane_first render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane(position: :start) { "Pane" } + c.content_region { "Content" } + c.pane_region(position: :start) { "Pane" } end assert_match(/PageLayout-pane.*PageLayout-content/m, @rendered_component) @@ -252,8 +252,8 @@ def test_pane_position_renders_pane_first def test_pane_position_renders_pane_last render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane(position: :end) { "Pane" } + c.content_region { "Content" } + c.pane_region(position: :end) { "Pane" } end assert_match(/PageLayout-content.*PageLayout-pane/m, @rendered_component) @@ -263,14 +263,14 @@ def test_stack_regions_variant_with_responsive_pane_position Primer::Beta::PageLayout::Pane::POSITION_OPTIONS.each do |position| Primer::Beta::PageLayout::Pane::RESPONSIVE_POSITION_OPTIONS.each do |responsive_position| render_inline(Primer::Beta::PageLayout.new(responsive_variant: :stack_regions)) do |c| - c.main { "Main" } - c.pane(position: position, responsive_position: responsive_position) { "Pane" } + c.content_region { "Content" } + c.pane_region(position: position, responsive_position: responsive_position) { "Pane" } end responsive_position = position if responsive_position == :inherit assert_selector("div.PageLayout") do assert_selector("div.PageLayout--panePos-#{position}.PageLayout--variant-stackRegions-panePos-#{responsive_position}") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -280,8 +280,8 @@ def test_stack_regions_variant_with_responsive_pane_position def test_variant_pane_position_not_set_when_separate_regions render_inline(Primer::Beta::PageLayout.new(responsive_variant: :separate_regions)) do |c| - c.main { "Main" } - c.pane(position: :start) { "Pane" } + c.content_region { "Content" } + c.pane_region(position: :start) { "Pane" } end refute_selector("div.PageLayout--variant-stackRegions-panePos-end") @@ -291,31 +291,31 @@ def test_variant_pane_position_not_set_when_separate_regions def test_pane_tags Primer::Beta::PageLayout::Pane::TAG_OPTIONS.each do |tag| render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane(tag: tag) { "Pane" } + c.content_region { "Content" } + c.pane_region(tag: tag) { "Pane" } end assert_selector("div.PageLayout") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("#{tag}.PageLayout-pane", text: "Pane") end end end def test_main_width - Primer::Beta::PageLayout::Main::WIDTH_OPTIONS.each do |width| + Primer::Beta::PageLayout::Content::WIDTH_OPTIONS.each do |width| render_inline(Primer::Beta::PageLayout.new) do |c| - c.main(width: width) { "Main" } - c.pane { "Pane" } + c.content_region(width: width) { "Content" } + c.pane_region { "Pane" } end assert_selector("div.PageLayout-columns") do assert_selector("div.PageLayout-content") do if width == :fluid - assert_text("Main") + assert_text("Content") else assert_selector("div.PageLayout-content-centered-#{width}") do - assert_selector("div.container-#{width}", text: "Main") + assert_selector("div.container-#{width}", text: "Content") end end end @@ -325,14 +325,14 @@ def test_main_width end def test_main_tags - Primer::Beta::PageLayout::Main::TAG_OPTIONS.each do |tag| + Primer::Beta::PageLayout::Content::TAG_OPTIONS.each do |tag| render_inline(Primer::Beta::PageLayout.new) do |c| - c.main(tag: tag) { "Main" } - c.pane { "Pane" } + c.content_region(tag: tag) { "Content" } + c.pane_region { "Pane" } end assert_selector("div.PageLayout") do - assert_selector("#{tag}.PageLayout-content", text: "Main") + assert_selector("#{tag}.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -340,9 +340,9 @@ def test_main_tags def test_header_divider_present_when_set render_inline(Primer::Beta::PageLayout.new) do |c| - c.header(divider: true) { "Header" } - c.main { "Main" } - c.pane { "Pane" } + c.header_region(divider: true) { "Header" } + c.content_region { "Content" } + c.pane_region { "Pane" } end assert_selector("div.PageLayout.PageLayout--hasHeaderDivider") @@ -350,9 +350,9 @@ def test_header_divider_present_when_set def test_header_divider_not_present_when_not_set render_inline(Primer::Beta::PageLayout.new) do |c| - c.header { "Header" } - c.main { "Main" } - c.pane { "Pane" } + c.header_region { "Header" } + c.content_region { "Content" } + c.pane_region { "Pane" } end refute_selector("div.PageLayout.PageLayout--hasHeaderDivider") @@ -361,15 +361,15 @@ def test_header_divider_not_present_when_not_set def test_header_responsive_divider Primer::Beta::PageLayout::HEADER_RESPONSIVE_DIVIDER_OPTIONS.each do |opt| render_inline(Primer::Beta::PageLayout.new) do |c| - c.header(responsive_divider: opt) { "Header" } - c.main { "Main" } - c.pane { "Pane" } + c.header_region(responsive_divider: opt) { "Header" } + c.content_region { "Content" } + c.pane_region { "Pane" } end divider_class = Primer::Beta::PageLayout::HEADER_RESPONSIVE_DIVIDER_MAPPINGS[opt] assert_selector("div.PageLayout") do assert_selector("div.PageLayout-header#{divider_class.empty? ? '' : ".#{divider_class}"}", text: "Header") - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -377,9 +377,9 @@ def test_header_responsive_divider def test_footer_divider_present_when_set render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane { "Pane" } - c.footer(divider: true) { "Footer" } + c.content_region { "Content" } + c.pane_region { "Pane" } + c.footer_region(divider: true) { "Footer" } end assert_selector("div.PageLayout.PageLayout--hasFooterDivider") @@ -387,9 +387,9 @@ def test_footer_divider_present_when_set def test_footer_divider_not_present_when_not_set render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane { "Pane" } - c.footer { "Footer" } + c.content_region { "Content" } + c.pane_region { "Pane" } + c.footer_region { "Footer" } end refute_selector("div.PageLayout.PageLayout--hasFooterDivider") @@ -398,15 +398,15 @@ def test_footer_divider_not_present_when_not_set def test_footer_responsive_divider Primer::Beta::PageLayout::FOOTER_RESPONSIVE_DIVIDER_OPTIONS.each do |opt| render_inline(Primer::Beta::PageLayout.new) do |c| - c.main { "Main" } - c.pane { "Pane" } - c.footer(responsive_divider: opt) { "Footer" } + c.content_region { "Content" } + c.pane_region { "Pane" } + c.footer_region(responsive_divider: opt) { "Footer" } end divider_class = Primer::Beta::PageLayout::FOOTER_RESPONSIVE_DIVIDER_MAPPINGS[opt] assert_selector("div.PageLayout") do assert_selector("div.PageLayout-footer#{divider_class.empty? ? '' : ".#{divider_class}"}", text: "Footer") - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end From 7b20e205277eeb71972c0098e9c4e683321fe7cb Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 14 Dec 2021 14:21:01 +0000 Subject: [PATCH 60/97] Namespace SplitPageLayout slots Since this component requires a `content` slot and `content` is a reserved keyword, we have added the `_region` suffix. --- .../primer/beta/split_page_layout.html.erb | 4 +- .../primer/beta/split_page_layout.rb | 52 ++++++++--------- .../primer/beta/split_page_layout_test.rb | 56 +++++++++---------- 3 files changed, 56 insertions(+), 56 deletions(-) diff --git a/app/components/primer/beta/split_page_layout.html.erb b/app/components/primer/beta/split_page_layout.html.erb index 53d06ae405..e6e39137b9 100644 --- a/app/components/primer/beta/split_page_layout.html.erb +++ b/app/components/primer/beta/split_page_layout.html.erb @@ -1,8 +1,8 @@ <%= render Primer::BaseComponent.new(**@system_arguments) do %> <%= render(Primer::BaseComponent.new(tag: :div, classes: "PageLayout-wrapper")) do %> <%= render(Primer::BaseComponent.new(tag: :div, classes: "PageLayout-columns")) do %> - <%= pane %> - <%= main %> + <%= pane_region %> + <%= content_region %> <% end %> <% end %> <% end %> diff --git a/app/components/primer/beta/split_page_layout.rb b/app/components/primer/beta/split_page_layout.rb index 28be6cb5ce..fd355660f2 100644 --- a/app/components/primer/beta/split_page_layout.rb +++ b/app/components/primer/beta/split_page_layout.rb @@ -40,19 +40,19 @@ class SplitPageLayout < Primer::Component }.freeze RESPONSIVE_PRIMARY_REGION_OPTIONS = RESPONSIVE_PRIMARY_REGION_MAPPINGS.keys.freeze - # The layout's main content. + # The layout's content. # - # @param width [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::Main::WIDTH_OPTIONS) %> - # @param tag [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::Main::TAG_OPTIONS) %> + # @param width [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::Content::WIDTH_OPTIONS) %> + # @param tag [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::Content::TAG_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_one :main, "Primer::Beta::SplitPageLayout::Main" + renders_one :content_region, "Primer::Beta::SplitPageLayout::Content" # The layout's pane. # # @param width [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::PANE_WIDTH_OPTIONS) %> # @param tag [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::PANE_TAG_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_one :pane, lambda { |width: PANE_WIDTH_DEFAULT, tag: PANE_TAG_DEFAULT, **system_arguments| + renders_one :pane_region, lambda { |width: PANE_WIDTH_DEFAULT, tag: PANE_TAG_DEFAULT, **system_arguments| @pane_system_arguments = system_arguments @pane_system_arguments[:tag] = fetch_or_fallback(PANE_TAG_OPTIONS, tag, PANE_TAG_DEFAULT) @pane_system_arguments[:classes] = class_names( @@ -73,8 +73,8 @@ class SplitPageLayout < Primer::Component # @example Default # # <%= render(Primer::Beta::SplitPageLayout.new) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Content" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # # @example Inner spacing @@ -87,12 +87,12 @@ class SplitPageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new(inner_spacing: :condensed)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Content" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(inner_spacing: :normal)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Content" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # # @example Responsive primary region @@ -105,12 +105,12 @@ class SplitPageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new(resposive_primary_region: :content)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Content" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(responsive_primary_region: :pane)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Content" } %> + # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # # @example Pane widths @@ -126,16 +126,16 @@ class SplitPageLayout < Primer::Component # # @code # <%= render(Primer::Beta::SplitPageLayout.new) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(width: :default, border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Content" } %> + # <% c.pane_region(width: :default, border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::SplitPageLayout.new(mt: 5)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(width: :narrow, border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Content" } %> + # <% c.pane_region(width: :narrow, border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::SplitPageLayout.new(mt: 5)) do |c| %> - # <% c.main(border: true) { "Main" } %> - # <% c.pane(width: :wide, border: true) { "Pane" } %> + # <% c.content_region(border: true) { "Content" } %> + # <% c.pane_region(width: :wide, border: true) { "Pane" } %> # <% end %> # # @@ -164,11 +164,11 @@ def initialize( end def render? - main.present? && pane.present? + content_region.present? && pane_region.present? end - # The layout's main content. - class Main < Primer::Component + # The layout's content. + class Content < Primer::Component status :beta WIDTH_DEFAULT = :fluid @@ -177,8 +177,8 @@ class Main < Primer::Component TAG_DEFAULT = :div TAG_OPTIONS = [TAG_DEFAULT, :main].freeze - # @param width [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::Main::WIDTH_OPTIONS) %> - # @param tag [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::Main::TAG_OPTIONS) %> + # @param width [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::Content::WIDTH_OPTIONS) %> + # @param tag [Symbol] <%= one_of(Primer::Beta::SplitPageLayout::Content::TAG_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> def initialize(tag: TAG_DEFAULT, width: WIDTH_DEFAULT, **system_arguments) @width = fetch_or_fallback(WIDTH_OPTIONS, width, WIDTH_DEFAULT) diff --git a/test/components/primer/beta/split_page_layout_test.rb b/test/components/primer/beta/split_page_layout_test.rb index bab631eb92..8e14880d60 100644 --- a/test/components/primer/beta/split_page_layout_test.rb +++ b/test/components/primer/beta/split_page_layout_test.rb @@ -9,29 +9,29 @@ def test_doesnt_render_without_both_slots render_inline(Primer::Beta::SplitPageLayout.new) refute_component_rendered - render_inline(Primer::Beta::SplitPageLayout.new) { |c| c.main { "Main" } } + render_inline(Primer::Beta::SplitPageLayout.new) { |c| c.content_region { "Content" } } refute_component_rendered - render_inline(Primer::Beta::SplitPageLayout.new) { |c| c.pane { "Pane" } } + render_inline(Primer::Beta::SplitPageLayout.new) { |c| c.pane_region { "Pane" } } refute_component_rendered end def test_renders_layout render_inline(Primer::Beta::SplitPageLayout.new) do |c| - c.main { "Main" } - c.pane { "Pane" } + c.content_region { "Content" } + c.pane_region { "Pane" } end assert_selector("div.PageLayout") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end def test_renders_layout_with_correct_default_classes render_inline(Primer::Beta::SplitPageLayout.new) do |c| - c.main { "Main" } - c.pane { "Pane" } + c.content_region { "Content" } + c.pane_region { "Pane" } end expected_classes = [ @@ -47,7 +47,7 @@ def test_renders_layout_with_correct_default_classes assert_selector("div.#{expected_classes}") do assert_selector("div.PageLayout-wrapper") do assert_selector("div.PageLayout-columns") do - assert_selector("div.PageLayout-region.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-region.PageLayout-content", text: "Content") assert_selector("div.PageLayout-region.PageLayout-pane", text: "Pane") end end @@ -57,13 +57,13 @@ def test_renders_layout_with_correct_default_classes def test_responsive_primary_region Primer::Beta::SplitPageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS.each do |region| render_inline(Primer::Beta::SplitPageLayout.new(responsive_primary_region: region)) do |c| - c.main { "Main" } - c.pane { "Pane" } + c.content_region { "Content" } + c.pane_region { "Pane" } end region_class = Primer::Beta::SplitPageLayout::RESPONSIVE_PRIMARY_REGION_MAPPINGS[region] assert_selector("div.PageLayout#{region_class.empty? ? '' : ".#{region_class}"}") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -72,14 +72,14 @@ def test_responsive_primary_region def test_pane_width Primer::Beta::SplitPageLayout::PANE_WIDTH_OPTIONS.each do |size| render_inline(Primer::Beta::SplitPageLayout.new) do |c| - c.main { "Main" } - c.pane(width: size) { "Pane" } + c.content_region { "Content" } + c.pane_region(width: size) { "Pane" } end width_class = Primer::Beta::SplitPageLayout::PANE_WIDTH_MAPPINGS[size] assert_selector("div.PageLayout") do assert_selector("div#{width_class.empty? ? '' : ".#{width_class}"}") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end @@ -89,31 +89,31 @@ def test_pane_width def test_pane_tags Primer::Beta::SplitPageLayout::PANE_TAG_OPTIONS.each do |tag| render_inline(Primer::Beta::SplitPageLayout.new) do |c| - c.main { "Main" } - c.pane(tag: tag) { "Pane" } + c.content_region { "Content" } + c.pane_region(tag: tag) { "Pane" } end assert_selector("div.PageLayout") do - assert_selector("div.PageLayout-content", text: "Main") + assert_selector("div.PageLayout-content", text: "Content") assert_selector("#{tag}.PageLayout-pane", text: "Pane") end end end - def test_main_width - Primer::Beta::SplitPageLayout::Main::WIDTH_OPTIONS.each do |width| + def test_content_width + Primer::Beta::SplitPageLayout::Content::WIDTH_OPTIONS.each do |width| render_inline(Primer::Beta::SplitPageLayout.new) do |c| - c.main(width: width) { "Main" } - c.pane { "Pane" } + c.content_region(width: width) { "Content" } + c.pane_region { "Pane" } end assert_selector("div.PageLayout-columns") do assert_selector("div.PageLayout-content") do if width == :fluid - assert_text("Main") + assert_text("Content") else assert_selector("div.PageLayout-content-centered-#{width}") do - assert_selector("div.container-#{width}", text: "Main") + assert_selector("div.container-#{width}", text: "Content") end end end @@ -122,15 +122,15 @@ def test_main_width end end - def test_main_tags - Primer::Beta::SplitPageLayout::Main::TAG_OPTIONS.each do |tag| + def test_content_tags + Primer::Beta::SplitPageLayout::Content::TAG_OPTIONS.each do |tag| render_inline(Primer::Beta::SplitPageLayout.new) do |c| - c.main(tag: tag) { "Main" } - c.pane { "Pane" } + c.content_region(tag: tag) { "Content" } + c.pane_region { "Pane" } end assert_selector("div.PageLayout") do - assert_selector("#{tag}.PageLayout-content", text: "Main") + assert_selector("#{tag}.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end end From bea0d0694a693a279586e2bad160bba1964ca79b Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Tue, 14 Dec 2021 14:23:53 +0000 Subject: [PATCH 61/97] docs: build docs --- docs/content/components/beta/pagelayout.md | 124 +++++++++--------- .../components/beta/splitpagelayout.md | 46 +++---- static/audited_at.json | 4 +- static/constants.json | 8 +- static/statuses.json | 4 +- 5 files changed, 93 insertions(+), 93 deletions(-) diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md index 88386195ec..c336f74901 100644 --- a/docs/content/components/beta/pagelayout.md +++ b/docs/content/components/beta/pagelayout.md @@ -17,14 +17,14 @@ import Example from '../../../src/@primer/gatsby-theme-doctocat/components/examp PageLayout controls the page spacings, supports header and footer regions, provides different styles of panes, and handles responsive strategies. -`PageLayout` flows as both column, when there's enough horizontal space to render both `Main` and `Pane` side-by-side (on a desktop of tablet device, per instance); -or it flows as a row, when `Main` and `Pane` are stacked vertically (e.g. on a mobile device). +`PageLayout` flows as both column, when there's enough horizontal space to render both `Content` and `Pane` side-by-side (on a desktop of tablet device, per instance); +or it flows as a row, when `Content` and `Pane` are stacked vertically (e.g. on a mobile device). `PageLayout` should always work in any screen size. ## Accessibility Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether -`main` or `pane` comes first in code. This is determined by the `position` argrument to the `pane` slot. +`content` or `pane` comes first in code. This is determined by the `position` argrument to the `pane` slot. ## Arguments @@ -40,9 +40,9 @@ Keyboard navigation follows the markup order. Decide carefully how the focus ord ## Slots -### `Main` +### `Content_region` -The layout's main content. +The layout's content. | Name | Type | Default | Description | | :- | :- | :- | :- | @@ -50,7 +50,7 @@ The layout's main content. | `tag` | `Symbol` | N/A | One of `:div` and `:main`. | | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | -### `Header` +### `Header_region` The layout's header. @@ -60,7 +60,7 @@ The layout's header. | `responsive_divider` | `Symbol` | N/A | Whether to show a divider below the `header` region if in responsive mode. One of `:filled`, `:line`, or `:none`. | | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | -### `Footer` +### `Footer_region` The layout's footer. @@ -70,7 +70,7 @@ The layout's footer. | `responsive_divider` | `Symbol` | N/A | Whether to show a divider below the `footer` region if in responsive mode. One of `:filled`, `:line`, or `:none`. | | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | -### `Pane` +### `Pane_region` The layout's pane. @@ -91,8 +91,8 @@ The layout's pane. ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` @@ -103,10 +103,10 @@ The layout's pane. ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.header(border: true) { "Header" } %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> - <% c.footer(border: true) { "Footer" } %> + <% c.header_region(border: true) { "Header" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> + <% c.footer_region(border: true) { "Footer" } %> <% end %> ``` @@ -118,20 +118,20 @@ When `:fluid` the layout will be set to full width. When the other sizing option ```erb <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :fluid)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :md)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :lg)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :xl)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` @@ -143,12 +143,12 @@ Sets wrapper margins surrounding the component to distance itself from the viewp ```erb <%= render(Primer::Beta::PageLayout.new(outer_spacing: :condensed)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(outer_spacing: :normal)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` @@ -160,12 +160,12 @@ Sets the gap between columns to distance them from each other. - `:condensed` ke ```erb <%= render(Primer::Beta::PageLayout.new(column_gap: :condensed)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(column_gap: :normal)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` @@ -177,12 +177,12 @@ Sets the gap below the header and above the footer. - `:condensed` keeps the gap ```erb <%= render(Primer::Beta::PageLayout.new(row_gap: :condensed)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(row_gap: :normal)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` @@ -194,16 +194,16 @@ Sets the pane width. The width is predetermined according to the breakpoint inst ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(width: :default, border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(width: :default, border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(width: :narrow, border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(width: :narrow, border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(width: :wide, border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(width: :wide, border: true) { "Pane" } %> <% end %> ``` @@ -215,12 +215,12 @@ Use `start` for panes that manipulate local navigation, while right-aligned `end ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(position: :start, border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(position: :start, border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new( mt: 5)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(position: :end, border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(position: :end, border: true) { "Pane" } %> <% end %> ``` @@ -232,16 +232,16 @@ Defines the position of the pane in the responsive layout. - `:start` puts the p ```erb <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(pane_responsive_position: :inherit, border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(pane_responsive_position: :inherit, border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(pane_responsive_position: :start, border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(pane_responsive_position: :start, border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(pane_responsive_position: :end, border: true) { "Pane" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(pane_responsive_position: :end, border: true) { "Pane" } %> <% end %> ``` @@ -253,14 +253,14 @@ You can add an optional header to the layout and have spacing and positioning ta ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.header(border: true) { "Header" } %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.header_region(border: true) { "Header" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.header(divider: true, border: true) { "Header" } %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.header_region(divider: true, border: true) { "Header" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` @@ -272,13 +272,13 @@ You can add an optional footer to the layout and have spacing and positioning ta ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> - <% c.footer(border: true) { "Header" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> + <% c.footer_region(border: true) { "Header" } %> <% end %> <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> - <% c.footer(divider: true, border: true) { "Header" } %> + <% c.content_region(border: true) { "Main" } %> + <% c.pane_region(border: true) { "Pane" } %> + <% c.footer_region(divider: true, border: true) { "Header" } %> <% end %> ``` diff --git a/docs/content/components/beta/splitpagelayout.md b/docs/content/components/beta/splitpagelayout.md index d422e7d95c..410f9a2a67 100644 --- a/docs/content/components/beta/splitpagelayout.md +++ b/docs/content/components/beta/splitpagelayout.md @@ -32,9 +32,9 @@ Keyboard navigation follows the markup order. In the case of the `SplitPageLayou ## Slots -### `Main` +### `Content_region` -The layout's main content. +The layout's content. | Name | Type | Default | Description | | :- | :- | :- | :- | @@ -42,7 +42,7 @@ The layout's main content. | `tag` | `Symbol` | N/A | One of `:div` and `:main`. | | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | -### `Pane` +### `Pane_region` The layout's pane. @@ -56,13 +56,13 @@ The layout's pane. ### Default - + ```erb <%= render(Primer::Beta::SplitPageLayout.new) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Content" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` @@ -70,16 +70,16 @@ The layout's pane. Sets padding to regions individually. - `:condensed` keeps the margin at 16px. - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(inner_spacing: :condensed)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Content" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(inner_spacing: :normal)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Content" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` @@ -87,16 +87,16 @@ Sets padding to regions individually. - `:condensed` keeps the margin at 16px. - When responsiveVariant is set to separateRegions, defines which region appears first on small viewports. content is default. - `:content` - `:pane` - + ```erb <%= render(Primer::Beta::PageLayout.new(resposive_primary_region: :content)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Content" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(responsive_primary_region: :pane)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(border: true) { "Pane" } %> + <% c.content_region(border: true) { "Content" } %> + <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` @@ -104,19 +104,19 @@ When responsiveVariant is set to separateRegions, defines which region appears f Sets the pane width. The width is predetermined according to the breakpoint instead of it being percentage-based. - `default`: - `narrow`: - `wide`: When flowing as a row, `Pane` takes the full width. - + ```erb <%= render(Primer::Beta::SplitPageLayout.new) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(width: :default, border: true) { "Pane" } %> + <% c.content_region(border: true) { "Content" } %> + <% c.pane_region(width: :default, border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::SplitPageLayout.new(mt: 5)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(width: :narrow, border: true) { "Pane" } %> + <% c.content_region(border: true) { "Content" } %> + <% c.pane_region(width: :narrow, border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::SplitPageLayout.new(mt: 5)) do |c| %> - <% c.main(border: true) { "Main" } %> - <% c.pane(width: :wide, border: true) { "Pane" } %> + <% c.content_region(border: true) { "Content" } %> + <% c.pane_region(width: :wide, border: true) { "Pane" } %> <% end %> ``` diff --git a/static/audited_at.json b/static/audited_at.json index 17c3cb07cf..c41c1557db 100644 --- a/static/audited_at.json +++ b/static/audited_at.json @@ -19,10 +19,10 @@ "Primer::Beta::Breadcrumbs": "", "Primer::Beta::Breadcrumbs::Item": "", "Primer::Beta::PageLayout": "", - "Primer::Beta::PageLayout::Main": "", + "Primer::Beta::PageLayout::Content": "", "Primer::Beta::PageLayout::Pane": "", "Primer::Beta::SplitPageLayout": "", - "Primer::Beta::SplitPageLayout::Main": "", + "Primer::Beta::SplitPageLayout::Content": "", "Primer::Beta::Text": "", "Primer::Beta::Truncate": "", "Primer::Beta::Truncate::TruncateText": "", diff --git a/static/constants.json b/static/constants.json index 73dd5688ba..c1301b02b6 100644 --- a/static/constants.json +++ b/static/constants.json @@ -259,6 +259,7 @@ "normal", "condensed" ], + "Content": "Primer::Beta::PageLayout::Content", "FOOTER_RESPONSIVE_DIVIDER_DEFAULT": "none", "FOOTER_RESPONSIVE_DIVIDER_MAPPINGS": { "none": "", @@ -281,7 +282,6 @@ "line", "filled" ], - "Main": "Primer::Beta::PageLayout::Main", "OUTER_SPACING_DEFAULT": "normal", "OUTER_SPACING_MAPPINGS": { "normal": "PageLayout--outerSpacing-normal", @@ -333,7 +333,7 @@ "xl" ] }, - "Primer::Beta::PageLayout::Main": { + "Primer::Beta::PageLayout::Content": { "TAG_DEFAULT": "div", "TAG_OPTIONS": [ "div", @@ -412,6 +412,7 @@ ] }, "Primer::Beta::SplitPageLayout": { + "Content": "Primer::Beta::SplitPageLayout::Content", "INNER_SPACING_DEFAULT": "normal", "INNER_SPACING_MAPPINGS": { "normal": "PageLayout--innerSpacing-normal", @@ -421,7 +422,6 @@ "normal", "condensed" ], - "Main": "Primer::Beta::SplitPageLayout::Main", "PANE_TAG_DEFAULT": "div", "PANE_TAG_OPTIONS": [ "div", @@ -450,7 +450,7 @@ "pane" ] }, - "Primer::Beta::SplitPageLayout::Main": { + "Primer::Beta::SplitPageLayout::Content": { "TAG_DEFAULT": "div", "TAG_OPTIONS": [ "div", diff --git a/static/statuses.json b/static/statuses.json index 95abe62dad..546d41db88 100644 --- a/static/statuses.json +++ b/static/statuses.json @@ -19,10 +19,10 @@ "Primer::Beta::Breadcrumbs": "beta", "Primer::Beta::Breadcrumbs::Item": "alpha", "Primer::Beta::PageLayout": "beta", - "Primer::Beta::PageLayout::Main": "beta", + "Primer::Beta::PageLayout::Content": "beta", "Primer::Beta::PageLayout::Pane": "beta", "Primer::Beta::SplitPageLayout": "beta", - "Primer::Beta::SplitPageLayout::Main": "beta", + "Primer::Beta::SplitPageLayout::Content": "beta", "Primer::Beta::Text": "beta", "Primer::Beta::Truncate": "beta", "Primer::Beta::Truncate::TruncateText": "alpha", From 338ae1a1bc9c2cd583a7d12e13943f8bd4aa4e6b Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 14 Dec 2021 14:28:44 +0000 Subject: [PATCH 62/97] Update stories to use new API --- stories/primer/beta/page_layout_stories.rb | 14 +++++++------- stories/primer/beta/split_page_layout_stories.rb | 6 +++--- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/stories/primer/beta/page_layout_stories.rb b/stories/primer/beta/page_layout_stories.rb index 34354d5bde..36803b6aa6 100644 --- a/stories/primer/beta/page_layout_stories.rb +++ b/stories/primer/beta/page_layout_stories.rb @@ -16,10 +16,10 @@ class Primer::Beta::PageLayoutStories < ViewComponent::Storybook::Stories end content do |c| - c.main(border: true) do + c.content_region(border: true) do "Main region" end - c.pane(border: true) do + c.pane_region(border: true) do "Pane region" end end @@ -36,16 +36,16 @@ class Primer::Beta::PageLayoutStories < ViewComponent::Storybook::Stories end content do |c| - c.header(border: true) do + c.header_region(border: true) do "Header region" end - c.main(border: true) do - "Main region" + c.content_region(border: true) do + "Content region" end - c.pane(border: true) do + c.pane_region(border: true) do "Pane region" end - c.footer(border: true) do + c.footer_region(border: true) do "Footer region" end end diff --git a/stories/primer/beta/split_page_layout_stories.rb b/stories/primer/beta/split_page_layout_stories.rb index 6f396d248e..6db1ce8dbd 100644 --- a/stories/primer/beta/split_page_layout_stories.rb +++ b/stories/primer/beta/split_page_layout_stories.rb @@ -12,10 +12,10 @@ class Primer::Beta::SplitPageLayoutStories < ViewComponent::Storybook::Stories end content do |c| - c.main(border: true) do - "Main region" + c.content_region(border: true) do + "Content region" end - c.pane(border: true) do + c.pane_region(border: true) do "Pane region" end end From a7b048078ace69d360a5f0af1fd8e2ba9cf89988 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 14 Dec 2021 14:29:58 +0000 Subject: [PATCH 63/97] Use updated API --- test/components/stories_test.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/components/stories_test.rb b/test/components/stories_test.rb index 6a89eda4ea..529205fd72 100644 --- a/test/components/stories_test.rb +++ b/test/components/stories_test.rb @@ -8,9 +8,9 @@ class AllComponentsHaveStoriesTest < Minitest::Test Primer::FlexItemComponent, Primer::OcticonSymbolsComponent, Primer::Beta::Breadcrumbs::Item, - Primer::Beta::SplitPageLayout::Main, + Primer::Beta::SplitPageLayout::Content, Primer::Beta::PageLayout::Pane, - Primer::Beta::PageLayout::Main, + Primer::Beta::PageLayout::Content, Primer::Alpha::Layout::Main, Primer::Alpha::Layout::Sidebar ].freeze From 1c86a6522b1a1bb22cc231bcc90fb7855fccd31f Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 14 Dec 2021 14:31:22 +0000 Subject: [PATCH 64/97] Use new slots API --- test/components/component_test.rb | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/components/component_test.rb b/test/components/component_test.rb index 0b53442578..0dbde64690 100644 --- a/test/components/component_test.rb +++ b/test/components/component_test.rb @@ -8,12 +8,12 @@ class PrimerComponentTest < Minitest::Test # Components with any arguments necessary to make them render COMPONENTS_WITH_ARGS = [ [Primer::Beta::PageLayout, {}, proc { |component| - component.main(tag: :div) { "Foo" } - component.pane(tag: :div) { "Bar" } + component.content_region(tag: :div) { "Foo" } + component.pane_region(tag: :div) { "Bar" } }], [Primer::Beta::SplitPageLayout, {}, proc { |component| - component.main(tag: :div) { "Foo" } - component.pane(tag: :div) { "Bar" } + component.content_region(tag: :div) { "Foo" } + component.pane_region(tag: :div) { "Bar" } }], [Primer::Alpha::Layout, {}, proc { |component| component.main(tag: :div) { "Foo" } From f339dd057f2c0ab9b8bd85d2a2bce87aeafbd238 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 14 Dec 2021 14:45:41 +0000 Subject: [PATCH 65/97] Cleaning up documentation for clarity. --- app/components/primer/beta/page_layout.rb | 64 +++++++++++------------ 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 8b4e7891ed..1031056c19 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -2,10 +2,10 @@ module Primer module Beta - # `PageLayout` provides foundational patterns for responsive pages. - # `PageLayout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. + # `PageLayout` provides foundational patterns for responsive pages. `PageLayout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. + # # On smaller screens, `PageLayout` uses vertically stacked rows to display content. - # `PageLayout` is responsible to determine the arrangement of the main regions that compose a page. This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer. + # `PageLayout` is responsible for determining the arrangement of the main regions that compose a page. This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer. # # PageLayout controls the page spacings, supports header and footer regions, provides different styles of panes, and handles responsive strategies. # @@ -15,7 +15,7 @@ module Beta # # @accessibility # Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether - # `content` or `pane` comes first in code. This is determined by the `position` argrument to the `pane` slot. + # `content_region` or `pane_region` comes first in code. This is determined by the `position` argrument to the `pane_region` slot. class PageLayout < Primer::Component status :beta @@ -165,7 +165,7 @@ class PageLayout < Primer::Component # @example Default # # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # @@ -173,7 +173,7 @@ class PageLayout < Primer::Component # # <%= render(Primer::Beta::PageLayout.new) do |c| %> # <% c.header_region(border: true) { "Header" } %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% c.footer_region(border: true) { "Footer" } %> # <% end %> @@ -190,19 +190,19 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :fluid)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :md)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :lg)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :xl)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # @@ -216,11 +216,11 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new(outer_spacing: :condensed)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(outer_spacing: :normal)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # @@ -234,11 +234,11 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new(column_gap: :condensed)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(column_gap: :normal)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # @@ -252,11 +252,11 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new(row_gap: :condensed)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(row_gap: :normal)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # @@ -273,15 +273,15 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(width: :default, border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(width: :narrow, border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(width: :wide, border: true) { "Pane" } %> # <% end %> # @@ -292,11 +292,11 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(position: :start, border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new( mt: 5)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(position: :end, border: true) { "Pane" } %> # <% end %> # @@ -311,15 +311,15 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(pane_responsive_position: :inherit, border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(pane_responsive_position: :start, border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(pane_responsive_position: :end, border: true) { "Pane" } %> # <% end %> # @@ -332,12 +332,12 @@ class PageLayout < Primer::Component # @code # <%= render(Primer::Beta::PageLayout.new) do |c| %> # <% c.header_region(border: true) { "Header" } %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new) do |c| %> # <% c.header_region(divider: true, border: true) { "Header" } %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> # @@ -349,12 +349,12 @@ class PageLayout < Primer::Component # # @code # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% c.footer_region(border: true) { "Header" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new) do |c| %> - # <% c.content_region(border: true) { "Main" } %> + # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% c.footer_region(divider: true, border: true) { "Header" } %> # <% end %> @@ -395,7 +395,7 @@ def render? content_region.present? && pane_region.present? end - # The layout's main content. + # The layout's content. class Content < Primer::Component status :beta @@ -405,8 +405,8 @@ class Content < Primer::Component TAG_DEFAULT = :div TAG_OPTIONS = [TAG_DEFAULT, :main].freeze - # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::Main::WIDTH_OPTIONS) %> - # @param tag [Symbol] <%= one_of(Primer::Beta::PageLayout::Main::TAG_OPTIONS) %> + # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::Content::WIDTH_OPTIONS) %> + # @param tag [Symbol] <%= one_of(Primer::Beta::PageLayout::Content::TAG_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> def initialize(tag: TAG_DEFAULT, width: WIDTH_DEFAULT, **system_arguments) @width = fetch_or_fallback(WIDTH_OPTIONS, width, WIDTH_DEFAULT) @@ -435,7 +435,7 @@ def call end end - # The layout's pane content. This is a secondary, smaller region that is paired with the `Main` region. + # The layout's pane content. This is a secondary, smaller region that is paired with the `Content` region. class Pane < Primer::Component status :beta From 4cf253af63e19a3f5e1b223c580284dcadc9293e Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Tue, 14 Dec 2021 14:47:23 +0000 Subject: [PATCH 66/97] docs: build docs --- docs/content/components/beta/pagelayout.md | 78 +++++++++++----------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md index c336f74901..d2cbe2ae37 100644 --- a/docs/content/components/beta/pagelayout.md +++ b/docs/content/components/beta/pagelayout.md @@ -10,10 +10,10 @@ import Example from '../../../src/@primer/gatsby-theme-doctocat/components/examp -`PageLayout` provides foundational patterns for responsive pages. -`PageLayout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. +`PageLayout` provides foundational patterns for responsive pages. `PageLayout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. + On smaller screens, `PageLayout` uses vertically stacked rows to display content. - `PageLayout` is responsible to determine the arrangement of the main regions that compose a page. This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer. + `PageLayout` is responsible for determining the arrangement of the main regions that compose a page. This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer. PageLayout controls the page spacings, supports header and footer regions, provides different styles of panes, and handles responsive strategies. @@ -24,7 +24,7 @@ or it flows as a row, when `Content` and `Pane` are stacked vertically (e.g. on ## Accessibility Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether -`content` or `pane` comes first in code. This is determined by the `position` argrument to the `pane` slot. +`content_region` or `pane_region` comes first in code. This is determined by the `position` argrument to the `pane_region` slot. ## Arguments @@ -86,25 +86,25 @@ The layout's pane. ### Default - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` ### Header and footer - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> <% c.header_region(border: true) { "Header" } %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% c.footer_region(border: true) { "Footer" } %> <% end %> @@ -114,23 +114,23 @@ The layout's pane. When `:fluid` the layout will be set to full width. When the other sizing options are used the layout will be centered with corresponding widths. - `:fluid`: full width - `:md`: max-width: 768px - `:lg`: max-width: 1012px - `:xl`: max-width: 1280px - + ```erb <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :fluid)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :md)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :lg)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :xl)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` @@ -139,15 +139,15 @@ When `:fluid` the layout will be set to full width. When the other sizing option Sets wrapper margins surrounding the component to distance itself from the viewport edges. - `:condensed` keeps the margin at 16px. - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(outer_spacing: :condensed)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(outer_spacing: :normal)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` @@ -156,15 +156,15 @@ Sets wrapper margins surrounding the component to distance itself from the viewp Sets the gap between columns to distance them from each other. - `:condensed` keeps the gap always at 16px. - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(column_gap: :condensed)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(column_gap: :normal)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` @@ -173,15 +173,15 @@ Sets the gap between columns to distance them from each other. - `:condensed` ke Sets the gap below the header and above the footer. - `:condensed` keeps the gap always at 16px. - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(row_gap: :condensed)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(row_gap: :normal)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` @@ -190,19 +190,19 @@ Sets the gap below the header and above the footer. - `:condensed` keeps the gap Sets the pane width. The width is predetermined according to the breakpoint instead of it being percentage-based. - `default`: - `narrow`: - `wide`: When flowing as a row, `Pane` takes the full width. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(width: :default, border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(width: :narrow, border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(width: :wide, border: true) { "Pane" } %> <% end %> ``` @@ -211,15 +211,15 @@ Sets the pane width. The width is predetermined according to the breakpoint inst Use `start` for panes that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(position: :start, border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new( mt: 5)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(position: :end, border: true) { "Pane" } %> <% end %> ``` @@ -228,19 +228,19 @@ Use `start` for panes that manipulate local navigation, while right-aligned `end Defines the position of the pane in the responsive layout. - `:start` puts the pane above content - `:end` puts it below content. - `:inherit` uses the same value from `pane_position` - + ```erb <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(pane_responsive_position: :inherit, border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(pane_responsive_position: :start, border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(pane_responsive_position: :end, border: true) { "Pane" } %> <% end %> ``` @@ -249,17 +249,17 @@ Defines the position of the pane in the responsive layout. - `:start` puts the p You can add an optional header to the layout and have spacing and positioning taken care of for you. You can optionally add a divider to the header. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> <% c.header_region(border: true) { "Header" } %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new) do |c| %> <% c.header_region(divider: true, border: true) { "Header" } %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> ``` @@ -268,16 +268,16 @@ You can add an optional header to the layout and have spacing and positioning ta You can add an optional footer to the layout and have spacing and positioning taken care of for you. You can optionally add a divider to the footer. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% c.footer_region(border: true) { "Header" } %> <% end %> <%= render(Primer::Beta::PageLayout.new) do |c| %> - <% c.content_region(border: true) { "Main" } %> + <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% c.footer_region(divider: true, border: true) { "Header" } %> <% end %> From 43d5446f2fa7f4d912429edaf9ffcd834c5faa2d Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 14 Dec 2021 14:47:41 +0000 Subject: [PATCH 67/97] Docs cleanup --- app/components/primer/beta/page_layout.rb | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 1031056c19..51a07bc77d 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -4,10 +4,10 @@ module Primer module Beta # `PageLayout` provides foundational patterns for responsive pages. `PageLayout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. # - # On smaller screens, `PageLayout` uses vertically stacked rows to display content. - # `PageLayout` is responsible for determining the arrangement of the main regions that compose a page. This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer. + # On smaller screens, `PageLayout` uses vertically stacked rows to display content. `PageLayout` is responsible for determining the arrangement of the main regions that compose a page. + # This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer. # - # PageLayout controls the page spacings, supports header and footer regions, provides different styles of panes, and handles responsive strategies. + # `PageLayout`` controls the page spacings, supports header and footer regions, provides different styles of panes, and handles responsive strategies. # # `PageLayout` flows as both column, when there's enough horizontal space to render both `Content` and `Pane` side-by-side (on a desktop of tablet device, per instance); # or it flows as a row, when `Content` and `Pane` are stacked vertically (e.g. on a mobile device). From c1319533d4d3e5f8349efd326d7d0c25079005f2 Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Tue, 14 Dec 2021 14:48:48 +0000 Subject: [PATCH 68/97] docs: build docs --- docs/content/components/beta/pagelayout.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md index d2cbe2ae37..4400842565 100644 --- a/docs/content/components/beta/pagelayout.md +++ b/docs/content/components/beta/pagelayout.md @@ -12,10 +12,10 @@ import Example from '../../../src/@primer/gatsby-theme-doctocat/components/examp `PageLayout` provides foundational patterns for responsive pages. `PageLayout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences. - On smaller screens, `PageLayout` uses vertically stacked rows to display content. - `PageLayout` is responsible for determining the arrangement of the main regions that compose a page. This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer. + On smaller screens, `PageLayout` uses vertically stacked rows to display content. `PageLayout` is responsible for determining the arrangement of the main regions that compose a page. +This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer. - PageLayout controls the page spacings, supports header and footer regions, provides different styles of panes, and handles responsive strategies. + `PageLayout`` controls the page spacings, supports header and footer regions, provides different styles of panes, and handles responsive strategies. `PageLayout` flows as both column, when there's enough horizontal space to render both `Content` and `Pane` side-by-side (on a desktop of tablet device, per instance); or it flows as a row, when `Content` and `Pane` are stacked vertically (e.g. on a mobile device). From 2268fa503c3c41b3fa9a39d0521e3ad0166dcd01 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 14 Dec 2021 14:50:25 +0000 Subject: [PATCH 69/97] cleanup --- app/components/primer/beta/page_layout.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 51a07bc77d..6daf04b2e2 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -7,7 +7,7 @@ module Beta # On smaller screens, `PageLayout` uses vertically stacked rows to display content. `PageLayout` is responsible for determining the arrangement of the main regions that compose a page. # This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer. # - # `PageLayout`` controls the page spacings, supports header and footer regions, provides different styles of panes, and handles responsive strategies. + # `PageLayout` controls the page spacings, supports header and footer regions, provides different styles of panes, and handles responsive strategies. # # `PageLayout` flows as both column, when there's enough horizontal space to render both `Content` and `Pane` side-by-side (on a desktop of tablet device, per instance); # or it flows as a row, when `Content` and `Pane` are stacked vertically (e.g. on a mobile device). From 96356e4018a674e3e2a374b278cbfbceb9f542a1 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 14 Dec 2021 14:56:53 +0000 Subject: [PATCH 70/97] add argument docs to Pane initializer --- app/components/primer/beta/page_layout.rb | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 6daf04b2e2..76aeba5ca6 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -485,6 +485,8 @@ class Pane < Primer::Component TAG_DEFAULT = :div TAG_OPTIONS = [TAG_DEFAULT, :aside, :nav, :section].freeze + # @param responsive_divider [Symbol] <%= one_of(Primer::Beta::PageLayout::Pane::RESPONSIVE_DIVIDER_OPTIONS) %> + # @param position [Symbol] <%= one_of(Primer::Beta::PageLayout::Pane::POSITION_OPTIONS) %> # @param tag [Symbol] <%= one_of(Primer::Beta::PageLayout::Pane::TAG_OPTIONS) %> def initialize(responsive_divider: RESPONSIVE_DIVIDER_DEFAULT, position: POSITION_DEFAULT, tag: TAG_DEFAULT, **system_arguments) @system_arguments = system_arguments From d7262a59e1142086f1cef3e6c671765298c296ee Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 14 Dec 2021 15:20:23 +0000 Subject: [PATCH 71/97] Documentation cleanup --- app/components/primer/beta/split_page_layout.rb | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/app/components/primer/beta/split_page_layout.rb b/app/components/primer/beta/split_page_layout.rb index fd355660f2..78575f7984 100644 --- a/app/components/primer/beta/split_page_layout.rb +++ b/app/components/primer/beta/split_page_layout.rb @@ -2,13 +2,12 @@ module Primer module Beta - # In the `SplitPageLayout`, changes in the Pane region are reflected in the Content region. This is also known as a "List/Detail" or "Master/Detail" pattern. + # In the `SplitPageLayout`, changes in the Pane region are reflected in the `Content` region. This is also known as a "List/Detail" or "Master/Detail" pattern. # - # On larger screens, the user sees both regions side by side, with the Pane region appearing flushed to the left. + # On larger screens, the user sees both regions side by side, with the `Pane` region appearing flushed to the left. # - # On smaller screens, the user only sees one of pane or content regions at a time. - # Pages may decide if it's more important to show the Pane region or the Content region first by the responsiveLandingRegion property. - # For example, opening "Repository settings" on mobile will have the user land on the Pane region, since in that case showing the menu options first is more important. + # On smaller screens, the user only sees one of `Pane` or `Content` regions at a time. + # Pages may decide if it's more important to show the `Pane` region or the `Content`` region first by the `:responsive_primary_region` property. # # @accessibility # Keyboard navigation follows the markup order. In the case of the `SplitPageLayout`, the `Pane` region is the first region, and the `Content` region is the second. @@ -61,7 +60,7 @@ class SplitPageLayout < Primer::Component "PageLayout-pane" ) - # These classes have to be set in the parent `Layout` element, so we modify its system arguments. + # These classes have to be set in the parent element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], PANE_WIDTH_MAPPINGS[fetch_or_fallback(PANE_WIDTH_OPTIONS, width, PANE_WIDTH_DEFAULT)] @@ -83,7 +82,7 @@ class SplitPageLayout < Primer::Component # Sets padding to regions individually. # # - `:condensed` keeps the margin at 16px. - # - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. + # - `:normal` sets the margin to 16px, and to 24px on lg breakpoints and above. # # @code # <%= render(Primer::Beta::PageLayout.new(inner_spacing: :condensed)) do |c| %> @@ -98,7 +97,7 @@ class SplitPageLayout < Primer::Component # @example Responsive primary region # # @description - # When responsiveVariant is set to separateRegions, defines which region appears first on small viewports. content is default. + # When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. # # - `:content` # - `:pane` From c88c7da4f9bf927c4d238ae32c464290aa85f22f Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Tue, 14 Dec 2021 15:21:46 +0000 Subject: [PATCH 72/97] docs: build docs --- docs/content/components/beta/pagelayout.md | 2 +- docs/content/components/beta/splitpagelayout.md | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md index 4400842565..ac75e53e8d 100644 --- a/docs/content/components/beta/pagelayout.md +++ b/docs/content/components/beta/pagelayout.md @@ -15,7 +15,7 @@ import Example from '../../../src/@primer/gatsby-theme-doctocat/components/examp On smaller screens, `PageLayout` uses vertically stacked rows to display content. `PageLayout` is responsible for determining the arrangement of the main regions that compose a page. This means anything after the global and local headers (i.e. repo or org headers), and anything before the global footer. - `PageLayout`` controls the page spacings, supports header and footer regions, provides different styles of panes, and handles responsive strategies. + `PageLayout` controls the page spacings, supports header and footer regions, provides different styles of panes, and handles responsive strategies. `PageLayout` flows as both column, when there's enough horizontal space to render both `Content` and `Pane` side-by-side (on a desktop of tablet device, per instance); or it flows as a row, when `Content` and `Pane` are stacked vertically (e.g. on a mobile device). diff --git a/docs/content/components/beta/splitpagelayout.md b/docs/content/components/beta/splitpagelayout.md index 410f9a2a67..8f94e4345b 100644 --- a/docs/content/components/beta/splitpagelayout.md +++ b/docs/content/components/beta/splitpagelayout.md @@ -10,13 +10,12 @@ import Example from '../../../src/@primer/gatsby-theme-doctocat/components/examp -In the `SplitPageLayout`, changes in the Pane region are reflected in the Content region. This is also known as a "List/Detail" or "Master/Detail" pattern. +In the `SplitPageLayout`, changes in the Pane region are reflected in the `Content` region. This is also known as a "List/Detail" or "Master/Detail" pattern. -On larger screens, the user sees both regions side by side, with the Pane region appearing flushed to the left. +On larger screens, the user sees both regions side by side, with the `Pane` region appearing flushed to the left. -On smaller screens, the user only sees one of pane or content regions at a time. -Pages may decide if it's more important to show the Pane region or the Content region first by the responsiveLandingRegion property. -For example, opening "Repository settings" on mobile will have the user land on the Pane region, since in that case showing the menu options first is more important. +On smaller screens, the user only sees one of `Pane` or `Content` regions at a time. +Pages may decide if it's more important to show the `Pane` region or the `Content`` region first by the `:responsive_primary_region` property. ## Accessibility @@ -68,7 +67,7 @@ The layout's pane. ### Inner spacing -Sets padding to regions individually. - `:condensed` keeps the margin at 16px. - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. +Sets padding to regions individually. - `:condensed` keeps the margin at 16px. - `:normal` sets the margin to 16px, and to 24px on lg breakpoints and above. @@ -85,7 +84,7 @@ Sets padding to regions individually. - `:condensed` keeps the margin at 16px. - ### Responsive primary region -When responsiveVariant is set to separateRegions, defines which region appears first on small viewports. content is default. - `:content` - `:pane` +When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. - `:content` - `:pane` From ebef84d3fb7f28247a05d5e81dd9cd758b5223bb Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 21 Dec 2021 14:27:52 +0000 Subject: [PATCH 73/97] Convert variant css ref to responsive Tracking upstream CSS changes. --- app/components/primer/beta/page_layout.rb | 12 ++++++------ app/components/primer/beta/split_page_layout.rb | 6 +++--- test/components/primer/beta/page_layout_test.rb | 14 +++++++------- .../primer/beta/split_page_layout_test.rb | 4 ++-- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 76aeba5ca6..a56af8a425 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -51,15 +51,15 @@ class PageLayout < Primer::Component RESPONSIVE_PRIMARY_REGION_DEFAULT = :content RESPONSIVE_PRIMARY_REGION_MAPPINGS = { - RESPONSIVE_PRIMARY_REGION_DEFAULT => "PageLayout--variant-separateRegions-primary-content", - :pane => "PageLayout--variant-separateRegions-primary-pane" + RESPONSIVE_PRIMARY_REGION_DEFAULT => "PageLayout--responsive-separateRegions-primary-content", + :pane => "PageLayout--responsive-separateRegions-primary-pane" }.freeze RESPONSIVE_PRIMARY_REGION_OPTIONS = RESPONSIVE_PRIMARY_REGION_MAPPINGS.keys.freeze RESPONSIVE_VARIANT_DEFAULT = :stack_regions RESPONSIVE_VARIANT_MAPPINGS = { - RESPONSIVE_VARIANT_DEFAULT => "PageLayout--variant-stackRegions", - :separate_regions => "PageLayout--variant-separateRegions" + RESPONSIVE_VARIANT_DEFAULT => "PageLayout--responsive-stackRegions", + :separate_regions => "PageLayout--responsive-separateRegions" }.freeze RESPONSIVE_VARIANT_OPTIONS = RESPONSIVE_VARIANT_MAPPINGS.keys.freeze @@ -450,8 +450,8 @@ class Pane < Primer::Component RESPONSIVE_POSITION_DEFAULT = :inherit RESPONSIVE_POSITION_MAPPINGS = { RESPONSIVE_POSITION_DEFAULT => "", - :start => "PageLayout--variant-stackRegions-panePos-start", - :end => "PageLayout--variant-stackRegions-panePos-end" + :start => "PageLayout--responsive-stackRegions-panePos-start", + :end => "PageLayout--responsive-stackRegions-panePos-end" }.freeze RESPONSIVE_POSITION_OPTIONS = RESPONSIVE_POSITION_MAPPINGS.keys.freeze diff --git a/app/components/primer/beta/split_page_layout.rb b/app/components/primer/beta/split_page_layout.rb index 78575f7984..c9ef9a5bed 100644 --- a/app/components/primer/beta/split_page_layout.rb +++ b/app/components/primer/beta/split_page_layout.rb @@ -34,8 +34,8 @@ class SplitPageLayout < Primer::Component RESPONSIVE_PRIMARY_REGION_DEFAULT = :content RESPONSIVE_PRIMARY_REGION_MAPPINGS = { - RESPONSIVE_PRIMARY_REGION_DEFAULT => "PageLayout--variant-separateRegions-primary-content", - :pane => "PageLayout--variant-separateRegions-primary-pane" + RESPONSIVE_PRIMARY_REGION_DEFAULT => "PageLayout--responsive-separateRegions-primary-content", + :pane => "PageLayout--responsive-separateRegions-primary-pane" }.freeze RESPONSIVE_PRIMARY_REGION_OPTIONS = RESPONSIVE_PRIMARY_REGION_MAPPINGS.keys.freeze @@ -153,7 +153,7 @@ def initialize( "PageLayout", INNER_SPACING_MAPPINGS[fetch_or_fallback(INNER_SPACING_OPTIONS, inner_spacing, INNER_SPACING_DEFAULT)], RESPONSIVE_PRIMARY_REGION_MAPPINGS[fetch_or_fallback(RESPONSIVE_PRIMARY_REGION_OPTIONS, responsive_primary_region, RESPONSIVE_PRIMARY_REGION_DEFAULT)], - "PageLayout--variant-separateRegions", + "PageLayout--responsive-separateRegions", "PageLayout--columnGap-none", "PageLayout--rowGap-none", "PageLayout--panePos-start", diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 7cb0d196e9..2bafa3c185 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -56,12 +56,12 @@ def test_renders_layout_with_correct_default_classes expected_classes = [ "PageLayout", - "PageLayout--variant-stackRegions", + "PageLayout--responsive-stackRegions", "PageLayout--outerSpacing-normal", "PageLayout--columnGap-normal", "PageLayout--rowGap-normal", "PageLayout--panePos-start", - "PageLayout--variant-stackRegions-panePos-start" + "PageLayout--responsive-stackRegions-panePos-start" ].join(".") assert_selector("div.#{expected_classes}") do assert_selector("div.PageLayout-content", text: "Content") @@ -166,8 +166,8 @@ def test_responsive_primary_region_not_set_when_stack_regions c.pane_region { "Pane" } end - refute_selector("div.PageLayout--variant-separateRegions-primary-pane") - refute_selector("div.PageLayout--variant-separateRegions-primary-content") + refute_selector("div.PageLayout--responsive-separateRegions-primary-pane") + refute_selector("div.PageLayout--responsive-separateRegions-primary-content") end def test_pane_width @@ -269,7 +269,7 @@ def test_stack_regions_variant_with_responsive_pane_position responsive_position = position if responsive_position == :inherit assert_selector("div.PageLayout") do - assert_selector("div.PageLayout--panePos-#{position}.PageLayout--variant-stackRegions-panePos-#{responsive_position}") do + assert_selector("div.PageLayout--panePos-#{position}.PageLayout--responsive-stackRegions-panePos-#{responsive_position}") do assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end @@ -284,8 +284,8 @@ def test_variant_pane_position_not_set_when_separate_regions c.pane_region(position: :start) { "Pane" } end - refute_selector("div.PageLayout--variant-stackRegions-panePos-end") - refute_selector("div.PageLayout--variant-stackRegions-panePos-start") + refute_selector("div.PageLayout--responsive-stackRegions-panePos-end") + refute_selector("div.PageLayout--responsive-stackRegions-panePos-start") end def test_pane_tags diff --git a/test/components/primer/beta/split_page_layout_test.rb b/test/components/primer/beta/split_page_layout_test.rb index 8e14880d60..22e6ebc91f 100644 --- a/test/components/primer/beta/split_page_layout_test.rb +++ b/test/components/primer/beta/split_page_layout_test.rb @@ -41,8 +41,8 @@ def test_renders_layout_with_correct_default_classes "PageLayout--rowGap-none", "PageLayout--panePos-start", "PageLayout--hasPaneDivider", - "PageLayout--variant-separateRegions", - "PageLayout--variant-separateRegions-primary-content" + "PageLayout--responsive-separateRegions", + "PageLayout--responsive-separateRegions-primary-content" ].join(".") assert_selector("div.#{expected_classes}") do assert_selector("div.PageLayout-wrapper") do From 9fe9cc5fd24b9692fb12f47551f793d4f9bb6db6 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 21 Dec 2021 15:20:31 +0000 Subject: [PATCH 74/97] Rename `responsive_primary` -> `primary` Keeping in sync with upstream naming changes. --- app/components/primer/beta/page_layout.rb | 14 +++++++------- .../primer/beta/split_page_layout.rb | 18 +++++++++--------- .../components/primer/beta/page_layout_test.rb | 10 +++++----- .../primer/beta/split_page_layout_test.rb | 8 ++++---- 4 files changed, 25 insertions(+), 25 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index a56af8a425..3bfc80b73c 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -49,12 +49,12 @@ class PageLayout < Primer::Component }.freeze ROW_GAP_OPTIONS = ROW_GAP_MAPPINGS.keys.freeze - RESPONSIVE_PRIMARY_REGION_DEFAULT = :content - RESPONSIVE_PRIMARY_REGION_MAPPINGS = { - RESPONSIVE_PRIMARY_REGION_DEFAULT => "PageLayout--responsive-separateRegions-primary-content", + PRIMARY_REGION_DEFAULT = :content + PRIMARY_REGION_MAPPINGS = { + PRIMARY_REGION_DEFAULT => "PageLayout--responsive-separateRegions-primary-content", :pane => "PageLayout--responsive-separateRegions-primary-pane" }.freeze - RESPONSIVE_PRIMARY_REGION_OPTIONS = RESPONSIVE_PRIMARY_REGION_MAPPINGS.keys.freeze + PRIMARY_REGION_OPTIONS = PRIMARY_REGION_MAPPINGS.keys.freeze RESPONSIVE_VARIANT_DEFAULT = :stack_regions RESPONSIVE_VARIANT_MAPPINGS = { @@ -364,7 +364,7 @@ class PageLayout < Primer::Component # @param column_gap [Symbol] Sets gap between columns. <%= one_of(Primer::Beta::PageLayout::COLUMN_GAP_OPTIONS) %> # @param row_gap [Symbol] Sets the gap below the header and above the footer. <%= one_of(Primer::Beta::PageLayout::ROW_GAP_OPTIONS) %> # @param responsive_variant [Symbol] Defines how the layout component adapts to smaller viewports. `:stack_regions` presents the content in a vertical flow, with pane and content vertically arranged. `:separate_regions` presents pane and content as different pages on smaller viewports. - # @param responsive_primary_region [Symbol] When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. + # @param primary_region [Symbol] When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> def initialize( wrapper_sizing: WRAPPER_SIZING_DEFAULT, @@ -372,7 +372,7 @@ def initialize( column_gap: COLUMN_GAP_DEFAULT, row_gap: ROW_GAP_DEFAULT, responsive_variant: RESPONSIVE_VARIANT_DEFAULT, - responsive_primary_region: RESPONSIVE_PRIMARY_REGION_DEFAULT, + primary_region: PRIMARY_REGION_DEFAULT, **system_arguments ) @@ -386,7 +386,7 @@ def initialize( COLUMN_GAP_MAPPINGS[fetch_or_fallback(COLUMN_GAP_OPTIONS, column_gap, COLUMN_GAP_DEFAULT)], ROW_GAP_MAPPINGS[fetch_or_fallback(ROW_GAP_OPTIONS, row_gap, ROW_GAP_DEFAULT)], RESPONSIVE_VARIANT_MAPPINGS[fetch_or_fallback(RESPONSIVE_VARIANT_OPTIONS, @responsive_variant, RESPONSIVE_VARIANT_DEFAULT)], - { RESPONSIVE_PRIMARY_REGION_MAPPINGS[fetch_or_fallback(RESPONSIVE_PRIMARY_REGION_OPTIONS, responsive_primary_region, RESPONSIVE_PRIMARY_REGION_DEFAULT)] => @responsive_variant == :separate_regions }, + { PRIMARY_REGION_MAPPINGS[fetch_or_fallback(PRIMARY_REGION_OPTIONS, primary_region, PRIMARY_REGION_DEFAULT)] => @responsive_variant == :separate_regions }, system_arguments[:classes] ) end diff --git a/app/components/primer/beta/split_page_layout.rb b/app/components/primer/beta/split_page_layout.rb index c9ef9a5bed..228f225646 100644 --- a/app/components/primer/beta/split_page_layout.rb +++ b/app/components/primer/beta/split_page_layout.rb @@ -7,7 +7,7 @@ module Beta # On larger screens, the user sees both regions side by side, with the `Pane` region appearing flushed to the left. # # On smaller screens, the user only sees one of `Pane` or `Content` regions at a time. - # Pages may decide if it's more important to show the `Pane` region or the `Content`` region first by the `:responsive_primary_region` property. + # Pages may decide if it's more important to show the `Pane` region or the `Content`` region first by the `:primary_region` property. # # @accessibility # Keyboard navigation follows the markup order. In the case of the `SplitPageLayout`, the `Pane` region is the first region, and the `Content` region is the second. @@ -32,12 +32,12 @@ class SplitPageLayout < Primer::Component }.freeze INNER_SPACING_OPTIONS = INNER_SPACING_MAPPINGS.keys.freeze - RESPONSIVE_PRIMARY_REGION_DEFAULT = :content - RESPONSIVE_PRIMARY_REGION_MAPPINGS = { - RESPONSIVE_PRIMARY_REGION_DEFAULT => "PageLayout--responsive-separateRegions-primary-content", + PRIMARY_REGION_DEFAULT = :content + PRIMARY_REGION_MAPPINGS = { + PRIMARY_REGION_DEFAULT => "PageLayout--responsive-separateRegions-primary-content", :pane => "PageLayout--responsive-separateRegions-primary-pane" }.freeze - RESPONSIVE_PRIMARY_REGION_OPTIONS = RESPONSIVE_PRIMARY_REGION_MAPPINGS.keys.freeze + PRIMARY_REGION_OPTIONS = PRIMARY_REGION_MAPPINGS.keys.freeze # The layout's content. # @@ -107,7 +107,7 @@ class SplitPageLayout < Primer::Component # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> - # <%= render(Primer::Beta::PageLayout.new(responsive_primary_region: :pane)) do |c| %> + # <%= render(Primer::Beta::PageLayout.new(primary_region: :pane)) do |c| %> # <% c.content_region(border: true) { "Content" } %> # <% c.pane_region(border: true) { "Pane" } %> # <% end %> @@ -139,11 +139,11 @@ class SplitPageLayout < Primer::Component # # # @param inner_spacing [Symbol] Sets padding to regions individually. <%= one_of(Primer::Beta::SplitPageLayout::INNER_SPACING_OPTIONS) %> - # @param responsive_primary_region [Symbol] When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. <%= one_of(Primer::Beta::SplitPageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS) %> + # @param primary_region [Symbol] When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. <%= one_of(Primer::Beta::SplitPageLayout::PRIMARY_REGION_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> def initialize( inner_spacing: INNER_SPACING_DEFAULT, - responsive_primary_region: RESPONSIVE_PRIMARY_REGION_DEFAULT, + primary_region: PRIMARY_REGION_DEFAULT, **system_arguments ) @@ -152,7 +152,7 @@ def initialize( @system_arguments[:classes] = class_names( "PageLayout", INNER_SPACING_MAPPINGS[fetch_or_fallback(INNER_SPACING_OPTIONS, inner_spacing, INNER_SPACING_DEFAULT)], - RESPONSIVE_PRIMARY_REGION_MAPPINGS[fetch_or_fallback(RESPONSIVE_PRIMARY_REGION_OPTIONS, responsive_primary_region, RESPONSIVE_PRIMARY_REGION_DEFAULT)], + PRIMARY_REGION_MAPPINGS[fetch_or_fallback(PRIMARY_REGION_OPTIONS, primary_region, PRIMARY_REGION_DEFAULT)], "PageLayout--responsive-separateRegions", "PageLayout--columnGap-none", "PageLayout--rowGap-none", diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 2bafa3c185..669b562869 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -145,14 +145,14 @@ def test_responsive_variant end end - def test_responsive_primary_region - Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS.each do |region| - render_inline(Primer::Beta::PageLayout.new(responsive_variant: :separate_regions, responsive_primary_region: region)) do |c| + def test_primary_region + Primer::Beta::PageLayout::PRIMARY_REGION_OPTIONS.each do |region| + render_inline(Primer::Beta::PageLayout.new(responsive_variant: :separate_regions, primary_region: region)) do |c| c.content_region { "Content" } c.pane_region { "Pane" } end - region_class = Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_MAPPINGS[region] + region_class = Primer::Beta::PageLayout::PRIMARY_REGION_MAPPINGS[region] assert_selector("div.PageLayout#{region_class.empty? ? '' : ".#{region_class}"}") do assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") @@ -160,7 +160,7 @@ def test_responsive_primary_region end end - def test_responsive_primary_region_not_set_when_stack_regions + def test_primary_region_not_set_when_stack_regions render_inline(Primer::Beta::PageLayout.new(responsive_variant: :stack_regions)) do |c| c.content_region { "Content" } c.pane_region { "Pane" } diff --git a/test/components/primer/beta/split_page_layout_test.rb b/test/components/primer/beta/split_page_layout_test.rb index 22e6ebc91f..873cba8d9a 100644 --- a/test/components/primer/beta/split_page_layout_test.rb +++ b/test/components/primer/beta/split_page_layout_test.rb @@ -54,14 +54,14 @@ def test_renders_layout_with_correct_default_classes end end - def test_responsive_primary_region - Primer::Beta::SplitPageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS.each do |region| - render_inline(Primer::Beta::SplitPageLayout.new(responsive_primary_region: region)) do |c| + def test_primary_region + Primer::Beta::SplitPageLayout::PRIMARY_REGION_OPTIONS.each do |region| + render_inline(Primer::Beta::SplitPageLayout.new(primary_region: region)) do |c| c.content_region { "Content" } c.pane_region { "Pane" } end - region_class = Primer::Beta::SplitPageLayout::RESPONSIVE_PRIMARY_REGION_MAPPINGS[region] + region_class = Primer::Beta::SplitPageLayout::PRIMARY_REGION_MAPPINGS[region] assert_selector("div.PageLayout#{region_class.empty? ? '' : ".#{region_class}"}") do assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") From e346e92831dbc7d55de4b01d9fde7a790782a2c7 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 21 Dec 2021 18:41:59 +0000 Subject: [PATCH 75/97] `responsive_position` -> `position_narrow` Syncing some name changes from Primer CSS. --- app/components/primer/beta/page_layout.rb | 26 +++++++++---------- .../primer/beta/page_layout_test.rb | 8 +++--- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 3bfc80b73c..b823824f45 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -134,29 +134,29 @@ class PageLayout < Primer::Component # # @param width [Symbol] <%= one_of(Primer::Beta::PageLayout::Pane::WIDTH_OPTIONS) %> # @param position [Symbol] Pane placement when `Layout` is in column modes. <%= one_of(Primer::Beta::PageLayout::Pane::POSITION_OPTIONS) %> - # @param responsive_position [Symbol] Pane placement when `Layout` is in column modes. <%= one_of(Primer::Beta::PageLayout::Pane::RESPONSIVE_POSITION_OPTIONS) %> + # @param position_narrow [Symbol] Pane placement when `Layout` is in column modes. <%= one_of(Primer::Beta::PageLayout::Pane::POSITION_NARROW_OPTIONS) %> # @param divider [Boolean] Whether to show a pane line divider. # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> renders_one :pane_region, lambda { | width: Pane::WIDTH_DEFAULT, position: Pane::POSITION_DEFAULT, - responsive_position: Pane::RESPONSIVE_POSITION_DEFAULT, + position_narrow: Pane::POSITION_NARROW_DEFAULT, divider: false, **pane_system_arguments | - responsive_position = position if responsive_position == Pane::RESPONSIVE_POSITION_DEFAULT + position_narrow = position if position_narrow == Pane::POSITION_NARROW_DEFAULT # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], Pane::POSITION_MAPPINGS[fetch_or_fallback(Pane::POSITION_OPTIONS, position, Pane::POSITION_DEFAULT)], Pane::WIDTH_MAPPINGS[fetch_or_fallback(Pane::WIDTH_OPTIONS, width, Pane::WIDTH_DEFAULT)], - { Pane::RESPONSIVE_POSITION_MAPPINGS[fetch_or_fallback(Pane::RESPONSIVE_POSITION_OPTIONS, responsive_position, Pane::RESPONSIVE_POSITION_DEFAULT)] => @responsive_variant == :stack_regions }, + { Pane::POSITION_NARROW_MAPPINGS[fetch_or_fallback(Pane::POSITION_NARROW_OPTIONS, position_narrow, Pane::POSITION_NARROW_DEFAULT)] => @responsive_variant == :stack_regions }, { "PageLayout--hasPaneDivider" => divider } ) pane_system_arguments[:classes] = class_names( pane_system_arguments[:classes], - Pane::HAS_DIVIDER_NONE_MAPPINGS[responsive_position] + Pane::HAS_DIVIDER_NONE_MAPPINGS[position_narrow] ) Pane.new(position: position, **pane_system_arguments) @@ -307,20 +307,20 @@ class PageLayout < Primer::Component # # - `:start` puts the pane above content # - `:end` puts it below content. - # - `:inherit` uses the same value from `pane_position` + # - `:inherit` uses the same value from `position` # # @code # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> # <% c.content_region(border: true) { "Content" } %> - # <% c.pane_region(pane_responsive_position: :inherit, border: true) { "Pane" } %> + # <% c.pane_region(position_narrow: :inherit, border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new) do |c| %> # <% c.content_region(border: true) { "Content" } %> - # <% c.pane_region(pane_responsive_position: :start, border: true) { "Pane" } %> + # <% c.pane_region(position_narrow: :start, border: true) { "Pane" } %> # <% end %> # <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> # <% c.content_region(border: true) { "Content" } %> - # <% c.pane_region(pane_responsive_position: :end, border: true) { "Pane" } %> + # <% c.pane_region(position_narrow: :end, border: true) { "Pane" } %> # <% end %> # # @example Header @@ -447,13 +447,13 @@ class Pane < Primer::Component }.freeze WIDTH_OPTIONS = WIDTH_MAPPINGS.keys.freeze - RESPONSIVE_POSITION_DEFAULT = :inherit - RESPONSIVE_POSITION_MAPPINGS = { - RESPONSIVE_POSITION_DEFAULT => "", + POSITION_NARROW_DEFAULT = :inherit + POSITION_NARROW_MAPPINGS = { + POSITION_NARROW_DEFAULT => "", :start => "PageLayout--responsive-stackRegions-panePos-start", :end => "PageLayout--responsive-stackRegions-panePos-end" }.freeze - RESPONSIVE_POSITION_OPTIONS = RESPONSIVE_POSITION_MAPPINGS.keys.freeze + POSITION_NARROW_OPTIONS = POSITION_NARROW_MAPPINGS.keys.freeze DIVIDER_DEFAULT = :start DIVIDER_MAPPINGS = { diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 669b562869..040641838c 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -261,15 +261,15 @@ def test_pane_position_renders_pane_last def test_stack_regions_variant_with_responsive_pane_position Primer::Beta::PageLayout::Pane::POSITION_OPTIONS.each do |position| - Primer::Beta::PageLayout::Pane::RESPONSIVE_POSITION_OPTIONS.each do |responsive_position| + Primer::Beta::PageLayout::Pane::POSITION_NARROW_OPTIONS.each do |position_narrow| render_inline(Primer::Beta::PageLayout.new(responsive_variant: :stack_regions)) do |c| c.content_region { "Content" } - c.pane_region(position: position, responsive_position: responsive_position) { "Pane" } + c.pane_region(position: position, position_narrow: position_narrow) { "Pane" } end - responsive_position = position if responsive_position == :inherit + position_narrow = position if position_narrow == :inherit assert_selector("div.PageLayout") do - assert_selector("div.PageLayout--panePos-#{position}.PageLayout--responsive-stackRegions-panePos-#{responsive_position}") do + assert_selector("div.PageLayout--panePos-#{position}.PageLayout--responsive-stackRegions-panePos-#{position_narrow}") do assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end From 3356fc3ead300372ae741c5b9b6457576222476a Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 21 Dec 2021 19:47:06 +0000 Subject: [PATCH 76/97] `hasDivider` -> `dividerNarrow` Syncing CSS changes with Primer CSS. --- app/components/primer/beta/page_layout.rb | 12 ++++++------ test/components/primer/beta/page_layout_test.rb | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index b823824f45..6c94f27146 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -66,16 +66,16 @@ class PageLayout < Primer::Component HEADER_RESPONSIVE_DIVIDER_DEFAULT = :none HEADER_RESPONSIVE_DIVIDER_MAPPINGS = { HEADER_RESPONSIVE_DIVIDER_DEFAULT => "", - :line => "PageLayout-region--hasDivider-line-before", - :filled => "PageLayout-region--hasDivider-filled-before" + :line => "PageLayout-region--dividerNarrow-line-before", + :filled => "PageLayout-region--dividerNarrow-filled-before" }.freeze HEADER_RESPONSIVE_DIVIDER_OPTIONS = HEADER_RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze FOOTER_RESPONSIVE_DIVIDER_DEFAULT = :none FOOTER_RESPONSIVE_DIVIDER_MAPPINGS = { FOOTER_RESPONSIVE_DIVIDER_DEFAULT => "", - :line => "PageLayout-region--hasDivider-line-before", - :filled => "PageLayout-region--hasDivider-filled-before" + :line => "PageLayout-region--dividerNarrow-line-before", + :filled => "PageLayout-region--dividerNarrow-filled-before" }.freeze FOOTER_RESPONSIVE_DIVIDER_OPTIONS = FOOTER_RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze @@ -478,8 +478,8 @@ class Pane < Primer::Component RESPONSIVE_DIVIDER_OPTIONS = RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze HAS_DIVIDER_NONE_MAPPINGS = { - start: "PageLayout-region--hasDivider-none-before", - end: "PageLayout-region--hasDivider-none-after" + start: "PageLayout-region--dividerNarrow-none-before", + end: "PageLayout-region--dividerNarrow-none-after" }.freeze TAG_DEFAULT = :div diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 040641838c..0b1147d68a 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -25,7 +25,7 @@ def test_renders_layout assert_selector("div.PageLayout") do assert_selector("div.PageLayout-columns") do assert_selector("div.PageLayout-region.PageLayout-content", text: "Content") - assert_selector("div.PageLayout-region.PageLayout-pane.PageLayout-region--hasDivider-none-before", text: "Pane") + assert_selector("div.PageLayout-region.PageLayout-pane.PageLayout-region--dividerNarrow-none-before", text: "Pane") end end end @@ -42,7 +42,7 @@ def test_optionally_renders_header_and_footer assert_selector("div.PageLayout-header.PageLayout-region", text: "Header") assert_selector("div.PageLayout-columns") do assert_selector("div.PageLayout-region.PageLayout-content", text: "Content") - assert_selector("div.PageLayout-region.PageLayout-pane.PageLayout-region--hasDivider-none-before", text: "Pane") + assert_selector("div.PageLayout-region.PageLayout-pane.PageLayout-region--dividerNarrow-none-before", text: "Pane") end assert_selector("div.PageLayout-footer.PageLayout-region", text: "Footer") end From 331ce1647cad16b886b4cc1e0ceec64dc782facf Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Tue, 21 Dec 2021 20:05:15 +0000 Subject: [PATCH 77/97] Remove regions reference Syncing css changes with Primer CSS. --- app/components/primer/beta/page_layout.rb | 8 ++++---- test/components/primer/beta/page_layout_test.rb | 12 ++++++------ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 6c94f27146..b35ea0d0fd 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -51,8 +51,8 @@ class PageLayout < Primer::Component PRIMARY_REGION_DEFAULT = :content PRIMARY_REGION_MAPPINGS = { - PRIMARY_REGION_DEFAULT => "PageLayout--responsive-separateRegions-primary-content", - :pane => "PageLayout--responsive-separateRegions-primary-pane" + PRIMARY_REGION_DEFAULT => "PageLayout--responsive-primary-content", + :pane => "PageLayout--responsive-primary-pane" }.freeze PRIMARY_REGION_OPTIONS = PRIMARY_REGION_MAPPINGS.keys.freeze @@ -450,8 +450,8 @@ class Pane < Primer::Component POSITION_NARROW_DEFAULT = :inherit POSITION_NARROW_MAPPINGS = { POSITION_NARROW_DEFAULT => "", - :start => "PageLayout--responsive-stackRegions-panePos-start", - :end => "PageLayout--responsive-stackRegions-panePos-end" + :start => "PageLayout--responsive-panePos-start", + :end => "PageLayout--responsive-panePos-end" }.freeze POSITION_NARROW_OPTIONS = POSITION_NARROW_MAPPINGS.keys.freeze diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 0b1147d68a..d273d9a08f 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -61,7 +61,7 @@ def test_renders_layout_with_correct_default_classes "PageLayout--columnGap-normal", "PageLayout--rowGap-normal", "PageLayout--panePos-start", - "PageLayout--responsive-stackRegions-panePos-start" + "PageLayout--responsive-panePos-start" ].join(".") assert_selector("div.#{expected_classes}") do assert_selector("div.PageLayout-content", text: "Content") @@ -166,8 +166,8 @@ def test_primary_region_not_set_when_stack_regions c.pane_region { "Pane" } end - refute_selector("div.PageLayout--responsive-separateRegions-primary-pane") - refute_selector("div.PageLayout--responsive-separateRegions-primary-content") + refute_selector("div.PageLayout--responsive-primary-pane") + refute_selector("div.PageLayout--responsive-primary-content") end def test_pane_width @@ -269,7 +269,7 @@ def test_stack_regions_variant_with_responsive_pane_position position_narrow = position if position_narrow == :inherit assert_selector("div.PageLayout") do - assert_selector("div.PageLayout--panePos-#{position}.PageLayout--responsive-stackRegions-panePos-#{position_narrow}") do + assert_selector("div.PageLayout--panePos-#{position}.PageLayout--responsive-panePos-#{position_narrow}") do assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane", text: "Pane") end @@ -284,8 +284,8 @@ def test_variant_pane_position_not_set_when_separate_regions c.pane_region(position: :start) { "Pane" } end - refute_selector("div.PageLayout--responsive-stackRegions-panePos-end") - refute_selector("div.PageLayout--responsive-stackRegions-panePos-start") + refute_selector("div.PageLayout--responsive-panePos-end") + refute_selector("div.PageLayout--responsive-panePos-start") end def test_pane_tags From dd505a710c9c42ea6afc4d226877df23422194a9 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 22 Dec 2021 14:44:51 +0000 Subject: [PATCH 78/97] Pane responsive_divider -> divider_narrow Syncing CSS changes --- app/components/primer/beta/page_layout.rb | 14 +++++++------- test/components/primer/beta/page_layout_test.rb | 8 ++++---- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index b35ea0d0fd..f8aa7e99b8 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -469,13 +469,13 @@ class Pane < Primer::Component }.freeze POSITION_OPTIONS = POSITION_MAPPINGS.keys.freeze - RESPONSIVE_DIVIDER_DEFAULT = :none - RESPONSIVE_DIVIDER_MAPPINGS = { - RESPONSIVE_DIVIDER_DEFAULT => "", + DIVIDER_NARROW_DEFAULT = :none + DIVIDER_NARROW_MAPPINGS = { + DIVIDER_NARROW_DEFAULT => "", :line => "PageLayout--divider-after", :filled => "PageLayout--divider-after-filled" }.freeze - RESPONSIVE_DIVIDER_OPTIONS = RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze + DIVIDER_NARROW_OPTIONS = DIVIDER_NARROW_MAPPINGS.keys.freeze HAS_DIVIDER_NONE_MAPPINGS = { start: "PageLayout-region--dividerNarrow-none-before", @@ -485,10 +485,10 @@ class Pane < Primer::Component TAG_DEFAULT = :div TAG_OPTIONS = [TAG_DEFAULT, :aside, :nav, :section].freeze - # @param responsive_divider [Symbol] <%= one_of(Primer::Beta::PageLayout::Pane::RESPONSIVE_DIVIDER_OPTIONS) %> + # @param divider_narrow [Symbol] <%= one_of(Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_OPTIONS) %> # @param position [Symbol] <%= one_of(Primer::Beta::PageLayout::Pane::POSITION_OPTIONS) %> # @param tag [Symbol] <%= one_of(Primer::Beta::PageLayout::Pane::TAG_OPTIONS) %> - def initialize(responsive_divider: RESPONSIVE_DIVIDER_DEFAULT, position: POSITION_DEFAULT, tag: TAG_DEFAULT, **system_arguments) + def initialize(divider_narrow: DIVIDER_NARROW_DEFAULT, position: POSITION_DEFAULT, tag: TAG_DEFAULT, **system_arguments) @system_arguments = system_arguments @position = position @@ -496,7 +496,7 @@ def initialize(responsive_divider: RESPONSIVE_DIVIDER_DEFAULT, position: POSITIO @system_arguments[:classes] = class_names( "PageLayout-region", "PageLayout-pane", - RESPONSIVE_DIVIDER_MAPPINGS[fetch_or_fallback(RESPONSIVE_DIVIDER_OPTIONS, responsive_divider, RESPONSIVE_DIVIDER_DEFAULT)], + DIVIDER_NARROW_MAPPINGS[fetch_or_fallback(DIVIDER_NARROW_OPTIONS, divider_narrow, DIVIDER_NARROW_DEFAULT)], @system_arguments[:classes] ) end diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index d273d9a08f..cb22ac2874 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -208,14 +208,14 @@ def test_pane_divider_absent_when_not_set refute_selector("div.PageLayout.PageLayout--hasPaneDivider") end - def test_pane_responsive_divider - Primer::Beta::PageLayout::Pane::RESPONSIVE_DIVIDER_OPTIONS.each do |type| + def test_pane_divider_narrow + Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_OPTIONS.each do |type| render_inline(Primer::Beta::PageLayout.new) do |c| c.content_region { "Content" } - c.pane_region(responsive_divider: type) { "Pane" } + c.pane_region(divider_narrow: type) { "Pane" } end - type_class = Primer::Beta::PageLayout::Pane::RESPONSIVE_DIVIDER_MAPPINGS[type] + type_class = Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_MAPPINGS[type] assert_selector("div.PageLayout") do assert_selector("div#{type_class.empty? ? '' : ".#{type_class}"}") do assert_selector("div.PageLayout-content", text: "Content") From 662b37ba4220cfd4519f6002341026d325465f8f Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 22 Dec 2021 15:02:55 +0000 Subject: [PATCH 79/97] Header responsive_divider -> divider_narrow Syncing with upstream Primer CSS changes. --- app/components/primer/beta/page_layout.rb | 14 +++++++------- test/components/primer/beta/page_layout_test.rb | 6 +++--- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index f8aa7e99b8..2011231b99 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -63,13 +63,13 @@ class PageLayout < Primer::Component }.freeze RESPONSIVE_VARIANT_OPTIONS = RESPONSIVE_VARIANT_MAPPINGS.keys.freeze - HEADER_RESPONSIVE_DIVIDER_DEFAULT = :none - HEADER_RESPONSIVE_DIVIDER_MAPPINGS = { - HEADER_RESPONSIVE_DIVIDER_DEFAULT => "", + HEADER_DIVIDER_NARROW_DEFAULT = :none + HEADER_DIVIDER_NARROW_MAPPINGS = { + HEADER_DIVIDER_NARROW_DEFAULT => "", :line => "PageLayout-region--dividerNarrow-line-before", :filled => "PageLayout-region--dividerNarrow-filled-before" }.freeze - HEADER_RESPONSIVE_DIVIDER_OPTIONS = HEADER_RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze + HEADER_DIVIDER_NARROW_OPTIONS = HEADER_DIVIDER_NARROW_MAPPINGS.keys.freeze FOOTER_RESPONSIVE_DIVIDER_DEFAULT = :none FOOTER_RESPONSIVE_DIVIDER_MAPPINGS = { @@ -89,9 +89,9 @@ class PageLayout < Primer::Component # The layout's header. # # @param divider [Boolean] Whether to show a header divider - # @param responsive_divider [Symbol] Whether to show a divider below the `header` region if in responsive mode. <%= one_of(Primer::Beta::PageLayout::HEADER_RESPONSIVE_DIVIDER_OPTIONS) %> + # @param divider_narrow [Symbol] Whether to show a divider below the `header` region if in responsive mode. <%= one_of(Primer::Beta::PageLayout::HEADER_DIVIDER_NARROW_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_one :header_region, lambda { |divider: false, responsive_divider: :line, **header_system_arguments| + renders_one :header_region, lambda { |divider: false, divider_narrow: :line, **header_system_arguments| # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], @@ -100,7 +100,7 @@ class PageLayout < Primer::Component header_system_arguments[:classes] = class_names( header_system_arguments[:classes], - HEADER_RESPONSIVE_DIVIDER_MAPPINGS[fetch_or_fallback(HEADER_RESPONSIVE_DIVIDER_OPTIONS, responsive_divider, HEADER_RESPONSIVE_DIVIDER_DEFAULT)], + HEADER_DIVIDER_NARROW_MAPPINGS[fetch_or_fallback(HEADER_DIVIDER_NARROW_OPTIONS, divider_narrow, HEADER_DIVIDER_NARROW_DEFAULT)], "PageLayout-header", "PageLayout-region" ) diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index cb22ac2874..5de618510d 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -359,14 +359,14 @@ def test_header_divider_not_present_when_not_set end def test_header_responsive_divider - Primer::Beta::PageLayout::HEADER_RESPONSIVE_DIVIDER_OPTIONS.each do |opt| + Primer::Beta::PageLayout::HEADER_DIVIDER_NARROW_OPTIONS.each do |opt| render_inline(Primer::Beta::PageLayout.new) do |c| - c.header_region(responsive_divider: opt) { "Header" } + c.header_region(divider_narrow: opt) { "Header" } c.content_region { "Content" } c.pane_region { "Pane" } end - divider_class = Primer::Beta::PageLayout::HEADER_RESPONSIVE_DIVIDER_MAPPINGS[opt] + divider_class = Primer::Beta::PageLayout::HEADER_DIVIDER_NARROW_MAPPINGS[opt] assert_selector("div.PageLayout") do assert_selector("div.PageLayout-header#{divider_class.empty? ? '' : ".#{divider_class}"}", text: "Header") assert_selector("div.PageLayout-content", text: "Content") From 54b9fe29353a82ae0a1c1f0c5c89e95ae3b5ff16 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 22 Dec 2021 15:13:34 +0000 Subject: [PATCH 80/97] Footer responsive_divider -> divider_narrow Syncing with upstream Primer CSS changes. --- app/components/primer/beta/page_layout.rb | 14 +++++++------- test/components/primer/beta/page_layout_test.rb | 6 +++--- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 2011231b99..33da721eb5 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -71,13 +71,13 @@ class PageLayout < Primer::Component }.freeze HEADER_DIVIDER_NARROW_OPTIONS = HEADER_DIVIDER_NARROW_MAPPINGS.keys.freeze - FOOTER_RESPONSIVE_DIVIDER_DEFAULT = :none - FOOTER_RESPONSIVE_DIVIDER_MAPPINGS = { - FOOTER_RESPONSIVE_DIVIDER_DEFAULT => "", + FOOTER_DIVIDER_NARROW_DEFAULT = :none + FOOTER_DIVIDER_NARROW_MAPPINGS = { + FOOTER_DIVIDER_NARROW_DEFAULT => "", :line => "PageLayout-region--dividerNarrow-line-before", :filled => "PageLayout-region--dividerNarrow-filled-before" }.freeze - FOOTER_RESPONSIVE_DIVIDER_OPTIONS = FOOTER_RESPONSIVE_DIVIDER_MAPPINGS.keys.freeze + FOOTER_DIVIDER_NARROW_OPTIONS = FOOTER_DIVIDER_NARROW_MAPPINGS.keys.freeze # The layout's content. # @@ -111,9 +111,9 @@ class PageLayout < Primer::Component # The layout's footer. # # @param divider [Boolean] Whether to show a footer divider - # @param responsive_divider [Symbol] Whether to show a divider below the `footer` region if in responsive mode. <%= one_of(Primer::Beta::PageLayout::FOOTER_RESPONSIVE_DIVIDER_OPTIONS) %> + # @param divider_narrow [Symbol] Whether to show a divider below the `footer` region if in responsive mode. <%= one_of(Primer::Beta::PageLayout::FOOTER_DIVIDER_NARROW_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - renders_one :footer_region, lambda { |divider: false, responsive_divider: FOOTER_RESPONSIVE_DIVIDER_DEFAULT, **footer_system_arguments| + renders_one :footer_region, lambda { |divider: false, divider_narrow: FOOTER_DIVIDER_NARROW_DEFAULT, **footer_system_arguments| # These classes have to be set in the parent `Layout` element, so we modify its system arguments. @system_arguments[:classes] = class_names( @system_arguments[:classes], @@ -122,7 +122,7 @@ class PageLayout < Primer::Component footer_system_arguments[:classes] = class_names( footer_system_arguments[:classes], - FOOTER_RESPONSIVE_DIVIDER_MAPPINGS[fetch_or_fallback(FOOTER_RESPONSIVE_DIVIDER_OPTIONS, responsive_divider, FOOTER_RESPONSIVE_DIVIDER_DEFAULT)], + FOOTER_DIVIDER_NARROW_MAPPINGS[fetch_or_fallback(FOOTER_DIVIDER_NARROW_OPTIONS, divider_narrow, FOOTER_DIVIDER_NARROW_DEFAULT)], "PageLayout-footer", "PageLayout-region" ) diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 5de618510d..2b7214f1e2 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -396,14 +396,14 @@ def test_footer_divider_not_present_when_not_set end def test_footer_responsive_divider - Primer::Beta::PageLayout::FOOTER_RESPONSIVE_DIVIDER_OPTIONS.each do |opt| + Primer::Beta::PageLayout::FOOTER_DIVIDER_NARROW_OPTIONS.each do |opt| render_inline(Primer::Beta::PageLayout.new) do |c| c.content_region { "Content" } c.pane_region { "Pane" } - c.footer_region(responsive_divider: opt) { "Footer" } + c.footer_region(divider_narrow: opt) { "Footer" } end - divider_class = Primer::Beta::PageLayout::FOOTER_RESPONSIVE_DIVIDER_MAPPINGS[opt] + divider_class = Primer::Beta::PageLayout::FOOTER_DIVIDER_NARROW_MAPPINGS[opt] assert_selector("div.PageLayout") do assert_selector("div.PageLayout-footer#{divider_class.empty? ? '' : ".#{divider_class}"}", text: "Footer") assert_selector("div.PageLayout-content", text: "Content") From 633b0cf814bb239a3805e71868d28e30a1f76bb5 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 22 Dec 2021 17:14:04 +0000 Subject: [PATCH 81/97] Add inherit argument to divider options --- app/components/primer/beta/page_layout.rb | 33 ++++++++----------- .../primer/beta/page_layout_test.rb | 4 +-- 2 files changed, 15 insertions(+), 22 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 33da721eb5..78b50500e4 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -63,17 +63,19 @@ class PageLayout < Primer::Component }.freeze RESPONSIVE_VARIANT_OPTIONS = RESPONSIVE_VARIANT_MAPPINGS.keys.freeze - HEADER_DIVIDER_NARROW_DEFAULT = :none + HEADER_DIVIDER_NARROW_DEFAULT = :inherit HEADER_DIVIDER_NARROW_MAPPINGS = { - HEADER_DIVIDER_NARROW_DEFAULT => "", - :line => "PageLayout-region--dividerNarrow-line-before", - :filled => "PageLayout-region--dividerNarrow-filled-before" + HEADER_DIVIDER_NARROW_DEFAULT => "PageLayout-region--dividerNarrow-line-after", + :none => "", + :line => "PageLayout-region--dividerNarrow-line-after", + :filled => "PageLayout-region--dividerNarrow-filled-after" }.freeze HEADER_DIVIDER_NARROW_OPTIONS = HEADER_DIVIDER_NARROW_MAPPINGS.keys.freeze - FOOTER_DIVIDER_NARROW_DEFAULT = :none + FOOTER_DIVIDER_NARROW_DEFAULT = :inherit FOOTER_DIVIDER_NARROW_MAPPINGS = { - FOOTER_DIVIDER_NARROW_DEFAULT => "", + FOOTER_DIVIDER_NARROW_DEFAULT => "PageLayout-region--dividerNarrow-line-before", + :none => "", :line => "PageLayout-region--dividerNarrow-line-before", :filled => "PageLayout-region--dividerNarrow-filled-before" }.freeze @@ -154,11 +156,6 @@ class PageLayout < Primer::Component { "PageLayout--hasPaneDivider" => divider } ) - pane_system_arguments[:classes] = class_names( - pane_system_arguments[:classes], - Pane::HAS_DIVIDER_NONE_MAPPINGS[position_narrow] - ) - Pane.new(position: position, **pane_system_arguments) } @@ -469,19 +466,15 @@ class Pane < Primer::Component }.freeze POSITION_OPTIONS = POSITION_MAPPINGS.keys.freeze - DIVIDER_NARROW_DEFAULT = :none + DIVIDER_NARROW_DEFAULT = :inherit DIVIDER_NARROW_MAPPINGS = { - DIVIDER_NARROW_DEFAULT => "", - :line => "PageLayout--divider-after", - :filled => "PageLayout--divider-after-filled" + DIVIDER_NARROW_DEFAULT => "PageLayout-region--dividerNarrow-line-before", + :none => "PageLayout-region--dividerNarrow-none-before", + :line => "PageLayout-region--dividerNarrow-line-before", + :filled => "PageLayout-region--dividerNarrow-filled-before" }.freeze DIVIDER_NARROW_OPTIONS = DIVIDER_NARROW_MAPPINGS.keys.freeze - HAS_DIVIDER_NONE_MAPPINGS = { - start: "PageLayout-region--dividerNarrow-none-before", - end: "PageLayout-region--dividerNarrow-none-after" - }.freeze - TAG_DEFAULT = :div TAG_OPTIONS = [TAG_DEFAULT, :aside, :nav, :section].freeze diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 2b7214f1e2..139b7b9076 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -25,7 +25,7 @@ def test_renders_layout assert_selector("div.PageLayout") do assert_selector("div.PageLayout-columns") do assert_selector("div.PageLayout-region.PageLayout-content", text: "Content") - assert_selector("div.PageLayout-region.PageLayout-pane.PageLayout-region--dividerNarrow-none-before", text: "Pane") + assert_selector("div.PageLayout-region.PageLayout-pane", text: "Pane") end end end @@ -42,7 +42,7 @@ def test_optionally_renders_header_and_footer assert_selector("div.PageLayout-header.PageLayout-region", text: "Header") assert_selector("div.PageLayout-columns") do assert_selector("div.PageLayout-region.PageLayout-content", text: "Content") - assert_selector("div.PageLayout-region.PageLayout-pane.PageLayout-region--dividerNarrow-none-before", text: "Pane") + assert_selector("div.PageLayout-region.PageLayout-pane", text: "Pane") end assert_selector("div.PageLayout-footer.PageLayout-region", text: "Footer") end From 9e67d9ac8cf4c42530bdbb105df6573357abf37f Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 22 Dec 2021 18:15:37 +0000 Subject: [PATCH 82/97] Cleanup positioning of constants --- app/components/primer/beta/page_layout.rb | 38 +++--- .../primer/beta/page_layout_test.rb | 114 +++++++++--------- 2 files changed, 81 insertions(+), 71 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 78b50500e4..afef186046 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -49,13 +49,6 @@ class PageLayout < Primer::Component }.freeze ROW_GAP_OPTIONS = ROW_GAP_MAPPINGS.keys.freeze - PRIMARY_REGION_DEFAULT = :content - PRIMARY_REGION_MAPPINGS = { - PRIMARY_REGION_DEFAULT => "PageLayout--responsive-primary-content", - :pane => "PageLayout--responsive-primary-pane" - }.freeze - PRIMARY_REGION_OPTIONS = PRIMARY_REGION_MAPPINGS.keys.freeze - RESPONSIVE_VARIANT_DEFAULT = :stack_regions RESPONSIVE_VARIANT_MAPPINGS = { RESPONSIVE_VARIANT_DEFAULT => "PageLayout--responsive-stackRegions", @@ -63,6 +56,13 @@ class PageLayout < Primer::Component }.freeze RESPONSIVE_VARIANT_OPTIONS = RESPONSIVE_VARIANT_MAPPINGS.keys.freeze + PRIMARY_REGION_DEFAULT = :content + PRIMARY_REGION_MAPPINGS = { + PRIMARY_REGION_DEFAULT => "PageLayout--responsive-primary-content", + :pane => "PageLayout--responsive-primary-pane" + }.freeze + PRIMARY_REGION_OPTIONS = PRIMARY_REGION_MAPPINGS.keys.freeze + HEADER_DIVIDER_NARROW_DEFAULT = :inherit HEADER_DIVIDER_NARROW_MAPPINGS = { HEADER_DIVIDER_NARROW_DEFAULT => "PageLayout-region--dividerNarrow-line-after", @@ -156,6 +156,11 @@ class PageLayout < Primer::Component { "PageLayout--hasPaneDivider" => divider } ) + pane_system_arguments[:classes] = class_names( + pane_system_arguments[:classes], + Pane::HAS_DIVIDER_NONE_MAPPINGS[position_narrow] + ) + Pane.new(position: position, **pane_system_arguments) } @@ -436,6 +441,13 @@ def call class Pane < Primer::Component status :beta + POSITION_DEFAULT = :start + POSITION_MAPPINGS = { + POSITION_DEFAULT => "PageLayout--panePos-start", + :end => "PageLayout--panePos-end" + }.freeze + POSITION_OPTIONS = POSITION_MAPPINGS.keys.freeze + WIDTH_DEFAULT = :default WIDTH_MAPPINGS = { WIDTH_DEFAULT => "", @@ -444,6 +456,11 @@ class Pane < Primer::Component }.freeze WIDTH_OPTIONS = WIDTH_MAPPINGS.keys.freeze + HAS_DIVIDER_NONE_MAPPINGS = { + start: "PageLayout-region--hasDivider-none-before", + end: "PageLayout-region--hasDivider-none-after" + }.freeze + POSITION_NARROW_DEFAULT = :inherit POSITION_NARROW_MAPPINGS = { POSITION_NARROW_DEFAULT => "", @@ -459,13 +476,6 @@ class Pane < Primer::Component }.freeze DIVIDER_OPTIONS = DIVIDER_MAPPINGS.keys.freeze - POSITION_DEFAULT = :start - POSITION_MAPPINGS = { - POSITION_DEFAULT => "PageLayout--panePos-start", - :end => "PageLayout--panePos-end" - }.freeze - POSITION_OPTIONS = POSITION_MAPPINGS.keys.freeze - DIVIDER_NARROW_DEFAULT = :inherit DIVIDER_NARROW_MAPPINGS = { DIVIDER_NARROW_DEFAULT => "PageLayout-region--dividerNarrow-line-before", diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 139b7b9076..ad58aa0cda 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -170,62 +170,7 @@ def test_primary_region_not_set_when_stack_regions refute_selector("div.PageLayout--responsive-primary-content") end - def test_pane_width - Primer::Beta::PageLayout::Pane::WIDTH_OPTIONS.each do |size| - render_inline(Primer::Beta::PageLayout.new) do |c| - c.content_region { "Content" } - c.pane_region(width: size) { "Pane" } - end - - width_class = Primer::Beta::PageLayout::Pane::WIDTH_MAPPINGS[size] - assert_selector("div.PageLayout") do - assert_selector("div#{width_class.empty? ? '' : ".#{width_class}"}") do - assert_selector("div.PageLayout-content", text: "Content") - assert_selector("div.PageLayout-pane", text: "Pane") - end - end - end - end - - def test_pane_divider_present_when_set - render_inline(Primer::Beta::PageLayout.new) do |c| - c.content_region { "Content" } - c.pane_region(divider: true) { "Pane" } - end - - assert_selector("div.PageLayout.PageLayout--hasPaneDivider") do - assert_selector("div.PageLayout-content", text: "Content") - assert_selector("div.PageLayout-pane", text: "Pane") - end - end - - def test_pane_divider_absent_when_not_set - render_inline(Primer::Beta::PageLayout.new) do |c| - c.content_region { "Content" } - c.pane_region { "Pane" } - end - - refute_selector("div.PageLayout.PageLayout--hasPaneDivider") - end - - def test_pane_divider_narrow - Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_OPTIONS.each do |type| - render_inline(Primer::Beta::PageLayout.new) do |c| - c.content_region { "Content" } - c.pane_region(divider_narrow: type) { "Pane" } - end - - type_class = Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_MAPPINGS[type] - assert_selector("div.PageLayout") do - assert_selector("div#{type_class.empty? ? '' : ".#{type_class}"}") do - assert_selector("div.PageLayout-content", text: "Content") - assert_selector("div.PageLayout-pane", text: "Pane") - end - end - end - end - - def test_pane_position_add_correct_class + def test_pane_position Primer::Beta::PageLayout::Pane::POSITION_OPTIONS.each do |position| render_inline(Primer::Beta::PageLayout.new) do |c| c.content_region { "Content" } @@ -259,7 +204,7 @@ def test_pane_position_renders_pane_last assert_match(/PageLayout-content.*PageLayout-pane/m, @rendered_component) end - def test_stack_regions_variant_with_responsive_pane_position + def test_stack_regions_variant_with_pane_position_narrow Primer::Beta::PageLayout::Pane::POSITION_OPTIONS.each do |position| Primer::Beta::PageLayout::Pane::POSITION_NARROW_OPTIONS.each do |position_narrow| render_inline(Primer::Beta::PageLayout.new(responsive_variant: :stack_regions)) do |c| @@ -288,6 +233,61 @@ def test_variant_pane_position_not_set_when_separate_regions refute_selector("div.PageLayout--responsive-panePos-start") end + def test_pane_width + Primer::Beta::PageLayout::Pane::WIDTH_OPTIONS.each do |size| + render_inline(Primer::Beta::PageLayout.new) do |c| + c.content_region { "Content" } + c.pane_region(width: size) { "Pane" } + end + + width_class = Primer::Beta::PageLayout::Pane::WIDTH_MAPPINGS[size] + assert_selector("div.PageLayout") do + assert_selector("div#{width_class.empty? ? '' : ".#{width_class}"}") do + assert_selector("div.PageLayout-content", text: "Content") + assert_selector("div.PageLayout-pane", text: "Pane") + end + end + end + end + + def test_pane_divider_present_when_set + render_inline(Primer::Beta::PageLayout.new) do |c| + c.content_region { "Content" } + c.pane_region(divider: true) { "Pane" } + end + + assert_selector("div.PageLayout.PageLayout--hasPaneDivider") do + assert_selector("div.PageLayout-content", text: "Content") + assert_selector("div.PageLayout-pane.PageLayout-region--dividerNarrow-line-before", text: "Pane") + end + end + + def test_pane_divider_absent_when_not_set + render_inline(Primer::Beta::PageLayout.new) do |c| + c.content_region { "Content" } + c.pane_region { "Pane" } + end + + refute_selector("div.PageLayout.PageLayout--hasPaneDivider") + end + + def test_pane_divider_narrow + Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_OPTIONS.each do |type| + render_inline(Primer::Beta::PageLayout.new) do |c| + c.content_region { "Content" } + c.pane_region(divider_narrow: type) { "Pane" } + end + + type_class = Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_MAPPINGS[type] + assert_selector("div.PageLayout") do + assert_selector("div#{type_class.empty? ? '' : ".#{type_class}"}") do + assert_selector("div.PageLayout-content", text: "Content") + assert_selector("div.PageLayout-pane", text: "Pane") + end + end + end + end + def test_pane_tags Primer::Beta::PageLayout::Pane::TAG_OPTIONS.each do |tag| render_inline(Primer::Beta::PageLayout.new) do |c| From f1071544f1f14816802da35133cdf7a7d1dfd778 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 22 Dec 2021 19:23:10 +0000 Subject: [PATCH 83/97] Ensure pane divider classes depend on position --- app/components/primer/beta/page_layout.rb | 26 +++++++------------ .../primer/beta/page_layout_test.rb | 20 +++++++------- 2 files changed, 20 insertions(+), 26 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index afef186046..4b90bcb2eb 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -156,11 +156,6 @@ class PageLayout < Primer::Component { "PageLayout--hasPaneDivider" => divider } ) - pane_system_arguments[:classes] = class_names( - pane_system_arguments[:classes], - Pane::HAS_DIVIDER_NONE_MAPPINGS[position_narrow] - ) - Pane.new(position: position, **pane_system_arguments) } @@ -456,11 +451,6 @@ class Pane < Primer::Component }.freeze WIDTH_OPTIONS = WIDTH_MAPPINGS.keys.freeze - HAS_DIVIDER_NONE_MAPPINGS = { - start: "PageLayout-region--hasDivider-none-before", - end: "PageLayout-region--hasDivider-none-after" - }.freeze - POSITION_NARROW_DEFAULT = :inherit POSITION_NARROW_MAPPINGS = { POSITION_NARROW_DEFAULT => "", @@ -478,12 +468,16 @@ class Pane < Primer::Component DIVIDER_NARROW_DEFAULT = :inherit DIVIDER_NARROW_MAPPINGS = { - DIVIDER_NARROW_DEFAULT => "PageLayout-region--dividerNarrow-line-before", - :none => "PageLayout-region--dividerNarrow-none-before", - :line => "PageLayout-region--dividerNarrow-line-before", - :filled => "PageLayout-region--dividerNarrow-filled-before" + { end: DIVIDER_NARROW_DEFAULT } => "PageLayout-region--dividerNarrow-line-before", + { end: :none } => "PageLayout-region--dividerNarrow-none-before", + { end: :line } => "PageLayout-region--dividerNarrow-line-before", + { end: :filled } => "PageLayout-region--dividerNarrow-filled-before", + { start: DIVIDER_NARROW_DEFAULT } => "PageLayout-region--dividerNarrow-line-after", + { start: :none } => "PageLayout-region--dividerNarrow-none-after", + { start: :line } => "PageLayout-region--dividerNarrow-line-after", + { start: :filled } => "PageLayout-region--dividerNarrow-filled-after" }.freeze - DIVIDER_NARROW_OPTIONS = DIVIDER_NARROW_MAPPINGS.keys.freeze + DIVIDER_NARROW_USER_OPTIONS = [DIVIDER_NARROW_DEFAULT, :none, :line, :filled].freeze TAG_DEFAULT = :div TAG_OPTIONS = [TAG_DEFAULT, :aside, :nav, :section].freeze @@ -499,7 +493,7 @@ def initialize(divider_narrow: DIVIDER_NARROW_DEFAULT, position: POSITION_DEFAUL @system_arguments[:classes] = class_names( "PageLayout-region", "PageLayout-pane", - DIVIDER_NARROW_MAPPINGS[fetch_or_fallback(DIVIDER_NARROW_OPTIONS, divider_narrow, DIVIDER_NARROW_DEFAULT)], + DIVIDER_NARROW_MAPPINGS[{ position => fetch_or_fallback(DIVIDER_NARROW_USER_OPTIONS, divider_narrow, DIVIDER_NARROW_DEFAULT) }], @system_arguments[:classes] ) end diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index ad58aa0cda..ea9bd1cf39 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -258,7 +258,7 @@ def test_pane_divider_present_when_set assert_selector("div.PageLayout.PageLayout--hasPaneDivider") do assert_selector("div.PageLayout-content", text: "Content") - assert_selector("div.PageLayout-pane.PageLayout-region--dividerNarrow-line-before", text: "Pane") + assert_selector("div.PageLayout-pane.PageLayout-region--dividerNarrow-line-after", text: "Pane") end end @@ -272,17 +272,17 @@ def test_pane_divider_absent_when_not_set end def test_pane_divider_narrow - Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_OPTIONS.each do |type| - render_inline(Primer::Beta::PageLayout.new) do |c| - c.content_region { "Content" } - c.pane_region(divider_narrow: type) { "Pane" } - end + Primer::Beta::PageLayout::Pane::POSITION_OPTIONS.each do |position| + Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_USER_OPTIONS.each do |type| + render_inline(Primer::Beta::PageLayout.new) do |c| + c.content_region { "Content" } + c.pane_region(position: position, divider: true, divider_narrow: type) { "Pane" } + end - type_class = Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_MAPPINGS[type] - assert_selector("div.PageLayout") do - assert_selector("div#{type_class.empty? ? '' : ".#{type_class}"}") do + type_class = Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_MAPPINGS[{position => type}] + assert_selector("div.PageLayout.PageLayout--hasPaneDivider") do assert_selector("div.PageLayout-content", text: "Content") - assert_selector("div.PageLayout-pane", text: "Pane") + assert_selector("div.PageLayout-pane.#{type_class}", text: "Pane") end end end From b63a0157611ad84a5ef17b26cdb31b34ed30bf54 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 22 Dec 2021 19:50:38 +0000 Subject: [PATCH 84/97] Update pane, header dividers to new spec Syncing with upstream Primer CSS changes. --- app/components/primer/beta/page_layout.rb | 16 ++++++---------- test/components/primer/beta/page_layout_test.rb | 16 +++++++++++++--- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 4b90bcb2eb..9682e5c9da 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -94,15 +94,10 @@ class PageLayout < Primer::Component # @param divider_narrow [Symbol] Whether to show a divider below the `header` region if in responsive mode. <%= one_of(Primer::Beta::PageLayout::HEADER_DIVIDER_NARROW_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> renders_one :header_region, lambda { |divider: false, divider_narrow: :line, **header_system_arguments| - # These classes have to be set in the parent `Layout` element, so we modify its system arguments. - @system_arguments[:classes] = class_names( - @system_arguments[:classes], - "PageLayout--hasHeaderDivider" => divider - ) - header_system_arguments[:classes] = class_names( header_system_arguments[:classes], - HEADER_DIVIDER_NARROW_MAPPINGS[fetch_or_fallback(HEADER_DIVIDER_NARROW_OPTIONS, divider_narrow, HEADER_DIVIDER_NARROW_DEFAULT)], + { "PageLayout-header--hasDivider" => divider }, + { HEADER_DIVIDER_NARROW_MAPPINGS[fetch_or_fallback(HEADER_DIVIDER_NARROW_OPTIONS, divider_narrow, HEADER_DIVIDER_NARROW_DEFAULT)] => divider }, "PageLayout-header", "PageLayout-region" ) @@ -156,7 +151,7 @@ class PageLayout < Primer::Component { "PageLayout--hasPaneDivider" => divider } ) - Pane.new(position: position, **pane_system_arguments) + Pane.new(divider: divider, position: position, **pane_system_arguments) } # @example Default @@ -482,10 +477,11 @@ class Pane < Primer::Component TAG_DEFAULT = :div TAG_OPTIONS = [TAG_DEFAULT, :aside, :nav, :section].freeze + # @param divider [Boolean] # @param divider_narrow [Symbol] <%= one_of(Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_OPTIONS) %> # @param position [Symbol] <%= one_of(Primer::Beta::PageLayout::Pane::POSITION_OPTIONS) %> # @param tag [Symbol] <%= one_of(Primer::Beta::PageLayout::Pane::TAG_OPTIONS) %> - def initialize(divider_narrow: DIVIDER_NARROW_DEFAULT, position: POSITION_DEFAULT, tag: TAG_DEFAULT, **system_arguments) + def initialize(divider: false, divider_narrow: DIVIDER_NARROW_DEFAULT, position: POSITION_DEFAULT, tag: TAG_DEFAULT, **system_arguments) @system_arguments = system_arguments @position = position @@ -493,7 +489,7 @@ def initialize(divider_narrow: DIVIDER_NARROW_DEFAULT, position: POSITION_DEFAUL @system_arguments[:classes] = class_names( "PageLayout-region", "PageLayout-pane", - DIVIDER_NARROW_MAPPINGS[{ position => fetch_or_fallback(DIVIDER_NARROW_USER_OPTIONS, divider_narrow, DIVIDER_NARROW_DEFAULT) }], + { DIVIDER_NARROW_MAPPINGS[{ position => fetch_or_fallback(DIVIDER_NARROW_USER_OPTIONS, divider_narrow, DIVIDER_NARROW_DEFAULT) }] => divider }, @system_arguments[:classes] ) end diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index ea9bd1cf39..8ca062a564 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -288,6 +288,16 @@ def test_pane_divider_narrow end end + def test_pane_divider_narrow_not_applied_when_no_divider + render_inline(Primer::Beta::PageLayout.new) do |c| + c.content_region { "Content" } + c.pane_region(position: :start, divider: false, divider_narrow: :line) { "Pane" } + end + + type_class = Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_MAPPINGS[{ start: :line }] + refute_selector("div.PageLayout-pane.#{type_class}", text: "Pane") + end + def test_pane_tags Primer::Beta::PageLayout::Pane::TAG_OPTIONS.each do |tag| render_inline(Primer::Beta::PageLayout.new) do |c| @@ -345,7 +355,7 @@ def test_header_divider_present_when_set c.pane_region { "Pane" } end - assert_selector("div.PageLayout.PageLayout--hasHeaderDivider") + assert_selector("div.PageLayout-header.PageLayout-header--hasDivider.PageLayout-region--dividerNarrow-line-after") end def test_header_divider_not_present_when_not_set @@ -355,13 +365,13 @@ def test_header_divider_not_present_when_not_set c.pane_region { "Pane" } end - refute_selector("div.PageLayout.PageLayout--hasHeaderDivider") + refute_selector("div.PageLayout-header.PageLayout-header--hasDivider") end def test_header_responsive_divider Primer::Beta::PageLayout::HEADER_DIVIDER_NARROW_OPTIONS.each do |opt| render_inline(Primer::Beta::PageLayout.new) do |c| - c.header_region(divider_narrow: opt) { "Header" } + c.header_region(divider: true, divider_narrow: opt) { "Header" } c.content_region { "Content" } c.pane_region { "Pane" } end From 6bba667b2b6932cbc65068ba39baa5eeed4f7de3 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 22 Dec 2021 20:12:05 +0000 Subject: [PATCH 85/97] Update footer to new spec Sync with change to Primer CSS --- app/components/primer/beta/page_layout.rb | 7 ++----- test/components/primer/beta/page_layout_test.rb | 6 +++--- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/app/components/primer/beta/page_layout.rb b/app/components/primer/beta/page_layout.rb index 9682e5c9da..f4a5e3d5cb 100644 --- a/app/components/primer/beta/page_layout.rb +++ b/app/components/primer/beta/page_layout.rb @@ -112,14 +112,11 @@ class PageLayout < Primer::Component # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> renders_one :footer_region, lambda { |divider: false, divider_narrow: FOOTER_DIVIDER_NARROW_DEFAULT, **footer_system_arguments| # These classes have to be set in the parent `Layout` element, so we modify its system arguments. - @system_arguments[:classes] = class_names( - @system_arguments[:classes], - "PageLayout--hasFooterDivider" => divider - ) footer_system_arguments[:classes] = class_names( footer_system_arguments[:classes], - FOOTER_DIVIDER_NARROW_MAPPINGS[fetch_or_fallback(FOOTER_DIVIDER_NARROW_OPTIONS, divider_narrow, FOOTER_DIVIDER_NARROW_DEFAULT)], + { "PageLayout-footer--hasDivider" => divider }, + { FOOTER_DIVIDER_NARROW_MAPPINGS[fetch_or_fallback(FOOTER_DIVIDER_NARROW_OPTIONS, divider_narrow, FOOTER_DIVIDER_NARROW_DEFAULT)] => divider }, "PageLayout-footer", "PageLayout-region" ) diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 8ca062a564..3dbc30acdc 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -392,7 +392,7 @@ def test_footer_divider_present_when_set c.footer_region(divider: true) { "Footer" } end - assert_selector("div.PageLayout.PageLayout--hasFooterDivider") + assert_selector("div.PageLayout-footer.PageLayout-footer--hasDivider.PageLayout-region--dividerNarrow-line-before") end def test_footer_divider_not_present_when_not_set @@ -402,7 +402,7 @@ def test_footer_divider_not_present_when_not_set c.footer_region { "Footer" } end - refute_selector("div.PageLayout.PageLayout--hasFooterDivider") + refute_selector("div.PageLayout-footer.PageLayout-footer--hasDivider.PageLayout-region--dividerNarrow-line-before") end def test_footer_responsive_divider @@ -410,7 +410,7 @@ def test_footer_responsive_divider render_inline(Primer::Beta::PageLayout.new) do |c| c.content_region { "Content" } c.pane_region { "Pane" } - c.footer_region(divider_narrow: opt) { "Footer" } + c.footer_region(divider: true, divider_narrow: opt) { "Footer" } end divider_class = Primer::Beta::PageLayout::FOOTER_DIVIDER_NARROW_MAPPINGS[opt] From 37a9e63e1780f7e6dd409a4a2aca9a61138c2c2b Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Wed, 22 Dec 2021 20:14:57 +0000 Subject: [PATCH 86/97] docs: build docs --- docs/content/components/beta/pagelayout.md | 38 +++---- .../components/beta/splitpagelayout.md | 14 +-- static/arguments.yml | 4 +- static/classes.yml | 19 ++-- static/constants.json | 100 ++++++++++-------- 5 files changed, 90 insertions(+), 85 deletions(-) diff --git a/docs/content/components/beta/pagelayout.md b/docs/content/components/beta/pagelayout.md index ac75e53e8d..75229edff3 100644 --- a/docs/content/components/beta/pagelayout.md +++ b/docs/content/components/beta/pagelayout.md @@ -35,7 +35,7 @@ Keyboard navigation follows the markup order. Decide carefully how the focus ord | `column_gap` | `Symbol` | `:normal` | Sets gap between columns. One of `:condensed` and `:normal`. | | `row_gap` | `Symbol` | `:normal` | Sets the gap below the header and above the footer. One of `:condensed` and `:normal`. | | `responsive_variant` | `Symbol` | `:stack_regions` | Defines how the layout component adapts to smaller viewports. `:stack_regions` presents the content in a vertical flow, with pane and content vertically arranged. `:separate_regions` presents pane and content as different pages on smaller viewports. | -| `responsive_primary_region` | `Symbol` | `:content` | When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. | +| `primary_region` | `Symbol` | `:content` | When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. | | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | ## Slots @@ -57,7 +57,7 @@ The layout's header. | Name | Type | Default | Description | | :- | :- | :- | :- | | `divider` | `Boolean` | N/A | Whether to show a header divider | -| `responsive_divider` | `Symbol` | N/A | Whether to show a divider below the `header` region if in responsive mode. One of `:filled`, `:line`, or `:none`. | +| `divider_narrow` | `Symbol` | N/A | Whether to show a divider below the `header` region if in responsive mode. One of `:filled`, `:inherit`, `:line`, or `:none`. | | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | ### `Footer_region` @@ -67,7 +67,7 @@ The layout's footer. | Name | Type | Default | Description | | :- | :- | :- | :- | | `divider` | `Boolean` | N/A | Whether to show a footer divider | -| `responsive_divider` | `Symbol` | N/A | Whether to show a divider below the `footer` region if in responsive mode. One of `:filled`, `:line`, or `:none`. | +| `divider_narrow` | `Symbol` | N/A | Whether to show a divider below the `footer` region if in responsive mode. One of `:filled`, `:inherit`, `:line`, or `:none`. | | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | ### `Pane_region` @@ -78,7 +78,7 @@ The layout's pane. | :- | :- | :- | :- | | `width` | `Symbol` | N/A | One of `:default`, `:narrow`, or `:wide`. | | `position` | `Symbol` | N/A | Pane placement when `Layout` is in column modes. One of `:end` and `:start`. | -| `responsive_position` | `Symbol` | N/A | Pane placement when `Layout` is in column modes. One of `:end`, `:inherit`, or `:start`. | +| `position_narrow` | `Symbol` | N/A | Pane placement when `Layout` is in column modes. One of `:end`, `:inherit`, or `:start`. | | `divider` | `Boolean` | N/A | Whether to show a pane line divider. | | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | @@ -86,7 +86,7 @@ The layout's pane. ### Default - + ```erb @@ -98,7 +98,7 @@ The layout's pane. ### Header and footer - + ```erb @@ -114,7 +114,7 @@ The layout's pane. When `:fluid` the layout will be set to full width. When the other sizing options are used the layout will be centered with corresponding widths. - `:fluid`: full width - `:md`: max-width: 768px - `:lg`: max-width: 1012px - `:xl`: max-width: 1280px - + ```erb <%= render(Primer::Beta::PageLayout.new(wrapper_sizing: :fluid)) do |c| %> @@ -139,7 +139,7 @@ When `:fluid` the layout will be set to full width. When the other sizing option Sets wrapper margins surrounding the component to distance itself from the viewport edges. - `:condensed` keeps the margin at 16px. - `:normal`` sets the margin to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(outer_spacing: :condensed)) do |c| %> @@ -156,7 +156,7 @@ Sets wrapper margins surrounding the component to distance itself from the viewp Sets the gap between columns to distance them from each other. - `:condensed` keeps the gap always at 16px. - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(column_gap: :condensed)) do |c| %> @@ -173,7 +173,7 @@ Sets the gap between columns to distance them from each other. - `:condensed` ke Sets the gap below the header and above the footer. - `:condensed` keeps the gap always at 16px. - `:normal` sets the gap to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(row_gap: :condensed)) do |c| %> @@ -190,7 +190,7 @@ Sets the gap below the header and above the footer. - `:condensed` keeps the gap Sets the pane width. The width is predetermined according to the breakpoint instead of it being percentage-based. - `default`: - `narrow`: - `wide`: When flowing as a row, `Pane` takes the full width. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> @@ -211,7 +211,7 @@ Sets the pane width. The width is predetermined according to the breakpoint inst Use `start` for panes that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> @@ -226,22 +226,22 @@ Use `start` for panes that manipulate local navigation, while right-aligned `end ### Pane resposive position -Defines the position of the pane in the responsive layout. - `:start` puts the pane above content - `:end` puts it below content. - `:inherit` uses the same value from `pane_position` +Defines the position of the pane in the responsive layout. - `:start` puts the pane above content - `:end` puts it below content. - `:inherit` uses the same value from `position` - + ```erb <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> <% c.content_region(border: true) { "Content" } %> - <% c.pane_region(pane_responsive_position: :inherit, border: true) { "Pane" } %> + <% c.pane_region(position_narrow: :inherit, border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new) do |c| %> <% c.content_region(border: true) { "Content" } %> - <% c.pane_region(pane_responsive_position: :start, border: true) { "Pane" } %> + <% c.pane_region(position_narrow: :start, border: true) { "Pane" } %> <% end %> <%= render(Primer::Beta::PageLayout.new(mt: 5)) do |c| %> <% c.content_region(border: true) { "Content" } %> - <% c.pane_region(pane_responsive_position: :end, border: true) { "Pane" } %> + <% c.pane_region(position_narrow: :end, border: true) { "Pane" } %> <% end %> ``` @@ -249,7 +249,7 @@ Defines the position of the pane in the responsive layout. - `:start` puts the p You can add an optional header to the layout and have spacing and positioning taken care of for you. You can optionally add a divider to the header. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> @@ -268,7 +268,7 @@ You can add an optional header to the layout and have spacing and positioning ta You can add an optional footer to the layout and have spacing and positioning taken care of for you. You can optionally add a divider to the footer. - + ```erb <%= render(Primer::Beta::PageLayout.new) do |c| %> diff --git a/docs/content/components/beta/splitpagelayout.md b/docs/content/components/beta/splitpagelayout.md index 8f94e4345b..333f083ff6 100644 --- a/docs/content/components/beta/splitpagelayout.md +++ b/docs/content/components/beta/splitpagelayout.md @@ -15,7 +15,7 @@ In the `SplitPageLayout`, changes in the Pane region are reflected in the `Conte On larger screens, the user sees both regions side by side, with the `Pane` region appearing flushed to the left. On smaller screens, the user only sees one of `Pane` or `Content` regions at a time. -Pages may decide if it's more important to show the `Pane` region or the `Content`` region first by the `:responsive_primary_region` property. +Pages may decide if it's more important to show the `Pane` region or the `Content`` region first by the `:primary_region` property. ## Accessibility @@ -26,7 +26,7 @@ Keyboard navigation follows the markup order. In the case of the `SplitPageLayou | Name | Type | Default | Description | | :- | :- | :- | :- | | `inner_spacing` | `Symbol` | `:normal` | Sets padding to regions individually. One of `:condensed` and `:normal`. | -| `responsive_primary_region` | `Symbol` | `:content` | When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. One of `:content` and `:pane`. | +| `primary_region` | `Symbol` | `:content` | When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. One of `:content` and `:pane`. | | `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) | ## Slots @@ -55,7 +55,7 @@ The layout's pane. ### Default - + ```erb @@ -69,7 +69,7 @@ The layout's pane. Sets padding to regions individually. - `:condensed` keeps the margin at 16px. - `:normal` sets the margin to 16px, and to 24px on lg breakpoints and above. - + ```erb <%= render(Primer::Beta::PageLayout.new(inner_spacing: :condensed)) do |c| %> @@ -86,14 +86,14 @@ Sets padding to regions individually. - `:condensed` keeps the margin at 16px. - When `responsive_variant` is set to `:separate_regions`, defines which region appears first on small viewports. `:content` is default. - `:content` - `:pane` - + ```erb <%= render(Primer::Beta::PageLayout.new(resposive_primary_region: :content)) do |c| %> <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> -<%= render(Primer::Beta::PageLayout.new(responsive_primary_region: :pane)) do |c| %> +<%= render(Primer::Beta::PageLayout.new(primary_region: :pane)) do |c| %> <% c.content_region(border: true) { "Content" } %> <% c.pane_region(border: true) { "Pane" } %> <% end %> @@ -103,7 +103,7 @@ When `responsive_variant` is set to `:separate_regions`, defines which region ap Sets the pane width. The width is predetermined according to the breakpoint instead of it being percentage-based. - `default`: - `narrow`: - `wide`: When flowing as a row, `Pane` takes the full width. - + ```erb <%= render(Primer::Beta::SplitPageLayout.new) do |c| %> diff --git a/static/arguments.yml b/static/arguments.yml index 372751d6c2..06534b11a7 100644 --- a/static/arguments.yml +++ b/static/arguments.yml @@ -308,7 +308,7 @@ presents the content in a vertical flow, with pane and content vertically arranged. `:separate_regions` presents pane and content as different pages on smaller viewports. - - name: responsive_primary_region + - name: primary_region type: Symbol default: "`:content`" description: When `responsive_variant` is set to `:separate_regions`, defines @@ -324,7 +324,7 @@ type: Symbol default: "`:normal`" description: Sets padding to regions individually. One of `:condensed` and `:normal`. - - name: responsive_primary_region + - name: primary_region type: Symbol default: "`:content`" description: When `responsive_variant` is set to `:separate_regions`, defines diff --git a/static/classes.yml b/static/classes.yml index 05fbe768b5..4ff7e14fff 100644 --- a/static/classes.yml +++ b/static/classes.yml @@ -50,8 +50,6 @@ - ".PageLayout--columnGap-condensed" - ".PageLayout--columnGap-none" - ".PageLayout--columnGap-normal" -- ".PageLayout--hasFooterDivider" -- ".PageLayout--hasHeaderDivider" - ".PageLayout--hasPaneDivider" - ".PageLayout--innerSpacing-normal" - ".PageLayout--outerSpacing-condensed" @@ -60,23 +58,24 @@ - ".PageLayout--panePos-start" - ".PageLayout--paneWidth-narrow" - ".PageLayout--paneWidth-wide" +- ".PageLayout--responsive-panePos-end" +- ".PageLayout--responsive-panePos-start" +- ".PageLayout--responsive-separateRegions" +- ".PageLayout--responsive-separateRegions-primary-content" +- ".PageLayout--responsive-stackRegions" - ".PageLayout--rowGap-condensed" - ".PageLayout--rowGap-none" - ".PageLayout--rowGap-normal" -- ".PageLayout--variant-separateRegions" -- ".PageLayout--variant-separateRegions-primary-content" -- ".PageLayout--variant-stackRegions" -- ".PageLayout--variant-stackRegions-panePos-end" -- ".PageLayout--variant-stackRegions-panePos-start" - ".PageLayout-columns" - ".PageLayout-content" - ".PageLayout-footer" +- ".PageLayout-footer--hasDivider" - ".PageLayout-header" +- ".PageLayout-header--hasDivider" - ".PageLayout-pane" - ".PageLayout-region" -- ".PageLayout-region--hasDivider-line-before" -- ".PageLayout-region--hasDivider-none-after" -- ".PageLayout-region--hasDivider-none-before" +- ".PageLayout-region--dividerNarrow-line-after" +- ".PageLayout-region--dividerNarrow-line-before" - ".PageLayout-wrapper" - ".Popover" - ".Popover-message" diff --git a/static/constants.json b/static/constants.json index c1301b02b6..1573ce51af 100644 --- a/static/constants.json +++ b/static/constants.json @@ -260,24 +260,28 @@ "condensed" ], "Content": "Primer::Beta::PageLayout::Content", - "FOOTER_RESPONSIVE_DIVIDER_DEFAULT": "none", - "FOOTER_RESPONSIVE_DIVIDER_MAPPINGS": { + "FOOTER_DIVIDER_NARROW_DEFAULT": "inherit", + "FOOTER_DIVIDER_NARROW_MAPPINGS": { + "inherit": "PageLayout-region--dividerNarrow-line-before", "none": "", - "line": "PageLayout-region--hasDivider-line-before", - "filled": "PageLayout-region--hasDivider-filled-before" + "line": "PageLayout-region--dividerNarrow-line-before", + "filled": "PageLayout-region--dividerNarrow-filled-before" }, - "FOOTER_RESPONSIVE_DIVIDER_OPTIONS": [ + "FOOTER_DIVIDER_NARROW_OPTIONS": [ + "inherit", "none", "line", "filled" ], - "HEADER_RESPONSIVE_DIVIDER_DEFAULT": "none", - "HEADER_RESPONSIVE_DIVIDER_MAPPINGS": { + "HEADER_DIVIDER_NARROW_DEFAULT": "inherit", + "HEADER_DIVIDER_NARROW_MAPPINGS": { + "inherit": "PageLayout-region--dividerNarrow-line-after", "none": "", - "line": "PageLayout-region--hasDivider-line-before", - "filled": "PageLayout-region--hasDivider-filled-before" + "line": "PageLayout-region--dividerNarrow-line-after", + "filled": "PageLayout-region--dividerNarrow-filled-after" }, - "HEADER_RESPONSIVE_DIVIDER_OPTIONS": [ + "HEADER_DIVIDER_NARROW_OPTIONS": [ + "inherit", "none", "line", "filled" @@ -291,20 +295,20 @@ "normal", "condensed" ], - "Pane": "Primer::Beta::PageLayout::Pane", - "RESPONSIVE_PRIMARY_REGION_DEFAULT": "content", - "RESPONSIVE_PRIMARY_REGION_MAPPINGS": { - "content": "PageLayout--variant-separateRegions-primary-content", - "pane": "PageLayout--variant-separateRegions-primary-pane" + "PRIMARY_REGION_DEFAULT": "content", + "PRIMARY_REGION_MAPPINGS": { + "content": "PageLayout--responsive-primary-content", + "pane": "PageLayout--responsive-primary-pane" }, - "RESPONSIVE_PRIMARY_REGION_OPTIONS": [ + "PRIMARY_REGION_OPTIONS": [ "content", "pane" ], + "Pane": "Primer::Beta::PageLayout::Pane", "RESPONSIVE_VARIANT_DEFAULT": "stack_regions", "RESPONSIVE_VARIANT_MAPPINGS": { - "stack_regions": "PageLayout--variant-stackRegions", - "separate_regions": "PageLayout--variant-separateRegions" + "stack_regions": "PageLayout--responsive-stackRegions", + "separate_regions": "PageLayout--responsive-separateRegions" }, "RESPONSIVE_VARIANT_OPTIONS": [ "stack_regions", @@ -353,45 +357,47 @@ "start": "PageLayout--panePos-start", "end": "PageLayout--panePos-start" }, + "DIVIDER_NARROW_DEFAULT": "inherit", + "DIVIDER_NARROW_MAPPINGS": { + "{:end=>:inherit}": "PageLayout-region--dividerNarrow-line-before", + "{:end=>:none}": "PageLayout-region--dividerNarrow-none-before", + "{:end=>:line}": "PageLayout-region--dividerNarrow-line-before", + "{:end=>:filled}": "PageLayout-region--dividerNarrow-filled-before", + "{:start=>:inherit}": "PageLayout-region--dividerNarrow-line-after", + "{:start=>:none}": "PageLayout-region--dividerNarrow-none-after", + "{:start=>:line}": "PageLayout-region--dividerNarrow-line-after", + "{:start=>:filled}": "PageLayout-region--dividerNarrow-filled-after" + }, + "DIVIDER_NARROW_USER_OPTIONS": [ + "inherit", + "none", + "line", + "filled" + ], "DIVIDER_OPTIONS": [ "start", "end" ], - "HAS_DIVIDER_NONE_MAPPINGS": { - "start": "PageLayout-region--hasDivider-none-before", - "end": "PageLayout-region--hasDivider-none-after" - }, "POSITION_DEFAULT": "start", "POSITION_MAPPINGS": { "start": "PageLayout--panePos-start", "end": "PageLayout--panePos-end" }, - "POSITION_OPTIONS": [ - "start", - "end" - ], - "RESPONSIVE_DIVIDER_DEFAULT": "none", - "RESPONSIVE_DIVIDER_MAPPINGS": { - "none": "", - "line": "PageLayout--divider-after", - "filled": "PageLayout--divider-after-filled" - }, - "RESPONSIVE_DIVIDER_OPTIONS": [ - "none", - "line", - "filled" - ], - "RESPONSIVE_POSITION_DEFAULT": "inherit", - "RESPONSIVE_POSITION_MAPPINGS": { + "POSITION_NARROW_DEFAULT": "inherit", + "POSITION_NARROW_MAPPINGS": { "inherit": "", - "start": "PageLayout--variant-stackRegions-panePos-start", - "end": "PageLayout--variant-stackRegions-panePos-end" + "start": "PageLayout--responsive-panePos-start", + "end": "PageLayout--responsive-panePos-end" }, - "RESPONSIVE_POSITION_OPTIONS": [ + "POSITION_NARROW_OPTIONS": [ "inherit", "start", "end" ], + "POSITION_OPTIONS": [ + "start", + "end" + ], "TAG_DEFAULT": "div", "TAG_OPTIONS": [ "div", @@ -440,12 +446,12 @@ "narrow", "wide" ], - "RESPONSIVE_PRIMARY_REGION_DEFAULT": "content", - "RESPONSIVE_PRIMARY_REGION_MAPPINGS": { - "content": "PageLayout--variant-separateRegions-primary-content", - "pane": "PageLayout--variant-separateRegions-primary-pane" + "PRIMARY_REGION_DEFAULT": "content", + "PRIMARY_REGION_MAPPINGS": { + "content": "PageLayout--responsive-separateRegions-primary-content", + "pane": "PageLayout--responsive-separateRegions-primary-pane" }, - "RESPONSIVE_PRIMARY_REGION_OPTIONS": [ + "PRIMARY_REGION_OPTIONS": [ "content", "pane" ] From d8a8591c490a3253b6acdab2fa7e01ff1d9288ba Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 22 Dec 2021 20:21:23 +0000 Subject: [PATCH 87/97] Update stories to use new Layout API --- stories/primer/beta/page_layout_stories.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stories/primer/beta/page_layout_stories.rb b/stories/primer/beta/page_layout_stories.rb index 36803b6aa6..11d763b80c 100644 --- a/stories/primer/beta/page_layout_stories.rb +++ b/stories/primer/beta/page_layout_stories.rb @@ -11,7 +11,7 @@ class Primer::Beta::PageLayoutStories < ViewComponent::Storybook::Stories select(:outer_spacing, Primer::Beta::PageLayout::OUTER_SPACING_OPTIONS, Primer::Beta::PageLayout::OUTER_SPACING_DEFAULT) select(:column_gap, Primer::Beta::PageLayout::COLUMN_GAP_OPTIONS, Primer::Beta::PageLayout::COLUMN_GAP_DEFAULT) select(:row_gap, Primer::Beta::PageLayout::ROW_GAP_OPTIONS, Primer::Beta::PageLayout::ROW_GAP_DEFAULT) - select(:responsive_primary_region, Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS, Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_DEFAULT) + select(:primary_region, Primer::Beta::PageLayout::PRIMARY_REGION_OPTIONS, Primer::Beta::PageLayout::PRIMARY_REGION_DEFAULT) select(:responsive_variant, Primer::Beta::PageLayout::RESPONSIVE_VARIANT_OPTIONS, Primer::Beta::PageLayout::RESPONSIVE_VARIANT_DEFAULT) end @@ -31,7 +31,7 @@ class Primer::Beta::PageLayoutStories < ViewComponent::Storybook::Stories select(:outer_spacing, Primer::Beta::PageLayout::OUTER_SPACING_OPTIONS, Primer::Beta::PageLayout::OUTER_SPACING_DEFAULT) select(:column_gap, Primer::Beta::PageLayout::COLUMN_GAP_OPTIONS, Primer::Beta::PageLayout::COLUMN_GAP_DEFAULT) select(:row_gap, Primer::Beta::PageLayout::ROW_GAP_OPTIONS, Primer::Beta::PageLayout::ROW_GAP_DEFAULT) - select(:responsive_primary_region, Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS, Primer::Beta::PageLayout::RESPONSIVE_PRIMARY_REGION_DEFAULT) + select(:primary_region, Primer::Beta::PageLayout::PRIMARY_REGION_OPTIONS, Primer::Beta::PageLayout::PRIMARY_REGION_DEFAULT) select(:responsive_variant, Primer::Beta::PageLayout::RESPONSIVE_VARIANT_OPTIONS, Primer::Beta::PageLayout::RESPONSIVE_VARIANT_DEFAULT) end From accb6f1cd0505783cb792c4198ebef9fb4f6cf7d Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Wed, 22 Dec 2021 20:24:32 +0000 Subject: [PATCH 88/97] Use primer css with PageLayout classes --- .../layouts/storybook_centered_preview.html.erb | 2 +- demo/app/views/layouts/storybook_preview.html.erb | 2 +- package.json | 2 +- yarn.lock | 15 ++++++++++----- 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/demo/app/views/layouts/storybook_centered_preview.html.erb b/demo/app/views/layouts/storybook_centered_preview.html.erb index 5e63259a39..045dddfb38 100644 --- a/demo/app/views/layouts/storybook_centered_preview.html.erb +++ b/demo/app/views/layouts/storybook_centered_preview.html.erb @@ -3,7 +3,7 @@ ActionView::Component Storybook Preview - + <% if Rails.env.development? %> <%= javascript_include_tag "primer_view_components", host: "localhost:4000" %> <% else %> diff --git a/demo/app/views/layouts/storybook_preview.html.erb b/demo/app/views/layouts/storybook_preview.html.erb index 135f744303..1839e31505 100644 --- a/demo/app/views/layouts/storybook_preview.html.erb +++ b/demo/app/views/layouts/storybook_preview.html.erb @@ -3,7 +3,7 @@ ActionView::Component Storybook Preview - + <% if Rails.env.development? %> <%= javascript_include_tag "primer_view_components", host: "localhost:4000" %> <% else %> diff --git a/package.json b/package.json index 7cc01984fb..e626fab255 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@github/prettier-config": "0.0.4", - "@primer/css": "^19.0.0", + "@primer/css": "^19.1.0", "@primer/primitives": "^7.1.0", "@rollup/plugin-node-resolve": "^11.2.0", "@rollup/plugin-typescript": "^8.2.0", diff --git a/yarn.lock b/yarn.lock index b37c653dcf..7f9928b651 100644 --- a/yarn.lock +++ b/yarn.lock @@ -102,18 +102,23 @@ "@nodelib/fs.scandir" "2.1.4" fastq "^1.6.0" -"@primer/css@^19.0.0": - version "19.0.0" - resolved "https://registry.yarnpkg.com/@primer/css/-/css-19.0.0.tgz#c03e9d9365e37074f3555a98bdea0e705e1f5bf3" - integrity sha512-w3/DoQlWBjyyo0scneGkcVHyaIBFjODbmWZoJ1qYHe+eLufPOKNc5Tf/OlxqiYQxGCF8vVb3f/i30z4KfzJzzA== +"@primer/css@^19.1.0": + version "19.1.1" + resolved "https://registry.yarnpkg.com/@primer/css/-/css-19.1.1.tgz#c05a2fc5e5f6950472b4ff3bdd70cda6fe1c13f1" + integrity sha512-QVwdNOJsLxOD6eTR5LDIdLWg2SIy+eZWMK4ywlLd8qZXJCngtJyTNO5PtSzgs0D9jlMS+dzxvlOOV6GcfLu1hw== dependencies: - "@primer/primitives" "^7.1.0" + "@primer/primitives" "^7.2.0" "@primer/primitives@^7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.1.0.tgz#944151afb8b0e8ffd33c1cfdc4f873b5dd46cbe5" integrity sha512-XVM535ieY+ohh82oMCZZwlebsnNtJORR5vpiUk/OLT1KX7pr2aRiSbitFwZ3umo0dw/L5tr6ebSJjRCXLu8UJg== +"@primer/primitives@^7.2.0": + version "7.4.0" + resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.4.0.tgz#75df54a80233a432b687c0e3010e4be6bd60a82d" + integrity sha512-gD6yHXN7YKox/bdUNgxhoSS/WXZVaORK1r4dOAyTrdoPrLV/ucIfRInPyVcTF+Mqr0zcTFJtiMtuA5Y8CSyOEg== + "@rollup/plugin-node-resolve@^11.2.0": version "11.2.0" resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.0.tgz" From c2dda83ff5f612f4125ba3f7c4646461995496f0 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Thu, 23 Dec 2021 14:55:56 +0000 Subject: [PATCH 89/97] Appease rubocop --- test/components/primer/beta/page_layout_test.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/components/primer/beta/page_layout_test.rb b/test/components/primer/beta/page_layout_test.rb index 3dbc30acdc..b82ba2db30 100644 --- a/test/components/primer/beta/page_layout_test.rb +++ b/test/components/primer/beta/page_layout_test.rb @@ -279,7 +279,7 @@ def test_pane_divider_narrow c.pane_region(position: position, divider: true, divider_narrow: type) { "Pane" } end - type_class = Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_MAPPINGS[{position => type}] + type_class = Primer::Beta::PageLayout::Pane::DIVIDER_NARROW_MAPPINGS[{ position => type }] assert_selector("div.PageLayout.PageLayout--hasPaneDivider") do assert_selector("div.PageLayout-content", text: "Content") assert_selector("div.PageLayout-pane.#{type_class}", text: "Pane") From bc957b82f2d51f0c33c37a55946c55b2781b5f08 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Thu, 23 Dec 2021 14:58:41 +0000 Subject: [PATCH 90/97] Fix accidental double backtick --- app/components/primer/beta/split_page_layout.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/primer/beta/split_page_layout.rb b/app/components/primer/beta/split_page_layout.rb index 228f225646..2c01fc8b8f 100644 --- a/app/components/primer/beta/split_page_layout.rb +++ b/app/components/primer/beta/split_page_layout.rb @@ -7,7 +7,7 @@ module Beta # On larger screens, the user sees both regions side by side, with the `Pane` region appearing flushed to the left. # # On smaller screens, the user only sees one of `Pane` or `Content` regions at a time. - # Pages may decide if it's more important to show the `Pane` region or the `Content`` region first by the `:primary_region` property. + # Pages may decide if it's more important to show the `Pane` region or the `Content` region first by the `:primary_region` property. # # @accessibility # Keyboard navigation follows the markup order. In the case of the `SplitPageLayout`, the `Pane` region is the first region, and the `Content` region is the second. From ac949f7995924194662421ebd4e8ad710806ccfc Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Thu, 23 Dec 2021 15:01:19 +0000 Subject: [PATCH 91/97] docs: build docs --- docs/content/components/beta/splitpagelayout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/components/beta/splitpagelayout.md b/docs/content/components/beta/splitpagelayout.md index 333f083ff6..260686667c 100644 --- a/docs/content/components/beta/splitpagelayout.md +++ b/docs/content/components/beta/splitpagelayout.md @@ -15,7 +15,7 @@ In the `SplitPageLayout`, changes in the Pane region are reflected in the `Conte On larger screens, the user sees both regions side by side, with the `Pane` region appearing flushed to the left. On smaller screens, the user only sees one of `Pane` or `Content` regions at a time. -Pages may decide if it's more important to show the `Pane` region or the `Content`` region first by the `:primary_region` property. +Pages may decide if it's more important to show the `Pane` region or the `Content` region first by the `:primary_region` property. ## Accessibility From 0b524d874ca233ceeddb8ddcf991561b06878985 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Thu, 23 Dec 2021 15:32:41 +0000 Subject: [PATCH 92/97] Remove double backtick --- docs/content/components/beta/splitpagelayout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/components/beta/splitpagelayout.md b/docs/content/components/beta/splitpagelayout.md index 333f083ff6..260686667c 100644 --- a/docs/content/components/beta/splitpagelayout.md +++ b/docs/content/components/beta/splitpagelayout.md @@ -15,7 +15,7 @@ In the `SplitPageLayout`, changes in the Pane region are reflected in the `Conte On larger screens, the user sees both regions side by side, with the `Pane` region appearing flushed to the left. On smaller screens, the user only sees one of `Pane` or `Content` regions at a time. -Pages may decide if it's more important to show the `Pane` region or the `Content`` region first by the `:primary_region` property. +Pages may decide if it's more important to show the `Pane` region or the `Content` region first by the `:primary_region` property. ## Accessibility From d80939278377548a7ed1e755989cf5de4496ef95 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Thu, 23 Dec 2021 15:39:49 +0000 Subject: [PATCH 93/97] Sync story with API change --- stories/primer/beta/split_page_layout_stories.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stories/primer/beta/split_page_layout_stories.rb b/stories/primer/beta/split_page_layout_stories.rb index 6db1ce8dbd..335941da78 100644 --- a/stories/primer/beta/split_page_layout_stories.rb +++ b/stories/primer/beta/split_page_layout_stories.rb @@ -8,7 +8,7 @@ class Primer::Beta::SplitPageLayoutStories < ViewComponent::Storybook::Stories story(:page_layout) do controls do select(:inner_spacing, Primer::Beta::SplitPageLayout::INNER_SPACING_OPTIONS, Primer::Beta::SplitPageLayout::INNER_SPACING_DEFAULT) - select(:responsive_primary_region, Primer::Beta::SplitPageLayout::RESPONSIVE_PRIMARY_REGION_OPTIONS, Primer::Beta::SplitPageLayout::RESPONSIVE_PRIMARY_REGION_DEFAULT) + select(:primary_region, Primer::Beta::SplitPageLayout::PRIMARY_REGION_OPTIONS, Primer::Beta::SplitPageLayout::PRIMARY_REGION_DEFAULT) end content do |c| From 004e1bfca777d11713fc036600724c327eef5f5f Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Thu, 23 Dec 2021 17:25:29 +0000 Subject: [PATCH 94/97] Update CSS classes Sync with upstream Primer / CSS changes --- app/components/primer/beta/split_page_layout.rb | 4 ++-- test/components/primer/beta/split_page_layout_test.rb | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/primer/beta/split_page_layout.rb b/app/components/primer/beta/split_page_layout.rb index 2c01fc8b8f..ec919174a6 100644 --- a/app/components/primer/beta/split_page_layout.rb +++ b/app/components/primer/beta/split_page_layout.rb @@ -34,8 +34,8 @@ class SplitPageLayout < Primer::Component PRIMARY_REGION_DEFAULT = :content PRIMARY_REGION_MAPPINGS = { - PRIMARY_REGION_DEFAULT => "PageLayout--responsive-separateRegions-primary-content", - :pane => "PageLayout--responsive-separateRegions-primary-pane" + PRIMARY_REGION_DEFAULT => "PageLayout--responsive-primary-content", + :pane => "PageLayout--responsive-primary-pane" }.freeze PRIMARY_REGION_OPTIONS = PRIMARY_REGION_MAPPINGS.keys.freeze diff --git a/test/components/primer/beta/split_page_layout_test.rb b/test/components/primer/beta/split_page_layout_test.rb index 873cba8d9a..1b6fb39c4d 100644 --- a/test/components/primer/beta/split_page_layout_test.rb +++ b/test/components/primer/beta/split_page_layout_test.rb @@ -42,7 +42,7 @@ def test_renders_layout_with_correct_default_classes "PageLayout--panePos-start", "PageLayout--hasPaneDivider", "PageLayout--responsive-separateRegions", - "PageLayout--responsive-separateRegions-primary-content" + "PageLayout--responsive-primary-content" ].join(".") assert_selector("div.#{expected_classes}") do assert_selector("div.PageLayout-wrapper") do From 12b012b31665dffbcc9cca80470618b54b05880b Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Thu, 23 Dec 2021 17:26:48 +0000 Subject: [PATCH 95/97] docs: build docs --- docs/content/components/beta/splitpagelayout.md | 4 ++-- static/classes.yml | 2 +- static/constants.json | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/content/components/beta/splitpagelayout.md b/docs/content/components/beta/splitpagelayout.md index 260686667c..5e0fc8d0fc 100644 --- a/docs/content/components/beta/splitpagelayout.md +++ b/docs/content/components/beta/splitpagelayout.md @@ -55,7 +55,7 @@ The layout's pane. ### Default - + ```erb @@ -103,7 +103,7 @@ When `responsive_variant` is set to `:separate_regions`, defines which region ap Sets the pane width. The width is predetermined according to the breakpoint instead of it being percentage-based. - `default`: - `narrow`: - `wide`: When flowing as a row, `Pane` takes the full width. - + ```erb <%= render(Primer::Beta::SplitPageLayout.new) do |c| %> diff --git a/static/classes.yml b/static/classes.yml index fcba08ebcf..8646ac74b5 100644 --- a/static/classes.yml +++ b/static/classes.yml @@ -63,8 +63,8 @@ - ".PageLayout--paneWidth-wide" - ".PageLayout--responsive-panePos-end" - ".PageLayout--responsive-panePos-start" +- ".PageLayout--responsive-primary-content" - ".PageLayout--responsive-separateRegions" -- ".PageLayout--responsive-separateRegions-primary-content" - ".PageLayout--responsive-stackRegions" - ".PageLayout--rowGap-condensed" - ".PageLayout--rowGap-none" diff --git a/static/constants.json b/static/constants.json index 54df103848..907f73cbda 100644 --- a/static/constants.json +++ b/static/constants.json @@ -448,8 +448,8 @@ ], "PRIMARY_REGION_DEFAULT": "content", "PRIMARY_REGION_MAPPINGS": { - "content": "PageLayout--responsive-separateRegions-primary-content", - "pane": "PageLayout--responsive-separateRegions-primary-pane" + "content": "PageLayout--responsive-primary-content", + "pane": "PageLayout--responsive-primary-pane" }, "PRIMARY_REGION_OPTIONS": [ "content", From 4a6d8f692e77fb03cad5dcb20c8ff4d838f59ff4 Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Fri, 21 Jan 2022 13:10:25 +0000 Subject: [PATCH 96/97] Bump primer/css --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e626fab255..60f48f9918 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@github/prettier-config": "0.0.4", - "@primer/css": "^19.1.0", + "@primer/css": "^19.2.0", "@primer/primitives": "^7.1.0", "@rollup/plugin-node-resolve": "^11.2.0", "@rollup/plugin-typescript": "^8.2.0", From a96404f4ae6170f7e8902eb387a0b8716c77588b Mon Sep 17 00:00:00 2001 From: Josh Klina Date: Fri, 21 Jan 2022 13:12:20 +0000 Subject: [PATCH 97/97] Update yarn.lock --- yarn.lock | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/yarn.lock b/yarn.lock index 7f9928b651..2c93cb0603 100644 --- a/yarn.lock +++ b/yarn.lock @@ -102,19 +102,19 @@ "@nodelib/fs.scandir" "2.1.4" fastq "^1.6.0" -"@primer/css@^19.1.0": - version "19.1.1" - resolved "https://registry.yarnpkg.com/@primer/css/-/css-19.1.1.tgz#c05a2fc5e5f6950472b4ff3bdd70cda6fe1c13f1" - integrity sha512-QVwdNOJsLxOD6eTR5LDIdLWg2SIy+eZWMK4ywlLd8qZXJCngtJyTNO5PtSzgs0D9jlMS+dzxvlOOV6GcfLu1hw== +"@primer/css@^19.2.0": + version "19.2.0" + resolved "https://registry.yarnpkg.com/@primer/css/-/css-19.2.0.tgz#afd1821c46da5a1c675f8e74a38fa566434c868b" + integrity sha512-20fJIGZy/s+LqDfqR1qqGS34LZTg3co4XbeL+Lv45LBqsVQ+ULwURNU6y3JBb78THLbish9V4TccPw59dj1YOQ== dependencies: - "@primer/primitives" "^7.2.0" + "@primer/primitives" "^7.4.0" "@primer/primitives@^7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.1.0.tgz#944151afb8b0e8ffd33c1cfdc4f873b5dd46cbe5" integrity sha512-XVM535ieY+ohh82oMCZZwlebsnNtJORR5vpiUk/OLT1KX7pr2aRiSbitFwZ3umo0dw/L5tr6ebSJjRCXLu8UJg== -"@primer/primitives@^7.2.0": +"@primer/primitives@^7.4.0": version "7.4.0" resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.4.0.tgz#75df54a80233a432b687c0e3010e4be6bd60a82d" integrity sha512-gD6yHXN7YKox/bdUNgxhoSS/WXZVaORK1r4dOAyTrdoPrLV/ucIfRInPyVcTF+Mqr0zcTFJtiMtuA5Y8CSyOEg==