Add missing class to text cells

Author: hbuchel

packages/react-storage/src/components/StorageBrowser/Views/LocationsView/Controls/DataTable.tsx

@@ -5,14 +5,19 @@ 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';
 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 = ({
         </ButtonElement>
       ),
     },
-    { key: `td-type-${index}`, children: location.type },
-    { key: `td-permission-${index}`, children: location.permission },
+    {
+      key: `td-type-${index}`,
+      children: (
+        <SpanElement className={TABLE_DATA_TEXT_CLASS_NAME}>
+          {location.type}
+        </SpanElement>
+      ),
+    },
+    {
+      key: `td-permission-${index}`,
+      children: (
+        <SpanElement className={TABLE_DATA_TEXT_CLASS_NAME}>
+          {location.permission}
+        </SpanElement>
+      ),
+    },
   ]);
 
   return { columns, rows };

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

packages/react-storage/src/components/StorageBrowser/context/elements/index.ts

@@ -4,6 +4,7 @@ export {
   ButtonElementProps,
   MessageVariant,
   PaginateVariant,
+  SpanElement,
   StorageBrowserElements,
   TableBodyElement,
   TableDataElement,