playbook_ui 13.27.0.pre.alpha.dropdowncustomoptionfix2924 → 13.27.0.pre.alpha.powercentrainplaybookpt22905

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d07ba5dc94705836ad486e9606acd32e8013bb0cae7fea0ed4ae16fbc5b3de60
-  data.tar.gz: b9d4645dc7a4b61263b23913b621a3fa3ce62ba147c46cc1e3d663d0afd13624
+  metadata.gz: 74d7359c8120c5c70d7f9921d02699ff6f9cf3f0c937af7a1f8b7470413d3ec9
+  data.tar.gz: 109783b9b43e8a3fd37d20394c1c492f1ab048ffc5f7e88dbcf44b85aa0a2cb1
 SHA512:
-  metadata.gz: 7d5ec21ddff322928deb63fd1358d8a46be01ff05b42ad8faeeeb9c0cdef6c866942d1c7a9a9fe3d64246c1af1f8d4ca4a8333f01911a84e404151dcee03c8ca
-  data.tar.gz: 274bc67acfa12de1ebef9b992ac73939d0b5b7cd1d7681bc6f6ace3fdaa392706bf85dd8fd2030dc72fb6c1b70cd8e687e289330993e4e19bcbf1a927713ad5d
+  metadata.gz: 2e13c1b3ddf3053fbb089f1aa974501f91cc30217d511ddb8138e83304542b3e8a2e81d4cbbfa88de95d132f2c327f94f6552cf139e5ef3f53fb665d79b37a0b
+  data.tar.gz: 0f12b7619fcff70e4f499b0e05532497abda01537861143f9d3320d0ce51be870009b150f5ddedd304ab0d30993f0cf4ee6de4252f784c821baf6cefa1a18c04

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -6,9 +6,9 @@
 @import "../tokens/typography";
 
 $pb_button_sizes: (
-  "sm":   0.75rem,
-  "md":   0.875rem,
-  "lg":   1.125rem,
+  "sm":   $font_smaller,
+  "md":   $font_small,
+  "lg":   ($font_large - 2px),
 );
 
 [class*=pb_button_kit]{

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -9,7 +9,7 @@
 
 $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
-$pb_button_h_padding: 34px;
+$pb_button_h_padding: 28px;
 $pb_button_hover_darken: 4%;
 $pb_button_border_width: 0px;
 
@@ -27,13 +27,13 @@ $pb_button_border_width: 0px;
   text-rendering: optimizeLegibility;
   font-size: $font_small;
   font-weight: $bold;
+  letter-spacing: $lspace_loose;
   text-align: center;
-  text-decoration: none;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;
   border-style: solid;
-  border-radius: $border_rad_light;
+  border-radius: $border_rad_heavy;
   min-height: $pb_button_size;
   line-height: 1.5;
   padding: $pb_button_v_padding $pb_button_h_padding;

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -24,7 +24,7 @@ $pb_dark_caption_colors: (
   color: $text_lt_light;
   text-transform: uppercase;
   font-size: $font_size;
-  letter-spacing: $lspace_looser;
+  letter-spacing: $lspace_loosest;
 }
 
 @mixin caption_color($color: $text_lt_light) {

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -53,7 +53,7 @@ const adjustAxisStyle = (axis) => {
   /* Change axis label styles */
   axis.labels.style.fontFamily = typography.font_family_base
   axis.labels.style.color = colors.charcoal
-  axis.labels.style.fontWeight = typography.light
+  axis.labels.style.fontWeight = typography.regular
   axis.labels.style.fontSize = typography.font_small
 }
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -27,7 +27,7 @@ const highchartsDarkTheme: ThemeProps = {
     style: {
       color: colors.text_dk_default,
       fontFamily: typography.font_family_base,
-      fontWeight: typography.regular,
+      fontWeight: typography.bold,
       fontSize: typography.heading_3,
     },
   },

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -27,7 +27,7 @@ const highchartsTheme: ThemeProps = {
     style: {
       color: colors.text_lt_default,
       fontFamily: typography.font_family_base,
-      fontWeight: typography.regular,
+      fontWeight: typography.bold,
       fontSize: typography.heading_3,
     },
   },

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

@@ -6,7 +6,4 @@ examples:
   
   react:
   - date_range_inline_default: Default
-
-  swift:
-  - date_range_inline_default_swift: Default
-  - date_range_inline_props_swift: ""
+  

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

@@ -15,10 +15,3 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_bold: Bold
-
-  swift:
-  - date_stacked_default_swift: Default
-  - date_stacked_not_current_year_swift: Not Current Year
-  - date_stacked_reversed_swift: Day & Month Reverse
-  - date_stacked_bold_swift: Bold
-  - date_stacked_props_swift: ""

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

@@ -9,9 +9,3 @@ examples:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
-
-  swift:
-  - date_time_default_swift: Default
-  - date_time_alignment_swift: Alignment
-  - date_time_size_swift: Size
-  - date_time_props_swift: ""

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

@@ -5,7 +5,3 @@ examples:
 
   react:
   - date_year_stacked_default: Default
-
- swift:
-  - date_year_stacked_default_swift: Default
-  - date_year_stacked_props_swift: ""

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -63,10 +63,6 @@
       width: 100%;
 
       [class*="pb_dropdown_option"] {
-        padding-left: $space_sm;
-        padding-right: $space_sm;
-        padding-top: $space_xs;
-        padding-bottom: $space_xs;
         cursor: pointer;
         &:hover {
           background-color: $border_light;

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -4,6 +4,7 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../uti
 import { globalProps } from "../utilities/globalProps";
 import { GenericObject } from "../types";
 
+import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
 
 import DropdownContainer from "./subcomponents/DropdownContainer";
@@ -234,7 +235,9 @@ const Dropdown = (props: DropdownProps) => {
                   options?.map((option: GenericObject) => (
                     <Dropdown.Option key={option.id} 
                         option={option}
-                    /> 
+                    >
+                      <Body text={option.label} />
+                    </Dropdown.Option>
                   ))}
               </DropdownContainer>
             </>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from '../../'
+import { Dropdown, User, FlexItem, Badge, Avatar } from '../../'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();
@@ -69,10 +69,7 @@ const DropdownWithCustomDisplay = (props) => {
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <Flex
-                align="center"
-                justify="between"
-            >
+            <>
               <FlexItem>
                 <User
                     align="left"
@@ -96,7 +93,7 @@ const DropdownWithCustomDisplay = (props) => {
                     }`}
                 />
               </FlexItem>
-            </Flex>
+            </>
           </Dropdown.Option>
         ))}
     </Dropdown>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -48,17 +48,12 @@
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-              <%= pb_rails("flex", props: {
-                align: "center",
-                justify: "between",
-                }) do %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
-                  <% end %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
-                  <% end %>
-              <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
+                <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+                <% end %>
             <% end %>
         <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx

@@ -38,10 +38,7 @@ const DropdownWithCustomOptions = (props) => {
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <Flex
-                align="center"
-                justify="between"
-            >
+            <>
               <FlexItem>
                 <Flex>
                   <Icon icon={option.icon} 
@@ -55,7 +52,7 @@ const DropdownWithCustomOptions = (props) => {
                     text={option.areaCode} 
                 />
               </FlexItem>
-            </Flex>
+            </>
           </Dropdown.Option>
         ))}
     </Dropdown>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb

@@ -30,19 +30,14 @@
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-              <%= pb_rails("flex", props: {
-                align: "center",
-                justify: "between",
-                }) do %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("flex") do %>
-                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                      <% end %>
-                  <% end %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                  <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("flex") do %>
+                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                    <% end %>
+                <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
                 <% end %>
             <% end %>
         <% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md

@@ -1 +1 @@
-By default, dropdown option paddingX is set to `sm` and paddingY is set to `xs`, but this padding can be overridden using our global padding props. In this example we are setting the option padding to `sm` all around.
+By default, dropdown option padding is set to `xs`, but this padding can be overridden using our global prop spacing token. In this example we are increasing the option padding to `sm`.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx

@@ -51,10 +51,7 @@ const [selectedOption, setSelectedOption] = useState();
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <Flex
-                align="center"
-                justify="between"
-            >
+            <>
               <FlexItem>
                 <Flex>
                   <Icon icon={option.icon} 
@@ -68,7 +65,7 @@ const [selectedOption, setSelectedOption] = useState();
                     text={option.areaCode} 
                 />
               </FlexItem>
-            </Flex>
+            </>
           </Dropdown.Option>
         ))}
       </Dropdown.Container>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb

@@ -32,20 +32,15 @@
     <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-              <%= pb_rails("flex", props: {
-                align: "center",
-                justify: "between",
-                }) do %>
                 <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("flex") do %>
-                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                      <% end %>
-                  <% end %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                  <% end %>
-              <% end %>
+                    <%= pb_rails("flex") do %>
+                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                    <% end %>
+                <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+                <% end %>
             <% end %>
         <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -203,5 +203,5 @@ test('selected option on click', () => {
   const kit = screen.getByTestId(testId)
   const option = kit.querySelector('.pb_dropdown_option_list')
   option.click()
-  expect(option).toHaveClass('pb_dropdown_option_selected')
+  expect(option).toHaveClass('pb_dropdown_option_selected p_xs')
 })

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -10,12 +10,18 @@
         padding:"none", 
         cursor: "pointer"
         }) do %> 
-            <div class="dropdown_option_wrapper">
+            <%= pb_rails("flex", props: {
+                align: "center",
+                classname:"dropdown_option_wrapper",
+                justify: "between",
+                padding_x:"sm",
+                padding_y:"xxs",
+                }) do %>
                 <% if content.present? %>
                     <%= content.presence %>
                 <% else %>
                     <%= pb_rails("body", props: {text: object.option[:label]}) %>
                 <% end %>
-            </div>
+            <% end %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb

@@ -10,8 +10,12 @@ module Playbook
         Hash(prop(:data)).merge("dropdown_option_label": option)
       end
 
+      def padding_helper
+        " p_xs"
+      end
+
       def classname
-        generate_classname("pb_dropdown_option", "list")
+        generate_classname("pb_dropdown_option", "list") + padding_helper
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -10,6 +10,7 @@ import { globalProps, GlobalProps } from "../../utilities/globalProps";
 
 import DropdownContext from "../context";
 
+import Flex from "../../pb_flex/_flex";
 import Body from "../../pb_body/_body";
 import ListItem from "../../pb_list/_list_item";
 import { GenericObject } from "../../types";
@@ -38,6 +39,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
     id,
     key,
     option,
+    padding = "xs",
   } = props;
 
   const {
@@ -75,7 +77,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
       selectedClass,
       focusedClass,
     ),
-    globalProps(props),
+    globalProps(props, {padding}),
     className
   );
 
@@ -96,12 +98,20 @@ const DropdownOption = (props: DropdownOptionProps) => {
           key={option.label}
           padding="none"
       >
+        <Flex
+            align="center"
+            className="dropdown_option_wrapper"
+            justify="between"
+            paddingX="sm"
+            paddingY="xxs"
+        >
           {children ? 
-          <div className="dropdown_option_wrapper">{children}</div> :
+              children : 
               <Body dark={dark} 
                   text={option.label} 
               />
           }
+        </Flex>
       </ListItem>
     </div>
   );

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

@@ -14,12 +14,3 @@ examples:
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
-
-  swift:
-  - fixed_confirmation_toast_default_swift: Default
-  - fixed_confirmation_toast_multi_line_swift: Multi Line
-  #- fixed_confirmation_toast_close_swift: Click to Close
-  #- fixed_confirmation_toast_positions_swift: Click to Show Positions
-  - fixed_confirmation_toast_children_swift: Children
-  #- fixed_confirmation_toast_dismiss_with_timer_swift: Timer
-  - fixed_confirmation_toast_props_swift: ""

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -16,7 +16,7 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
+  <%= form.telephone_field :example_phone_field, props: { label: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -15,7 +15,7 @@
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
+  <%= form.telephone_field :example_phone_field, props: { label: true, required: true, validation: { pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}", message: "Please enter a valid phone number (example: 888-888-8888)." } } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

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

@@ -55,7 +55,7 @@ $form_pill_colors: (
     height: fit-content;
     height: -moz-fit-content;
     .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
-      font-size: 16px;
+      font-size: $font_base;
       font-weight: $regular;
     }
     .pb_form_pill_text, .pb_form_pill_tag {

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -76,25 +76,6 @@
         .text_input {
           border-color: $error_dark;
         }
-        [class*=pb_body_kit_negative] {
-          color: $error_dark;
-        }
-      }
-      .text_input_wrapper_add_on {
-        .add-on {
-          &-right {
-            .add-on-card {
-              border: 1px solid $error_dark;
-              border-left: 0;
-            }
-          }
-          &-left {
-            .add-on-card {
-              border: 1px solid $error_dark;
-              border-right: 0;
-            }
-          }
-        }
       }
     }
   }

data/app/pb_kits/playbook/tokens/_titles.scss

@@ -5,10 +5,11 @@
 @mixin pb_title(
     $fontSize: $heading_1,
     $fontWeight: $lighter,
-    $lineHeight: $lh_tighter
+    $lineHeight: $lh_tighter,
+    $letterSpacing: $lspace_tight
 ){
   font-size: $fontSize;
-  letter-spacing: $lspace_tight;
+  letter-spacing: $letterSpacing;
   font-weight: $fontWeight;
   color: $text_lt_default;
   margin: 0;
@@ -29,8 +30,7 @@
 }
 
 @mixin pb_title_4 {
-  @include pb_title($heading_4, $bolder);
-  letter-spacing: -0.03em;
+  @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
 }
 
 @mixin pb_title_dark {

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -1,11 +1,11 @@
-$font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
+$font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
 /* CLEAN UP AND REMOVE */
 $font_jumbo:        36px !default;
 $font_largest:      32px !default;
-$font_larger:       28px !default;
+$font_larger:       27px !default;
 $font_large:        20px !default;
-$font_base:         16px !default;
+$font_base:         15.5px !default;
 $font_default:      $font_base !default;
 $font_normal:       $font_base !default;
 $font_medium:       $font_base !default;
@@ -26,8 +26,8 @@ $text_smaller:      $font_smaller !default;
 $text_smallest:     $font_smallest !default;
 
 /* Headings */
-$heading_1: 46px !default;
-$heading_2: 34px !default;
+$heading_1: 44px !default;
+$heading_2: 32px !default;
 $heading_3: $font_larger !default;
 $heading_4: $font_base !default;
 
@@ -35,19 +35,19 @@ $heading_4: $font_base !default;
 $lspace_tightest:         -.1em !default;
 $lspace_tighter:          -.07em !default;
 $lspace_tight:            -.01em !default;
-$lspace_normal:           0 !default;
+$lspace_normal:           .003em !default;
 $lspace_loose:            .03em !default;
 $lspace_looser:           .07em !default;
 $lspace_loosest:          .1em !default;
 $lspace_super_loosest:    .2em !default;
 
 /* Standard Font Weights */
-$bold:          600 !default;
+$bold:          700 !default;
 $regular:       400 !default;
 
 /* Non_Standard Font Weights */
-$extrabold:     900 !default;
-$boldest:       800 !default;
+$extrabold:     700 !default;
+$boldest:       700 !default;
 $bolder:        700 !default;
 $light:         300 !default;
-$lighter:       100 !default;
+$lighter:       300 !default;