playbook_ui 17.1.0.pre.rc.0 → 17.1.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7b715350921a0d13054afef8c7a265256206ce8a191121ac5a553f7a6c53f81e
-  data.tar.gz: d2f45143b6d02498ee81758e82ce67ad49f35d821990d627bdd973ac3d944f83
+  metadata.gz: d2b39d1988129a1775386968f9a5e6e8153ccf1fdf44aaf371c23144d75e75d1
+  data.tar.gz: 546a6f29bd40d122f0fb899cd86d38b3474dbf0c3e54d275c4082623c0bab1ef
 SHA512:
-  metadata.gz: 060ba5b0e47cbefc0822b7f624b45344e28dea010f2b0af1d380e7d85e33b59f0b5a2df7153cbc1b4b7264b4821ee9617dc2e732ff8704b029333329119a1583
-  data.tar.gz: a90fecaa285e278f7d119e96f48760f8c36816ef7f8810c1177e1100d088bf34c9d4f7705319d99a1106e570b4304989536169262bc5223d2ecb505210ca5566
+  metadata.gz: 8d0e377654cc74f6143aedf096cf6c4409d56f51fff11a168ea48a99e1b0e7a4ff588c6e1b4ae974b148aa03c3efbfc4df9035985a871f81593f8a7cf014ed35
+  data.tar.gz: 745b58a4eda8d12eea4205aab68d21758084d63eefd9942bed1e538be5a7e5932736b55cf110c51aa1d80448f539a0f7ffab52a0cc0bb10667c4e4282b775add

data/app/pb_kits/playbook/pb_card/card.rb

@@ -15,7 +15,7 @@ module Playbook
                            values: %w[xs sm md lg xl none rounded],
                            default: "md"
       prop :background, type: Playbook::Props::Enum,
-                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight product_11_background product_11_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
+                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight product_11_background product_11_highlight product_12_background product_12_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
                         default: "none"
       prop :drag_id, type: Playbook::Props::String
       prop :draggable_item, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_card/kit.schema.json

@@ -39,6 +39,8 @@
         "product_10_highlight",
         "product_11_background",
         "product_11_highlight",
+        "product_12_background",
+        "product_12_highlight",
         "windows",
         "siding",
         "doors",

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("date_picker", props: {
-  picker_id: "date_picker_required_indicator",
+  picker_id: "date-picker-required-indicator",
   label: "Required Date Picker",
   required_indicator: true,
 }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_required_indicator.jsx

@@ -4,7 +4,7 @@ import DatePicker from "../_date_picker"
 const DatePickerRequiredIndicator = (props) => (
   <DatePicker
       label="Required Date Picker"
-      pickerId="date_picker_required_indicator"
+      pickerId="date-picker-required-indicator"
       requiredIndicator
       {...props}
   />

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

@@ -116,6 +116,12 @@
         color: $input_text_disabled;
       }
 
+      // Rails select-only / multi-select Body placeholders (autocomplete uses ::placeholder above)
+      .pb_body_kit[data-dropdown-trigger-display],
+      .pb_body_kit[data-dropdown-trigger-display-multi-select] {
+        color: $input_text_default;
+      }
+
       &:focus {
         box-shadow: 0px 0px 0 1px $status_border_primary !important;
         outline: unset;
@@ -127,16 +133,20 @@
         transition: box-shadow 0.15s ease-in-out;
       }
 
-      &.dropdown_trigger_wrapper_select_only {
-        box-shadow: inset 0 -11px 20px rgba($status_border_primary, 0.05);
-      }
-
       &.dropdown_trigger_wrapper_focus {
         box-shadow: 0px 0px 0 1px $status_border_primary !important;
         transition: box-shadow 0.1s ease-in-out;
       }
     }
 
