update styles to allow for not having a span element for wrapping

Author: hbuchel

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: (
-        <SpanElement className={TABLE_DATA_TEXT_CLASS_NAME}>
-          {location.type}
-        </SpanElement>
-      ),
+      children: location.type,
     },
     {
       key: `td-permission-${index}`,
-      children: (
-        <SpanElement className={TABLE_DATA_TEXT_CLASS_NAME}>
-          {location.permission}
-        </SpanElement>
-      ),
+      children: location.permission,
     },
   ]);
 

packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx

@@ -173,7 +173,7 @@ const TableHead = React.forwardRef<HTMLTableSectionElement, TableHeadProps>(
 
 const TableData = React.forwardRef<HTMLTableCellElement, TableCellProps>(
   function TableData(props, ref) {
-    return <_TableCell padding="xxxs" {...props} ref={ref} />;
+    return <_TableCell {...props} ref={ref} />;
   }
 );
 
@@ -185,7 +185,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
 
 const TableHeader = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
   function TableHeader(props, ref) {
-    return <_TableCell padding="xxxs" as="th" {...props} ref={ref} />;
+    return <_TableCell as="th" {...props} ref={ref} />;
   }
 );
 

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;