chore: Fix table cell background color issue (#3596)

Author: at-susie

src/table/body-cell/styles.scss

@@ -253,6 +253,9 @@ $cell-negative-space-vertical: 2px;
       transition-duration: awsui.$motion-duration-transition-show-quick;
       transition-timing-function: awsui.$motion-easing-sticky;
     }
+    &.table-variant-full-page {
+      background: awsui.$color-background-layout-main;
+    }
     &.body-cell-shaded {
       background: awsui.$color-background-cell-shaded;
     }

src/table/body-cell/td-element.tsx

@@ -56,6 +56,7 @@ export interface TableTdElementProps {
   isEditing: boolean;
   isEditingDisabled?: boolean;
   hasSuccessIcon?: boolean;
+  tableVariant?: string;
 }
 
 export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElementProps>(
@@ -95,6 +96,7 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
       isEditing,
       isEditingDisabled,
       hasSuccessIcon,
+      tableVariant,
       ...rest
     },
     ref
@@ -141,6 +143,7 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
           hasSuccessIcon && styles['body-cell-has-success'],
           level !== undefined && !isEditingActive && styles['body-cell-expandable'],
           level !== undefined && !isEditingActive && styles[`expandable-level-${getLevelClassSuffix(level)}`],
+          tableVariant && styles[`table-variant-${tableVariant}`],
           stickyStyles.className
         )}
         onClick={onClick}

src/table/header-cell/index.tsx

@@ -49,6 +49,7 @@ export interface TableHeaderCellProps<ItemType> {
   isExpandable?: boolean;
   hasDynamicContent?: boolean;
   variant: TableProps.Variant;
+  tableVariant?: string;
 }
 
 export function TableHeaderCell<ItemType>({
@@ -78,6 +79,7 @@ export function TableHeaderCell<ItemType>({
   isExpandable,
   hasDynamicContent,
   variant,
+  tableVariant,
 }: TableHeaderCellProps<ItemType>) {
   const i18n = useInternalI18n('table');
   const sortable = !!column.sortingComparator || !!column.sortingField;
@@ -133,6 +135,7 @@ export function TableHeaderCell<ItemType>({
       stickyState={stickyState}
       tableRole={tableRole}
       variant={variant}
+      tableVariant={tableVariant}
       {...(sortingDisabled
         ? {}
         : getAnalyticsMetadataAttribute({

src/table/header-cell/styles.scss

@@ -93,6 +93,9 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
       transition-duration: awsui.$motion-duration-transition-show-quick;
       transition-timing-function: awsui.$motion-easing-sticky;
     }
+    &.table-variant-full-page {
+      background: awsui.$color-background-layout-main;
+    }
     &-pad-left:not(.has-selection) {
       padding-inline-start: awsui.$space-table-horizontal;
     }

src/table/header-cell/th-element.tsx

@@ -36,6 +36,7 @@ export interface TableThElementProps {
   children: React.ReactNode;
   variant: TableProps.Variant;
   ariaLabel?: string;
+  tableVariant?: string;
 }
 
 export function TableThElement({
@@ -56,6 +57,7 @@ export function TableThElement({
   children,
   variant,
   ariaLabel,
+  tableVariant,
   ...props
 }: TableThElementProps) {
   const isVisualRefresh = useVisualRefresh();
@@ -81,6 +83,7 @@ export function TableThElement({
         stripedRows && styles['has-striped-rows'],
         isVisualRefresh && styles['is-visual-refresh'],
         isSelection && clsx(tableStyles['selection-control'], tableStyles['selection-control-header']),
+        tableVariant && styles[`table-variant-${tableVariant}`],
         {
           [styles['header-cell-fake-focus']]: focusedComponent === `header-${String(columnId)}`,
           [styles['header-cell-sortable']]: sortingStatus,

src/table/internal.tsx

@@ -379,6 +379,7 @@ const InternalTable = React.forwardRef(
       getSelectAllProps,
       columnDefinitions: visibleColumnDefinitions,
       variant: computedVariant,
+      tableVariant: computedVariant,
       wrapLines,
       resizableColumns,
       sortingColumn,
@@ -680,6 +681,7 @@ const InternalTable = React.forwardRef(
                                       columnId={column.id ?? colIndex}
                                       colIndex={colIndex + colIndexOffset}
                                       verticalAlign={column.verticalAlign ?? cellVerticalAlign}
+                                      tableVariant={computedVariant}
                                       {...cellExpandableProps}
                                       {...getAnalyticsMetadataAttribute(analyticsMetadata)}
                                     />

src/table/thead.tsx

@@ -24,6 +24,7 @@ export interface TheadProps {
   sortingDescending: boolean | undefined;
   sortingDisabled: boolean | undefined;
   variant: TableProps.Variant;
+  tableVariant?: string;
   wrapLines: boolean | undefined;
   resizableColumns: boolean | undefined;
   getSelectAllProps?: () => SelectionProps;
@@ -56,6 +57,7 @@ const Thead = React.forwardRef(
       sortingDescending,
       resizableColumns,
       variant,
+      tableVariant,
       wrapLines,
       onFocusMove,
       onSortingChange,
@@ -85,6 +87,7 @@ const Thead = React.forwardRef(
       stripedRows,
       tableRole,
       variant,
+      tableVariant,
       stickyState,
     };