playbook_ui 14.11.0.pre.rc.5 → 14.11.0.pre.rc.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1eb04067fdadd5f71f0992668732e3676dee7a6cc09d262582b38062ed66fa7f
-  data.tar.gz: b358c411ab18b799ce72c37ac425633df7104c2843304dfd36ef1e33b47c2d30
+  metadata.gz: 90f0123e3995ace5639733d29921fbb16fab9b2d33ade22943e730de7354462f
+  data.tar.gz: cc98b9bc9a33a7786acec47a68ff3453630c0394d7dffb9620fc25fd0b9e52c4
 SHA512:
-  metadata.gz: b1e08d3dc1697229ff7a91fea552a43abcf7287736681b0c36f2bf4fea6f3edc1688e243b6a6a952aeb0511caca87ae27f88334ea011fbfa7a74d2e32ec61aef
-  data.tar.gz: 3d747f6188b22c7fa973150b10b379d7b3663e889889c4773fda6cb05c12df25b14c58965ca87855a91fcbd95e3d76734def93902a752620ad48792c80474c4f
+  metadata.gz: 2f417b8df46ee94165dc64e48ea31d5dc36fa4f2c9a87149021cbc7a975c759f5ee0e2895fefcf14c3701bfcbcca88b55d88fcb356b0af1309c6e07eb0f3824f
+  data.tar.gz: e49a36cb29ad2001e8b1155336b88b3c4d82e1a171234e05cf0d03414544fb7796e517ef237d7192223e42a8fcf1aee8b64cc647bc5746e128e3f0ad57ca871d

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -14,16 +14,6 @@ $pb_icon_circle_sizes: (
   "xl":   100px,
 );
 
-@mixin svg_size($name, $match, $adjust) {
-  @if $name == $match {
-    $svg_xy: $adjust;
-    & > svg {
-      width: #{$svg_xy};
-      height: #{$svg_xy};
-    }
-  }
-}
-
 [class^=pb_icon_circle_kit] {
   display: flex;
   justify-content: center;
@@ -57,13 +47,11 @@ $pb_icon_circle_sizes: (
       border-radius: $size/2;
       background: $silver;
       color: $text_lt_light;
-      font-size: $size * 0.38;
+      font-size: if($name == "xxs", $size - 6px, $size * 0.38);
       line-height: $size;
       flex-shrink: 0;
       flex-grow: 0;
       flex-basis: $size;
-
-      @include svg_size($name, "xxs", $size - 6px);
     }
   }
 

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -3,6 +3,11 @@
 @import "../tokens/opacity";
 @import "./section_separator_mixin";
 