+    // Selected value: restore default text color (Rails reuses the placeholder Body node)
+    &:has([data-dropdown-clear-icon]:not([style*="display: none"])),
+    &:has(.pb_dropdown_option_selected) {
+      .pb_body_kit[data-dropdown-trigger-display] {
+        color: $text_default_color;
+      }
+    }
+
     .pb_dropdown_container {
       position: absolute;
       background-color: $white;
@@ -401,8 +411,9 @@
         [class^="pb_body"] {
           color: $text_default_dark;
         }
-        &.dropdown_trigger_wrapper_select_only {
-          box-shadow: inset 0 -11px 20px rgba($status_border_primary_dark, 0.05);
+        .pb_body_kit[data-dropdown-trigger-display],
+        .pb_body_kit[data-dropdown-trigger-display-multi-select] {
+          color: $input_text_default_dark;
         }
         .dropdown_input {
           background-color: unset;
@@ -413,6 +424,13 @@
         }
       }
 
+      &:has([data-dropdown-clear-icon]:not([style*="display: none"])),
+      &:has(.pb_dropdown_option_selected) {
+        .pb_body_kit[data-dropdown-trigger-display] {
+          color: $text_default_dark;
+        }
+      }
+
       &.error {
         .dropdown_trigger_wrapper,
         .dropdown_trigger_wrapper_focus,

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

@@ -197,6 +197,38 @@ test('placeholder shows default "Select..." when not provided', () => {
   expect(trigger).toHaveTextContent('Select...')
 })
 
+test('placeholder Body uses lighter color', () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+        placeholder="Choose a country"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const placeholderBody = kit.querySelector('.dropdown_trigger_wrapper_select_only .pb_body_kit_lighter')
+  expect(placeholderBody).toBeInTheDocument()
+  expect(placeholderBody).toHaveTextContent('Choose a country')
+})
+
+test('selected value Body does not use lighter color', () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        defaultValue={options[0]}
+        options={options}
+        placeholder="Choose a country"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const triggerBodies = kit.querySelectorAll('.dropdown_trigger_wrapper_select_only [class^="pb_body_kit"]')
+  const selectedBody = Array.from(triggerBodies).find((el) => el.textContent === options[0].label)
+  expect(selectedBody).toBeTruthy()
+  expect(selectedBody).not.toHaveClass('pb_body_kit_lighter')
+})
+
 test('generated label prop', () => { 
   render (
     <Dropdown

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

@@ -170,7 +170,9 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                     {customDisplay ? (
                       <Flex align="center">
                         {customDisplay}
-                        <Body dark={dark} 
+                        <Body
+                            color={customDisplayPlaceholder ? "lighter" : undefined}
+                            dark={dark}
                             paddingLeft={`${joinedLabels ? "xs" : "none"}`}
                         >
                           {customDisplayPlaceholder}
@@ -213,8 +215,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                         )}
                         </>
                       ) : (
-                        <Body dark={dark} 
-                            text={defaultDisplayPlaceholder} 
+                        <Body
+                            color={!joinedLabels && !autocomplete ? "lighter" : undefined}
+                            dark={dark}
+                            text={defaultDisplayPlaceholder}
                         />
                       )
                     )}

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

