playbook_ui 14.6.2.pre.alpha.PLAY1613darkdatetimecolors4432 → 14.6.2.pre.alpha.PLAY15814348

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: db6a77d5d0d5f2f583dec0ae055971d993b86ed35cebb3df70a3eb46c520f60e
-  data.tar.gz: 9f214f19a94bce463d9561600773513112947c453c8a87248c4a37740103ac47
+  metadata.gz: 014bc2684f60ff1adb9fdcdf0d8602a2ca8a0d7b47389b12af8a5a5402fa5017
+  data.tar.gz: 949941602000ddd6530a70c74d8cb647ea7c95537895bd7abb2abc3e09d96926
 SHA512:
-  metadata.gz: 6d30fd7598b3c3094e108bfe2f611be040ccdc4ce8bdfdf085c6757e62b386031f890e58607e825da501479e5734974f8134fb4738a0890d1bf8caf5fb923da2
-  data.tar.gz: 19958248e4ee7a1a3d13efc7ba1debe4891bc58bd2ff790b33fc272a739a24789d98454b6e61b61210fafb5ceef4af94afe75f27a77122fde54b91fca6e0bd76
+  metadata.gz: ee89877910514e40e1203e7d920bdc9e778598740db0b38006d39a1441c2e1ab7c014061c533d8685038aa63ba4825f3c1fd9df504b881b13bf0314a242b1ecf
+  data.tar.gz: 201c7a4d5b40a73f97a1b17727d900aff6bf1e0dea35944c78c11953bfc97cff720a4f913aac7017ca19704cbdba8ebbcf6b6d584f15ec88d396ea212322fdcd

data/app/pb_kits/playbook/_playbook.scss

@@ -1,3 +1,4 @@
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
@@ -84,7 +85,6 @@
 @import 'pb_selectable_card_icon/selectable_card_icon';
 @import 'pb_selectable_icon/selectable_icon';
 @import 'pb_selectable_list/selectable_list';
