playbook_ui 16.9.0.pre.alpha.PLAY3039advancedtablerowstylingfontweight17275 → 16.9.0.pre.alpha.PLAY296917309

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aaaf092e7f6ec7404c2aafef49c1612cec47257cfdd7d80ea278a7f1a1ad24a0
-  data.tar.gz: c3b17a2681f4311bdf24f3d8f86d90c74c53b359f488ac242a19a06099843b2c
+  metadata.gz: 97faa7a55c20413300483dd41c7a96ddfe7e48b7d614f81f189e89fc69d4fbcf
+  data.tar.gz: 67815662958bd8ac1d55ccdf78414cda7f7bb1985192bdb6dc71848e6109e7e0
 SHA512:
-  metadata.gz: 5639107285d6b3a0717623a3ddde853d6f92b3077d333c3ff31814e4001fa63d0de5f46f4b2b4e9f4ecfc8385eecb3355ee56d6334b9723d01df0a4dd3794422
-  data.tar.gz: 2f317fb05bad351669248f3e4e1a002891923e9da196f50438cdb6dc6806ca1f7d315a8357d4abfddd00622904b0cd916ab94f8ec7640b30aa4af74366cdff77
+  metadata.gz: c8995b74810117c3bea3a67463740e0d495a83c2a0b6b42869654f85e5711943d45aca45d959df29538d339ded23ce50cbd40f6020a1c35ad5f7cc3adbf6804a
+  data.tar.gz: cbc8380debcdd9a5c368c7c209ce0ddc9be5bdcec1a99c9afc72cae8d4f462b34018bf597821fd84a33a13fb96da2fb4ce14705ad759fa149cd5687cdf2118b7

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

@@ -6,7 +6,7 @@ import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
 import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
