playbook_ui 15.6.0.pre.alpha.play266913088 → 15.6.0.pre.rc.0

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -119,59 +119,6 @@ module Playbook
         end
       end
 
-      # Get header background color from column styling
-      def header_background_color(cell)
-        original_def = find_original_column_def_for_cell(cell)
-        return nil unless original_def
-
-        original_def.dig(:column_styling, :header_background_color)
-      end
-
-      # Get header font color from column styling
-      def header_font_color(cell)
-        original_def = find_original_column_def_for_cell(cell)
-        return nil unless original_def
-
-        original_def.dig(:column_styling, :header_font_color)
-      end
-
-      # Check if header has custom background color
-      def has_custom_header_background_color?(cell)
-        cell[:header_background_color].present?
-      end
-
-      # Returns component info for header cell (uses background kit if custom bg color)
-      def header_component_info(cell, cell_index, row_index)
-        header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}"
-        classname = [th_classname(is_first_column: cell_index.zero?), ("last-header-cell" if cell[:is_last_in_group] && cell_index != 0)].compact.join(" ")
-
-        if has_custom_header_background_color?(cell)
-          component_name = "background"
-          component_props = {
-            background_color: cell[:header_background_color],
-            tag: "th",
-            classname: classname,
-          }
-          component_props[:html_options] = {
-            id: header_id,
-            colspan: cell[:colspan],
-            style: { color: cell[:header_font_color] },
-          }
-          component_props[:html_options][:style].delete(:color) unless cell[:header_font_color].present?
-        else
-          component_name = "table/table_header"
-          component_props = {
-            id: header_id,
-            colspan: cell[:colspan],
-            classname: classname,
-            sort_menu: cell[:accessor] ? cell[:sort_menu] : nil,
-          }
-          component_props[:html_options] = { style: { color: cell[:header_font_color] } } if cell[:header_font_color].present?
-        end
-
-        { name: component_name, props: component_props }
-      end
-
     private
 
       # Find the original column definition for a cell
@@ -216,8 +163,6 @@ module Playbook
           else
             raw_styling = col[:column_styling] || {}
             header_alignment = raw_styling[:header_alignment]
