primer_view_components 0.0.114 → 0.0.115

data/app/components/primer/timeline_item_component.rb

@@ -3,6 +3,7 @@
 module Primer
   # Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
   class TimelineItemComponent < Primer::Component
+    warn_on_deprecated_slot_setter
     status :beta
 
     # Avatar to be rendered to the left of the Badge.
@@ -59,7 +60,7 @@ module Primer
     end
 
     def render?
-      avatar.present? || badge.present? || body.present?
+      avatar? || badge? || body?
     end
 
     # This component is part of `Primer::TimelineItemComponent` and should not be
@@ -78,7 +79,7 @@ module Primer
 
       def call
         render(Primer::BaseComponent.new(**@system_arguments)) do
-          render(Primer::OcticonComponent.new(@icon))
+          render(Primer::Beta::Octicon.new(@icon))
         end
       end
     end

data/app/components/primer/tooltip.rb

@@ -3,6 +3,7 @@
 module Primer
   # `Tooltip` is a wrapper component that will apply a tooltip to the provided content.
   class Tooltip < Primer::Component
+    warn_on_deprecated_slot_setter
     status :deprecated
 
     DIRECTION_DEFAULT = :n

data/app/components/primer/truncate.rb

@@ -3,6 +3,8 @@
 module Primer
   # Use `Truncate` to shorten overflowing text with an ellipsis.
   class Truncate < Primer::Component
+    warn_on_deprecated_slot_setter
+
     status :beta
 
     DEFAULT_TAG = :div

data/app/forms/immediate_validation_form.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+# :nodoc:
+# :nocov:
+class ImmediateValidationForm < ApplicationForm
+  form do |validation_form|
+    validation_form.text_field(
+      name: :has_error,
+      label: "Will have error",
+      caption: "Every time this checks with the server, it returns an error",
+      auto_check_src: @view_context.example_check_error_path
+    )
+
+    validation_form.text_field(
+      name: :no_error,
+      label: "Will not error",
+      caption: "Will not have an error when it checks the server",
+      auto_check_src: @view_context.example_check_ok_path,
+      validation_message: "This message will go away once you type something"
+    )
+
+    validation_form.text_field(
+      name: :random_error,
+      label: "Random error",
+      caption: "Server checks will randomly respond with errors",
+      auto_check_src: @view_context.example_check_random_path
+    )
+  end
+end

data/app/forms/multi_input_form.rb

@@ -9,17 +9,19 @@ class MultiInputForm < ApplicationForm
     end
 
     my_form.multi(name: :region, label: "Region") do |region|
-      region.select_list(label: "State") do |state_list|
+      region.select_list(name: :states) do |state_list|
         state_list.option(label: "California", value: "CA")
         state_list.option(label: "Washington", value: "WA")
         state_list.option(label: "Oregon", value: "OR")
       end
 
-      region.select_list(label: "Province", hidden: true) do |province_list|
+      region.select_list(hidden: true, name: :provinces) do |province_list|
         province_list.option(label: "British Columbia", value: "BC")
         province_list.option(label: "Alberta", value: "AB")
         province_list.option(label: "Saskatchewan", value: "SK")
       end
     end
+
+    my_form.submit(name: :submit, label: "Submit", scheme: :primary)
   end
 end

data/app/lib/primer/css/layout.css

@@ -799,383 +799,6 @@
     }
 }
 
