primer_view_components 0.0.110 → 0.0.111

data/app/components/primer/popover_component.pcss

@@ -0,0 +1,225 @@
+/* Popover */
+
+.Popover {
+  position: absolute;
+  z-index: 100;
+}
+
+.Popover-message {
+  position: relative;
+  width: 232px;
+  margin-right: auto;
+  margin-left: auto;
+  background-color: var(--color-canvas-overlay);
+  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+
+  /* Carets */
+  &::before,
+  &::after {
+    position: absolute;
+    left: 50%;
+    display: inline-block;
+    content: '';
+  }
+
+  &::before {
+    top: -16px;
+    margin-left: -9px;
+    border: 8px solid transparent;
+    border-bottom-color: var(--color-border-default);
+  }
+
+  &::after {
+    top: -14px;
+    margin-left: -8px;
+    border: 7px solid transparent;
+    border-bottom-color: var(--color-canvas-overlay);
+  }
+}
+
+/* No caret */
+.Popover-message--no-caret {
+  &::before,
+  &::after {
+    display: none;
+  }
+}
+
+/* Bottom-oriented carets */
+.Popover-message--bottom,
+.Popover-message--bottom-right,
+.Popover-message--bottom-left {
+  &::before,
+  &::after {
+    top: auto;
+    border-bottom-color: transparent;
+  }
+
+  &::before {
+    bottom: -16px;
+    border-top-color: var(--color-border-default);
+  }
+
+  &::after {
+    bottom: -14px;
+    border-top-color: var(--color-canvas-overlay);
+  }
+}
+
+/* Top & Bottom: Right-oriented carets */
+.Popover-message--top-right,
+.Popover-message--bottom-right {
+  right: -9px;
+  margin-right: 0;
+
+  &::before,
+  &::after {
+    left: auto;
+    margin-left: 0;
+  }
+
+  &::before {
+    right: 20px;
+  }
+
+  &::after {
+    right: 21px;
+  }
+}
+
+/* Top & Bottom: Left-oriented carets */
+.Popover-message--top-left,
+.Popover-message--bottom-left {
+  left: -9px;
+  margin-left: 0;
+
+  &::before,
+  &::after {
+    left: 24px;
+    margin-left: 0;
+  }
+
+  &::after {
+    left: 25px;
+  }
+}
+
+/* Right- & Left-oriented carets */
+.Popover-message--right,
+.Popover-message--right-top,
+.Popover-message--right-bottom,
+.Popover-message--left,
+.Popover-message--left-top,
+.Popover-message--left-bottom {
+  &::before,
+  &::after {
+    top: 50%;
+    left: auto;
+    margin-left: 0;
+    border-bottom-color: transparent;
+  }
+
+  &::before {
+    margin-top: -9px;
+  }
+
+  &::after {
+    margin-top: -8px;
+  }
+}
+
+/* Right-oriented carets */
+.Popover-message--right,
+.Popover-message--right-top,
+.Popover-message--right-bottom {
+  &::before {
+    right: -16px;
+    border-left-color: var(--color-border-default);
+  }
+
+  &::after {
+    right: -14px;
+    border-left-color: var(--color-canvas-overlay);
+  }
+}
+
+/* Left-oriented carets */
+.Popover-message--left,
+.Popover-message--left-top,
+.Popover-message--left-bottom {
+  &::before {
+    left: -16px;
+    border-right-color: var(--color-border-default);
+  }
+
+  &::after {
+    left: -14px;
+    border-right-color: var(--color-canvas-overlay);
+  }
+}
+
+/* Right & Left: Top-oriented carets */
+.Popover-message--right-top,
+.Popover-message--left-top {
+  &::before,
+  &::after {
+    top: 24px;
+  }
+}
+
+/* Right & Left: Bottom-oriented carets */
+.Popover-message--right-bottom,
+.Popover-message--left-bottom {
+  &::before,
+  &::after {
+    top: auto;
+  }
+
+  &::before {
+    bottom: 16px;
+  }
+
+  &::after {
+    bottom: 17px;
+  }
+}
+
+@media (min-width: 544px) {
+  .Popover-message--large {
+    min-width: 320px;
+  }
+}
+
+/* Responsive Popover
+** For < md it will show full-width anchored to the bottom */
+
+@media (max-width: 767.98px) {
+  .Popover {
+    position: fixed;
+    top: auto !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+  }
+
+  .Popover-message {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    width: auto !important;
+    margin: var(--primer-stack-gap-condensed, 8px);
+  }
+
+  /* Increase tap area for touch input */
+  .Popover-message > .btn-octicon {
+    padding: var(--primer-control-medium-paddingInline-normal, 12px) !important;
+  }
+
+  /* Remove caret */
+  .Popover-message::after,
+  .Popover-message::before {
+    display: none;
+  }
+}

