diff --git a/pages/table/embedded-in-alert.page.tsx b/pages/table/embedded-in-alert.page.tsx new file mode 100644 index 0000000000..bd481ad199 --- /dev/null +++ b/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 ( + +

Table embedded in alert

+ + + + Some description + + + + + + Some description + + + + + + Some description + + + + + + +
+ ); +}; + +const ExampleTable = ({ variant }: { variant: TableProps.Variant }) => { + const [selectedItems, setSelectedItems] = useState([tableItems[tableItems.length - 1]]); + + return ( + setSelectedItems(detail.selectedItems)} + selectedItems={selectedItems} + columnDefinitions={columnsConfig} + items={tableItems} + selectionType="multi" + header={
Table with variant {variant}
} + ariaLabels={{ + selectionGroupLabel: 'Items selection', + allItemsSelectionLabel: () => 'select all', + itemSelectionLabel: (selection, item) => item.id, + }} + /> + ); +}; diff --git a/src/container/styles.scss b/src/container/styles.scss index e052def6ca..e9d6b4a901 100644 --- a/src/container/styles.scss +++ b/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) { diff --git a/src/table/header-cell/styles.scss b/src/table/header-cell/styles.scss index 4cd0b59b48..ad5b4df22e 100644 --- a/src/table/header-cell/styles.scss +++ b/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;