playbook_ui 15.5.0 → 15.6.0.pre.alpha.PLAY2686contactkittextonly13049

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a883729bcc3b37b0d4b1d155e4a7a27a6a598c8a0ceb563b0eb5516b56e3dff4
-  data.tar.gz: 2a3fef178d8aa3c10a6f91f66b5b2f8bcce5c63314b9c2a26a676877b0fa7c5d
+  metadata.gz: a30081dbc5a14dfeec79933dd490fe553502036499c58f64de1d148a0fba985e
+  data.tar.gz: b6cf7dd45fd95b0cc39435dd440bb3829648799a28295ca0fd5b0f7d324a07d2
 SHA512:
-  metadata.gz: b14d4934f5ee87c4513676c1d35fd7fce4187222567d2d516379b6dcf536183afc946d4264b8448ff91038e3b5f9a9492b06fd0229c74b462fb16f4ebb0fc0b4
-  data.tar.gz: bac6a862cb3f18a38877933a07c9abab89165f721867aba4eb0672bb0cc5448ec793fd2dfdd606d9e99b11b06fa60ab3e4ed4090cb95ac4a1f786f8afb9066c8
+  metadata.gz: ae9a12d8598e97d2326f6d8b6c65950a2316e511d1e22de76709c4fb416b3f67a61e02dbc895138b64ec80c2f68bfd26be27a2e0aaa1a07f439c4be7a3e87c63
+  data.tar.gz: 97507923ae090f97a814c18cbd242e3746f7481fd797e0f3b809ccc34c3a784644e9b5d5b5ac8c8ef407bc712f17d67f1e2c778c82c0abc1ac28aa070fa79285

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -791,6 +791,28 @@
       box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
     }
 