-.Layout {
-    display: grid;
-    --Layout-sidebar-width: 220px;
-    --Layout-gutter: 16px;
-    grid-auto-flow: column;
-    grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));
-    grid-gap: var(--Layout-gutter)
-}
-
-@media(max-width: calc(544px - 0.02px)) {
-    .Layout {
-        grid-auto-flow: row;
-        grid-template-columns: 1fr !important
-    }
-
-    .Layout .Layout-sidebar,
-    .Layout .Layout-divider,
-    .Layout .Layout-main {
-        width: 100% !important;
-        grid-column: 1 !important
-    }
-
-    .Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
-        grid-row: 1
-    }
-
-    .Layout.Layout--sidebarPosition-flowRow-start .Layout-main {
-        grid-row: 2/span 2
-    }
-
-    .Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
-        grid-row: 2/span 2
-    }
-
-    .Layout.Layout--sidebarPosition-flowRow-end .Layout-main {
-        grid-row: 1
-    }
-
-    .Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
-        display: none
-    }
-
-    .Layout.Layout--divided {
-        --Layout-gutter: 0
-    }
-
-    .Layout.Layout--divided .Layout-divider {
-        height: 1px;
-        grid-row: 2
-    }
-
-    .Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
-        display: none
-    }
-
-    .Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
-        height: 8px;
-        margin-right: 0;
-        background: var(--color-canvas-inset);
-        border-color: var(--color-border-default);
-        border-style: solid;
-        border-width: 1px 0
-    }
-
-    .Layout.Layout--divided .Layout-main {
-        grid-row: 3/span 1
-    }
-
-    .Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
-        grid-row: 3/span 1
-    }
-
-    .Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
-        grid-row: 1
-    }
-}
-
-@media(max-width: calc(768px - 0.02px)) {
-    .Layout.Layout--flowRow-until-md {
-        grid-auto-flow: row;
-        grid-template-columns: 1fr !important
-    }
-
-    .Layout.Layout--flowRow-until-md .Layout-sidebar,
-    .Layout.Layout--flowRow-until-md .Layout-divider,
-    .Layout.Layout--flowRow-until-md .Layout-main {
-        width: 100% !important;
-        grid-column: 1 !important
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
-        grid-row: 1
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main {
-        grid-row: 2/span 2
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
-        grid-row: 2/span 2
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main {
-        grid-row: 1
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
-        display: none
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--divided {
-        --Layout-gutter: 0
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider {
-        height: 1px;
-        grid-row: 2
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
-        display: none
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
-        height: 8px;
-        margin-right: 0;
-        background: var(--color-canvas-inset);
-        border-color: var(--color-border-default);
-        border-style: solid;
-        border-width: 1px 0
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--divided .Layout-main {
-        grid-row: 3/span 1
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
-        grid-row: 3/span 1
-    }
-
-    .Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
-        grid-row: 1
-    }
-}
-
-@media(max-width: calc(1012px - 0.02px)) {
-    .Layout.Layout--flowRow-until-lg {
-        grid-auto-flow: row;
-        grid-template-columns: 1fr !important
-    }
-
-    .Layout.Layout--flowRow-until-lg .Layout-sidebar,
-    .Layout.Layout--flowRow-until-lg .Layout-divider,
-    .Layout.Layout--flowRow-until-lg .Layout-main {
-        width: 100% !important;
-        grid-column: 1 !important
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar {
-        grid-row: 1
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main {
-        grid-row: 2/span 2
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
-        grid-row: 2/span 2
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main {
-        grid-row: 1
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar {
-        display: none
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--divided {
-        --Layout-gutter: 0
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider {
-        height: 1px;
-        grid-row: 2
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden {
-        display: none
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow {
-        height: 8px;
-        margin-right: 0;
-        background: var(--color-canvas-inset);
-        border-color: var(--color-border-default);
-        border-style: solid;
-        border-width: 1px 0
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main {
-        grid-row: 3/span 1
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar {
-        grid-row: 3/span 1
-    }
-
-    .Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main {
-        grid-row: 1
-    }
-}
-
-.Layout .Layout-sidebar {
-    grid-column: 1
-}
-
-.Layout .Layout-divider {
-    display: none
-}
-
-.Layout .Layout-main {
-    grid-column: 2/span 2
-}
-
-@media(min-width: 1012px) {
-    .Layout {
-        --Layout-gutter: 24px
-    }
-}
-
-.Layout.Layout--gutter-none {
-    --Layout-gutter: 0px
-}
-
-.Layout.Layout--gutter-condensed {
-    --Layout-gutter: 16px
-}
-
-@media(min-width: 1012px) {
-    .Layout.Layout--gutter-spacious {
-        --Layout-gutter: 32px
-    }
-}
-
-@media(min-width: 1280px) {
-    .Layout.Layout--gutter-spacious {
-        --Layout-gutter: 40px
-    }
-}
-
-@media(min-width: 544px) {
-    .Layout {
-        --Layout-sidebar-width: 220px
-    }
-}
-
-@media(min-width: 768px) {
-    .Layout {
-        --Layout-sidebar-width: 256px
-    }
-}
-
-@media(min-width: 1012px) {
-    .Layout {
-        --Layout-sidebar-width: 296px
-    }
-}
-
-@media(min-width: 768px) {
-    .Layout.Layout--sidebar-narrow {
-        --Layout-sidebar-width: 240px
-    }
-}
-
-@media(min-width: 1012px) {
-    .Layout.Layout--sidebar-narrow {
-        --Layout-sidebar-width: 256px
-    }
-}
-
-@media(min-width: 1012px) {
-    .Layout.Layout--sidebar-wide {
-        --Layout-sidebar-width: 320px
-    }
-}
-
-@media(min-width: 1280px) {
-    .Layout.Layout--sidebar-wide {
-        --Layout-sidebar-width: 336px
-    }
-}
-
-.Layout.Layout--sidebarPosition-start .Layout-sidebar {
-    grid-column: 1
-}
-
-.Layout.Layout--sidebarPosition-start .Layout-main {
-    grid-column: 2/span 2
-}
-
-.Layout.Layout--sidebarPosition-end {
-    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto
-}
-
-.Layout.Layout--sidebarPosition-end .Layout-main {
-    grid-column: 1
-}
-
-.Layout.Layout--sidebarPosition-end .Layout-sidebar {
-    grid-column: 2/span 2
-}
-
-.Layout.Layout--divided .Layout-divider {
-    display: block;
-    grid-column: 2;
-    width: 1px;
-    margin-right: -1px;
-    background: var(--color-border-default)
-}
-
-.Layout.Layout--divided .Layout-main {
-    grid-column: 3/span 1
-}
-
-.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar {
-    grid-column: 3/span 1
-}
-
-.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main {
-    grid-column: 1
-}
-
-.Layout-divider {
-    display: none;
-    width: 1px
-}
-
-.Layout-sidebar {
-    width: var(--Layout-sidebar-width)
-}
-
-.Layout-main {
-    min-width: 0
-}
-
-.Layout-main .Layout-main-centered-md,
-.Layout-main .Layout-main-centered-lg,
-.Layout-main .Layout-main-centered-xl {
-    margin-right: auto;
-    margin-left: auto
-}
-
-.Layout-main .Layout-main-centered-md>.container-md,
-.Layout-main .Layout-main-centered-md>.container-lg,
-.Layout-main .Layout-main-centered-md>.container-xl,
-.Layout-main .Layout-main-centered-lg>.container-md,
-.Layout-main .Layout-main-centered-lg>.container-lg,
-.Layout-main .Layout-main-centered-lg>.container-xl,
-.Layout-main .Layout-main-centered-xl>.container-md,
-.Layout-main .Layout-main-centered-xl>.container-lg,
-.Layout-main .Layout-main-centered-xl>.container-xl {
-    margin-left: 0
-}
-
-.Layout-main .Layout-main-centered-md {
-    max-width: calc(768px + var(--Layout-sidebar-width) + var(--Layout-gutter))
-}
-
-.Layout-main .Layout-main-centered-lg {
-    max-width: calc(1012px + var(--Layout-sidebar-width) + var(--Layout-gutter))
-}
-
-.Layout-main .Layout-main-centered-xl {
-    max-width: calc(1280px + var(--Layout-sidebar-width) + var(--Layout-gutter))
-}
-
 :root {
     --Layout-pane-width: 220px;
     --Layout-content-width: 100%;
@@ -1915,4 +1538,4 @@
     .Stack-item--keepSize-whenWide {
         flex-shrink: 0
     }
-}
+}

data/app/lib/primer/css/layout.css.json

@@ -1 +1 @@
-{"name":"layout","selectors":[".AppFrame .AppFrame-a11yNav",".AppFrame .AppFrame-a11yNav:not(:focus-within)",".AppFrame .AppFrame-a11yNav:focus-within",".AppFrame .AppFrame-a11yLink",".AppFrame .AppFrame-a11yLink:not(:focus)",".AppFrame .AppFrame-a11yLink:focus",".AppFrame .AppFrame-a11yLink:focus::after","0%","50%","55%","100%",".AppFrame .AppFrame-main",".AppFrame .AppFrame-header-wrapper",".AppFrame .AppFrame-header-wrapper .AppFrame-header",".AppFrame .AppFrame-header",".AppFrame .AppFrame-subheader",".AppFrame .AppFrame-body",".AppFrame .AppFrame-footer",".container-sm",".container-md",".container-lg",".container-xl",".col-1",".col-2",".col-3",".col-4",".col-5",".col-6",".col-7",".col-8",".col-9",".col-10",".col-11",".col-12",".col-sm-1",".col-sm-2",".col-sm-3",".col-sm-4",".col-sm-5",".col-sm-6",".col-sm-7",".col-sm-8",".col-sm-9",".col-sm-10",".col-sm-11",".col-sm-12",".col-md-1",".col-md-2",".col-md-3",".col-md-4",".col-md-5",".col-md-6",".col-md-7",".col-md-8",".col-md-9",".col-md-10",".col-md-11",".col-md-12",".col-lg-1",".col-lg-2",".col-lg-3",".col-lg-4",".col-lg-5",".col-lg-6",".col-lg-7",".col-lg-8",".col-lg-9",".col-lg-10",".col-lg-11",".col-lg-12",".col-xl-1",".col-xl-2",".col-xl-3",".col-xl-4",".col-xl-5",".col-xl-6",".col-xl-7",".col-xl-8",".col-xl-9",".col-xl-10",".col-xl-11",".col-xl-12",".gutter",".gutter>[class*=col-]",".gutter-condensed",".gutter-condensed>[class*=col-]",".gutter-spacious",".gutter-spacious>[class*=col-]",".gutter-sm",".gutter-sm>[class*=col-]",".gutter-sm-condensed",".gutter-sm-condensed>[class*=col-]",".gutter-sm-spacious",".gutter-sm-spacious>[class*=col-]",".gutter-md",".gutter-md>[class*=col-]",".gutter-md-condensed",".gutter-md-condensed>[class*=col-]",".gutter-md-spacious",".gutter-md-spacious>[class*=col-]",".gutter-lg",".gutter-lg>[class*=col-]",".gutter-lg-condensed",".gutter-lg-condensed>[class*=col-]",".gutter-lg-spacious",".gutter-lg-spacious>[class*=col-]",".gutter-xl",".gutter-xl>[class*=col-]",".gutter-xl-condensed",".gutter-xl-condensed>[class*=col-]",".gutter-xl-spacious",".gutter-xl-spacious>[class*=col-]",".offset-1",".offset-2",".offset-3",".offset-4",".offset-5",".offset-6",".offset-7",".offset-8",".offset-9",".offset-10",".offset-11",".offset-sm-1",".offset-sm-2",".offset-sm-3",".offset-sm-4",".offset-sm-5",".offset-sm-6",".offset-sm-7",".offset-sm-8",".offset-sm-9",".offset-sm-10",".offset-sm-11",".offset-md-1",".offset-md-2",".offset-md-3",".offset-md-4",".offset-md-5",".offset-md-6",".offset-md-7",".offset-md-8",".offset-md-9",".offset-md-10",".offset-md-11",".offset-lg-1",".offset-lg-2",".offset-lg-3",".offset-lg-4",".offset-lg-5",".offset-lg-6",".offset-lg-7",".offset-lg-8",".offset-lg-9",".offset-lg-10",".offset-lg-11",".offset-xl-1",".offset-xl-2",".offset-xl-3",".offset-xl-4",".offset-xl-5",".offset-xl-6",".offset-xl-7",".offset-xl-8",".offset-xl-9",".offset-xl-10",".offset-xl-11",".Layout",".Layout .Layout-sidebar",".Layout .Layout-divider",".Layout .Layout-main",".Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--divided",".Layout.Layout--divided .Layout-divider",".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--divided .Layout-main",".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-md",".Layout.Layout--flowRow-until-md .Layout-sidebar",".Layout.Layout--flowRow-until-md .Layout-divider",".Layout.Layout--flowRow-until-md .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--divided",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--flowRow-until-md.Layout--divided .Layout-main",".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-lg",".Layout.Layout--flowRow-until-lg .Layout-sidebar",".Layout.Layout--flowRow-until-lg .Layout-divider",".Layout.Layout--flowRow-until-lg .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--divided",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main",".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",".Layout.Layout--gutter-none",".Layout.Layout--gutter-condensed",".Layout.Layout--gutter-spacious",".Layout.Layout--sidebar-narrow",".Layout.Layout--sidebar-wide",".Layout.Layout--sidebarPosition-start .Layout-sidebar",".Layout.Layout--sidebarPosition-start .Layout-main",".Layout.Layout--sidebarPosition-end",".Layout.Layout--sidebarPosition-end .Layout-main",".Layout.Layout--sidebarPosition-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar",".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main",".Layout-divider",".Layout-sidebar",".Layout-main",".Layout-main .Layout-main-centered-md",".Layout-main .Layout-main-centered-lg",".Layout-main .Layout-main-centered-xl",".Layout-main .Layout-main-centered-md>.container-md",".Layout-main .Layout-main-centered-md>.container-lg",".Layout-main .Layout-main-centered-md>.container-xl",".Layout-main .Layout-main-centered-lg>.container-md",".Layout-main .Layout-main-centered-lg>.container-lg",".Layout-main .Layout-main-centered-lg>.container-xl",".Layout-main .Layout-main-centered-xl>.container-md",".Layout-main .Layout-main-centered-xl>.container-lg",".Layout-main .Layout-main-centered-xl>.container-xl",":root",".PageLayout",".PageLayout.PageLayout--panePos-start",".PageLayout.PageLayout--panePos-end",".PageLayout .PageLayout-header--hasDivider",".PageLayout .PageLayout-footer--hasDivider",".PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start .PageLayout-pane",".PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start:not(.PageLayout--columnGap-none) .PageLayout-pane",".PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start:not(.PageLayout--columnGap-none) .PageLayout-content",".PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end .PageLayout-pane",".PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end:not(.PageLayout--columnGap-none) .PageLayout-pane",".PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end:not(.PageLayout--columnGap-none) .PageLayout-content",".PageLayout .PageLayout-pane--sticky",".PageLayout [class^=PageLayout-content-centered-]",".PageLayout.PageLayout--hasPaneDivider [class^=PageLayout-content-centered-]",".PageLayout.PageLayout--panePos-start [class^=PageLayout-content-centered-]>[class^=container-]",".PageLayout.PageLayout--panePos-end [class^=PageLayout-content-centered-]>[class^=container-]",".PageLayout .PageLayout-content-centered-sm",".PageLayout .PageLayout-content-centered-md",".PageLayout .PageLayout-content-centered-lg",".PageLayout .PageLayout-content-centered-xl",".PageLayout.PageLayout--paneWidth-narrow",".PageLayout.PageLayout--paneWidth-wide",".PageLayout.PageLayout--responsive-stackRegions",".PageLayout.PageLayout--responsive-stackRegions.PageLayout--responsive-panePos-start",".PageLayout.PageLayout--responsive-separateRegions",".PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-content",".PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-content .PageLayout-pane",".PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-pane",".PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-pane .PageLayout-content",".PageLayout .PageLayout-region--dividerNarrow-line-before",".PageLayout .PageLayout-region--dividerNarrow-line-before::before",".PageLayout .PageLayout-region--dividerNarrow-line-after",".PageLayout .PageLayout-region--dividerNarrow-line-after::after",".PageLayout .PageLayout-region--dividerNarrow-filled-before",".PageLayout .PageLayout-region--dividerNarrow-filled-before::after",".PageLayout .PageLayout-region--dividerNarrow-filled-after",".PageLayout .PageLayout-region--dividerNarrow-filled-after::before",".PageLayout-wrapper",".PageLayout-columns",".PageLayout-columns .PageLayout-content",".PageLayout-columns .PageLayout-pane",".PageLayout--outerSpacing-normal",".PageLayout--outerSpacing-condensed",".PageLayout--innerSpacing-normal",".PageLayout--innerSpacing-condensed",".PageLayout--columnGap-normal",".PageLayout--columnGap-condensed",".PageLayout--columnGap-none",".PageLayout--rowGap-normal",".PageLayout--rowGap-none",".PageLayout--rowGap-condensed",".PageLayout-header",".PageLayout-content",".PageLayout-pane",".PageLayout-footer",".Stack",".Stack-divider",".Stack-item",".Stack--dir-inline-whenNarrow",".Stack--dir-block-whenNarrow",".Stack--gap-none-whenNarrow",".Stack--gap-condensed-whenNarrow",".Stack--gap-normal-whenNarrow",".Stack--align-start-whenNarrow",".Stack--align-center-whenNarrow",".Stack--align-end-whenNarrow",".Stack--align-baseline-whenNarrow",".Stack--alignWrap-start-whenNarrow",".Stack--alignWrap-center-whenNarrow",".Stack--alignWrap-end-whenNarrow",".Stack--alignWrap-distribute-whenNarrow",".Stack--alignWrap-distributeEvenly-whenNarrow",".Stack--spread-start-whenNarrow",".Stack--spread-center-whenNarrow",".Stack--spread-end-whenNarrow",".Stack--spread-distribute-whenNarrow",".Stack--spread-distributeEvenly-whenNarrow",".Stack--wrap-whenNarrow",".Stack--nowrap-whenNarrow",".Stack--showDividers-whenNarrow>.Stack-divider",".Stack--showDividers-whenNarrow>.Stack-item>.Stack-divider",":not(.Stack--dir-inline-whenNarrow)>.Stack-divider",":not(.Stack--dir-inline-whenNarrow)>.Stack-item>.Stack-divider",".Stack--dir-inline-whenNarrow>.Stack-divider",".Stack--dir-inline-whenNarrow>.Stack-item>.Stack-divider",".Stack-item--expand-whenNarrow",".Stack-item--keepSize-whenNarrow",".Stack--dir-inline-whenRegular",".Stack--dir-block-whenRegular",".Stack--gap-none-whenRegular",".Stack--gap-condensed-whenRegular",".Stack--gap-normal-whenRegular",".Stack--gap-spacious-whenRegular",".Stack--align-start-whenRegular",".Stack--align-center-whenRegular",".Stack--align-end-whenRegular",".Stack--align-baseline-whenRegular",".Stack--alignWrap-start-whenRegular",".Stack--alignWrap-center-whenRegular",".Stack--alignWrap-end-whenRegular",".Stack--alignWrap-distribute-whenRegular",".Stack--alignWrap-distributeEvenly-whenRegular",".Stack--spread-start-whenRegular",".Stack--spread-center-whenRegular",".Stack--spread-end-whenRegular",".Stack--spread-distribute-whenRegular",".Stack--spread-distributeEvenly-whenRegular",".Stack--wrap-whenRegular",".Stack--nowrap-whenRegular",".Stack--showDividers-whenRegular>.Stack-divider",".Stack--showDividers-whenRegular>.Stack-item>.Stack-divider",":not(.Stack--dir-inline-whenRegular)>.Stack-divider",":not(.Stack--dir-inline-whenRegular)>.Stack-item>.Stack-divider",".Stack--dir-inline-whenRegular>.Stack-divider",".Stack--dir-inline-whenRegular>.Stack-item>.Stack-divider",".Stack-item--expand-whenRegular",".Stack-item--keepSize-whenRegular",".Stack--dir-inline-whenWide",".Stack--dir-block-whenWide",".Stack--gap-none-whenWide",".Stack--gap-condensed-whenWide",".Stack--gap-normal-whenWide",".Stack--gap-spacious-whenWide",".Stack--align-start-whenWide",".Stack--align-center-whenWide",".Stack--align-end-whenWide",".Stack--align-baseline-whenWide",".Stack--alignWrap-start-whenWide",".Stack--alignWrap-center-whenWide",".Stack--alignWrap-end-whenWide",".Stack--alignWrap-distribute-whenWide",".Stack--alignWrap-distributeEvenly-whenWide",".Stack--spread-start-whenWide",".Stack--spread-center-whenWide",".Stack--spread-end-whenWide",".Stack--spread-distribute-whenWide",".Stack--spread-distributeEvenly-whenWide",".Stack--wrap-whenWide",".Stack--nowrap-whenWide",".Stack--showDividers-whenWide>.Stack-divider",".Stack--showDividers-whenWide>.Stack-item>.Stack-divider",":not(.Stack--dir-inline-whenWide)>.Stack-divider",":not(.Stack--dir-inline-whenWide)>.Stack-item>.Stack-divider",".Stack--dir-inline-whenWide>.Stack-divider",".Stack--dir-inline-whenWide>.Stack-item>.Stack-divider",".Stack-item--expand-whenWide",".Stack-item--keepSize-whenWide"]}
+{"name":"layout","selectors":[".AppFrame .AppFrame-a11yNav",".AppFrame .AppFrame-a11yNav:not(:focus-within)",".AppFrame .AppFrame-a11yNav:focus-within",".AppFrame .AppFrame-a11yLink",".AppFrame .AppFrame-a11yLink:not(:focus)",".AppFrame .AppFrame-a11yLink:focus",".AppFrame .AppFrame-a11yLink:focus::after","0%","50%","55%","100%",".AppFrame .AppFrame-main",".AppFrame .AppFrame-header-wrapper",".AppFrame .AppFrame-header-wrapper .AppFrame-header",".AppFrame .AppFrame-header",".AppFrame .AppFrame-subheader",".AppFrame .AppFrame-body",".AppFrame .AppFrame-footer",".container-sm",".container-md",".container-lg",".container-xl",".col-1",".col-2",".col-3",".col-4",".col-5",".col-6",".col-7",".col-8",".col-9",".col-10",".col-11",".col-12",".col-sm-1",".col-sm-2",".col-sm-3",".col-sm-4",".col-sm-5",".col-sm-6",".col-sm-7",".col-sm-8",".col-sm-9",".col-sm-10",".col-sm-11",".col-sm-12",".col-md-1",".col-md-2",".col-md-3",".col-md-4",".col-md-5",".col-md-6",".col-md-7",".col-md-8",".col-md-9",".col-md-10",".col-md-11",".col-md-12",".col-lg-1",".col-lg-2",".col-lg-3",".col-lg-4",".col-lg-5",".col-lg-6",".col-lg-7",".col-lg-8",".col-lg-9",".col-lg-10",".col-lg-11",".col-lg-12",".col-xl-1",".col-xl-2",".col-xl-3",".col-xl-4",".col-xl-5",".col-xl-6",".col-xl-7",".col-xl-8",".col-xl-9",".col-xl-10",".col-xl-11",".col-xl-12",".gutter",".gutter>[class*=col-]",".gutter-condensed",".gutter-condensed>[class*=col-]",".gutter-spacious",".gutter-spacious>[class*=col-]",".gutter-sm",".gutter-sm>[class*=col-]",".gutter-sm-condensed",".gutter-sm-condensed>[class*=col-]",".gutter-sm-spacious",".gutter-sm-spacious>[class*=col-]",".gutter-md",".gutter-md>[class*=col-]",".gutter-md-condensed",".gutter-md-condensed>[class*=col-]",".gutter-md-spacious",".gutter-md-spacious>[class*=col-]",".gutter-lg",".gutter-lg>[class*=col-]",".gutter-lg-condensed",".gutter-lg-condensed>[class*=col-]",".gutter-lg-spacious",".gutter-lg-spacious>[class*=col-]",".gutter-xl",".gutter-xl>[class*=col-]",".gutter-xl-condensed",".gutter-xl-condensed>[class*=col-]",".gutter-xl-spacious",".gutter-xl-spacious>[class*=col-]",".offset-1",".offset-2",".offset-3",".offset-4",".offset-5",".offset-6",".offset-7",".offset-8",".offset-9",".offset-10",".offset-11",".offset-sm-1",".offset-sm-2",".offset-sm-3",".offset-sm-4",".offset-sm-5",".offset-sm-6",".offset-sm-7",".offset-sm-8",".offset-sm-9",".offset-sm-10",".offset-sm-11",".offset-md-1",".offset-md-2",".offset-md-3",".offset-md-4",".offset-md-5",".offset-md-6",".offset-md-7",".offset-md-8",".offset-md-9",".offset-md-10",".offset-md-11",".offset-lg-1",".offset-lg-2",".offset-lg-3",".offset-lg-4",".offset-lg-5",".offset-lg-6",".offset-lg-7",".offset-lg-8",".offset-lg-9",".offset-lg-10",".offset-lg-11",".offset-xl-1",".offset-xl-2",".offset-xl-3",".offset-xl-4",".offset-xl-5",".offset-xl-6",".offset-xl-7",".offset-xl-8",".offset-xl-9",".offset-xl-10",".offset-xl-11",":root",".PageLayout",".PageLayout.PageLayout--panePos-start",".PageLayout.PageLayout--panePos-end",".PageLayout .PageLayout-header--hasDivider",".PageLayout .PageLayout-footer--hasDivider",".PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start .PageLayout-pane",".PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start:not(.PageLayout--columnGap-none) .PageLayout-pane",".PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start:not(.PageLayout--columnGap-none) .PageLayout-content",".PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end .PageLayout-pane",".PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end:not(.PageLayout--columnGap-none) .PageLayout-pane",".PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end:not(.PageLayout--columnGap-none) .PageLayout-content",".PageLayout .PageLayout-pane--sticky",".PageLayout [class^=PageLayout-content-centered-]",".PageLayout.PageLayout--hasPaneDivider [class^=PageLayout-content-centered-]",".PageLayout.PageLayout--panePos-start [class^=PageLayout-content-centered-]>[class^=container-]",".PageLayout.PageLayout--panePos-end [class^=PageLayout-content-centered-]>[class^=container-]",".PageLayout .PageLayout-content-centered-sm",".PageLayout .PageLayout-content-centered-md",".PageLayout .PageLayout-content-centered-lg",".PageLayout .PageLayout-content-centered-xl",".PageLayout.PageLayout--paneWidth-narrow",".PageLayout.PageLayout--paneWidth-wide",".PageLayout.PageLayout--responsive-stackRegions",".PageLayout.PageLayout--responsive-stackRegions.PageLayout--responsive-panePos-start",".PageLayout.PageLayout--responsive-separateRegions",".PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-content",".PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-content .PageLayout-pane",".PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-pane",".PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-pane .PageLayout-content",".PageLayout .PageLayout-region--dividerNarrow-line-before",".PageLayout .PageLayout-region--dividerNarrow-line-before::before",".PageLayout .PageLayout-region--dividerNarrow-line-after",".PageLayout .PageLayout-region--dividerNarrow-line-after::after",".PageLayout .PageLayout-region--dividerNarrow-filled-before",".PageLayout .PageLayout-region--dividerNarrow-filled-before::after",".PageLayout .PageLayout-region--dividerNarrow-filled-after",".PageLayout .PageLayout-region--dividerNarrow-filled-after::before",".PageLayout-wrapper",".PageLayout-columns",".PageLayout-columns .PageLayout-content",".PageLayout-columns .PageLayout-pane",".PageLayout--outerSpacing-normal",".PageLayout--outerSpacing-condensed",".PageLayout--innerSpacing-normal",".PageLayout--innerSpacing-condensed",".PageLayout--columnGap-normal",".PageLayout--columnGap-condensed",".PageLayout--columnGap-none",".PageLayout--rowGap-normal",".PageLayout--rowGap-none",".PageLayout--rowGap-condensed",".PageLayout-header",".PageLayout-content",".PageLayout-pane",".PageLayout-footer",".Stack",".Stack-divider",".Stack-item",".Stack--dir-inline-whenNarrow",".Stack--dir-block-whenNarrow",".Stack--gap-none-whenNarrow",".Stack--gap-condensed-whenNarrow",".Stack--gap-normal-whenNarrow",".Stack--align-start-whenNarrow",".Stack--align-center-whenNarrow",".Stack--align-end-whenNarrow",".Stack--align-baseline-whenNarrow",".Stack--alignWrap-start-whenNarrow",".Stack--alignWrap-center-whenNarrow",".Stack--alignWrap-end-whenNarrow",".Stack--alignWrap-distribute-whenNarrow",".Stack--alignWrap-distributeEvenly-whenNarrow",".Stack--spread-start-whenNarrow",".Stack--spread-center-whenNarrow",".Stack--spread-end-whenNarrow",".Stack--spread-distribute-whenNarrow",".Stack--spread-distributeEvenly-whenNarrow",".Stack--wrap-whenNarrow",".Stack--nowrap-whenNarrow",".Stack--showDividers-whenNarrow>.Stack-divider",".Stack--showDividers-whenNarrow>.Stack-item>.Stack-divider",":not(.Stack--dir-inline-whenNarrow)>.Stack-divider",":not(.Stack--dir-inline-whenNarrow)>.Stack-item>.Stack-divider",".Stack--dir-inline-whenNarrow>.Stack-divider",".Stack--dir-inline-whenNarrow>.Stack-item>.Stack-divider",".Stack-item--expand-whenNarrow",".Stack-item--keepSize-whenNarrow",".Stack--dir-inline-whenRegular",".Stack--dir-block-whenRegular",".Stack--gap-none-whenRegular",".Stack--gap-condensed-whenRegular",".Stack--gap-normal-whenRegular",".Stack--gap-spacious-whenRegular",".Stack--align-start-whenRegular",".Stack--align-center-whenRegular",".Stack--align-end-whenRegular",".Stack--align-baseline-whenRegular",".Stack--alignWrap-start-whenRegular",".Stack--alignWrap-center-whenRegular",".Stack--alignWrap-end-whenRegular",".Stack--alignWrap-distribute-whenRegular",".Stack--alignWrap-distributeEvenly-whenRegular",".Stack--spread-start-whenRegular",".Stack--spread-center-whenRegular",".Stack--spread-end-whenRegular",".Stack--spread-distribute-whenRegular",".Stack--spread-distributeEvenly-whenRegular",".Stack--wrap-whenRegular",".Stack--nowrap-whenRegular",".Stack--showDividers-whenRegular>.Stack-divider",".Stack--showDividers-whenRegular>.Stack-item>.Stack-divider",":not(.Stack--dir-inline-whenRegular)>.Stack-divider",":not(.Stack--dir-inline-whenRegular)>.Stack-item>.Stack-divider",".Stack--dir-inline-whenRegular>.Stack-divider",".Stack--dir-inline-whenRegular>.Stack-item>.Stack-divider",".Stack-item--expand-whenRegular",".Stack-item--keepSize-whenRegular",".Stack--dir-inline-whenWide",".Stack--dir-block-whenWide",".Stack--gap-none-whenWide",".Stack--gap-condensed-whenWide",".Stack--gap-normal-whenWide",".Stack--gap-spacious-whenWide",".Stack--align-start-whenWide",".Stack--align-center-whenWide",".Stack--align-end-whenWide",".Stack--align-baseline-whenWide",".Stack--alignWrap-start-whenWide",".Stack--alignWrap-center-whenWide",".Stack--alignWrap-end-whenWide",".Stack--alignWrap-distribute-whenWide",".Stack--alignWrap-distributeEvenly-whenWide",".Stack--spread-start-whenWide",".Stack--spread-center-whenWide",".Stack--spread-end-whenWide",".Stack--spread-distribute-whenWide",".Stack--spread-distributeEvenly-whenWide",".Stack--wrap-whenWide",".Stack--nowrap-whenWide",".Stack--showDividers-whenWide>.Stack-divider",".Stack--showDividers-whenWide>.Stack-item>.Stack-divider",":not(.Stack--dir-inline-whenWide)>.Stack-divider",":not(.Stack--dir-inline-whenWide)>.Stack-item>.Stack-divider",".Stack--dir-inline-whenWide>.Stack-divider",".Stack--dir-inline-whenWide>.Stack-item>.Stack-divider",".Stack-item--expand-whenWide",".Stack-item--keepSize-whenWide"]}

data/app/lib/primer/octicon/cache.rb

@@ -36,7 +36,7 @@ module Primer
         end
 
         def preload!
-          PRELOADED_ICONS.each { |icon| Primer::OcticonComponent.new(icon: icon) }
+          PRELOADED_ICONS.each { |icon| Primer::Beta::Octicon.new(icon: icon) }
         end
       end
     end

data/app/lib/primer/view_helper.rb

@@ -7,7 +7,7 @@ module Primer
     class ViewHelperNotFound < StandardError; end
 
     HELPERS = {
-      octicon: "Primer::OcticonComponent",
+      octicon: "Primer::Beta::Octicon",
       heading: "Primer::Beta::Heading",
       time_ago: "Primer::TimeAgoComponent",
       image: "Primer::Alpha::Image"

data/lib/primer/deprecations.yml

@@ -55,6 +55,11 @@ deprecations:
     autocorrect: true
     replacement: "Primer::Beta::Label"
 
+  - component: "Primer::LocalTime"
+    autocorrect: false
+    replacement: "Primer::Beta::RelativeTime"
+    guide: "https://primer.style/view-components/guides/primer_local_time"
+
   - component: "Primer::LinkComponent"
     autocorrect: true
     replacement: "Primer::Beta::Link"
@@ -63,10 +68,31 @@ deprecations:
     autocorrect: true
     replacement: "Primer::Beta::Markdown"
 
+  - component: "Primer::MenuComponent"
+    autocorrect: true
+    replacement: "Primer::Alpha::Menu"
+
+  - component: "Primer::OcticonComponent"
+    autocorrect: true
+    replacement: "Primer::Beta::Octicon"
+
+  - component: "Primer::OcticonSymbolsComponent"
+    autocorrect: true
+    replacement: "Primer::Alpha::OcticonSymbols"
+
   - component: "Primer::PopoverComponent"
     autocorrect: true
     replacement: "Primer::Beta::Popover"
 
+  - component: "Primer::SpinnerComponent"
+    autocorrect: true
+    replacement: "Primer::Beta::Spinner"
+
+  - component: "Primer::TimeAgoComponent"
+    autocorrect: false
+    replacement: "Primer::Beta::RelativeTime"
+    guide: "https://primer.style/view-components/guides/primer_time_ago"
+
   - component: "Primer::Tooltip"
     autocorrect: true
     replacement: "Primer::Alpha::Tooltip"