-@import 'pb_skeleton_loading/skeleton_loading';
 @import 'pb_source/source';
 @import 'pb_star_rating/star_rating';
 @import 'pb_stat_change/stat_change';

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -16,7 +16,6 @@ interface CustomCellProps {
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   row: Row<GenericObject>
   value?: string
-  customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
 } 
 
 export const CustomCell = ({
@@ -24,7 +23,6 @@ export const CustomCell = ({
   onRowToggleClick,
   row,
   value,
-  customRenderer,
 }: CustomCellProps & GlobalProps) => {
   const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
 
@@ -63,12 +61,7 @@ export const CustomCell = ({
           </button>
         ) : null}
         <FlexItem paddingLeft={renderButton? "none" : "xs"}>
-          {row.depth === 0 ? (
-            customRenderer ? customRenderer(row, getValue()) : getValue()
-           ) :(
-            customRenderer ? customRenderer(row, value) : value
-           )
-           }
+          {row.depth === 0 ? getValue() : value}
         </FlexItem>
       </Flex>
     </div>

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

@@ -90,8 +90,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
 
   const columnHelper = createColumnHelper()
 
-  //Create cells for columns, with customization for first column
-  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, index?: number) => {
+  //Create cells for first columns
+  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element) => {
     const columnCells = ({
       row,
       getValue,
@@ -101,16 +101,19 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }) => {
       const rowData = row.original
 
-    if (index === 0) {
+    // Use customRenderer if provided, otherwise default rendering
+    if (customRenderer) {
+      return customRenderer(row, getValue())
+    }
+
       switch (row.depth) {
         case 0: {
           return (
-                <CustomCell
-                    customRenderer={customRenderer}
-                    getValue={getValue}
-                    onRowToggleClick={onRowToggleClick}
-                    row={row}
-                />
+            <CustomCell
+                getValue={getValue}
+                onRowToggleClick={onRowToggleClick}
+                row={row}
+            />
           )
         }
         default: {
@@ -119,7 +122,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           const accessorValue = rowData[depthAccessor]
           return accessorValue ? (
             <CustomCell
-                customRenderer={customRenderer}
                 onRowToggleClick={onRowToggleClick}
                 row={row} 
                 value={accessorValue} 
@@ -130,13 +132,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         }
       }
     }
-    return customRenderer
-    ? customRenderer(row, getValue())
-    : getValue()
-    }
+
     return columnCells
   }
-//Create column array in format needed by Tanstack
+
+  //Create column array in format needed by Tanstack
   const columns =
     columnDefinitions &&
       columnDefinitions.map((column, index) => {
@@ -147,12 +147,19 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         }),
       }
 
-  if (column.cellAccessors || column.customRenderer) {
-    columnStructure.cell = createCellFunction(
-      column.cellAccessors,
-      column.customRenderer,
-      index
-    )
+  // Use the custom renderer if provided, EXCEPT for the first column
+  if (index !== 0) {
+    if (column.cellAccessors || column.customRenderer) {
+      columnStructure.cell = createCellFunction(
+        column.cellAccessors,
+        column.customRenderer
+      )
+    }
+  } else {
+    // For the first column, apply createCellFunction without customRenderer
+    if (column.cellAccessors) {
+      columnStructure.cell = createCellFunction(column.cellAccessors)
+    }
   }
 
   return columnStructure

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from "react"
 import { render, screen, waitFor } from "../utilities/test-utils"
 
-import { AdvancedTable, Pill } from "playbook-ui"
+import { AdvancedTable } from "playbook-ui"
 
 const MOCK_DATA = [
   {
@@ -88,28 +88,6 @@ const columnDefinitions = [
   },
 ]
 
-const columnDefinitionsCustomRenderer = [
-  {
-    accessor: "year",
-    label: "Year",
-    cellAccessors: ["quarter", "month", "day"],
-  },
-  {
-    accessor: "newEnrollments",
-    label: "New Enrollments",
-    customRenderer: (row, value) => (
-      <Pill text={value} 
-          variant="success"    
-      />
-    ),
-  },
-  {
-    accessor: "scheduledMeetings",
-    label: "Scheduled Meetings",
-  },
-]
-
-
 const subRowHeaders = ["Quarter"]
 
 const testId = "advanced_table"
@@ -485,17 +463,3 @@ test("responsive none prop functions as expected", () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
 })
-
-test("customRenderer prop functions as expected", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitionsCustomRenderer}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const pill = kit.querySelector(".pb_pill_kit_success_lowercase")
-  expect(pill).toBeInTheDocument()
-})

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable, Pill, Body, Flex, Detail, Caption, Badge, Title } from "playbook-ui"
+import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCustomCell = (props) => {
@@ -8,18 +8,7 @@ const AdvancedTableCustomCell = (props) => {
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
-      customRenderer: (row, value) => (
-        <Flex>
-          <Title size={4}
-              text={value} 
-          />
-          <Badge dark
-              marginLeft="xxs"
-              text={row.original.newEnrollments > 20 ? "High" : "Low"}
-              variant="neutral"
-          />
-        </Flex>
-      ), 
+
     },
     {
       accessor: "newEnrollments",

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -109,8 +109,8 @@ const Card = (props: CardPropTypes): React.ReactElement => {
   // coerce to array
   const cardChildren = React.Children.toArray(children)
   const dynamicInlineProps = globalInlineProps(props);
-  const { style: htmlStyle = {}, ...restHtmlProps } = htmlProps as { style?: React.CSSProperties };
-  const mergedStyles: React.CSSProperties = { ...htmlStyle, ...dynamicInlineProps };
+  const { style: htmlStyle, ...restHtmlProps } = htmlProps;
+  const mergedStyles = { ...htmlStyle, ...dynamicInlineProps };
 
 
   const subComponentTags = (tagName: string) => {
@@ -135,6 +135,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
         <Draggable.Item dragId={dragId} 
             key={dragId}
         >
+          <h1>{htmlProps}</h1>
         <Tag
             {...ariaProps}
             {...dataProps}

data/app/pb_kits/playbook/pb_card/docs/_card_light.jsx

@@ -1,12 +1,26 @@
-import React from 'react'
-import Card from '../_card'
+import React from "react"
+import Card from "../_card"
 
 const CardLight = (props) => {
   return (
     <div>
-      <Card {...props}>{'Card content'}</Card>
+      <Card
+          height="100%"
+          htmlOptions={{
+            style: {
+              width: "100%",
+              backgroundColor: "blue",
+            },
+            tabIndex: 7
+          }}
+          minHeight="189px"
+          {...props}
+      >
+        {"HELLO WORLD!!!"}
+      </Card>
     </div>
   )
 }
 
 export default CardLight
+

data/app/pb_kits/playbook/pb_date/_date.scss

@@ -28,8 +28,5 @@
         [class^=pb_title_kit] {
             color: $text_dk_default !important;
         }
-        [class^=pb_body_kit], [class^=pb_caption_kit] {
-            color: $text_dk_light !important;
-        }
     }
 }

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

@@ -47,7 +47,7 @@ interface DropdownComponent
     Container: typeof DropdownContainer;
 }
 
-let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
+const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const {
         aria = {},
         autocomplete = false,
@@ -260,7 +260,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                             <DropdownContainer>
                                 {optionsWithBlankSelection &&
                                     optionsWithBlankSelection?.map((option: GenericObject) => (
-                                        <DropdownOption key={option.id}
+                                        <Dropdown.Option key={option.id}
                                             option={option}
                                         />
                                     ))}
@@ -278,12 +278,11 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             </DropdownContext.Provider>
         </div>
     )
-}
+}) as DropdownComponent
 