+$merge_kits1: map-merge($status_colors, $category_colors);
+$merge_kits2: map-merge($merge_kits1, $product_colors);
+$merge_kits3: map-merge($merge_kits2, $text_colors);
+$section_selector_colors: map-merge($merge_kits3, $data_colors);
+
 $section_colors_light: (
   background:   $bg_light,
   card:         $card_light,
@@ -37,12 +42,40 @@ $section_colors_dark: (
     flex: 1;
     @include section_separator_horizontal;
   }
+  @each $color_name, $color_value in $section_selector_colors {
+    &[class*="color_#{$color_name}"] {
+      &::before, &::after {
+        background: $color_value;
+      }
+
+      &[class*=_vertical] {
+        &::after {
+          background: $color_value;
+        }
+      }
+      &[class*=_dashed] {
+        &::before, &::after {
+          border: 1px dashed $color_value;
+        }
+        &[class*=_vertical] {
+          &::after {
+            border: 1px dashed $color_value;
+            background: none;
+          }
+        }
+      }
+    }
+  }
+
   &[class*=_horizontal] {
     justify-content: center;
   }
   &[class*=_vertical] {
     margin-left: $space_xs;
     margin-right: $space_xs;
+    &::before {
+      display: none;
+    }
     &::after {
       @include section_separator_vertical(false);
     }
@@ -57,6 +90,33 @@ $section_colors_dark: (
   // Dark =========================
 
   &.dark {
+    @each $color_name, $color_value in $section_selector_colors {
+      &[class*="color_#{$color_name}"] {
+        &::before, &::after {
+          background: $color_value;
+        }
+
+        &[class*=_vertical] {
+          &::after {
+            @include section_separator_vertical(false);
+            background: $color_value;
+          }
+        }
+
+        &[class*=_dashed] {
+          &::before, &::after {
+            border: 1px dashed $color_value;
+            background: none;
+          }
+          &[class*=_vertical] {
+            &::after {
+              border: 1px dashed $color_value;
+              background: none;
+            }
+          }
+        }
+      }
+    }
     &::before {
       @include section_separator_horizontal(true);
     }

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -10,6 +10,7 @@ type SectionSeparatorProps = {
   aria?: { [key: string]: string; },
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
+  color?: "default" | "primary",
   dark?: boolean,
   data?: { [key: string]: string; },
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -25,6 +26,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
     aria = {},
     children,
     className,
+    color ="default",
     data = {},
     htmlOptions = {},
     id,
@@ -37,7 +39,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : "", color !== "default" ? `color_${color}` : ''), globalProps(props), className)
   const dynamicInlineProps = globalInlineProps(props)
 
   return (

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("section_separator", props: { text: "Default Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary", text: "Primary Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary", line_style: "dashed", text: "Primary Dashed Separator" }) %>
+<%= pb_rails("section_separator", props: { color: "primary" }) do %>
+  <%= pb_rails("flex", props: { padding: "xs" }) do %>
+    <%= pb_rails("icon", props: { color: "primary", icon: "arrow-down" }) %>
+    <%= pb_rails("detail", props: { text: "Children", size: "sm", color: "link" }) %>
+  <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
+
+const children = (
+  <Flex padding="xs">
+    <Icon color="primary"
+        icon="arrow-down"
+    />
+    <Detail
+        color="link"
+        size="sm"
+        text="Children"
+    />
+  </Flex>
+)
+
+const SectionSeparatorColor = (props) => {
+  return (
+    <div>
+      <SectionSeparator text="Default Separator"
+          {...props}
+      />
+      <SectionSeparator color="primary"
+          text="Primary Separator"
+          {...props}
+      />
+      <SectionSeparator
+          color="primary"
+          lineStyle="dashed"
+          text="Primary Dashed Separator"
+          {...props}
+      />
+       <SectionSeparator color="primary"
+           {...props}
+       >
+        {children}
+      </SectionSeparator>
+    </div>
+  )
+}
+
+export default SectionSeparatorColor

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.md

@@ -0,0 +1,3 @@
+Pass "primary" to the `color` prop to change any section separator color.
+
+**NOTE:** Passing `children` overrides any content provided via the `text` prop. The `color` prop does not affect the `text` prop's color, and the color of `children` is determined by the children's individual props. For greater control over text color customization, consider using a separator with `children`.

data/app/pb_kits/playbook/pb_section_separator/docs/example.yml

@@ -6,6 +6,7 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+  - section_separator_color: Color
 
   react:
   - section_separator_line: Line Separator
@@ -13,6 +14,7 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+  - section_separator_color: Color
 
   swift:
   - section_separator_line_swift: Line Separator

data/app/pb_kits/playbook/pb_section_separator/docs/index.js

@@ -3,3 +3,4 @@ export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
 export { default as SectionSeparatorDashed } from './_section_separator_dashed.jsx'
 export { default as SectionSeparatorChildren } from './_section_separator_children.jsx'
+export { default as SectionSeparatorColor } from './_section_separator_color.jsx'

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbSectionSeparator
     class SectionSeparator < Playbook::KitBase
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[default primary],
+                   default: "default"
       prop :text
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[card background],
@@ -17,7 +20,7 @@ module Playbook
                         default: "solid"
 
       def classname
-        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil)
+        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil, color != "default" ? "color_#{color}" : nil)
       end
 
     private