data/app/components/primer/primer.pcss

@@ -3,13 +3,19 @@
 @import "./alpha/banner.pcss";
 @import "./alpha/toggle_switch.pcss";
 @import "./alpha/segmented_control.pcss";
+@import "./beta/avatar.pcss";
+@import "./beta/avatar_stack.pcss";
 @import "./beta/breadcrumbs.pcss";
 @import "./beta/button.pcss";
 @import "./beta/counter.pcss";
+@import "./beta/flash.pcss";
 @import "./beta/label.pcss";
 @import "./beta/blankslate.pcss";
 @import "./beta/progress_bar.pcss";
 @import "./beta/truncate.pcss";
+@import "./dropdown.pcss";
+@import "./popover_component.pcss";
 @import "./state_component.pcss";
 @import "./subhead_component.pcss";
+@import "./timeline_item_component.pcss";
 @import "./truncate.pcss";

data/app/components/primer/timeline_item_component.css

@@ -0,0 +1 @@
+.TimelineItem{display:flex;margin-left:var(--primer-stack-gap-normal,16px);padding:var(--primer-stack-padding-normal,16px) 0;position:relative}.TimelineItem:before{background-color:var(--color-border-muted);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--primer-borderWidth-thick,2px)}.TimelineItem:target .TimelineItem-badge{border-color:var(--color-accent-emphasis);box-shadow:0 0 .2em var(--color-accent-muted)}.TimelineItem-badge{align-items:center;background-color:var(--color-timeline-badge-bg);border:var(--primer-borderWidth-thick,2px) solid var(--color-canvas-default);border-radius:50%;color:var(--color-fg-muted);display:flex;flex-shrink:0;height:var(--primer-control-medium-size,32px);justify-content:center;margin-left:calc(var(--primer-control-medium-size, 32px)/-2 + 1px);margin-right:var(--primer-controlStack-medium-gap-condensed,8px);position:relative;width:var(--primer-control-medium-size,32px);z-index:1}.TimelineItem-badge--success{background-color:var(--color-success-emphasis);border:var(--primer-borderWidth-thin,1px) solid #0000;color:var(--color-fg-on-emphasis)}.TimelineItem-body{color:var(--color-fg-muted);flex:auto;margin-top:var(--base-size-4,4px);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--color-canvas-default);border:0;border-top:var(--primer-borderWidth-thicker,4px) solid var(--color-border-default);height:var(--primer-stack-gap-spacious,24px);margin:0;margin-bottom:calc(var(--primer-stack-gap-normal, 16px)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4,4px)}.TimelineItem--condensed:last-child{padding-bottom:var(--primer-stack-gap-normal,16px)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--color-canvas-default);border:0;color:var(--color-fg-muted);height:var(--base-size-16,16px);margin-bottom:var(--base-size-8,8px);margin-top:var(--base-size-8,8px)}

data/app/components/primer/timeline_item_component.css.json

@@ -0,0 +1 @@
+{"name":"timeline_item_component","selectors":[".TimelineItem",".TimelineItem:before",".TimelineItem:target .TimelineItem-badge",".TimelineItem-badge",".TimelineItem-badge--success",".TimelineItem-body",".TimelineItem-avatar",".TimelineItem-break",".TimelineItem--condensed",".TimelineItem--condensed:last-child",".TimelineItem--condensed .TimelineItem-badge"]}

data/app/components/primer/timeline_item_component.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["timeline_item_component.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,+CAAiD,CADjD,iDAAmD,CAFnD,iBAqBF,CAfE,qBAQE,0CAA2C,CAL3C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,yCAGF,CAEA,yCACE,yCAA0C,CAC1C,6CACF,CAGF,oBASE,kBAAmB,CACnB,+CAAgD,CAChD,4EAA8E,CAC9E,iBAAkB,CAJlB,2BAA4B,CAL5B,YAAa,CAWb,aAAc,CATd,6CAA+C,CAQ/C,sBAAuB,CANvB,kEAAqE,CADrE,gEAAkE,CALlE,iBAAkB,CAGlB,4CAA8C,CAF9C,SAaF,CAEA,6BAEE,8CAA+C,CAC/C,qDAA6D,CAF7D,iCAGF,CAEA,mBAIE,2BAA4B,CAC5B,SAAU,CAFV,iCAAmC,CADnC,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,4CAA6C,CAC7C,QAAS,CACT,kFAAoF,CANpF,4CAA8C,CAC9C,QAAS,CACT,2DAA8D,CAC9D,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,kCAgBF,CAZE,oCACE,kDACF,CAEA,6CAKE,4CAA6C,CAC7C,QAAS,CAFT,2BAA4B,CAH5B,+BAAiC,CAEjC,oCAAsC,CADtC,iCAKF","file":"timeline_item_component.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--primer-stack-padding-normal, 16px) 0;\n  margin-left: var(--primer-stack-gap-normal, 16px);\n\n  /* The Timeline */\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: var(--primer-borderWidth-thick, 2px);\n    content: '';\n    background-color: var(--color-border-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--color-accent-emphasis);\n    box-shadow: 0 0 0.2em var(--color-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--primer-control-medium-size, 32px);\n  height: var(--primer-control-medium-size, 32px);\n  margin-right: var(--primer-controlStack-medium-gap-condensed, 8px);\n  margin-left: calc(var(--primer-control-medium-size, 32px) / -2 + 1px);\n  color: var(--color-fg-muted);\n  align-items: center;\n  background-color: var(--color-timeline-badge-bg);\n  border: var(--primer-borderWidth-thick, 2px) solid var(--color-canvas-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-success-emphasis);\n  border: var(--primer-borderWidth-thin, 1px) solid transparent;\n}\n\n.TimelineItem-body {\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--base-size-4, 4px);\n  color: var(--color-fg-muted);\n  flex: auto;\n}\n\n.TimelineItem-avatar {\n  position: absolute;\n  left: -72px;\n  z-index: 1;\n}\n\n.TimelineItem-break {\n  position: relative;\n  z-index: 1;\n  height: var(--primer-stack-gap-spacious, 24px);\n  margin: 0;\n  margin-bottom: calc(var(--primer-stack-gap-normal, 16px) * -1);\n  margin-left: -56px;\n  background-color: var(--color-canvas-default);\n  border: 0;\n  border-top: var(--primer-borderWidth-thicker, 4px) solid var(--color-border-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4, 4px);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    padding-bottom: var(--primer-stack-gap-normal, 16px);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16, 16px);\n    margin-top: var(--base-size-8, 8px);\n    margin-bottom: var(--base-size-8, 8px);\n    color: var(--color-fg-muted);\n    background-color: var(--color-canvas-default);\n    border: 0;\n  }\n}\n"]}

