playbook_ui 14.19.0.pre.alpha.PLAY2182formgroupselectpassphraseerror7759 → 14.19.0.pre.alpha.PLAY20937693

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -9,7 +9,6 @@
         <%= pb_rails("text_input", props: {
           type: "file",
           dark: object.dark,
-          error: object.error.presence,
           input_options: {
             id: "upload-#{object.id}",
             classname: "cursor_pointer",

data/app/pb_kits/playbook/pb_file_upload/file_upload.rb

@@ -21,20 +21,14 @@ module Playbook
       prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
-      prop :error, type: Playbook::Props::String
-
       def classname
         file_upload_class = generate_classname("pb_file_upload_kit")
-        file_upload_class + error_class + full_width_class
+        file_upload_class + full_width_class
       end
 
       def full_width_class
         full_width ? " full_width" : ""
       end
-
-      def error_class
-        error.present? ? "_error" : ""
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js

@@ -50,21 +50,3 @@ test('displays custom message', () => {
   const kit = screen.getByTestId(testid)
   expect(kit).toHaveTextContent('Hello world!')
 })
-
-test('handles error state with error prop', () => {
-  const errorText = "Test error message"
-  render(
-    <FileUpload
-        data={{ testid: testid }}
-        error={errorText}
-    />
-  )
-
-  const kit = screen.getByTestId(testid)
-  
-  expect(kit).toHaveClass('pb_file_upload_kit')
-  expect(kit).toHaveClass('error')
-  
-  const errorElement = screen.getByText(errorText)
-  expect(errorElement).toBeInTheDocument()
-})

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

@@ -23,7 +23,7 @@
 @mixin error-state-right-side-select-kit {
   &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
   &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
-    &:not(:has(.pb_phone_number_input)):not(:has(.passphrase-text-input)) {
+    &:not(:has(.pb_phone_number_input)) {
       align-items: flex-start;
 
       .pb_select_kit_wrapper {
@@ -49,7 +49,7 @@
 
 @mixin error-state-left-side-select-kit {
   &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_text_input_kit.error) {
-    &:not(:has(.pb_phone_number_input)):not(:has(.passphrase-text-input)) {
+    &:not(:has(.pb_phone_number_input)) {
       align-items: flex-start;
 
       .pb_text_input_kit.error {

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

@@ -20,12 +20,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
-  .pb_form_pill_text, .pb_form_pill_tag {
+  .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
     font-size: $font_small !important;
   }
-  .pb_form_pill_close {
-    font-size: 17px;
-  }
 
   &[class*=wrapped] {
     height: max-content;
@@ -99,9 +96,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
         display: flex;
         align-items: center;
         height: 17px;
-        width: 17px;
-        justify-content: center;
-        border-radius: 50%;
+        border-radius: calc(50%);
         cursor: pointer;
         @if ($color_name == "neutral") {
           color: $text_lt_default;
@@ -151,7 +146,8 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     outline-offset: -1px;
   }
   .pb_form_pill_icon {
-    height: 0.875em;
+    height: 12px !important;
+    width: 12px !important;
     padding-right: $space_xs;
     + .pb_form_pill_text, + .pb_form_pill_tag,
     + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
@@ -162,7 +158,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   &.small {
     height: 17px;
     padding: 0 $space-xs;
-    .pb_form_pill_text, .pb_form_pill_tag {
+    .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
       font-size: $font_smallest !important;
     }
     .pb_form_pill_text, .pb_form_pill_tag {
@@ -170,20 +166,17 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
       padding: 0 $space_xxs;
     }
     .pb_form_pill_close {
-      height: 14px;
-      width: 14px;
-      font-size: 15px;
-      border-radius: 50%;
+      height: 10px;
+      border-radius: calc(50%);
     }
     [class^=pb_avatar_kit] .avatar_wrapper {
-      flex-basis: 14px;
-      height: 14px;
-      margin-top: 3px;
-      width: 14px;
-      &::before { line-height: 15px; }
+      flex-basis: 16px;
+      height: 16px;
+      margin-top: 2px;
+      width: 16px;
+      &::before { line-height: 16.5px; }
     }
     .pb_form_pill_icon {
-      height: 0.75em;
       padding-right: $space_xxs;
       + .pb_form_pill_text, + .pb_form_pill_tag,
       + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,

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

@@ -81,11 +81,6 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
 
   const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
 
-  const uppercaseState = state?.toUpperCase() ?? ''
-
-  const fields = [address, addressCont, city, homeId, homeUrl, houseStyle, state, territory, zipcode]
-  const hasAllEmptyProps = fields.every(field => field === undefined || field === null || field === '')
-
   return (
     <div
         className={classes(className, dark)}
@@ -93,8 +88,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
         {...dataProps}
         {...htmlProps}
     >
-      {hasAllEmptyProps && '—'}
-      {emphasis == 'street' && !hasAllEmptyProps &&
+      {emphasis == 'street' &&
         <div>
           <Title
               className="pb_home_address_street_address"
@@ -111,11 +105,11 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
+            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
           </Body>
         </div>
       }
-      {emphasis == 'city' && !hasAllEmptyProps &&
+      {emphasis == 'city' &&
         <div>
           <Body color="light">
             {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
@@ -128,18 +122,18 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}`}
+              {`${titleize(city)}, ${state.toUpperCase()}`}
             </Title>
             <Body
                 color="light"
                 tag="span"
             >
-              {` ${zipcode ?? ''}`}
+              {` ${zipcode}`}
             </Body>
           </div>
         </div>
       }
-      {emphasis == 'none' && !hasAllEmptyProps &&
+      {emphasis == 'none' &&
         <div>
           <Body dark={dark}>
             {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
@@ -150,7 +144,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 color="light"
                 dark={dark}
               >
-            {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
+            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
           </Body>
           </div>
         </div>

data/app/pb_kits/playbook/pb_person/_person.tsx

@@ -41,16 +41,6 @@ const Person = (props: PersonProps): React.ReactElement => {
     className
   )
 
-  const hasAllEmptyProps = [firstName, lastName].every(field => field === undefined || field === null || field === '')
-
-  if (hasAllEmptyProps) {
-    return (
-      <>
-        —
-      </>
-    )
-  }
-
   return (
     <div
         {...ariaProps}
@@ -63,13 +53,13 @@ const Person = (props: PersonProps): React.ReactElement => {
           className="pb_person_first"
           tag="span"
       >
-        {firstName ?? ''}
+        {firstName}
       </Body>
       {lastName && 
         <Title
             className="pb_person_first"
             size={4}
-            text={lastName ? ` ${lastName}` : ''}
+            text={` ${lastName}`}
         />
       }
     </div>

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

@@ -42,7 +42,7 @@ $flag-min-resolution: 192dpi;
   .iti__country-list {
     min-width: $dropdown-min-width;
   }
-  // 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;
   }
@@ -60,7 +60,7 @@ $flag-min-resolution: 192dpi;
     color: $focus_input_light;
   }
 
-  .dropdown_open:not(.error) {
+  .dropdown_open {
     .text_input {
       border-color: $primary !important;
     }
@@ -76,7 +76,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 {
@@ -96,7 +96,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;
@@ -199,7 +199,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%;
@@ -228,13 +228,13 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__dropdown-content {
-      border-radius: $space_xs;
+      border-radius: $space_xs; 
       border: 1px solid $border_dark !important;
       .iti__search-input {
         background-color: $bg_dark_card;
         &:hover {
           background-color: $bg_dark_card;
-        }
+        }      
         &:active,
         &:focus {
           background-color: $card_dark;
@@ -243,7 +243,7 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__divider {
-      border-bottom: 1px solid $border_dark !important;
+      border-bottom: 1px solid $border_dark !important;  
     }
 
     .iti__country-list {
@@ -278,7 +278,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_section_separator/_section_separator.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -19,7 +19,7 @@ type SectionSeparatorProps = {
   orientation?: "horizontal" | "vertical",
   text?: string,
   variant?: "card" | "background",
-} & GlobalProps
+}
 
 const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const {

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

@@ -71,8 +71,7 @@
     }
     &.error {
       .text_input_wrapper {
-        // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
-        input:not(.iti__search-input),
+        input,
         .text_input {
           border-color: $error_dark;
         }
@@ -103,8 +102,7 @@
       [class*="pb_body_kit"] {
         margin-top: $space_xs / 2;
       }
-      // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
-      input:not(.iti__search-input),
+      input,
       .text_input {
         border-color: $error;
       }