From eae1ec379852796eef3275596c72a376298b1fb1 Mon Sep 17 00:00:00 2001 From: Heather Date: Mon, 26 Aug 2024 15:59:13 -0400 Subject: [PATCH 1/2] Add missing class to text cells --- .../LocationsView/Controls/DataTable.tsx | 25 ++++++++++++++++--- .../StorageBrowser/components/DataTable.tsx | 1 + .../StorageBrowser/context/elements/index.ts | 1 + 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/packages/react-storage/src/components/StorageBrowser/Views/LocationsView/Controls/DataTable.tsx b/packages/react-storage/src/components/StorageBrowser/Views/LocationsView/Controls/DataTable.tsx index 89fa57cddf..6fbf5ac99b 100644 --- a/packages/react-storage/src/components/StorageBrowser/Views/LocationsView/Controls/DataTable.tsx +++ b/packages/react-storage/src/components/StorageBrowser/Views/LocationsView/Controls/DataTable.tsx @@ -5,6 +5,7 @@ import { capitalize } from '@aws-amplify/ui'; import { DataTable, TABLE_DATA_BUTTON_CLASS, + TABLE_DATA_TEXT_CLASS_NAME, TABLE_HEADER_BUTTON_CLASS_NAME, TABLE_HEADER_CLASS_NAME, } from '../../../components/DataTable'; @@ -12,7 +13,11 @@ import { useControl } from '../../../context/controls'; import { useLocationsData } from '../../../context/actions'; import { LocationAccess } from '../../../context/types'; import { compareStrings } from '../../../context/controls/Table'; -import { ButtonElement, IconElement } from '../../../context/elements'; +import { + ButtonElement, + IconElement, + SpanElement, +} from '../../../context/elements'; export type SortDirection = 'ascending' | 'descending' | 'none'; @@ -113,8 +118,22 @@ const getLocationsData = ({ ), }, - { key: `td-type-${index}`, children: location.type }, - { key: `td-permission-${index}`, children: location.permission }, + { + key: `td-type-${index}`, + children: ( + + {location.type} + + ), + }, + { + key: `td-permission-${index}`, + children: ( + + {location.permission} + + ), + }, ]); return { columns, rows }; diff --git a/packages/react-storage/src/components/StorageBrowser/components/DataTable.tsx b/packages/react-storage/src/components/StorageBrowser/components/DataTable.tsx index 9423c45a22..88a3ad6e01 100644 --- a/packages/react-storage/src/components/StorageBrowser/components/DataTable.tsx +++ b/packages/react-storage/src/components/StorageBrowser/components/DataTable.tsx @@ -16,6 +16,7 @@ export const TABLE_HEADER_CLASS_NAME = `${TABLE_CLASS_NAME}__header`; export const TABLE_HEADER_BUTTON_CLASS_NAME = `${TABLE_CLASS_NAME}__header__button`; export const TABLE_ROW_CLASS_NAME = `${TABLE_CLASS_NAME}__row`; export const TABLE_DATA_CLASS_NAME = `${TABLE_CLASS_NAME}__data`; +export const TABLE_DATA_TEXT_CLASS_NAME = `${TABLE_CLASS_NAME}__data__text`; export const TABLE_DATA_BUTTON_CLASS = `${TABLE_CLASS_NAME}__data__button`; export interface ColumnHeaderItemProps diff --git a/packages/react-storage/src/components/StorageBrowser/context/elements/index.ts b/packages/react-storage/src/components/StorageBrowser/context/elements/index.ts index 914eb1716c..6625d69283 100644 --- a/packages/react-storage/src/components/StorageBrowser/context/elements/index.ts +++ b/packages/react-storage/src/components/StorageBrowser/context/elements/index.ts @@ -4,6 +4,7 @@ export { ButtonElementProps, MessageVariant, PaginateVariant, + SpanElement, StorageBrowserElements, TableBodyElement, TableDataElement, From 22d480f647cc3de2133349432e9584f48460164b Mon Sep 17 00:00:00 2001 From: Heather Date: Mon, 26 Aug 2024 16:34:37 -0400 Subject: [PATCH 2/2] update styles to allow for not having a span element for wrapping --- .../Views/LocationsView/Controls/DataTable.tsx | 16 ++++------------ .../context/elements/defaults.tsx | 4 ++-- .../src/styles/storage-browser.css | 18 +++++++++++++----- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/react-storage/src/components/StorageBrowser/Views/LocationsView/Controls/DataTable.tsx b/packages/react-storage/src/components/StorageBrowser/Views/LocationsView/Controls/DataTable.tsx index 6fbf5ac99b..a893d3eaf8 100644 --- a/packages/react-storage/src/components/StorageBrowser/Views/LocationsView/Controls/DataTable.tsx +++ b/packages/react-storage/src/components/StorageBrowser/Views/LocationsView/Controls/DataTable.tsx @@ -5,7 +5,7 @@ import { capitalize } from '@aws-amplify/ui'; import { DataTable, TABLE_DATA_BUTTON_CLASS, - TABLE_DATA_TEXT_CLASS_NAME, + // TABLE_DATA_TEXT_CLASS_NAME, TABLE_HEADER_BUTTON_CLASS_NAME, TABLE_HEADER_CLASS_NAME, } from '../../../components/DataTable'; @@ -16,7 +16,7 @@ import { compareStrings } from '../../../context/controls/Table'; import { ButtonElement, IconElement, - SpanElement, + // SpanElement, } from '../../../context/elements'; export type SortDirection = 'ascending' | 'descending' | 'none'; @@ -120,19 +120,11 @@ const getLocationsData = ({ }, { key: `td-type-${index}`, - children: ( - - {location.type} - - ), + children: location.type, }, { key: `td-permission-${index}`, - children: ( - - {location.permission} - - ), + children: location.permission, }, ]); diff --git a/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx b/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx index f262ecc246..03aa3b2c23 100644 --- a/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx +++ b/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx @@ -173,7 +173,7 @@ const TableHead = React.forwardRef( const TableData = React.forwardRef( function TableData(props, ref) { - return <_TableCell padding="xxxs" {...props} ref={ref} />; + return <_TableCell {...props} ref={ref} />; } ); @@ -185,7 +185,7 @@ const TableRow = React.forwardRef( const TableHeader = React.forwardRef( function TableHeader(props, ref) { - return <_TableCell padding="xxxs" as="th" {...props} ref={ref} />; + return <_TableCell as="th" {...props} ref={ref} />; } ); diff --git a/packages/react-storage/src/styles/storage-browser.css b/packages/react-storage/src/styles/storage-browser.css index ad7a2169b7..6d607e36dc 100644 --- a/packages/react-storage/src/styles/storage-browser.css +++ b/packages/react-storage/src/styles/storage-browser.css @@ -1,5 +1,5 @@ .storage-browser { - --storage-browser-gap-small: 0.375rem; + --storage-browser-gap-small: 0.3rem; --storage-browser-gap: 0.6rem; --storage-browser-status-error: hsl(0, 95%, 30%); --storage-browser-status-success: hsl(130, 33%, 37%); @@ -161,6 +161,7 @@ } .storage-browser__table__header { + padding: var(--storage-browser-gap-small); text-align: start; } .storage-browser__table__header__button { @@ -169,17 +170,24 @@ align-items: center; } -.storage-browser__table__data__text, +.storage-browser__table__data:not(:has(.storage-browser__table__data__button)), .storage-browser__table__data__button { - display: inline-block; - width: 100%; - padding: var(--storage-browser-gap-small); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: start; } +.storage-browser__table__data:not(:has(.storage-browser__table__data__button)) { + padding: var(--storage-browser-gap); +} + +.storage-browser__table__data__button { + display: inline-block; + width: 100%; + padding: var(--storage-browser-gap-small); +} + .storage-browser__table__data__icon, .storage-browser__action-status { vertical-align: middle;