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

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -1,6 +1,3 @@
-@import "../tokens/spacing";
-@import "./error_state_mixin";
-
 [class^=pb_form_group_kit] {
   display: inline-flex;
   flex-direction: row;
@@ -15,12 +12,6 @@
     }
   }
 
-@include error-state-flex-start-selectors;
-@include error-state-center-selectors;
-@include error-state-flex-end-selectors;
-@include error-state-left-side-select-kit;
-@include error-state-right-side-select-kit;
-
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {
@@ -36,7 +27,7 @@
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
-
+    
       &:focus {
         outline: $primary solid 1px;
         outline-offset: -1px;
@@ -159,7 +150,7 @@
   & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
     &:hover {
       border-right-color: $slate;
-    }
+    } 
   }
 
   & > [class^=pb_selectable_card_kit]:not(:first-child) label {

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/spacing";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -16,9 +14,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 math.div($space-md, 2);
+  padding: 0 $space-md/2;
   height: $pb_form_pill_height;
-  border-radius: math.div($pb_form_pill_height, 2);
+  border-radius: $pb_form_pill_height/2;
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
@@ -144,7 +142,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     height: 12px !important;
     width: 12px !important;
     padding-right: $space_xs;
-    + .pb_form_pill_text, + .pb_form_pill_tag,
+    + .pb_form_pill_text, + .pb_form_pill_tag, 
     + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
     + div .pb_form_pill_text, + div .pb_form_pill_tag {
       padding-left: 0;
@@ -173,7 +171,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     }
     .pb_form_pill_icon {
       padding-right: $space_xxs;
-      + .pb_form_pill_text, + .pb_form_pill_tag,
+      + .pb_form_pill_text, + .pb_form_pill_tag, 
       + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
       + div .pb_form_pill_text, + div .pb_form_pill_tag {
         padding-left: 0;

data/app/pb_kits/playbook/pb_gauge/_gauge.scss

@@ -1,33 +1,12 @@
-@import "../tokens/colors";
-
 [class^=pb_gauge_kit] {
 
-  .fix {
-    fill: $text_lt_default;
-    stroke: none;
-
-    &[class*=dark] {
-      fill: $text_dk_default;
-    }
-  }
-
   .suffix {
     fill: $text_lt_light;
-    stroke: none;
     font: $regular $font_larger $font_family_base;
-
-    &[class*=dark] {
-      fill: $text_dk_light;
-    }
   }
   .prefix {
     fill: $text_lt_light;
-    stroke: none;
     font: $regular $font_base $font_family_base;
-
-    &[class*=dark] {
-      fill: $text_dk_light;
-    }
   }
 
   rect.highcharts-background {
@@ -37,13 +16,4 @@
   .gauge-pane {
     stroke-linejoin: round;
   }
-
-  &[class*=dark] {
-    color: $text_dk_default;
-
-    .pb_title_kit_size_1,
-    .pb_caption_kit_xs {
-        color: $text_dk_light;
-    }
-  }
-}
+}

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -164,9 +164,9 @@ const Gauge = ({
             color: defaultColors.text_lt_default,
             enabled: true,
             format:
-              `<span class="prefix${dark ? " dark" : ""}">${prefix}</span>` +
-              `<span class="fix${dark ? " dark" : ""}">{y:,f}</span>` +
-              `<span class="suffix${dark ? " dark" : ""}">${suffix}</span>`,
+              `<span class="prefix">${prefix}</span>` +
+              '<span class="fix">{y:,f}</span>' +
+              `<span class="suffix">${suffix}</span>`,
             style: {
               fontFamily: typography.font_family_base,
               fontWeight: typography.regular,

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -17,60 +17,47 @@ const GaugeComplex = (props) => (
       gap="sm"
       padding="xl"
       wrap
-      {...props}
   >
     <FlexItem
         flex={1}
         grow
-        {...props}
     >
       <Card
           maxWidth="xs"
           padding="md"
-          {...props}
       >
         <Title
             paddingBottom="sm"
             size={4}
             text="Abandoned Calls"
-            {...props}
         />
-        <Flex
-            align="stretch"
-            {...props}
-        >
+        <Flex align="stretch">
           <Flex
               marginRight="sm"
               orientation="column"
-              {...props}
           >
             <Body
                 color="light"
                 paddingBottom="sm"
                 text="Total Abandoned"
-                {...props}
             />
             <Flex
                 align="baseline"
                 paddingBottom="xs"
-                {...props}
             >
               <Title
                   size={1}
                   text="39"
-                  {...props}
               />
               <Title
                   color="light"
                   size={3}
                   text="calls"
-                  {...props}
               />
             </Flex>
             <Caption
                 size="xs"
                 text="of 390"
-                {...props}
             />
           </Flex>
 
@@ -78,29 +65,22 @@ const GaugeComplex = (props) => (
               alignSelf="stretch"
               marginRight="sm"
               orientation="vertical"
-              {...props}
           />
 
           <Flex
               orientation="column"
               wrap
-              {...props}
           >
               <Body
                   color="light"
                   text="% Abandoned"
-                  {...props}
-              />
-            <Flex
-                wrap
-                {...props}
-            >
+               />
+            <Flex wrap>
               <FlexItem
                   fixedSize="150px"
                   overflow="hidden"
                   shrink
-                  {...props}
-              >
+              > 
                 <Gauge
                     chartData={data}
                     disableAnimation
@@ -110,7 +90,7 @@ const GaugeComplex = (props) => (
                     {...props}
                 />
                </FlexItem>
-            </Flex>
+            </Flex>  
           </Flex>
         </Flex>
       </Card>

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -18,7 +18,7 @@ type HomeAddressStreetProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
-  emphasis: "street" | "city" | "none",
+  emphasis: "street" | "city",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   homeId: string,
   houseStyle: string,
@@ -129,22 +129,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
           </div>
         </div>
       }
-      {emphasis == 'none' &&
-        <div>
-          <Body dark={dark}>
-            {joinPresent([titleize(address), houseStyle], ' · ')}
-          </Body>
-          <Body dark={dark}>{titleize(addressCont)}</Body>
-          <div>
-            <Body
-                color="light"
-                dark={dark}
-              >
-            {`${titleize(city)}, ${state} ${zipcode}`}
-          </Body>
-          </div>
-        </div>
-      }
       {homeId &&
         <Hashtag
             classname="home-hashtag"

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb

@@ -24,20 +24,4 @@
   state: "PA",
   zipcode: "19382",
   territory: "PHL",
-}) %>
-
-<br>
-<br>
-
-<%= pb_rails("home_address_street", props: {
-  address: "70 Prospect Ave",
-  address_cont: "Apt M18",
-  city: "West Chester",
-  emphasis: "none",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  house_style: "Colonial",
-  state: "PA",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx

@@ -32,21 +32,6 @@ const HomeAddressStreetEmphasis = (props) => {
           zipcode="19382"
           {...props}
       />
-      <br />
-      <br />
-      <HomeAddressStreet
-          address="70 Prospect Ave"
-          addressCont="Apt M18"
-          city="West Chester"
-          emphasis="none"
-          homeId="8250263"
-          homeUrl="https://powerhrg.com/"
-          houseStyle="Colonial"
-          state="PA"
-          territory="PHL"
-          zipcode="19382"
-          {...props}
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md

@@ -1,3 +1,2 @@
 Emphasis on street happens by default. (no prop needed)
-Emphasis on "city" makes the city emphasized, rather than the street.
-Adding "none" to emphasis prop will provide no emphasis.
+Emphasis on "city" makes the city emphasized, rather than the street.

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -7,7 +7,7 @@ module Playbook
       prop :address_cont
       prop :city
       prop :emphasis, type: Playbook::Props::Enum,
-                      values: %w[street city none],
+                      values: %w[street city],
                       default: "street"
       prop :home_id, type: Playbook::Props::Number
       prop :home_url
@@ -77,20 +77,6 @@ module Playbook
         }
       end
 
-      def none_emphasis_props
-        {
-          address_house_style: address_house_style,
-          address_house_style2: address_house_style2,
-          city_state_zip: city_state_zip,
-          dark: dark,
-          home_id: home_id,
-          home_url: home_url,
-          target: target_option,
-          new_window: new_window,
-          territory: territory,
-        }
-      end
-
       def target_option
         if target && home_url
           target

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/border_radius";
 @import "../tokens/colors";
 @import "../tokens/typography";
@@ -16,6 +14,16 @@ $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;
@@ -46,14 +54,16 @@ $pb_icon_circle_sizes: (
     &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
-      border-radius: math.div($size, 2);
+      border-radius: $size/2;
       background: $silver;
       color: $text_lt_light;
-      font-size: if($name == "xxs", $size - 6px, $size * 0.38);
+      font-size: $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_label_value/_label_value.scss

@@ -1,9 +1,7 @@
-@use "sass:math";
-
 @import "../tokens/spacing";
 
 [class^=pb_label_value_kit] {
   [class^=pb_caption_kit]  {
-    margin-bottom: math.div($space-xs, 1.5);
+    margin-bottom: $space-xs/1.5;
   }
-}
+}

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -24,37 +24,34 @@ type LayoutPropTypes = {
 type LayoutSideProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-} & GlobalProps
+}
 
 type LayoutBodyProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-} & GlobalProps
+}
 
 type LayoutItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   size?: "sm" | "md" | "lg"
-} & GlobalProps
+}
 
 type LayoutHeaderProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-} & GlobalProps
+}
 
 type LayoutFooterProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-} & GlobalProps
+}
 