data/app/components/primer/timeline_item_component.pcss

@@ -0,0 +1,93 @@
+/* TimelineItem */
+
+.TimelineItem {
+  position: relative;
+  display: flex;
+  padding: var(--primer-stack-padding-normal, 16px) 0;
+  margin-left: var(--primer-stack-gap-normal, 16px);
+
+  /* The Timeline */
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: var(--primer-borderWidth-thick, 2px);
+    content: '';
+    background-color: var(--color-border-muted);
+  }
+
+  &:target .TimelineItem-badge {
+    border-color: var(--color-accent-emphasis);
+    box-shadow: 0 0 0.2em var(--color-accent-muted);
+  }
+}
+
+.TimelineItem-badge {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: var(--primer-control-medium-size, 32px);
+  height: var(--primer-control-medium-size, 32px);
+  margin-right: var(--primer-controlStack-medium-gap-condensed, 8px);
+  margin-left: calc(var(--primer-control-medium-size, 32px) / -2 + 1px);
+  color: var(--color-fg-muted);
+  align-items: center;
+  background-color: var(--color-timeline-badge-bg);
+  border: var(--primer-borderWidth-thick, 2px) solid var(--color-canvas-default);
+  border-radius: 50%;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.TimelineItem-badge--success {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-success-emphasis);
+  border: var(--primer-borderWidth-thin, 1px) solid transparent;
+}
+
+.TimelineItem-body {
+  min-width: 0;
+  max-width: 100%;
+  margin-top: var(--base-size-4, 4px);
+  color: var(--color-fg-muted);
+  flex: auto;
+}
+
+.TimelineItem-avatar {
+  position: absolute;
+  left: -72px;
+  z-index: 1;
+}
+
+.TimelineItem-break {
+  position: relative;
+  z-index: 1;
+  height: var(--primer-stack-gap-spacious, 24px);
+  margin: 0;
+  margin-bottom: calc(var(--primer-stack-gap-normal, 16px) * -1);
+  margin-left: -56px;
+  background-color: var(--color-canvas-default);
+  border: 0;
+  border-top: var(--primer-borderWidth-thicker, 4px) solid var(--color-border-default);
+}
+
+.TimelineItem--condensed {
+  padding-top: var(--base-size-4, 4px);
+  padding-bottom: 0;
+
+  /* TimelineItem--condensed is often grouped. (commits) */
+  &:last-child {
+    padding-bottom: var(--primer-stack-gap-normal, 16px);
+  }
+
+  & .TimelineItem-badge {
+    height: var(--base-size-16, 16px);
+    margin-top: var(--base-size-8, 8px);
+    margin-bottom: var(--base-size-8, 8px);
+    color: var(--color-fg-muted);
+    background-color: var(--color-canvas-default);
+    border: 0;
+  }
+}

