playbook_ui 14.10.0.pre.alpha.play16825301 → 14.10.0.pre.rc.0

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "./intlTelInput";
 @import "../tokens/colors";
 
@@ -41,7 +39,7 @@ $flag-min-resolution: 192dpi;
     color: $charcoal;
   }
 
-  // iti-spacer-horizontal's default is 8px, or $space_xs
+  // iti-spacer-horizontal's default is 8px, or $space_xs 
   .iti__country-list .iti__flag, .iti__country-name {
     margin-right: $space_xs;
   }
@@ -75,7 +73,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__divider {
-    border-bottom: 1px solid $border_light !important;
+    border-bottom: 1px solid $border_light !important;  
   }
 
   .iti__selected-country-primary {
@@ -95,7 +93,7 @@ $flag-min-resolution: 192dpi;
     justify-content: center;
     align-items: center;
     border-width: 0;
-    border-radius: $space_xxs;
+    border-radius: $space_xxs; 
 
     &[aria-expanded="true"] {
       color: $primary_action;
@@ -165,7 +163,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__arrow.iti__arrow--up::before {
-    transform: rotate(-(math.div($transform-rotate-deg, 3)));
+    transform: rotate(-($transform-rotate-deg/3));
     top: $space_xs + 4px;
     color: $primary_action;
   }
@@ -198,7 +196,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__dropdown-content {
-    border-radius: $space_xs;
+    border-radius: $space_xs; 
     border: 1px solid $border_light !important;
     position: absolute;
     top: 100%;
@@ -227,12 +225,12 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__dropdown-content {
-      border-radius: $space_xs;
+      border-radius: $space_xs; 
       border: 1px solid $border_dark !important;
     }
 
     .iti__divider {
-      border-bottom: 1px solid $border_dark !important;
+      border-bottom: 1px solid $border_dark !important;  
     }
 
     .iti__country-list {
@@ -267,7 +265,7 @@ $flag-min-resolution: 192dpi;
       color: $white;
     }
   }
-
+  
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
       background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");

data/app/pb_kits/playbook/pb_pill/_pill.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/spacing";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -11,9 +9,9 @@ $pb_pill_height: 22px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 math.div($space-sm, 1.8);
+  padding: 0 $space-sm/1.8;
   height: $pb_pill_height;
-  border-radius: math.div($pb_pill_height, 2);
+  border-radius: $pb_pill_height/2;
   white-space: nowrap;
 
   &[class*=lowercase] {

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../tokens/opacity";
 @import "../tokens/colors";
@@ -23,7 +21,7 @@ $pb_progress_simple_height: 4px;
 [class^=pb_progress_simple_kit] {
   width: 100%;
   height: $pb_progress_simple_height;
-  border-radius: math.div($pb_progress_simple_height, 2);
+  border-radius: $pb_progress_simple_height/2;
   background: rgba($primary, $opacity-1);
     &[class*=_positive] {
       .progress_simple_value {
@@ -44,7 +42,7 @@ $pb_progress_simple_height: 4px;
   [class^=progress_simple_value] {
     width: 0%;
     height: 100%;
-    border-radius: math.div($pb_progress_simple_height, 2);
+    border-radius: $pb_progress_simple_height/2;
     background: $primary;
   }
 

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../pb_textarea/textarea_mixin";
 @import "../pb_button/_button_mixins";
 @import "../tokens/border_radius";
@@ -96,7 +94,7 @@
     .trix-button--icon {
       height: $space_lg;
       width: $space_lg;
-      margin: math.div($space_xs, 2);
+      margin: $space_xs / 2;
       border-radius: $border_rad_heavier;
       &::before {
         background-size: auto;
@@ -106,7 +104,7 @@
       background: $white;
       border: 1px solid #E4E8F0;
       border-bottom: none;
-      padding: math.div($space_xs, 2);
+      padding: $space_xs / 2;
       border-top-left-radius: $border_rad_heavier;
       border-top-right-radius: $border_rad_heavier;
       .trix-button-group {

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

@@ -3,11 +3,6 @@
 @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,
@@ -24,11 +19,8 @@ $section_colors_dark: (
   align-items: center;
   position: relative;
   span {
-    padding: 0;
+    padding: 0 $space_xs;
     display: flex;
-    [class*="pb_caption_kit"] {
-      padding: 0 $space_xs;
-    }
   }
   &::before {
     content: "";
@@ -42,40 +34,12 @@ $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);
     }
@@ -90,33 +54,6 @@ $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,7 +10,6 @@ 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)},
@@ -26,7 +25,6 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
     aria = {},
     children,
     className,
-    color ="default",
     data = {},
     htmlOptions = {},
     id,
@@ -39,7 +37,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 : "", color !== "default" ? `color_${color}` : ''), globalProps(props), className)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
   const dynamicInlineProps = globalInlineProps(props)
 
   return (

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

@@ -6,7 +6,6 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
-  - section_separator_color: Color
 
   react:
   - section_separator_line: Line Separator
@@ -14,7 +13,6 @@ 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,4 +3,3 @@ 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,9 +3,6 @@
 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],
@@ -20,7 +17,7 @@ module Playbook
                         default: "solid"
 
       def classname
-        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil, color != "default" ? "color_#{color}" : nil)
+        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil)
       end
 
     private

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../pb_body/body_mixins";
 @import "../pb_textarea/textarea_mixin";
 @import "../tokens/titles";
@@ -83,7 +81,7 @@
     display: block;
     &.error {
       [class*=pb_body_kit] {
-        margin-top: math.div($space_xs, 2);
+        margin-top: $space_xs / 2;
       }
       > select:first-child {
         border-color: $error;
@@ -135,7 +133,7 @@
       box-shadow: none;
       border-color: transparent;
       padding: 4px 8px;
-      padding-right: $space_lg;
+      padding-right: $space_lg; 
       border-radius: 4px;
       option {
         background-color: $white;
@@ -242,7 +240,7 @@
       border-color: transparent;
       background: transparent;
       padding: 4px 8px;
-      padding-right: $space_lg;
+      padding-right: $space_lg; 
       border-radius: 4px;
       option {
         background-color: $white;

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/animation-curves";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -62,7 +60,7 @@ $pb_selectable_paddings: (
       align-items: center;
       height: $pb_selectable_card_indicator_size;
       width: $pb_selectable_card_indicator_size;
-      border-radius: (math.div($pb_selectable_card_indicator_size, 2)) + (math.div($pb_selectable_card_border, 2));
+      border-radius: $pb_selectable_card_indicator_size/2 + $pb_selectable_card_border/2;
       border-width: $pb_selectable_card_border;
       border-style: solid;
       border-color: $white;
@@ -71,8 +69,8 @@ $pb_selectable_paddings: (
       font-size: $font_smaller;
       text-align: center;
       position: absolute;
-      top: -(math.div($pb_selectable_card_indicator_size, 2));
-      right: -(math.div($pb_selectable_card_indicator_size, 2));
+      top: -($pb_selectable_card_indicator_size/2);
+      right: -($pb_selectable_card_indicator_size/2);
       opacity: 0;
     }
   }
@@ -153,7 +151,7 @@ $pb_selectable_paddings: (
       input[type="radio"] {
         &:checked ~ label {
           border-width: $pb_card_border_width;
-          outline: 1px solid $primary_action_dark;
+          outline: 1px solid $primary;
         }
       }
     }
@@ -163,11 +161,11 @@ $pb_selectable_paddings: (
     color: $white;
     > label {
       @include pb_card_dark;
-      background: $bg_dark_card;
+      background: transparent;
 
       .pb_selectable_card_circle {
         border-color: $bg_dark;
-        background: $primary_action_dark;
+        background: $primary-action;
       }
     }
 
@@ -175,7 +173,7 @@ $pb_selectable_paddings: (
     input[type="radio"] {
       &:checked ~ label {
         @include pb_card_selected_dark;
-        background: $bg_dark_card;
+        background: transparent;
       }
     }
 

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -35,7 +35,7 @@
         <% end %>
       <% else %>
         <% if content.nil? %>
-          <%= pb_rails("body", props: { text: object.text, dark: object.dark }) %>
+          <%= pb_rails("body", props: { text: object.text }) %>
         <% else %>
           <%= content %>
         <% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/_skeleton_loading.scss

@@ -1,8 +1,8 @@
 @import 'skeleton_loading_mixins';
 
 .pb_skeleton_loading {
-    display: flex;
-    flex-direction: column;
+    display: "flex";
+    flex-direction: "column";
     height: 100%;
     .color_default {
         @include skeleton-shimmer($silver);

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("skeleton_loading") %>
+<%= pb_rails("skeleton_loading") %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -17,12 +17,9 @@ const SkeletonLoadingHeightWidth = (props) => (
         width="50px"
         {...props}
     />
-    <Card 
-        height='200px' 
+    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
         marginBottom="md"
         padding="none" 
-        width='100%'
-        {...props}
     >
       <SkeletonLoading
           borderRadius="md"
@@ -32,11 +29,8 @@ const SkeletonLoadingHeightWidth = (props) => (
           {...props}
       />
     </Card>
-    <Card 
-        height='200px'
+    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
         padding="none"
-        width='100%'
-        {...props}
     >
       <SkeletonLoading
           borderRadius="md"

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

@@ -1,13 +1,8 @@
 examples:
   
   rails:
-  - skeleton_loading_default: Default
-  - skeleton_loading_color: Color
-  - skeleton_loading_layout: Layout
-  - skeleton_loading_border_radius: Border Radius
-  - skeleton_loading_height_width: Height & Width  
-  - skeleton_loading_user: User Component Example
-  - skeleton_loading_filter: Filter Component Example
+  # - skeleton_loading_default: Default
+  
   
   react:
   - skeleton_loading_default: Default
@@ -15,5 +10,4 @@ examples:
   - skeleton_loading_layout: Layout
   - skeleton_loading_border_radius: Border Radius
   - skeleton_loading_height_width: Height & Width
-  - skeleton_loading_user: User Component Example
-  - skeleton_loading_filter: Filter Component Example
+  

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

@@ -3,5 +3,3 @@ export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
 export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
 export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
 export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'
-export { default as SkeletonLoadingUser } from './_skeleton_loading_user.jsx'
-export { default as SkeletonLoadingFilter } from './_skeleton_loading_filter.jsx'

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb

@@ -1,8 +1,12 @@
-<%= pb_content_tag do %>
-  <% stack.times do |index| %>
-    <div
-      class="<%= item_classname(index) %>"
-      style="<%= item_inline_styles %>"
-    ></div>
-  <% end %>
-<% end %>
+<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
+<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
+<%= pb_content_tag(
+    # :div,
+    # aria: object.aria,
+    # class: object.classname,
+    # data: object.data,
+    # id: object.id,
+    # **combined_html_options
+) do %>
+  <span>SKELETON_LOADING CONTENT</span>
+<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb

@@ -2,54 +2,7 @@
 
 module Playbook
   module PbSkeletonLoading
-    class SkeletonLoading < Playbook::KitBase
-      prop :height, type: Playbook::Props::String,
-                    default: "16px"
-      prop :width, type: Playbook::Props::String,
-                   default: "100%"
-      prop :border_radius, type: Playbook::Props::Enum,
-                           values: %w[none xs sm md lg xl rounded],
-                           default: "sm"
-      prop :gap, type: Playbook::Props::Enum,
-                 values: %w[none xxs xs sm md lg xl xxl],
-                 default: "xxs"
-      prop :stack, type: Playbook::Props::Number,
-                   default: 1
-      prop :color, type: Playbook::Props::Enum,
-                   values: %w[default white],
-                   default: "default"
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-
-      def classname
-        generate_classname("pb_skeleton_loading")
-      end
-
-      def global_inline_props
-        {}
-      end
-
-      def item_classname(index = nil)
-        classes = [
-          "pb_skeleton_loading_item",
-          "border_radius_#{border_radius}",
-          "color_#{color}",
-          ("dark" if dark),
-          gap_class(index),
-        ]
-        classes.compact.join(" ")
-      end
-
-      def item_inline_styles
-        styles = []
-        styles << "height: #{height}"
-        styles << "width: #{width}"
-        styles.join("; ")
-      end
-
-      def gap_class(index = nil)
-        stack > 1 && index.to_i.positive? && gap != "none" ? "gap_#{gap}" : nil
-      end
+    class SkeletonLoading < ::Playbook::KitBase
     end
   end
 end

data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx

@@ -1,46 +1,40 @@
-import React from "react"
-import classnames from "classnames"
+import React from 'react'
+import classnames from 'classnames'
 
-import { buildCss, buildHtmlProps } from "../utilities/props"
-import { globalProps } from "../utilities/globalProps"
+import { buildCss, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
 
-import Body from "../pb_body/_body"
-import Icon from "../pb_icon/_icon"
+import Body from '../pb_body/_body'
+import Icon from '../pb_icon/_icon'
 
-const statusMap: {
-  neutral: "neutral"
-  decrease: "negative"
-  increase: "positive"
-} = {
-  increase: "positive",
-  decrease: "negative",
-  neutral: "neutral",
+const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
+  increase: 'positive',
+  decrease: 'negative',
+  neutral: 'neutral',
 }
 
 const iconMap = {
-  increase: "arrow-up",
-  decrease: "arrow-down",
+  increase: 'arrow-up',
+  decrease: 'arrow-down',
 }
 
 type StatChangeProps = {
-  change?: "increase" | "decrease" | "neutral"
-  className?: string
-  dark?: boolean
-  icon?: string
-  id?: string
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
-  value?: string | number
+  change?: 'increase' | 'decrease' | 'neutral',
+  className?: string,
+  icon?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  value?: string | number,
 }
 
 const StatChange = (props: StatChangeProps): React.ReactElement => {
-  const {
-    change = "neutral",
-    className,
-    dark = false,
+  const { 
+    change = 'neutral', 
+    className, 
     htmlOptions = {},
-    icon,
-    id,
-    value,
+    icon, 
+    id, 
+    value 
   } = props
 
   const status = statusMap[change as keyof typeof statusMap]
@@ -53,32 +47,30 @@ const StatChange = (props: StatChangeProps): React.ReactElement => {
 
   return (
     <>
-      {value && (
+      {value &&
         <div
             className={classnames(
-            buildCss("pb_stat_change_kit", status),
-            globalProps(props),
-            className
-          )}
+              buildCss('pb_stat_change_kit', status),
+              globalProps(props),
+              className
+              )}
             id={id}
             {...htmlProps}
         >
-          <Body dark={dark}
-              status={status}
-          >
-            {" "}
-            {returnedIcon && (
+          <Body status={status}>
+            {returnedIcon &&
               <>
-                <Icon dark={dark}
+                <Icon
                     fixed_width
                     icon={returnedIcon}
-                />{" "}
+                />
+                {' '}
               </>
-            )}
+            }
             {`${value}%`}
           </Body>
         </div>
-      )}
+      }
     </>
   )
 }