+// Side component
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_sidebar', globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_sidebar', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -63,12 +60,8 @@ const Side = (props: LayoutSideProps) => {
 // Body component
 const Body = (props: LayoutBodyProps) => {
   const { children, className } = props
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_body', globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_body', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -78,12 +71,8 @@ const Body = (props: LayoutBodyProps) => {
 const Item = (props: LayoutItemProps) => {
   const { children, className, size = 'sm' } = props
   const sizeClass = `size_${size}`
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_item', sizeClass, globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_item', sizeClass, globalProps(props), className)}>
       {children}
     </div>
   )
@@ -92,12 +81,8 @@ const Item = (props: LayoutItemProps) => {
 // Header component
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_header', globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_header', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -106,12 +91,8 @@ const Header = (props: LayoutHeaderProps) => {
 // Footer component
 const Footer = (props: LayoutFooterProps) => {
   const { children, className } = props
-  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div
-        className={classnames('layout_footer', globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
+    <div className={classnames('layout_footer', globalProps(props), className)}>
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_link/_link.scss

@@ -17,7 +17,7 @@
     outline-offset: 2px;
   }
   &:visited {
-    color: darken($primary_action, 10%);
+    color: $data_3;
   }
   &.dark  {
     @include pb_link($active_dark);
@@ -34,7 +34,7 @@
       }
 
       &:visited {
-        color: darken($primary_action, 10%);
+        color: $data_3;
       }
     }
   }
@@ -48,7 +48,7 @@
       }
 
       &:visited {
-        color: darken($primary_action, 10%);
+        color: $data_3;
       }
     }
   }