@@ -24,8 +24,10 @@ const MultiSelectTriggerDisplay = ({
   if (selected.length === 0) {
     if (autocomplete) return null;
     return (
-    <Body dark={dark} 
-        text={placeholder ? placeholder : "Select..."} 
+    <Body
+        color="lighter"
+        dark={dark}
+        text={placeholder ? placeholder : "Select..."}
     />
     )
   }

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_button.jsx

@@ -1,43 +1,60 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import Button from '../../pb_button/_button'
 import FormGroup from '../../pb_form_group/_form_group'
 import TextInput from '../../pb_text_input/_text_input'
 
-const FormGroupButton = (props) => (
-  <div>
-    <div>
-      <FormGroup>
-        <TextInput
-            id="search-with-label"
-            label="With Label"
-            placeholder="Search"
-            {...props}
-        />
-        <Button
-            onClick={() => alert('Button Clicked!')}
-            text="Submit"
-            variant="secondary"
-            {...props}
-        />
-      </FormGroup>
-    </div>
-    <br />
+const FormGroupButton = (props) => {
+  const [searchWithLabel, setSearchWithLabel] = useState('')
+  const [search, setSearch] = useState('')
+
+  const handleUpdateSearchWithLabel = ({ target }) => {
+    setSearchWithLabel(target.value)
+  }
+
+  const handleUpdateSearch = ({ target }) => {
+    setSearch(target.value)
+  }
+
+  return (
     <div>
-      <FormGroup>
-        <TextInput
-            placeholder="Search"
-            {...props}
-        />
-        <Button
-            onClick={() => alert('Button Clicked!')}
-            text="Submit"
-            variant="secondary"
-            {...props}
-        />
-      </FormGroup>
+      <div>
+        <FormGroup>
+          <TextInput
+              id="search-with-label"
+              label="With Label"
+              onChange={handleUpdateSearchWithLabel}
+              placeholder="Search"
+              value={searchWithLabel}
+              {...props}
+          />
+          <Button
+              onClick={() => alert('Button Clicked!')}
+              text="Submit"
+              variant="secondary"
+              {...props}
+          />
+        </FormGroup>
+      </div>
+      <br />
+      <div>
+        <FormGroup>
+          <TextInput
+              onChange={handleUpdateSearch}
+              placeholder="Search"
+              value={search}
+              {...props}
+          />
+          <Button
+              onClick={() => alert('Button Clicked!')}
+              text="Submit"
+              variant="secondary"
+              {...props}
+          />
+        </FormGroup>
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 export default FormGroupButton

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.jsx

@@ -1,26 +1,36 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import FormGroup from '../_form_group'
 
 import DatePicker from '../../pb_date_picker/_date_picker'
 import TextInput from '../../pb_text_input/_text_input'
 
-const FormGroupDatePicker = (props) => (
-  <div>
-    <FormGroup>
-      <TextInput
-          id="event-name"
-          label="Event"
-          placeholder="Event Name"
-          {...props}
-      />
-      <DatePicker
-          label="event date"
-          pickerId="date-picker-default"
-          {...props}
-      />
-    </FormGroup>
-  </div>
-)
+const FormGroupDatePicker = (props) => {
+  const [eventName, setEventName] = useState('')
+
+  const handleUpdateEventName = ({ target }) => {
+    setEventName(target.value)
+  }
+
+  return (
+    <div>
+      <FormGroup>
+        <TextInput
+            id="event-name"
+            label="Event"
+            onChange={handleUpdateEventName}
+            placeholder="Event Name"
+            value={eventName}
+            {...props}
+        />
+        <DatePicker
+            label="event date"
+            pickerId="date-picker-default"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+  )
+}
 
 export default FormGroupDatePicker

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_default.jsx

@@ -1,31 +1,53 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import FormGroup from '../_form_group'
 import TextInput from '../../pb_text_input/_text_input'
 
-const FormGroupDefault = (props) => (
-  <div>
-    <FormGroup>
-      <TextInput
-          id="first-name"
-          label="First Name"
-          placeholder="Enter First Name"
-          {...props}
-      />
-      <TextInput
-          id="middle-initial"
-          label="Middle Initial"
-          placeholder="Enter Middle Initial"
-          {...props}
-      />
-      <TextInput
-          id="last-name"
-          label="Last Name"
-          placeholder="Enter Last Name"
-          {...props}
-      />
-    </FormGroup>
-  </div>
-)
+const FormGroupDefault = (props) => {
+  const [formFields, setFormFields] = useState({
+    firstName: '',
+    middleInitial: '',
+    lastName: '',
+  })
+
+  const handleOnChange = ({ target }) => {
+    const { name, value } = target
+    setFormFields({ ...formFields, [name]: value })
+  }
+
+  return (
+    <div>
+      <FormGroup>
+        <TextInput
+            id="first-name"
+            label="First Name"
+            name="firstName"
+            onChange={handleOnChange}
+            placeholder="Enter First Name"
+            value={formFields.firstName}
+            {...props}
+        />
+        <TextInput
+            id="middle-initial"
+            label="Middle Initial"
+            name="middleInitial"
+            onChange={handleOnChange}
+            placeholder="Enter Middle Initial"
+            value={formFields.middleInitial}
+            {...props}
+        />
+        <TextInput
+            id="last-name"
+            label="Last Name"
+            name="lastName"
+            onChange={handleOnChange}
+            placeholder="Enter Last Name"
+            value={formFields.lastName}
+            {...props}
+        />
+      </FormGroup>
+    </div>
+  )
+}
 
 export default FormGroupDefault

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx

@@ -1,49 +1,78 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import FormGroup from '../_form_group'
 import TextInput from '../../pb_text_input/_text_input'
 import Button from '../../pb_button/_button'
 
-const FormGroupFullWidth = (props) => (
-  <div>
-    <div>
-      <FormGroup fullWidth>
-        <TextInput
-            id="first-name-full-width"
-            label="First Name"
-            placeholder="Enter First Name"
-            {...props}
-        />
-        <TextInput
-            id="middle-initial-full-width"
-            label="Middle Initial"
-            placeholder="Enter Middle Initial"
-            {...props}
-        />
-        <TextInput
-            id="last-name-full-width"
-            label="Last Name"
-            placeholder="Enter Last Name"
-            {...props}
-        />
-      </FormGroup>
-    </div>
-    <br />
+const FormGroupFullWidth = (props) => {
+  const [formFields, setFormFields] = useState({
+    firstName: '',
+    middleInitial: '',
+    lastName: '',
+  })
+  const [search, setSearch] = useState('')
+
+  const handleOnChange = ({ target }) => {
+    const { name, value } = target
+    setFormFields({ ...formFields, [name]: value })
+  }
+
+  const handleUpdateSearch = ({ target }) => {
+    setSearch(target.value)
+  }
+
+  return (
     <div>
-      <FormGroup fullWidth>
-        <TextInput
-            placeholder="Search"
-            {...props}
-        />
-        <Button
-            onClick={() => alert('Button Clicked!')}
-            text="Submit"
-            variant="secondary"
-            {...props}
-        />
-      </FormGroup>
+      <div>
+        <FormGroup fullWidth>
+          <TextInput
+              id="first-name-full-width"
+              label="First Name"
+              name="firstName"
+              onChange={handleOnChange}
+              placeholder="Enter First Name"
+              value={formFields.firstName}
+              {...props}
+          />
+          <TextInput
+              id="middle-initial-full-width"
+              label="Middle Initial"
+              name="middleInitial"
+              onChange={handleOnChange}
+              placeholder="Enter Middle Initial"
+              value={formFields.middleInitial}
+              {...props}
+          />
+          <TextInput
+              id="last-name-full-width"
+              label="Last Name"
+              name="lastName"
+              onChange={handleOnChange}
+              placeholder="Enter Last Name"
+              value={formFields.lastName}
+              {...props}
+          />
+        </FormGroup>
+      </div>
+      <br />
+      <div>
+        <FormGroup fullWidth>
+          <TextInput
+              onChange={handleUpdateSearch}
+              placeholder="Search"
+              value={search}
+              {...props}
+          />
+          <Button
+              onClick={() => alert('Button Clicked!')}
+              text="Submit"
+              variant="secondary"
+              {...props}
+          />
+        </FormGroup>
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 export default FormGroupFullWidth

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -8,9 +8,14 @@ import Flex from '../../pb_flex/_flex'
 import Passphrase from '../../pb_passphrase/_passphrase'
 
 const FormGroupSelect = (props) => {
+  const [artistName, setArtistName] = useState('')
   const [input, setInput] = useState("");
   const handleChange = (e) => setInput(e.target.value);
 
+  const handleUpdateArtistName = ({ target }) => {
+    setArtistName(target.value)
+  }
+
   const options = [
     { value: 'Country' },
     { value: 'Pop' },
@@ -36,7 +41,9 @@ const FormGroupSelect = (props) => {
     >
       <FormGroup>
         <TextInput
+            onChange={handleUpdateArtistName}
             placeholder="Enter Artist Name"
+            value={artistName}
             {...props}
         />
         <Select

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

@@ -253,8 +253,10 @@ $product_9_background:  #fcc419 !default;
 $product_9_highlight:   #ffd43b !default;
 $product_10_background: #20c997 !default;
 $product_10_highlight:  #38d9a9 !default;
-$product_11_background: #8D5500 !default;
-$product_11_highlight:  #A36D00 !default;
+$product_11_background: #635445 !default;
+$product_11_highlight:  #A48D77 !default;
+$product_12_background: #6F83AF !default;
+$product_12_highlight:  #7E94C6 !default;
 $windows:               $product_1_background !default; // deprecated
 $siding:                $product_2_background !default; // deprecated
 $doors:                 $product_3_background !default; // deprecated
@@ -293,7 +295,9 @@ $product_colors: (
   product_10_background:  $product_10_background,
   product_10_highlight:   $product_10_highlight,
   product_11_background:  $product_11_background,
-  product_11_highlight:   $product_11_highlight
+  product_11_highlight:   $product_11_highlight,
+  product_12_background:  $product_12_background,
+  product_12_highlight:   $product_12_highlight
 ) !default;
 
 /* Category colors ---------------------*/

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

@@ -7,6 +7,8 @@ $height_lg: 1024px !default;
 $height_xl: 1280px !default;
 $height_2xl: 1440px !default;
 $height_3xl: 1920px !default;
+$height_100_percent: 100% !default;
+$height_100vh: 100vh !default;
 $heights: (
   height_auto: $height_auto,
   height_xs: $height_xs,
@@ -15,5 +17,7 @@ $heights: (
   height_lg: $height_lg,
   height_xl: $height_xl,
   height_xxl: $height_2xl,
-  height_xxxl: $height_3xl
+  height_xxxl: $height_3xl,
+  height_100_percent: $height_100_percent,
+  height_100vh: $height_100vh
 );