fix: Remove background color from embedded table header (#3198)

pages/table/embedded-in-alert.page.tsx

@@ -0,0 +1,66 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Alert from '~components/alert';
+import Box from '~components/box';
+import Header from '~components/header';
+import SpaceBetween from '~components/space-between';
+import Table, { TableProps } from '~components/table';
+
+import ScreenshotArea from '../utils/screenshot-area';
+import { generateItems } from './generate-data';
+import { columnsConfig } from './shared-configs';
+
+const tableItems = generateItems(6);
+
+export default () => {
+  return (
+    <ScreenshotArea>
+      <h1>Table embedded in alert</h1>
+
+      <SpaceBetween direction="vertical" size="m">
+        <Alert type="info" header="Alert with borderless table" statusIconAriaLabel="Info">
+          <Box variant="p">Some description</Box>
+
+          <ExampleTable variant="borderless" />
+        </Alert>
+
+        <Alert type="info" header="Alert with embedded table" statusIconAriaLabel="Info">
+          <Box variant="p">Some description</Box>
+
+          <ExampleTable variant="embedded" />
+        </Alert>
+
+        <Alert type="info" header="Alert with container table" statusIconAriaLabel="Info">
+          <Box variant="p">Some description</Box>
+
+          <ExampleTable variant="container" />
+        </Alert>
+
+        <ExampleTable variant="borderless" />
+      </SpaceBetween>
+    </ScreenshotArea>
+  );
+};
+
+const ExampleTable = ({ variant }: { variant: TableProps.Variant }) => {
+  const [selectedItems, setSelectedItems] = useState<any>([tableItems[tableItems.length - 1]]);
+
+  return (
+    <Table
+      variant={variant}
+      onSelectionChange={({ detail }) => setSelectedItems(detail.selectedItems)}
+      selectedItems={selectedItems}
+      columnDefinitions={columnsConfig}
+      items={tableItems}
+      selectionType="multi"
+      header={<Header>Table with variant {variant}</Header>}
+      ariaLabels={{
+        selectionGroupLabel: 'Items selection',
+        allItemsSelectionLabel: () => 'select all',
+        itemSelectionLabel: (selection, item) => item.id,
+      }}
+    />
+  );
+};

src/container/styles.scss

@@ -127,6 +127,11 @@
     background-color: awsui.$color-background-layout-main;
   }
 
+  // "embedded" variant is passed to container only from table variants "borderless" and "embedded"
+  &-variant-embedded:not(.header-sticky-enabled) {
+    background-color: transparent;
+  }
+
   &.header-with-media {
     background: none;
     &:not(:empty) {

src/table/header-cell/styles.scss

@@ -75,6 +75,10 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   &-variant-full-page.header-cell-hidden {
     border-block-end-color: transparent;
   }
+  &-variant-embedded:not(.header-cell-sticky),
+  &-variant-borderless:not(.header-cell-sticky) {
+    background: none;
+  }
   &:last-child,
   &.header-cell-sortable {
     padding-inline-end: awsui.$space-xs;