Merge pull request #505 from dolittle/command-parameters-appearance

Command parameters appearance

Source/DesignSystem/helpers/DummyContents/index.ts

@@ -3,6 +3,5 @@
 
 export * from './DummyAccordionsContent';
 export * from './DummyArray';
-export * from './DummyDataGridContent';
 export * from './DummyNavigationItems';
 export * from './DummyText';

Source/DesignSystem/molecules/DataGrid/DataGrid.stories.tsx

@@ -6,8 +6,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { DataGridProProps } from '@mui/x-data-grid-pro';
 
-import { dataTableDescription } from './helpers';
-import { dummyColumns, dummyEditCellsColumns, dummyIconColumns, dummyIconRows, dummyRows } from '../../helpers/DummyContents';
+import { dataTableDescription, dummyColumns, dummyIconRows, dummyRows, dummyEditCellColumns, dummyEditCellRows, dummyIconColumns } from './helpers';
 
 import { DataGrid, dataGridDefaultProps } from './DataGrid';
 
@@ -63,8 +62,8 @@ export const Default: Story = {
         columns: dummyColumns,
         checkboxSelection: false,
         loading: false,
-        onRowClick: () => action('onRowClick'),
-        onCellClick: () => action('onCellClick'),
+        onRowClick: action('Row Clicked!'),
+        onCellClick: action('Cell Clicked!'),
     },
 };
 
@@ -79,17 +78,24 @@ IconCells.parameters = {
     docs: {
         description: {
             story: `Icon buttons is found inside their own column in the table that cause a specific action to a specific row of data.<br/>
-            Use Icon to display a specific icon in the table.`
+            Use Icon to display a specific status in the table.`
         },
     },
 };
 
 export const EditableCells: Story = {
     args: {
         ...Default.args,
-        rows: dummyRows,
-        columns: dummyEditCellsColumns,
+        rows: dummyEditCellRows,
+        columns: dummyEditCellColumns,
         experimentalFeatures: { newEditingApi: true },
+        sx: {
+            // Hack for secret cell active state. Otherwise size is going to be different.
+            '& .MuiOutlinedInput-root': {
+                '& .MuiSelect-select': { p: '5px 15px' },
+                '& fieldset': { border: 'none' },
+            },
+        },
     },
 };
 EditableCells.parameters = {
@@ -112,7 +118,7 @@ EditableCells.parameters = {
 // export const ScrollableDataGrid = () => {};
 // export const RowEditMode = () => {};
 
-// TODOS:
+// TODO:
 // Add into description what is needed in every Data Table.
 // Add sorting guidance.
 // Add alignment guidance.

Source/DesignSystem/molecules/DataGrid/EditCell.tsx → Source/DesignSystem/molecules/DataGrid/DataGridEditCell.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import { GridRenderCellParams, useGridApiContext } from '@mui/x-data-grid-pro';
 
-import { TextField } from '@dolittle/design-system';
+import { TextField } from '../../index';
 
 const textFieldBorderStyles = {
     '& .MuiOutlinedInput-root': {
@@ -21,7 +21,11 @@ const textFieldBorderStyles = {
     },
 };
 
-export const EditTextFieldCell = (params: GridRenderCellParams<HTMLInputElement>) => {
+// TODO: Gives an error at the moment.
+/**
+ * Renders a editable text field cell in 'edit' mode in the DataGrid.
+ */
+export const DataGridEditCellEdit = (params: GridRenderCellParams<HTMLInputElement>) => {
     const { id, value, field } = params;
     const apiRef = useGridApiContext();
 
@@ -42,7 +46,10 @@ export const EditTextFieldCell = (params: GridRenderCellParams<HTMLInputElement>
     );
 };
 
-export const EditCell = (params: GridRenderCellParams) =>
+/**
+ * Renders a editable text field cell in the 'view' mode in the DataGrid.
+ */
+export const DataGridEditCellView = (params: GridRenderCellParams) =>
     <TextField
         value={params.value}
         placeholder='Edit...'

Source/DesignSystem/molecules/DataGrid/DataGridSelectCell.tsx

@@ -0,0 +1,35 @@
+// Copyright (c) Aigonix. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+
+import { GridRenderCellParams } from '@mui/x-data-grid-pro';
+
+import { Button } from '../../index';
+
+const styles = {
+    width: 1,
+    height: 1,
+    typography: 'body2',
+    textTransform: 'none',
+};
+
+/**
+ * These styles are required for DataGrid to make the select cell the same size as the other cells.
+ */
+// const styles = {
+//     // Hack for secret cell active state. Otherwise size is going to be different.
+//     '& .MuiOutlinedInput-root': {
+//         '& .MuiSelect-select': { p: '5px 15px' },
+//         '& fieldset': { border: 'none' },
+//     },
+// };
+
+// TODO: Styles should be moved to the theme.
+// TODO: How to display the selected value label in the select cell?
+
+/**
+ * Renders a select cell in 'view' mode in the DataGrid.
+ */
+export const DataGridSelectCellView = (params: GridRenderCellParams) =>
+    <Button label={params.value} color='subtle' endWithIcon='ArrowDropDownRounded' sx={styles} />;