RubyGems - playbook_ui - Versions diffs - 14.19.0.pre.alpha.borderfixadvancedtable7816 → 14.19.0.pre.alpha.play1997dropdownenablepillsinselection7702 - Mend

playbook_ui 14.19.0.pre.alpha.borderfixadvancedtable7816 → 14.19.0.pre.alpha.play1997dropdownenablepillsinselection7702

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss CHANGED Viewed

@@ -9,23 +9,10 @@
     border: none;
     width: 0;
   }
-  &.error {
-    [class^='pb_card_kit'] {
-      border-color: $error;
-    }
-    [class^='pb_body_kit'][status="negative"] {
-      margin-top: $space_xs;
-    }
-  }
 }
 .dark [class*='pb_file_upload_kit'] {
   [class*='pb_card_kit'] {
     border: 1px $text_dk_lighter dashed;
   }
-  &.error {
-    [class^='pb_card_kit'] {
-      border-color: $error_dark;
-    }
-  }
 }

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx CHANGED Viewed

@@ -22,7 +22,6 @@ type FileUploadProps = {
   maxSize?: number,
   onFilesAccepted: Callback<File, File>,
   onFilesRejected: (error: string, files: readonly FileRejection[]) => void,
-  error?: string,
 }
 const getFormattedFileSize = (fileSize: number): string => {
@@ -37,7 +36,6 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     customMessage,
     dark = false,
     data = {},
-    error,
     htmlOptions = {},
     maxSize,
     onFilesAccepted = noop,
@@ -102,7 +100,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
   return (
     <div
-        className={classnames(buildCss('pb_file_upload_kit'), { 'error': error }, globalProps(props), className)}
+        className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
         {...dataProps}
         {...htmlProps}
         {...getRootProps()}
@@ -120,14 +118,6 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
           }
         </Body>
       </Card>
-      {error && (
-        <Body
-            dark={dark}
-            marginTop="xxs"
-            status="negative"
-            text={error}
-        />
-      )}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_file_upload/docs/example.yml CHANGED Viewed

@@ -3,7 +3,6 @@ examples:
   rails:
   - file_upload_default: File Upload
   - file_upload_custom: Custom
-  - file_upload_error: Error
   react:
   - file_upload_default: Default List of files to upload
@@ -11,4 +10,3 @@ examples:
   - file_upload_custom_message: Add a custom message
   - file_upload_custom_description: Add your one accepted files description
   - file_upload_max_size: Set a file size limit
-  - file_upload_error: Error

data/app/pb_kits/playbook/pb_file_upload/docs/index.js CHANGED Viewed

@@ -3,4 +3,3 @@ export { default as FileUploadAccept } from './_file_upload_accept.jsx'
 export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
 export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
-export { default as FileUploadError } from './_file_upload_error.jsx'

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_multi_level_select/_multi_level_select.tsx CHANGED Viewed

@@ -195,8 +195,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
           if (!selectedItem.length) {
             setSingleSelectedItem({ id: [], value: "", item: [] });
           } else {
-            const { id, label } = selectedItem[0];
-            setSingleSelectedItem({ id: [id], value: label, item: selectedItem });
+            const { id, value } = selectedItem[0];
+            setSingleSelectedItem({ id: [id], value, item: selectedItem });
           }
         }
       }

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb CHANGED Viewed

@@ -1,62 +1,62 @@
 <% treeData = [{
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "100",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "101",
         expanded: true,
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "102",
           },
           {
             label: "Business Affairs",
-            value: "businessAffairs",
+            value: "Business Affairs",
             id: "103",
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "104",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "105",
               },
             ],
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "106",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "107",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "108",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "109",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "110",
           },
         ],

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx CHANGED Viewed

@@ -4,63 +4,63 @@ import MultiLevelSelect from "../_multi_level_select";
 const treeData = [
   {
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "powerhome1",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "people1",
         expanded: true,
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "talent1",
           },
           {
             label: "Business Affairs",
-            value: "businessAffairs",
+            value: "Business Affairs",
             id: "business1",
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "initiative1",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "development1",
               },
             ],
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "experience1",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "contact1",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "appointment1",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "customer1",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "energy1",
           },
         ],

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb CHANGED Viewed

@@ -1,62 +1,62 @@
 <% treeData = [{
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "100",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "101",
         expanded: true,
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "102",
           },
           {
             label: "Business Affairs",
-            value: "business Affairs",
+            value: "Business Affairs",
             id: "103",
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "104",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "105",
               },
             ],
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "106",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "107",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "108",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "109",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "110",
           },
         ],

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx CHANGED Viewed

@@ -4,63 +4,63 @@ import MultiLevelSelect from "../_multi_level_select";
 const treeData = [
   {
     label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
+    value: "Power Home Remodeling",
     id: "powerhome1",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "people",
+        value: "People",
         id: "people1",
         expanded: true,
         children: [
           {
             label: "Talent Acquisition",
-            value: "talentAcquisition",
+            value: "Talent Acquisition",
             id: "talent1",
           },
           {
             label: "Business Affairs",
-            value: "businessAffairs",
+            value: "Business Affairs",
             id: "business1",
             children: [
               {
                 label: "Initiatives",
-                value: "initiatives",
+                value: "Initiatives",
                 id: "initiative1",
               },
               {
                 label: "Learning & Development",
-                value: "learningAndDevelopment",
+                value: "Learning & Development",
                 id: "development1",
               },
             ],
           },
           {
             label: "People Experience",
-            value: "peopleExperience",
+            value: "People Experience",
             id: "experience1",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "contactCenter",
+        value: "Contact Center",
         id: "contact1",
         children: [
           {
             label: "Appointment Management",
-            value: "appointmentManagement",
+            value: "Appointment Management",
             id: "appointment1",
           },
           {
             label: "Customer Service",
-            value: "customerService",
+            value: "Customer Service",
             id: "customer1",
           },
           {
             label: "Energy",
-            value: "energy",
+            value: "Energy",
             id: "energy1",
           },
         ],