-Dropdown = forwardRef(Dropdown) as unknown as DropdownComponent;
-(Dropdown as DropdownComponent).displayName = "Dropdown";
-(Dropdown as DropdownComponent).Option = DropdownOption;
-(Dropdown as DropdownComponent).Trigger = DropdownTrigger;
-(Dropdown as DropdownComponent).Container = DropdownContainer;
+Dropdown.displayName = "Dropdown";
+Dropdown.Option = DropdownOption;
+Dropdown.Trigger = DropdownTrigger;
+Dropdown.Container = DropdownContainer;
 
 export default Dropdown;

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -142,9 +142,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     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,
-    + div .pb_form_pill_text, + div .pb_form_pill_tag {
+    + .pb_form_pill_text, + .pb_form_pill_tag {
       padding-left: 0;
     }
   }
@@ -171,9 +169,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     }
     .pb_form_pill_icon {
       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,
-      + div .pb_form_pill_text, + div .pb_form_pill_tag {
+      + .pb_form_pill_text, + .pb_form_pill_tag {
         padding-left: 0;
       }
     }

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -3,7 +3,6 @@ import classnames from 'classnames'
 import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
-import Tooltip from '../pb_tooltip/_tooltip'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
@@ -63,30 +62,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
-  const renderTitle = (content: string, className: string) => {
-    const titleComponent = (
-      <Title
-          className={className}
-          size={4}
-          text={content}
-          truncate={props.truncate}
-      />
-    )
-    if (props.truncate) {
-      return (
-        <Tooltip
-            interaction
-            placement="top"
-            position="fixed"
-            text={content}
-        >
-          {titleComponent}
-        </Tooltip>
-      )
-    }
-    return titleComponent
-  }
-
   return (
     <div className={css}
         id={id}
@@ -102,7 +77,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               size="xxs"
               status={null}
           />
-          {renderTitle(name, "pb_form_pill_text")}
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+              truncate={props.truncate}
+          />
         </>
       )}
       {((name && icon && !text) || (name && icon && text)) && (
@@ -113,7 +93,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               size="xxs"
               status={null}
           />
-          {renderTitle(name, "pb_form_pill_text")}
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+              truncate={props.truncate}
+          />
           <Icon
               className="pb_form_pill_icon"
               color={color}
@@ -128,10 +113,22 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               color={color}
               icon={icon}
           />
-          {renderTitle(text, "pb_form_pill_tag")}
+          <Title
+              className="pb_form_pill_tag"
+              size={4}
+              text={text}
+              truncate={props.truncate}
+          />
         </>
       )}