data/app/pb_kits/playbook/pb_message/_message_mixins.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/spacing";
 
 @mixin pb_message {
@@ -19,7 +17,7 @@
     }
 
     .message_text {
-      margin: 0 0 math.div($space-xs, 2);
+      margin: 0 0 $space-xs/2;
     }
 
     .message_title {

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../utilities/colors";
 @import "../tokens/opacity";
@@ -20,7 +18,7 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     justify-content: center;
     width: $pb_multiple_users_size;
     height: $pb_multiple_users_size;
-    border-radius: math.div($pb_multiple_users_size, 2) + 2;
+    border-radius: $pb_multiple_users_size / 2 + 2;
     background: tint($primary, 90%);
     border: $pb_multiple_users_border_size solid $white;
     color: $primary;

data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss

@@ -19,16 +19,6 @@
           font-weight: $bolder;
         }
       }
-    }
-  }
-
-  .dark & {
-    [class*=pb_nav_list_kit_item][class*=pb_nav_list_item] {
-      &[class*=_link] {
-        &[class*=_active] {
-          box-shadow: 0 2px 10px 0 $shadow_dark;
-        }
-      }
-    }
+   }
   }
 }

data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss

@@ -223,7 +223,6 @@
         }
       }
       [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
-        box-shadow: unset !important;
         .pb_nav_list_item_text_collapsible {
           color: $white !important;
         }
@@ -241,17 +240,11 @@
 
       .pb_collapsible_main_kit:hover {
         background-color: mix($white, $card_dark, 20%);
-        .pb_nav_list_item_text_collapsible {
-          color: $white !important;
-        }
-      }
-
-      .pb_collapsible_main_kit {
+        .pb_nav_list_item_text_collapsible,
         svg {
-          color: $text_dk_default !important;
+          color: $white !important;
         }
       }
-
       .icon_wrapper:hover {
         background-color: mix($white, $card_dark, 40%);
       }
@@ -263,13 +256,6 @@
           }
         }
       }
-
-      &[class*="_active"] {
-        > .pb_collapsible_main_kit {
-          background-color: $primary;
-          box-shadow: 0 2px 10px 0 $shadow_dark;
-        }
-      }
     }
   }
 }

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -115,7 +115,7 @@ $selector: ".pb_nav_list";
       }
       [class*="_item_text"],
       [class*="_item_icon"] {
-        color: $text_dk_light !important;
+        color: $text_dk_lighter !important;
       }
       &[class*="_link"] {
         &:hover {

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import classnames from 'classnames'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import Icon from '../pb_icon/_icon';
 
@@ -14,7 +14,7 @@ type PaginationProps = {
   onChange?: (pageNumber: number) => void;
   range?: number;
   total?: number;
-} & GlobalProps;
+};
 
 const Pagination = ( props: PaginationProps) => {
   const {

data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../tokens/spacing";
 @import "../tokens/screen_sizes";
@@ -23,14 +21,14 @@
   }
 
   .passphrase-label {
-    margin-right: math.div($space_xs, 2);
+    margin-right: $space_xs / 2;
   }
 
   .passphrase-text-input-wrapper {
     position: relative;
 
     .pb_text_input_kit_label {
-      margin-bottom: math.div($space_xs, 2);
+      margin-bottom: $space_xs / 2;
     }
 
     .passphrase-text-input input {
@@ -59,7 +57,7 @@
   }
 
   .pb_progress_simple_wrapper, .pb_progress_simple_wrapper_dark {
-    margin-bottom: math.div($space_xs, 2);
+    margin-bottom: $space_xs/2;
 
     &.progress-empty-input {
       visibility: hidden;