playbook_ui 16.3.0.pre.rc.2 → 16.3.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 36f6a6dd119731f0e7645c8c4951640f9ba8728ea65b622cb7afd69f6739969e
-  data.tar.gz: 3bd745e2a704ea19e1c7ce3fd12065a15f7b4e7b30046446ee2c4f85cce9c532
+  metadata.gz: 4e153aae819ff62c66551a68563cda7597f5788d3971396767d1f8239b90d153
+  data.tar.gz: 96276b46239d4b7eee81b0f0209e9b48ad8736277e1c8c39150e7346af24da30
 SHA512:
-  metadata.gz: e7e7daebf07eda124a9e305693bd61858757afbdb64fef32eec41eb9c21339577b73f48dd5d5c64e1b6b4312e98b15e0934a0ab501101183efab571c7057170d
-  data.tar.gz: 91ad44712236b7794c5844f6a646a8aa04e80f9fdab1d35b0683b7d121fb0ad0a9421c924e1fd48f022dcac9216e0df74e9e5121db2f750d9a1a0476918ddcea
+  metadata.gz: f9930c8405e22e1bed3b2b6e2e830b380c5656b522998ece950c7f40a6938ede92771b530bc9d6b19d6343ff21eeb5f9af11c7ea46adaa4e110a80cf2fccf11b
+  data.tar.gz: d92e2c424880aec27fcc9f93aecc09a8d419a8bd521fdbb03e6b870e5d3b60f9c58ff7c7a4845fc84b41710991d0d4f9e2397d54c6a99a292803e6c2b001f8f9

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -221,11 +221,14 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
         {!hideLabel && (
            <label htmlFor={pickerId}>
             {requiredIndicator ? (
-              <Caption className="pb_date_picker_kit_label">
+              <Caption className="pb_date_picker_kit_label"
+                  color="lighter"
+              >
                 {label} <span style={{ color: `${colors.error}` }}>*</span>
               </Caption>
             ) : (
               <Caption className="pb_date_picker_kit_label"
+                  color="lighter"
                   text={label}
               />
             )}

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -7,11 +7,11 @@
     <% if !object.hide_label && object.label %>
       <label for="<%= object.picker_id %>">
         <% if object.required_indicator %>
-          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label" }) do %>
+          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label", color: "lighter" }) do %>
             <%= object.label %><span style="color: #DA0014;"> *</span>
           <% end %>
         <% else %>
-          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label" }) %>
+          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label", color: "lighter" }) %>
         <% end %>
       </label>
     <% end %>

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

@@ -479,6 +479,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     {requiredIndicator ? (
                       <Caption
                           className="pb_dropdown_kit_label"
+                          color="lighter"
                           dark={dark}
                           marginBottom="xs"
                       >
@@ -487,6 +488,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     ) : (
                       <Caption
                           className="pb_dropdown_kit_label"
+                          color="lighter"
                           dark={dark}
                           marginBottom="xs"
                           text={label}

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

@@ -2,11 +2,11 @@
     <% if object.label.present? %>
         <label for="<%= object.select_id %>" data-dropdown="pb-dropdown-label">
             <% if object.required_indicator %>
-                <%= pb_rails("caption", props: { margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) do %>
+                <%= pb_rails("caption", props: { margin_bottom: "xs", classname: "pb_dropdown_kit_label", color: "lighter", dark: object.dark }) do %>
                     <%= object.label %><span style="color: #DA0014;"> *</span>
                 <% end %>
             <% else %>
-                <%= pb_rails("caption", props: { text: object.label, margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) %>
+                <%= pb_rails("caption", props: { text: object.label, margin_bottom: "xs", classname: "pb_dropdown_kit_label", color: "lighter", dark: object.dark }) %>
             <% end %>
         </label>
     <% end %>

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

@@ -212,7 +212,7 @@ test('generated label prop', () => {
   )
 
   const kit = screen.getByTestId(testId)
-  const label = kit.querySelector('.pb_caption_kit_md')
+  const label = kit.querySelector('.pb_caption_kit_md_lighter')
   expect(label).toHaveTextContent('Countries')
 })
 

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -532,6 +532,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
           {requiredIndicator ? (
             <Caption
                 className="pb_multi_level_select_kit_label"
+                color="lighter"
                 marginBottom="xs"
             >
               {label} <span className="required_indicator">*</span>
@@ -539,6 +540,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
           ) : (
             <Caption
                 className="pb_multi_level_select_kit_label"
+                color="lighter"
                 marginBottom="xs"
                 text={label}
             />

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

@@ -119,12 +119,14 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
           {hasLabel && (requiredIndicator ? (
             <Caption
                 className="passphrase-label"
+                color="lighter"
             >
               {label} <span className="required_indicator">*</span>
             </Caption>
           ) : (
             <Caption
                 className="passphrase-label"
+                color="lighter"
                 text={label}
             />
           ))}
@@ -142,12 +144,14 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
                   orientation="column"
               >
                 <Caption
+                    color="lighter"
                     marginBottom="xs"
                     text="Tips for a good passphrase"
                 />
                 <div>
                   {tips.map((tip, i) => (
                     <Caption
+                        color="lighter"
                         key={i}
                         marginBottom="xs"
                         size="xs"

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

@@ -262,6 +262,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         {
           requiredIndicator ? (
             <Caption className="pb_text_input_kit_label"
+                color="lighter"
                 marginBottom="xs"
             >
               {label} <span style={{ color: `${colors.error}` }}>*</span>
@@ -269,6 +270,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
           ) : (
             <Caption
                 className="pb_text_input_kit_label"
+                color="lighter"
                 marginBottom="xs"
                 text={label}
             />

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

@@ -134,12 +134,14 @@ const Select = ({
         >
           {requiredIndicator ? (
             <Caption 
+                color="lighter"
                 dark={props.dark}>
               {label}
               <span style={{ color: "#DA0014" }}> *</span>
             </Caption>
           ) : (
             <Caption 
+                color="lighter"
                 dark={props.dark}
                 text={label}
             />

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -4,11 +4,11 @@
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.input_options[:id] || object.name %>">
       <% if object.required_indicator %>
-        <%= pb_rails("caption", props: { dark: object.dark }) do %>
+        <%= pb_rails("caption", props: { color: "lighter", dark: object.dark }) do %>
           <%= object.label %><span style="color: #DA0014;"> *</span>
         <% end %>       
       <% else %>
-        <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
+        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) %>
       <% end %>
     </label>
   <% end %>

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -37,7 +37,7 @@
     <% else %>
       <%= pb_rails("flex", props: { data: {"pb-star-rating-wrapper": "true" }, orientation: "column" }) do %>
         <% if object.label.present? %>
-          <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
+          <%= pb_rails("caption", props: { color: "lighter", text: object.label, margin_bottom:"xs"}) %>
         <% end %>
 
         <%= hidden_input_tag %>

data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx

@@ -54,6 +54,7 @@ const StarRatingInteractive = (props: StarRatingInteractiveProps) => {
             {label &&
                 <Caption
                     className="pb_star_rating_kit_label"
+                    color="lighter"
                     marginBottom="xs"
                     text={label} 
                 />

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

@@ -253,6 +253,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
             requiredIndicator ? (
               <Caption
                   className="pb_text_input_kit_label"
+                  color="lighter"
                   dark={dark}
               >
                 {label} <span style={{ color: dark ? colors.text_error_dark : colors.text_error }}>*</span>
@@ -260,6 +261,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
             ) : (
                 <Caption
                     className="pb_text_input_kit_label"
+                    color="lighter"
                     dark={dark}
                     text={label}
               />

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -2,11 +2,11 @@
   <% if object.label.present? %>
     <label for="<%= object.input_options[:id] || object.id %>">
       <% if object.required_indicator %>
-        <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label" }) do %>
+        <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label", color: "lighter" }) do %>
           <%= object.label %><span style="color: #DA0014;"> *</span>
         <% end %>
       <% else %>
-        <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
+        <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label", color: "lighter" }) %>
       <% end %>
     </label>
   <% end %>

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -133,11 +133,14 @@ const Textarea = ({
       <label htmlFor={id}>
       {
         requiredIndicator ? (
-          <Caption className="pb_text_input_kit_label">
+          <Caption className="pb_text_input_kit_label"
+              color="lighter"
+          >
             {label} <span style={{ color: `${colors.text_error}` }}>*</span>
           </Caption>
         ) : (
           <Caption  className="pb_text_input_kit_label"
+              color="lighter"
               text={label}
           />
         )

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -2,11 +2,11 @@
   <% if object.label.present? %>
     <label for="<%= object.input_options[:id] || object.id %>" >
       <% if object.required_indicator %>
-        <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) do %>
+        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) do %>
           <%= object.label %><span style="color: #DA0014;"> *</span>
         <% end %>
       <% else %>
-        <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
+        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) %>
       <% end %>
     </label>
   <% end %>

data/app/pb_kits/playbook/pb_textarea/textarea.test.js

@@ -149,7 +149,7 @@ describe("TextArea Kit Props", () => {
     )
 
     const kit = screen.getByTestId(testId)
-    const error = kit.querySelector(".pb_caption_kit_md")
+    const error = kit.querySelector(".pb_caption_kit_md_lighter")
 
     expect(error.innerHTML).toBe("Test Label")
   })

data/app/pb_kits/playbook/pb_time_picker/_time_picker.tsx

@@ -707,6 +707,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
           {requiredIndicator ? (
             <Caption
                 className="pb_time_picker_kit_label"
+                color="lighter"
                 dark={dark}
                 marginBottom="xs"
                 size="md"
@@ -716,6 +717,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
           ) : (
             <Caption
                 className="pb_time_picker_kit_label"
+                color="lighter"
                 dark={dark}
                 marginBottom="xs"
                 size="md"
@@ -766,6 +768,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
                 <label htmlFor={`${uniqueId}-hour`}>
                   <Caption
                       className="time_input_label"
+                      color="lighter"
                       dark={dark}
                       size="sm"
                       text="Hour"
@@ -813,6 +816,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
                 <label htmlFor={`${uniqueId}-minute`}>
                   <Caption
                       className="time_input_label"
+                      color="lighter"
                       dark={dark}
                       size="sm"
                       text="Minute"
@@ -859,6 +863,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
                 <div className="meridiem">
                   <Caption
                       className="time_input_label"
+                      color="lighter"
                       dark={dark}
                       size="sm"
                       text="Period"
@@ -905,6 +910,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
               )}
               {showTimezone && (
                 <Caption
+                    color="lighter"
                     dark={dark}
                     lineHeight="tight"
                     marginTop="sm"

data/app/pb_kits/playbook/pb_time_picker/time_picker.test.jsx

@@ -71,14 +71,14 @@ describe('TimePicker', () => {
     render(<TimePicker data={{ testid: 'clickable-picker' }} />)
     const input = screen.getByPlaceholderText('Select Time')
     fireEvent.click(input)
-    expect(screen.getByText('Hour', { selector: '.pb_caption_kit_sm' })).toBeInTheDocument()
+    expect(screen.getByText('Hour', { selector: '.pb_caption_kit_sm_lighter' })).toBeInTheDocument()
   })
 
   test('does not open dropdown on input click when disabled', () => {
     render(<TimePicker disabled />)
     const input = screen.getByPlaceholderText('Select Time')
     fireEvent.click(input)
-    expect(screen.queryByText('Hour', { selector: '.pb_caption_kit_sm' })).not.toBeInTheDocument()
+    expect(screen.queryByText('Hour', { selector: '.pb_caption_kit_sm_lighter' })).not.toBeInTheDocument()
   })
 
   test('renders with required attribute', () => {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -20,7 +20,7 @@ test('typeahead classname + label renders as expected', () => {
   )
 
   const kit = screen.getByTestId('typeahead-test')
-  const label = kit.querySelector(".pb_caption_kit_md.pb_text_input_kit_label")
+  const label = kit.querySelector(".pb_caption_kit_md_lighter.pb_text_input_kit_label")
   expect(kit).toHaveClass("pb_typeahead_kit")
   expect(label).toHaveTextContent("Colors")
 })