-            header_background_color = raw_styling[:header_background_color]
-            header_font_color = raw_styling[:header_font_color]
 
             colspan = 1
             cell_hash = {
@@ -227,8 +172,6 @@ module Playbook
               sort_menu: col[:sort_menu],
               is_last_in_group: is_last && current_depth.positive?,
               header_alignment: header_alignment,
-              header_background_color: header_background_color,
-              header_font_color: header_font_color,
             }
             cell_hash[:id] = col[:id] if col[:id].present?
             rows[current_depth] << cell_hash

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -102,16 +102,16 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   useEffect(() => {
     const updateResponsiveProps = () => {
       setResponsiveProps({
-        backgroundSize: getResponsiveValue(backgroundSize),
-        backgroundPosition: getResponsiveValue(backgroundPosition),
-        backgroundRepeat: getResponsiveValue(backgroundRepeat),
-        backgroundColor: getResponsiveValue(backgroundColor),
-        imageUrl: getResponsiveValue(imageUrl),
+        backgroundSize: getResponsiveValue(props.backgroundSize),
+        backgroundPosition: getResponsiveValue(props.backgroundPosition),
+        backgroundRepeat: getResponsiveValue(props.backgroundRepeat),
+        backgroundColor: getResponsiveValue(props.backgroundColor),
+        imageUrl: getResponsiveValue(props.imageUrl),
       });
     };
     window.addEventListener('resize', updateResponsiveProps);
     return () => window.removeEventListener('resize', updateResponsiveProps);
-  }, [backgroundSize, backgroundPosition, backgroundRepeat, backgroundColor, imageUrl]);
+  }, [props]);
 
 
   // Extract currently applicable responsive values.

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -4,6 +4,7 @@ import Background from './_background'
 
 const props = {
   data: { testid: 'background' },
+  backgroundColor: null,
 }
 
 it('Should be accessible', async () => {
@@ -41,8 +42,3 @@ test('applies correct overlay class when imageOverlay prop is provided', () => {
   const kit = renderKit(Background, props, { imageOverlay: 'opacity_6' });
   expect(kit).toHaveClass('imageoverlay_opacity_6');
 });
-
-test('Sets backgroundColor to light as default when no backgroundColor prop is provided', () => {
-  const kit = renderKit(Background, props);
-  expect(kit).toHaveClass('pb_background_color_light');
-});

data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("background", props: { padding: "xl" }) do %>
+<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
 
 <% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -3,6 +3,7 @@ import Background from '../../pb_background/_background'
 
 const BackgroundLight = (props) => (
   <Background
+      backgroundColor="light"
       padding="xl"
       {...props}
   />

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

@@ -1,7 +1,7 @@
 examples:
 
   rails:
-  - background_light: Default
+  - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
@@ -11,7 +11,7 @@ examples:
   - background_size: Size
 
   react:
-  - background_light: Default
+  - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -25,11 +25,11 @@ exports[`html structure is correct 1`] = `
           >
             <div
               class="icon_wrapper"
-              style="vertical-align: middle;"
+              style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
               <svg
                 aria-label="chevron-down icon"
-                class="pb_custom_icon svg-inline--fa color_text_lt_lighter svg_lg svg_fw"
+                class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
                 color="currentColor"
                 fill="none"
                 height="auto"

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx

@@ -27,12 +27,12 @@ type colorMap = {
 };
 
 const colorMap = {
-  default:"text_lt_default",
-  light: "text_lt_light",
-  lighter: "text_lt_lighter",
-  link: "primary",
-  error: "error",
-  success: "text_dk_success_sm",
+  default: "#242B42",
+  light: "#687887",
+  lighter: "#C1CDD6",
+  link: "#0056CF",
+  error: "#FF2229",
+  success: "#00CA74",
 };
 
 const CollapsibleIcon = ({
@@ -68,10 +68,9 @@ const CollapsibleIcon = ({
               className="icon_wrapper"
               key={icon ? showIcon(icon)[0] : "chevron-down"}
               onClick={(e) => handleIconClick(e)}
-              style={{ verticalAlign: "middle"}}
+              style={{ verticalAlign: "middle", color: color }}
           >
             <Icon
-                color={color}
                 icon={icon ? showIcon(icon)[0] : "chevron-down"}
                 size={iconSize}
             />
@@ -81,10 +80,9 @@ const CollapsibleIcon = ({
               className="icon_wrapper"
               key={icon ? showIcon(icon)[1] : "chevron-up"}
               onClick={(e) => handleIconClick(e)}
-              style={{ verticalAlign: "middle" }}
+              style={{ verticalAlign: "middle", color: color }}
           >
             <Icon
-                color={color}
                 icon={icon ? showIcon(icon)[1] : "chevron-up"}
                 size={iconSize}
             />

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -7,6 +7,7 @@ const CollapsibleIcons = (props) => {
   <>
   <Collapsible
       icon={['plus','minus']}
+      iconColor='white'
   >
     <Collapsible.Main {...props}>
       <div>{'Main Section'}</div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx

@@ -22,6 +22,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -40,6 +41,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -58,6 +60,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
         <Collapsible.Main padding="sm" 

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -61,9 +61,7 @@ type ContactProps = {
   data?: { [key: string]: string }
   dark?: boolean
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
-  iconEnabled?: boolean
   id?: string
-  unstyled?: boolean
 }
 
 const Contact = (props: ContactProps): React.ReactElement => {
@@ -76,9 +74,7 @@ const Contact = (props: ContactProps): React.ReactElement => {
     data = {},
     dark = false,
     htmlOptions = {},
-    iconEnabled = true,
     id,
-    unstyled = false,
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -89,51 +85,6 @@ const Contact = (props: ContactProps): React.ReactElement => {
     className
   )
 
-  const formattedValue = formatContact(contactValue, contactType)
-  const content = (
-    <>
-      {iconEnabled && (contactType === 'email' ? (
-        <Icon 
-            className="svg-inline--fa envelope"
-            customIcon={envelopeIcon} 
-            dark={dark} 
-            fixedWidth 
-        />
-      ) : (
-        <Icon
-            dark={dark}
-            fixedWidth
-            icon={contactTypeMap[contactType] || 'phone'}
-        />
-      ))}
-      {iconEnabled ? ` ${formattedValue} ` : formattedValue}
-      {contactDetail && (
-        <Caption
-            dark={dark}
-            size="xs"
-            tag="span"
-            text={contactDetail}
-        />
-      )}
-    </>
-  )
-
-  // When unstyled, render just the content without Body wrapper
-  if (unstyled) {
-    return (
-      <span
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classes}
-          id={id}
-      >
-        {content}
-      </span>
-    )
-  }
-
-  // Default styled mode with Body wrapper
   return (
     <div
         {...ariaProps}
@@ -144,11 +95,33 @@ const Contact = (props: ContactProps): React.ReactElement => {
     >
       <Body
           className="pb_contact_kit"
-          color="light" 
+          color={"light"} 
           dark={dark}
           tag="span"
       >
-        {content}
+          {contactType === 'email' ? (
+            <Icon 
+                className="svg-inline--fa envelope"
+                customIcon={envelopeIcon} 
+                dark={dark} 
+                fixedWidth 
+            />
+          ) : (
+            <Icon
+                dark={dark}
+                fixedWidth
+                icon={contactTypeMap[contactType] || 'phone'}
+            />
+          )}
+        {` ${formatContact(contactValue, contactType)} `}
+        {contactDetail && (
+          <Caption
+              dark={dark}
+              size="xs"
+              tag="span"
+              text={contactDetail}
+          />
+        )}
       </Body>
     </div>
   )

data/app/pb_kits/playbook/pb_contact/contact.html.erb

@@ -1,23 +1,24 @@
-<% if object.unstyled %>
-  <%= content_tag :span, class: object.classname, id: object.id, data: object.data, aria: object.aria, **object.html_options do %>
-    <% if icon_enabled %>
-      <% if contact_type == "email" %>
-        <%= pb_rails("icon", props: { 
-              custom_icon: Playbook::Engine::root.join(envelope_path),
-              fixed_width: true,
-              dark: object.dark
-        }) %>
-      <% else %>
-        <%= pb_rails("icon", props: { 
-              icon: object.contact_icon, 
-              fixed_width: true,
-              dark: object.dark
-        }) %>
-      <% end %>
-      <%= " #{object.formatted_contact_value}" if object.contact_value %>
+<%= pb_content_tag do %>
+  <%= pb_rails("body", props: { 
+        tag: "span", 
+        classname: "pb_contact_kit", 
+        color: "light",
+        dark: object.dark
+  }) do %>
+    <% if contact_type == "email" %>
+      <%= pb_rails("icon", props: { 
+            custom_icon: Playbook::Engine::root.join(envelope_path),
+            fixed_width: true,
+            dark: object.dark
+      }) %>
     <% else %>
-      <%= object.formatted_contact_value if object.contact_value %>
+      <%= pb_rails("icon", props: { 
+            icon: object.contact_icon, 
+            fixed_width: true,
+            dark: object.dark
+      }) %>
     <% end %>
+    <%= object.formatted_contact_value if object.contact_value %>
 
     <%= pb_rails("caption", props: { 
           text: object.contact_detail, 
@@ -26,39 +27,4 @@
           dark: object.dark
         }) if object.contact_detail %>
   <% end %>
-<% else %>
-  <%= pb_content_tag do %>
-    <%= pb_rails("body", props: { 
-          tag: "span", 
-          classname: "pb_contact_kit", 
-          color: "light",
-          dark: object.dark
-    }) do %>
-      <% if icon_enabled %>
-        <% if contact_type == "email" %>
-          <%= pb_rails("icon", props: { 
-                custom_icon: Playbook::Engine::root.join(envelope_path),
-                fixed_width: true,
-                dark: object.dark
-          }) %>
-        <% else %>
-          <%= pb_rails("icon", props: { 
-                icon: object.contact_icon, 
-                fixed_width: true,
-                dark: object.dark
-          }) %>
-        <% end %>
-        <%= " #{object.formatted_contact_value}" if object.contact_value %>
-      <% else %>
-        <%= object.formatted_contact_value if object.contact_value %>
-      <% end %>
-
-      <%= pb_rails("caption", props: { 
-            text: object.contact_detail, 
-            tag: 'span', 
-            size: 'xs',
-            dark: object.dark
-          }) if object.contact_detail %>
-    <% end %>
-  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -8,8 +8,6 @@ module Playbook
       prop :contact_type
       prop :contact_value
       prop :contact_detail
-      prop :icon_enabled, type: Playbook::Props::Boolean, default: true
-      prop :unstyled, type: Playbook::Props::Boolean, default: false
 
       def classname
         generate_classname("pb_contact_kit")
@@ -46,15 +44,7 @@ module Playbook
         elsif contact_type == "international"
           contact_value
         else
-          # Check if number has leading 1 (US country code)
-          # Format like "+1 (212) 555-1234"
-          intl_code = ""
-          cleaned_number = formatted_value
-          if cleaned_number.length == 11 && cleaned_number.start_with?("1")
-            intl_code = "+1 "
-            cleaned_number = cleaned_number.sub(/^1/, "")
-          end
-          "#{intl_code}#{number_to_phone(cleaned_number, area_code: true)}"
+          number_to_phone(formatted_value, area_code: true)
         end
       end
 

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -149,79 +149,3 @@ test('international contact type preserves original format', () => {
   const kit = screen.getByTestId('test-international-format')
   expect(kit).toHaveTextContent('+44 20 7946 0958')
 })
-
-test('iconEnabled prop hides icon when false', () => {
-  render(
-    <>
-      <Contact
-          contactType="home"
-          contactValue="2125551234"
-          data={{ testid: 'test-with-icon' }}
-          iconEnabled
-      />
-      <Contact
-          contactType="home"
-          contactValue="2125551234"
-          data={{ testid: 'test-without-icon' }}
-          iconEnabled={false}
-      />
-    </>
-  )
-
-  // With icon enabled, should have icon
-  expect(screen.getByTestId('test-with-icon').querySelector('.pb_custom_icon')).toBeInTheDocument()
-  
-  // Without icon, should not have icon
-  expect(screen.getByTestId('test-without-icon').querySelector('.pb_custom_icon')).not.toBeInTheDocument()
-  
-  // But should still have the formatted phone number
-  expect(screen.getByTestId('test-without-icon')).toHaveTextContent('(212) 555-1234')
-})
-
-test('unstyled prop renders without Body wrapper', () => {
-  render(
-    <>
-      <Contact
-          contactType="home"
-          contactValue="2125551234"
-          data={{ testid: 'test-styled' }}
-      />
-      <Contact
-          contactType="home"
-          contactValue="2125551234"
-          data={{ testid: 'test-unstyled' }}
-          unstyled
-      />
-    </>
-  )
-
-  // Styled version should have Body wrapper with pb_contact_kit class
-  const styled = screen.getByTestId('test-styled')
-  const styledBody = styled.querySelector('span.pb_contact_kit')
-  expect(styledBody).toBeInTheDocument()
-  expect(styledBody).toHaveTextContent('(212) 555-1234')
-
-  // Unstyled version should be a span without Body wrapper
-  const unstyled = screen.getByTestId('test-unstyled')
-  expect(unstyled.tagName).toBe('SPAN')
-  expect(unstyled.querySelector('span.pb_contact_kit')).not.toBeInTheDocument()
-  expect(unstyled).toHaveTextContent('(212) 555-1234')
-})
-
-test('unstyled and iconEnabled work together', () => {
-  render(
-    <Contact
-        contactType="home"
-        contactValue="2125551234"
-        data={{ testid: 'test-unstyled-no-icon' }}
-        iconEnabled={false}
-        unstyled
-    />
-  )
-
-  const kit = screen.getByTestId('test-unstyled-no-icon')
-  expect(kit.tagName).toBe('SPAN')
-  expect(kit.querySelector('.pb_custom_icon')).not.toBeInTheDocument()
-  expect(kit.querySelector('.pb_body_kit')).not.toBeInTheDocument()
-  expect(kit).toHaveTextContent('(212) 555-1234')
-})

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

@@ -3,13 +3,11 @@ examples:
   rails:
   - contact_default: Default
   - contact_with_detail: Detail Indicator
-  - contact_unstyled: Unstyled
 
 
   react:
   - contact_default: Default
   - contact_with_detail: Detail Indicator
-  - contact_unstyled: Unstyled
 
 
   swift:

data/app/pb_kits/playbook/pb_contact/docs/index.js

@@ -1,3 +1,2 @@
 export { default as ContactDefault } from './_contact_default.jsx'
 export { default as ContactWithDetail } from './_contact_with_detail.jsx'
-export { default as ContactUnstyled } from './_contact_unstyled.jsx'

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -251,28 +251,4 @@ describe('DatePicker Kit', () => {
       expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + new Date().formatDate())
     })
   })
-
-
-  test('displays defaultDate when it is later than maxDate', async () => {
-    const testId = 'datepicker-out-of-range-after'
-    const futureDateString = '01/15/2020'
-    const maxDateString = '01/10/2020'
-    
-    render(
-      <DatePicker
-          data={{ testid: testId }}
-          defaultDate={futureDateString}
-          format="m/d/Y"
-          maxDate={maxDateString}
-          pickerId="date-picker-out-of-range-after"
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const input = within(kit).getByPlaceholderText('Select Date')
-
-    await waitFor(() => {
-      expect(input).toHaveValue('01/15/2020')
-    }, { timeout: 5000 })
-  })
 })