+    // Override last-header-cell border color in dark mode
+    .pb_advanced_table_header {
+      > tr:not(:first-child) {
+        .last-header-cell {
+          border-right: 1px solid $border_dark !important;
+        }
+      }
+
+      th[colspan]:not([colspan="1"]) {
+        border-right: 1px solid $border_dark !important;
+      }
+    }
+
+    // Override last-cell border color in dark mode for body cells
+    .pb_advanced_table_body {
+      tr {
+        .last-cell:not(:last-of-type) {
+          border-right: 1px solid $border_dark !important;
+        }
+      }
+    }
+
     // Apply border colors in dark mode
     &[class*="column-group-border-"] {
       // For top-level column groups (ENROLLMENT DATA, PERFORMANCE DATA)
@@ -850,7 +872,7 @@
     // Restore vertical border styling in dark mode when verticalBorder is true
     .pb_table[data-vertical-border="true"] {
       .pb_advanced_table_header {
-        > tr:not(:first-child) {
+        > tr {
           th:not(:last-child) {
             border-right: 1px solid $border_dark !important;
           }
@@ -864,11 +886,17 @@
         }
       }
 
+      tr.virtualized-table-row {
+        td:not(:last-child) {
+          border-right: 1px solid $border_dark !important;
+        }
+      }
+
       // When both verticalBorder AND columnGroupBorderColor are set in dark mode,
       // override the default border-dark with the custom color
       &.pb_advanced_table[class*="column-group-border-"] {
         .pb_advanced_table_header {
-          > tr:not(:first-child) {
+          > tr {
             th:not(:last-child) {
               border-right: 1px solid var(--column-border-color) !important;
             }
@@ -881,6 +909,12 @@
             border-right: 1px solid var(--column-border-color) !important;
           }
         }
+
+        tr.virtualized-table-row {
+          td:not(:last-child) {
+            border-right: 1px solid var(--column-border-color) !important;
+          }
+        }
       }
     }
 
@@ -985,34 +1019,90 @@
   // Firefox-specific fix for last-header-cell and last-cell vertical borders
   @-moz-document url-prefix() {
     .pb_advanced_table_header {
-      .last-header-cell:not(:last-child) {
+      th[colspan]:not([colspan="1"]):not(:last-child) {
+        border-right: none !important;
+        box-shadow: 1px 0 0 0 $border_light !important;
+      }
+
+      .last-header-cell:not(:last-child),
+      > tr:last-child .last-header-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
     .pb_advanced_table_body {
-      .last-cell:not(:last-child) {
+      tr .last-cell:not(:last-of-type),
+      td.last-cell:not(:last-child),
+      .pb_table_td.last-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
+    &[class*="column-group-border-"] {
+      .pb_advanced_table_header {
+        th[colspan]:not([colspan="1"]):not(:last-child),
+        .last-header-cell:not(:last-child),
+        > tr:last-child .last-header-cell:not(:last-child) {
+          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+        }
+      }
+
+      .pb_advanced_table_body {
+        tr .last-cell:not(:last-of-type),
+        td.last-cell:not(:last-child),
+        .pb_table_td.last-cell:not(:last-child) {
+          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+        }
+      }
+    }
+
     // Dark mode Firefox fixes
     &.dark {
       .pb_advanced_table_header {
-        .last-header-cell:not(:last-child) {
+        // Convert all colspan headers to box-shadow with dark color
+        th[colspan]:not([colspan="1"]) {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_dark !important;
+        }
+
+        // Convert all last-header-cell borders to box-shadow with dark color
+        .last-header-cell:not(:last-child),
+        > tr:last-child .last-header-cell:not(:last-child),
+        > tr:not(:first-child) .last-header-cell:not(:last-child),
+        > tr:not(:first-child) .last-header-cell:last-child {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
 
       .pb_advanced_table_body {
-        .last-cell:not(:last-child) {
+        tr .last-cell:not(:last-of-type),
+        td.last-cell:not(:last-child),
+        .pb_table_td.last-cell:not(:last-child) {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
+
+      &[class*="column-group-border-"] {
+        .pb_advanced_table_header {
+          th[colspan]:not([colspan="1"]):not(:last-child),
+          .last-header-cell:not(:last-child),
+          > tr:last-child .last-header-cell:not(:last-child) {
+            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+          }
+        }
+
+        .pb_advanced_table_body {
+          tr .last-cell:not(:last-of-type),
+          td.last-cell:not(:last-child),
+          .pb_table_td.last-cell:not(:last-child) {
+            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
+          }
+        }
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

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(props.backgroundSize),
-        backgroundPosition: getResponsiveValue(props.backgroundPosition),
-        backgroundRepeat: getResponsiveValue(props.backgroundRepeat),
-        backgroundColor: getResponsiveValue(props.backgroundColor),
-        imageUrl: getResponsiveValue(props.imageUrl),
+        backgroundSize: getResponsiveValue(backgroundSize),
+        backgroundPosition: getResponsiveValue(backgroundPosition),
+        backgroundRepeat: getResponsiveValue(backgroundRepeat),
+        backgroundColor: getResponsiveValue(backgroundColor),
+        imageUrl: getResponsiveValue(imageUrl),
       });
     };
     window.addEventListener('resize', updateResponsiveProps);
     return () => window.removeEventListener('resize', updateResponsiveProps);
-  }, [props]);
+  }, [backgroundSize, backgroundPosition, backgroundRepeat, backgroundColor, imageUrl]);
 
 
   // Extract currently applicable responsive values.

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

@@ -4,7 +4,6 @@ import Background from './_background'
 
 const props = {
   data: { testid: 'background' },
-  backgroundColor: null,
 }
 
 it('Should be accessible', async () => {
@@ -42,3 +41,8 @@ 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: { background_color: "light", padding: "xl" }) do %>
+<%= pb_rails("background", props: { padding: "xl" }) do %>
 
 <% end %>

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

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

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

@@ -0,0 +1 @@
+By default, the Background kit sets background color to 'light' as seen here. 

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

@@ -1,7 +1,7 @@
 examples:
 
   rails:
-  - background_light: Light
+  - background_light: Default
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
@@ -11,7 +11,7 @@ examples:
   - background_size: Size
 
   react:
-  - background_light: Light
+  - background_light: Default
   - 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/token/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/tokens/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/token/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/tokens/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; color: rgb(193, 205, 214);"
+              style="vertical-align: middle;"
             >
               <svg
                 aria-label="chevron-down icon"
-                class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
+                class="pb_custom_icon svg-inline--fa color_text_lt_lighter 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: "#242B42",
-  light: "#687887",
-  lighter: "#C1CDD6",
-  link: "#0056CF",
-  error: "#FF2229",
-  success: "#00CA74",
+  default:"text_lt_default",
+  light: "text_lt_light",
+  lighter: "text_lt_lighter",
+  link: "primary",
+  error: "error",
+  success: "text_dk_success_sm",
 };
 
 const CollapsibleIcon = ({
@@ -68,9 +68,10 @@ const CollapsibleIcon = ({
               className="icon_wrapper"
               key={icon ? showIcon(icon)[0] : "chevron-down"}
               onClick={(e) => handleIconClick(e)}
-              style={{ verticalAlign: "middle", color: color }}
+              style={{ verticalAlign: "middle"}}
           >
             <Icon
+                color={color}
                 icon={icon ? showIcon(icon)[0] : "chevron-down"}
                 size={iconSize}
             />
@@ -80,9 +81,10 @@ const CollapsibleIcon = ({
               className="icon_wrapper"
               key={icon ? showIcon(icon)[1] : "chevron-up"}
               onClick={(e) => handleIconClick(e)}
-              style={{ verticalAlign: "middle", color: color }}
+              style={{ verticalAlign: "middle" }}
           >
             <Icon
+                color={color}
                 icon={icon ? showIcon(icon)[1] : "chevron-up"}
                 size={iconSize}
             />

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

@@ -7,7 +7,6 @@ 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,7 +22,6 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
-        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -41,7 +40,6 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
-        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -60,7 +58,6 @@ 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,7 +61,9 @@ 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 => {
@@ -74,7 +76,9 @@ const Contact = (props: ContactProps): React.ReactElement => {
     data = {},
     dark = false,
     htmlOptions = {},
+    iconEnabled = true,
     id,
+    unstyled = false,
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -85,6 +89,51 @@ 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}
@@ -95,33 +144,11 @@ const Contact = (props: ContactProps): React.ReactElement => {
     >
       <Body
           className="pb_contact_kit"
-          color={"light"} 
+          color="light" 
           dark={dark}
           tag="span"
       >
-          {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}
-          />
-        )}
+        {content}
       </Body>
     </div>
   )

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

@@ -1,24 +1,23 @@
-<%= 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
-      }) %>
+<% 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 %>
     <% else %>
-      <%= pb_rails("icon", props: { 
-            icon: object.contact_icon, 
-            fixed_width: true,
-            dark: object.dark
-      }) %>
+      <%= object.formatted_contact_value if object.contact_value %>
     <% end %>
-    <%= object.formatted_contact_value if object.contact_value %>
 
     <%= pb_rails("caption", props: { 
           text: object.contact_detail, 
@@ -27,4 +26,39 @@
           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,6 +8,8 @@ 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")
@@ -44,7 +46,15 @@ module Playbook
         elsif contact_type == "international"
           contact_value
         else
-          number_to_phone(formatted_value, area_code: true)
+          # 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)}"
         end
       end
 

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

@@ -149,3 +149,79 @@ 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')
+})