-      {(!name && !icon && text) && renderTitle(text, "pb_form_pill_tag")}
+      {(!name && !icon && text) && (
+        <Title
+            className="pb_form_pill_tag"
+            size={4}
+            text={text}
+            truncate={props.truncate}
+        />
+      )}
       <div
           className="pb_form_pill_close"
           onClick={onClick}
@@ -146,5 +143,4 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     </div>
   )
 }
-
 export default FormPill

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -13,30 +13,7 @@
     id: "typeahead-form-pill",
     is_multi: true,
     options: names,
-    label: "Truncation Within Typeahead",
+    label: "Names",
     pills: true,
     truncate: 1,
 }) %>
-
-<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
-<%= pb_rails("card", props: { max_width: "xs" })  do %>
-  <%= pb_rails("form_pill", props: {
-      name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
-      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-      tabindex: 0,
-      truncate: 1,
-      id: "truncation-1"
-  }) %>
-  <%= pb_rails("form_pill", props: {
-      icon: "badge-check",
-      text: "icon and a very long tag to show truncation",
-      tabindex: 0,
-      truncate: 1,
-      id: "truncation-2"
-  }) %>
-  <%= pb_rails("form_pill", props: {
-      text: "form pill long tag no tooltip show truncation",
-      tabindex: 0,
-      truncate: 1,
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,34 +15,11 @@ const FormPillTruncatedText = (props) => {
       <Typeahead
           htmlOptions={{ style: { maxWidth: "240px" }}}
           isMulti
-          label="Truncation Within Typeahead"
+          label="Names"
           options={names}
           truncate={1}
           {...props}
       />
-      <Caption text="Form Pill Truncation"/>
-      <Card maxWidth="xs">
-        <FormPill
-            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-            name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
-            onClick={() => alert('Click!')}
-            tabIndex={0}
-            truncate={1}
-        />
-        <FormPill
-            icon="badge-check"
-            onClick={() => {alert('Click!')}}
-            tabIndex={0}
-            text="icon and a very long tag to show truncation"
-            truncate={1}
-        />
-        <FormPill
-            onClick={() => {alert('Click!')}}
-            tabIndex={0}
-            text="form pill with a very long tag to show truncation"
-            truncate={1}
-        />
-      </Card>
     </>
   )
 }

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md

@@ -0,0 +1 @@
+For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,57 +1,19 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
-    <% if object.truncate %>
-      <div>
-        <%= pb_rails("title", props: { 
-          classname: "pb_form_pill_text truncate_#{object.truncate}",
-          id: object.id,
-          size: 4, 
-          text: object.name,
-        }) %>
-        <% if object.id.present? %>
-          <%= pb_rails("tooltip", props: {
-            position: "top",
-            tooltip_id: "tooltip-#{object.id}",
-            trigger_element_selector: "##{object.id}"
-          }) do %>
-            <%= object.name %>
-          <% end %>
-        <% end %>
-      </div>
-    <% else %>
-      <%= pb_rails("title", props: { classname: "pb_form_pill_text", id: object.id, size: 4, text: object.name }) %>
-    <% end %>
+    <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
     <% if object.icon.present? %>
       <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
     <% end %>
   <% elsif object.text.present? %>
-    <% if object.icon.present? %>
-      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
-    <% end %>
-    <% if object.truncate %>
-      <div>
-        <%= pb_rails("title", props: { 
-          classname: "pb_form_pill_tag truncate_#{object.truncate}",
-          id: object.id,
-          size: 4, 
-          text: object.text,
-        }) %>
-        <% if object.id.present? %>
-          <%= pb_rails("tooltip", props: {
-            position: "top",
-            tooltip_id: "tooltip-#{object.id}",
-            trigger_element_selector: "##{object.id}"
-          }) do %>
-            <%= object.text %>
-          <% end %>
-        <% end %>
-      </div>
-    <% else %>
-      <%= pb_rails("title", props: { classname: "pb_form_pill_tag", id: object.id, size: 4, text: object.text, }) %>
-    <% end %>
+      <% if object.icon.present? %>
+        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
+      <% end %>
+      <% if object.text.present? %>
+        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
+      <% end %>
   <% end %>
   <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
     <%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
   <% end %>
-<% end %>
+<% end %>