-import { getFontWeight, getRowColorClass, getRowStyle, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
+import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -81,7 +81,6 @@ const TableCellRenderer = ({
         
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
-        const fontWeight = getFontWeight(customRowStyle)
 
         return (
           <td
@@ -104,7 +103,6 @@ const TableCellRenderer = ({
                   : undefined,
                   backgroundColor: cellBackgroundColor || (i === 0 && customRowStyle?.backgroundColor),
                   color: cellFontColor || customRowStyle?.fontColor,
-                  fontWeight,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
@@ -163,7 +161,7 @@ export const RegularTableView = ({
 
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
-    const customRowStyle = getRowStyle(rowStyling, row);
+    const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
     return (
       <tr
           className={classnames(
@@ -177,8 +175,7 @@ export const RegularTableView = ({
               row.getIsPinned() === 'top'
                   ? `${row.getPinnedIndex() * rowHeight + headerHeight + actionBarHeight}px`
                   : undefined,
-            zIndex: '3',
-            fontWeight: getFontWeight(customRowStyle),
+            zIndex: '3'
           }}
       >
         <TableCellRenderer
@@ -208,7 +205,7 @@ export const RegularTableView = ({
         const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
         const numberOfColumns = table.getAllFlatColumns().length;
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
-        const customRowStyle = getRowStyle(rowStyling, row);
+        const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
 
         // Use functions from RowUtils for consistent cell coloring
         const rowColor = getRowColorClass(row, inlineRowLoading || false);
@@ -231,11 +228,7 @@ export const RegularTableView = ({
                 className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
                 ref={isFirstRegularRow ? sampleRowRef : null}
-                style={{
-                  backgroundColor: customRowStyle?.backgroundColor,
-                  color: customRowStyle?.fontColor,
-                  fontWeight: getFontWeight(customRowStyle),
-                }}
+                style={{backgroundColor: customRowStyle?.backgroundColor, color: customRowStyle?.fontColor}}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -39,7 +39,7 @@ interface UseTableStateProps {
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
-  rowStyling?: GenericObject[];
+  rowStyling?: GenericObject;
   inlineRowLoading?: boolean;
   sortParentOnly?: boolean;
 }
@@ -150,7 +150,7 @@ export function useTableState({
 
       return columnStructure;
     }) || [];
-  }, [columnHelper, onRowToggleClick, rowStyling, selectableRows]);
+  }, [columnHelper, onRowToggleClick, selectableRows]);
 
   const columns = useMemo(() => buildColumns(columnDefinitions), [buildColumns, columnDefinitions]);
 

data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { Row, Getter } from "@tanstack/react-table";
 import { GenericObject } from "../../types";
 import { CustomCell } from "../Components/CustomCell";
-import { getRowStyle } from "./RowUtils";
 
 /**
  * Creates a cell render function for table columns
@@ -19,7 +18,7 @@ export const createCellFunction = (
   isFirstColumn?: boolean,
   onRowToggleClick?: (row: Row<GenericObject>) => void,
   selectableRows?: boolean,
-  rowStyling?: GenericObject[]
+  rowStyling?: GenericObject
 ) => {
   // Add display name to the returned function
   const cellRenderer = ({
@@ -30,7 +29,7 @@ export const createCellFunction = (
     getValue: Getter<string>
   }) => {
     const rowData = row.original;
-    const customStyle = getRowStyle(rowStyling, row);
+    const customStyle = rowStyling?.length > 0 && rowStyling?.find((s:GenericObject) => s?.rowId === row.id);
 
     if (isFirstColumn) {
       switch (row.depth) {
@@ -53,7 +52,6 @@ export const createCellFunction = (
           return accessorValue ? (
             <CustomCell
                 customRenderer={customRenderer}
-                customStyle={customStyle}
                 onRowToggleClick={onRowToggleClick}
                 row={row}
                 selectableRows={selectableRows}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts

@@ -36,23 +36,6 @@ export const shouldShowLoadingIndicator = (
     (row.depth < cellAccessorsLength);
 }
 
-export const getRowStyle = (
-  rowStyling: GenericObject[] | undefined,
-  row: Row<GenericObject>
-) => {
-  const rowId = row.original?.id ?? row.id
-  if (rowId == null) return
-
-  return rowStyling?.find((style: GenericObject) => (
-    String(style?.rowId) === String(rowId)
-  ))
-}
-
-export const getFontWeight = (rowStyle?: GenericObject) => {
-  if (rowStyle?.fontWeight === "bold") return 700
-  if (rowStyle?.fontWeight === "regular") return 400
-}
-
 /**
  * Creates a virtual item style object for virtualized rows
  */

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

@@ -429,55 +429,6 @@
     @include scrollbar-styling;
   }
 
-  // Fullscreen
-  &.advanced-table-allow-fullscreen {
-    transition: all 0.3s ease;
-  }
-
-  &.advanced-table-fullscreen {
-    background-color: $bg_light;
-    box-sizing: border-box;
-    height: 100vh;
-    left: 0;
-    overflow: auto;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: $z_10;
-
-    .pb_table {
-      th,
-      td,
-      div,
-      button {
-        font-size: calc(100%);
-      }
-      box-sizing: border-box;
-      margin: $space_lg;
-      max-width: calc(100% - 64px);
-      width: calc(100% - 64px);
-    }
-
-    .pb_table.sticky-header {
-      thead,
-      .pb_advanced_table_header {
-        position: sticky !important;
-        top: calc(44px + var(--advanced-table-action-bar-height, 0px)) !important;
-        z-index: $z_10;
-      }
-    }
-  }
-
-  .advanced-table-fullscreen-header {
-    background-color: $white;
-    height: 44px;
-    padding: 13px 20px;
-    position: sticky;
-    top: 0;
-    width: 100%;
-    z-index: $z_10;
-  }
-
   // Icons
   .button-icon {
     display: flex;
@@ -535,16 +486,6 @@
     }
   }
 
-  .fullscreen-icon {
-    @extend .button-icon;
-    @extend %primary-color-pseudo;
-    padding: 2px 0;
-
-    &:focus-visible {
-      border-radius: $border_rad_lighter;
-    }
-  }
-
   // First column separator/border
   .table-header-cells:first-child,
   .table-header-cells-custom:first-child,
@@ -1037,18 +978,6 @@
       }
     }
 
-    // Fullscreen
-    &.advanced-table-fullscreen {
-      background: $bg_dark;
-    }
-
-    .advanced-table-fullscreen-header {
-      background-color: $bg_dark_card;
-      position: sticky;
-      top: 0;
-      z-index: $z_10;
-    }
-
     &[class*="advanced-table-sticky-left-columns"] {
       .sticky-left {
         background-color: $bg_dark;

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, useCallback } from "react";
+import React, { useRef, useEffect } from "react";
 import classnames from "classnames";
 
 import { GenericObject } from "../types";
@@ -20,15 +20,6 @@ import { useTableState } from "./Hooks/useTableState";
 import { useTableActions } from "./Hooks/useTableActions";
 import { updateStickyLayoutHeights, scheduleStickyActionBarHeightUpdate } from "./Utilities/StickyLayoutHelper";
 
-import Card from "../pb_card/_card"
-import Flex from "../pb_flex/_flex"
-import Icon from "../pb_icon/_icon"
-
-type FullscreenControls = {
-  toggleFullscreen: () => void;
-  isFullscreen: boolean;
-};
-
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
   actions?: React.ReactNode[] | React.ReactNode
@@ -75,8 +66,6 @@ type AdvancedTableProps = {
   onRowSelectionChange?: (arg: RowSelectionState) => void
   onCustomSortClick?: (arg: GenericObject[]) => void
   virtualizedRows?: boolean
-  allowFullScreen?: boolean
-  fullScreenControl?: (controls: FullscreenControls) => void
 } & GlobalProps;
 
 /**
@@ -136,8 +125,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
     virtualizedRows = false,
-    allowFullScreen = false,
-    fullScreenControl,
   } = props;
 
   const noTableCardContainer = tableProps?.container === false;
@@ -215,68 +202,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     );
   }, [fetchMoreOnBottomReached, fetchNextPage, isFetching, totalFetched, fullData.length]);
 
-  // Fullscreen
-  const [isFullscreen, setIsFullscreen] = useState(false)
-
-  const toggleFullscreen = useCallback(() => {
-    setIsFullscreen(prevState => !prevState)
-  }, [])
-
-  useEffect(() => {
-    if (allowFullScreen && fullScreenControl) {
-      fullScreenControl({
-        toggleFullscreen,
-        isFullscreen
-      })
-    }
-  }, [allowFullScreen, fullScreenControl, toggleFullscreen, isFullscreen])
-
-  const renderFullscreenHeader = () => {
-    if (!isFullscreen) return null
-
-    const defaultMinimizeIcon = (
-      <button
-          className="gray-icon fullscreen-icon"
-          onClick={toggleFullscreen}
-      >
-        <Icon
-            cursor="pointer"
-            fixedWidth
-            icon="arrow-down-left-and-arrow-up-right-to-center"
-            {...props}
-        />
-      </button>
-    )
-
-    return (
-      <Card
-          borderNone
-          borderRadius="none"
-          className="advanced-table-fullscreen-header"
-          {...props}
-      >
-          <Flex justify="end">
-            {defaultMinimizeIcon}
-          </Flex>
-      </Card>
-    )
-  }
-
-  useEffect(() => {
-    if (!allowFullScreen) return
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isFullscreen) {
-        event.preventDefault()
-        toggleFullscreen()
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [allowFullScreen, toggleFullscreen, isFullscreen])
-
   // Build CSS classes and props
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -317,8 +242,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     `advanced-table-responsive-${responsive}`,
     maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
     {
-      'advanced-table-fullscreen': isFullscreen,
-      'advanced-table-allow-fullscreen': allowFullScreen,
       // Add the hidden-action-bar class when action bar functionality exists but is not visible
       'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
@@ -387,7 +310,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           ref={tableWrapperRef}
           style={tableWrapperStyle as React.CSSProperties}
       >
-        {renderFullscreenHeader()}
         <AdvancedTableProvider
             cascadeCollapse={cascadeCollapse}
             columnDefinitions={columnDefinitions}
@@ -404,7 +326,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             hasAnySubRows={hasAnySubRows}
             inlineRowLoading={inlineRowLoading}
             isActionBarVisible={isActionBarVisible}
-            isFullscreen={isFullscreen}
             loading={loading}
             onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}

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

@@ -696,19 +696,6 @@ test("customRenderer prop functions as expected", () => {
   expect(pill).toBeInTheDocument()
 })
 
-test("allowFullScreen prop adds fullscreen class", () => {
-  render(
-    <AdvancedTable
-        allowFullScreen
-        columnDefinitions={columnDefinitions}
-        tableData={MOCK_DATA}
-    />
-  )
-
-  const tableContainer = screen.getByRole("table").closest("div")
-  expect(tableContainer).toHaveClass("advanced-table-allow-fullscreen")
-})
-
 test("pinnedRows prop renders pinned rows at top", () => {
   const pinnedRowsControl = {
     value: { top: ["1", "3"] },
@@ -1055,12 +1042,7 @@ test("rowStyling prop works as expected", () => {
   {
     rowId: "1",
     backgroundColor: colors.white,
-    fontColor: colors.black,
-    fontWeight: "bold",
-  },
-  {
-    rowId: "2",
-    fontWeight: "regular",
+    fontColor: colors.black
   },
 ];
 
@@ -1077,55 +1059,6 @@ test("rowStyling prop works as expected", () => {
   const tableBody = kit.querySelector('tbody')
   const row1 = tableBody.querySelector('tr:nth-child(1)') 
   expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
-  expect(row1).toHaveStyle({fontWeight: "700"})
-  const row2 = tableBody.querySelector('tr:nth-child(2)')
-  expect(row2).toHaveStyle({fontWeight: "400"})
-})
-
-test("rowStyling fontWeight applies to expandable rows", () => {
-  const rowStyling = [
-    {
-      rowId: "1",
-      fontWeight: "bold",
-    },
-  ];
-
-  const tableData = [
-    {
-      id: "1",
-      year: "2021",
-      quarter: null,
-      month: null,
-      day: null,
-      newEnrollments: "20",
-      scheduledMeetings: "10",
-      children: [
-        {
-          id: "1-1",
-          year: "2021",
-          quarter: "Q1",
-          month: null,
-          day: null,
-          newEnrollments: "2",
-          scheduledMeetings: "35",
-        },
-      ],
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        rowStyling={rowStyling}
-        tableData={tableData}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const tableBody = kit.querySelector('tbody')
-  const expandableRow = tableBody.querySelector('tr:nth-child(1)')
-  expect(expandableRow).toHaveStyle({fontWeight: "700"})
 })
 
 test("rowStyling prop to allow padding control", () => {

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

@@ -41,10 +41,6 @@
     font_color: "white",
     expand_button_color: "white",
   },
-  {
-    row_id: "15",
-    font_weight: "bold",
-  },
 ] %>
 
 <%= pb_rails("advanced_table", props: { id: "row-styling", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>

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

@@ -48,10 +48,6 @@ const rowStyling = [
     fontColor: colors.white,
     expandButtonColor: colors.white,
   },
-  {
-    rowId: "15",
-    fontWeight: "bold",
-  },
 ];
 
   return (

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md

@@ -3,6 +3,5 @@ The `row_styling` prop can be used in conjunction with row ids to control certai
 - `background_color` : use this to control the background color of the row
 - `font_color`: use this to control font color for each row if needed, for example if using a darker background color.
 - `expand_button_color`: use this to control the color of the expand icon if needed, for example if using a darker background color.
-- `font_weight`: use this to control row font weight. Accepted values are `regular` (default appearance) and `bold`.
 
 **NOTE:** Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_react.md

@@ -3,6 +3,5 @@ The `rowStyling` prop can be used in conjunction with row ids to control certain
 - `backgroundColor` : use this to control the background color of the row
 - `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.
 - `expandButtonColor`: use this to control the color of the expand icon if needed, for example if using a darker background color.
-- `fontWeight`: use this to control row font weight. Accepted values are `regular` (default appearance) and `bold`.
 
 **NOTE:** Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function.

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.json

@@ -28,8 +28,7 @@
         "rowId": "1",
         "backgroundColor": "#0056CF",
         "fontColor": "#FFFFFF",
-        "expandButtonColor": "#FFFFFF",
-        "fontWeight": "bold"
+        "expandButtonColor": "#FFFFFF"
       }
     ],
     "expandByDepth": [
@@ -234,11 +233,6 @@
         "customSort": true
       }
     },
-    "fullScreenControl": {
-      "requires": {
-        "allowFullScreen": true
-      }
-    },
     "enableSortingRemoval": {
       "requires": {
         "enableSorting": true
@@ -2955,9 +2949,7 @@
   },
   "hiddenProps": [
     "sortControl",
-    "fullScreenControl",
     "expandedControl",
-    "allowFullScreen",
     "pagination",
     "paginationProps"
   ],

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.overrides.json

@@ -73,9 +73,7 @@
   },
   "hiddenProps": [
     "sortControl",
-    "fullScreenControl",
     "expandedControl",
-    "allowFullScreen",
     "pagination",
     "paginationProps"
   ],
@@ -106,7 +104,7 @@
     "tableProps": {
       "container": false
     },
-    "rowStyling": [{ "rowId": "1", "backgroundColor": "#0056CF", "fontColor": "#FFFFFF", "expandButtonColor": "#FFFFFF", "fontWeight": "bold" }],
+    "rowStyling": [{ "rowId": "1", "backgroundColor": "#0056CF", "fontColor": "#FFFFFF", "expandButtonColor": "#FFFFFF" }],
     "expandByDepth": [
       {
         "depth": 0,
@@ -291,11 +289,6 @@
         "customSort": true
       }
     },
-    "fullScreenControl": {
-      "requires": {
-        "allowFullScreen": true
-      }
-    },
     "enableSortingRemoval": {
       "requires": {
         "enableSorting": true

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

@@ -23,7 +23,6 @@ export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_tabl
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
 export { default as AdvancedTableColumnHeadersVerticalBorder } from './_advanced_table_column_headers_vertical_border.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
-export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'

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

@@ -274,18 +274,6 @@
         "react"
       ]
     },
-    "allowFullScreen": {
-      "type": "boolean",
-      "platforms": [
-        "react"
-      ]
-    },
-    "fullScreenControl": {
-      "type": "function",
-      "platforms": [
-        "react"
-      ]
-    },
     "enableSorting": {
       "type": "boolean",
       "platforms": [

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -3,7 +3,6 @@
   button_color = row_style&.[](:expand_button_color)
   bg_color = row_style&.[](:background_color)
   font_color = row_style&.[](:font_color)
-  font_weight = row_style&.[](:font_weight)
   tr_options = (object.html_options || {}).stringify_keys
   tr_options["class"] = [tr_options["class"], object.classname].reject(&:blank?).join(" ")
 %>
@@ -15,7 +14,7 @@
     <% end %>
     <% object.column_definitions.each_with_index do |column, index| %>
         <% next unless column[:accessor].present? %>
-        <% component_info = object.cell_component_info(column, index, bg_color, font_color, font_weight) %>
+        <% component_info = object.cell_component_info(column, index, bg_color, font_color) %>
         <%= pb_rails(component_info[:name], props: component_info[:props]) do %>
             <%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
                 <% if collapsible_trail && index.zero? %>

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

@@ -107,10 +107,9 @@ module Playbook
       end
 
       # Uses a regular table/table_cell component if there is no custom background color; if there is a cell_background_color uses a background component with tag "td"
-      def cell_component_info(column, index, bg_color, font_color, font_weight = nil)
+      def cell_component_info(column, index, bg_color, font_color)
         column_font_color = cell_font_color(column)
         effective_font_color = column_font_color || font_color
-        effective_font_weight = font_weight_value(font_weight)
 
         if has_custom_background_color?(column)
           custom_bg_color = cell_background_color(column)
@@ -120,15 +119,11 @@ module Playbook
             tag: "td",
             classname: td_classname(column, index),
           }
-          style_hash = {}
-          style_hash[:color] = effective_font_color if effective_font_color.present?
-          style_hash[:"font-weight"] = effective_font_weight if effective_font_weight.present?
-          component_props[:html_options] = { style: style_hash } if style_hash.present?
+          component_props[:html_options] = { style: { color: effective_font_color } } if effective_font_color.present?
         else
           component_name = "table/table_cell"
           style_hash = { "background-color": bg_color }
           style_hash[:color] = effective_font_color if effective_font_color.present?
-          style_hash[:"font-weight"] = effective_font_weight if effective_font_weight.present?
           component_props = {
             html_options: {
               style: style_hash,
@@ -221,15 +216,6 @@ module Playbook
         end
       end
 
-      def font_weight_value(font_weight)
-        case font_weight.to_s
-        when "bold"
-          "700"
-        when "regular"
-          "400"
-        end
-      end
-
     private
 
       def custom_renderer_value(column, index)

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -608,4 +608,4 @@ export const DraggableProvider = ({
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
   );
-};
+};