data/lib/primer/deprecations.rb

@@ -12,7 +12,6 @@ module Primer
       "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
       "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
       "Primer::BoxComponent" => "Primer::Box",
-      "Primer::CounterComponent" => "Primer::Beta::Counter",
       "Primer::DropdownMenuComponent" => nil,
       "Primer::IconButton" => "Primer::Beta::IconButton",
       "Primer::Tooltip" => "Primer::Alpha::Tooltip",

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 110
+      PATCH = 111
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/banner_preview.rb

@@ -48,7 +48,7 @@ module Primer
       #
       # @!endgroup
 
-      # @label Dismissable 
+      # @label Dismissable
       def dismissable
         render(Primer::Alpha::Banner.new(dismissable: true, reappear: true)) { "This is a dismissable banner." }
       end

data/previews/primer/beta/avatar_preview.rb

@@ -13,14 +13,70 @@ module Primer
         render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: size, shape: shape, href: href))
       end
 
-      # @label Default options
+      # @label Default
+      def default
+        render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label As link
       #
-      # @param size [Integer] select [16, 20, 24, 32, 40, 48, 80]
-      # @param shape [Symbol] select [circle, square]
       # @param href [String] text
-      def default(size: 24, shape: :circle, href: nil)
-        render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: size, shape: shape, href: href))
+      def as_link(href: "#")
+        render(Primer::Beta::Avatar.new(href: href, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @!group Sizes
+      #
+      # @label 16px
+      def size_16
+        render(Primer::Beta::Avatar.new(size: 16, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 20px
+      def size_20
+        render(Primer::Beta::Avatar.new(size: 20, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 24px
+      def size_24
+        render(Primer::Beta::Avatar.new(size: 24, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 32px
+      def size_32
+        render(Primer::Beta::Avatar.new(size: 32, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
+
+      # @label 40px
+      def size_40
+        render(Primer::Beta::Avatar.new(size: 40, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 48px
+      def size_48
+        render(Primer::Beta::Avatar.new(size: 48, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 80px
+      def size_80
+        render(Primer::Beta::Avatar.new(size: 80, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+      #
+      # @!endgroup
+
+      # @!group Shape
+      #
+      # @label Circle
+      def shape_circle
+        render(Primer::Beta::Avatar.new(shape: :circle, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label Square
+      def shape_square
+        render(Primer::Beta::Avatar.new(shape: :square, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+      #
+      # @!endgroup
     end
   end
 end

data/previews/primer/beta/avatar_stack_preview.rb

@@ -19,23 +19,64 @@ module Primer
         end
       end
 
-      # @label Default options
+      # @label Default
+      def default
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @!group Multiple avatars
       #
-      # @param number_of_avatars [Integer] number
-      # @param tag select [["div", div], ["span", span]]
-      # @param align select [["Left", left], ["Right", right]]
-      # @param tooltipped toggle
-      # @param tooltip_label text
-      def default(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, tooltip_label: "This is a tooltip!")
-        render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, body_arguments: { label: tooltip_label })) do |c|
-          Array.new(number_of_avatars || 1) do
-            c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          end
+      # @label 1 avatar
+      def avatar_1
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
 
-      # @!group More Examples
+      # @label 2 avatars
+      def avatar_2
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
 
+      # @label 3 avatars
+      def avatar_3
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @label 4 avatars
+      def avatar_4
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @label 5 avatars
+      def avatar_5
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group More options
+      #
       # @label Align right
       def align_right
         render(Primer::Beta::AvatarStack.new(align: :right)) do |c|
@@ -53,6 +94,7 @@ module Primer
           c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
+      #
       # @!endgroup
     end
   end

data/previews/primer/beta/blankslate_preview.rb

@@ -17,16 +17,40 @@ module Primer
       end
 
       # @label Default options
+      def default
+        render Primer::Beta::Blankslate.new do |c|
+          c.heading(tag: :h2).with_content("Title")
+          c.description { "Description" }
+        end
+      end
+
+      # @!group Options
       #
-      # @param narrow [Boolean] toggle
-      # @param spacious [Boolean] toggle
-      # @param border [Boolean] toggle
-      def default(narrow: false, spacious: false, border: false)
-        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |c|
+      # @label Narrow
+      def option_narrow
+        render Primer::Beta::Blankslate.new(narrow: true) do |c|
+          c.heading(tag: :h2).with_content("Title")
+          c.description { "Description" }
+        end
+      end
+
+      # @label Spacious
+      def option_spacious
+        render Primer::Beta::Blankslate.new(spacious: true) do |c|
+          c.heading(tag: :h2).with_content("Title")
+          c.description { "Description" }
+        end
+      end
+
+      # @label Border
+      def option_border
+        render Primer::Beta::Blankslate.new(border: true) do |c|
           c.heading(tag: :h2).with_content("Title")
           c.description { "Description" }
         end
       end
+      #
+      # @!endgroup
 
       # @param narrow [Boolean] toggle
       # @param spacious [Boolean] toggle

data/previews/primer/beta/flash_preview.rb

@@ -18,15 +18,52 @@ module Primer
 
       # @label Default
       #
-      # @param full toggle
-      # @param spacious toggle
-      # @param dismissible toggle
-      # @param icon [Symbol] select [alert, check, info, people]
-      # @param scheme [Symbol] select [default, warning, danger, success]
-      # @param content text
-      def default(full: false, spacious: false, dismissible: false, icon: :people, scheme: Primer::Beta::Flash::DEFAULT_SCHEME, content: "This is a flash message!")
-        render(Primer::Beta::Flash.new(full: full, spacious: spacious, dismissible: dismissible, icon: icon, scheme: scheme)) { content }
+      def default
+        render(Primer::Beta::Flash.new) { "This is a flash message!" }
+      end
+
+      # @!group Color Schemes
+      #
+      # @label Default
+      def color_scheme_default
+        render(Primer::Beta::Flash.new) { "This is a flash message!" }
+      end
+
+      # @label Warning
+      def color_scheme_warning
+        render(Primer::Beta::Flash.new(scheme: :warning)) { "This is a warning flash message!" }
       end
+
+      # @label Danger
+      def color_scheme_danger
+        render(Primer::Beta::Flash.new(scheme: :danger)) { "This is a danger flash message!" }
+      end
+
+      # @label Success
+      def color_scheme_success
+        render(Primer::Beta::Flash.new(scheme: :success)) { "This is a success flash message!" }
+      end
+      #
+      # @!endgroup
+
+      # @!group More options
+      #
+      # @label Full width
+      def options_full
+        render(Primer::Beta::Flash.new(full: true)) { "This is a full width flash message!" }
+      end
+
+      # @label Dismissible
+      def options_dismissible
+        render(Primer::Beta::Flash.new(dismissible: true)) { "This is a dismissible flash message!" }
+      end
+
+      # @label With icon
+      def options_with_icon
+        render(Primer::Beta::Flash.new(icon: :info)) { "This is a flash message with an icon!" }
+      end
+      #
+      # @!endgroup
     end
   end
 end