Merge branch 'master' of github.com:DevoInc/genesys-ui

DevoInc · Dec 1, 2023 · e7fa134 · e7fa134
2 parents 798c6ef + b87e5e8
commit e7fa134
Show file tree

Hide file tree

Showing 21 changed files with 251 additions and 134 deletions.
diff --git a/packages/core/src/components/InputControl/styled/StyledInputControl.ts b/packages/core/src/components/InputControl/styled/StyledInputControl.ts
@@ -62,11 +62,11 @@ export const StyledInputControl = styled.input<StyledInputControlProps>`
     const inputHorPadding = fieldTokens.space.padding.hor[$size];
     const inputWithIconPadding =
       hasIcon || hasTypeIcon
-        ? css`calc(${iconSize} + ${inputHorPadding} * 2)`
+        ? css`calc(${iconSize} + (${inputHorPadding} * 2))`
         : '0rem';
     const inputWithShowPasswordPadding =
       type === 'password'
-        ? css`calc(${showPasswordSize} + ${inputHorPadding} * 2)`
+        ? css`calc(${showPasswordSize} + (${inputHorPadding} * 2))`
         : '0rem';
     const buttonTokens = theme.cmp.button;
     const clearSearchButtonSize = buttonTokens.size.square.xxs;
@@ -93,9 +93,12 @@ export const StyledInputControl = styled.input<StyledInputControlProps>`
         theme,
       })};
 
-      padding-right: calc(
-        ${inputWithIconPadding} + ${inputWithShowPasswordPadding}
-      );
+      ${(hasIcon || hasTypeIcon || type === 'password') &&
+      css`
+        padding-right: ${type === 'password'
+          ? inputWithShowPasswordPadding
+          : inputWithIconPadding};
+      `}
 
       ${hasTypeIcon &&
       css`

diff --git a/packages/table/src/core/Cell/Cell.tsx b/packages/table/src/core/Cell/Cell.tsx
@@ -23,27 +23,33 @@ export const Cell: React.FC<CellProps> = ({
   cellHeight,
   offsetX,
 }) => {
-  const { measures } = React.useContext(TableContext);
+  const { measures, texts } = React.useContext(TableContext);
   const { onReset } = columnDef;
 
   useInitialState(data, onReset);
 
   const { cellRef, editionContent, isEditMode, onDoubleClick, viewContent } =
     useRenderContent(columnDef, data);
-
+  const clickable = columnDef.editable;
   return (
     <StyledTableCell
+      aria-selected={isEditMode}
       onDoubleClick={onDoubleClick}
       ref={cellRef}
       cellWidth={cellWidth}
       offsetX={offsetX}
       height={cellHeight}
     >
       <StyledTableCellWrapper
-        clickable={columnDef.editable}
-        as={columnDef.editable ? 'button' : 'div'}
+        clickable={clickable}
+        as={clickable ? 'button' : 'div'}
         paddingVer={`${measures.cell.verPad}px`}
         paddingHor={`${measures.cell.horPad}px`}
+        isEditMode={isEditMode}
+        tabIndex={clickable ? 0 : -1}
+        title={
+          isEditMode ? texts?.cell?.editSaveTooltip : texts?.cell?.editTooltip
+        }
       >
         {isEditMode ? editionContent : viewContent}
         {columnDef.editable && !isEditMode && (

diff --git a/packages/table/src/core/Cell/StyledTableCell.ts b/packages/table/src/core/Cell/StyledTableCell.ts
@@ -3,18 +3,16 @@ import styled, { DefaultTheme } from 'styled-components';
 
 interface StyledTableCellProps {
   cellWidth?: React.CSSProperties['width'];
-  height?: React.CSSProperties['height'];
   offsetX?: number;
   theme: DefaultTheme;
 }
 
 export const StyledTableCell = styled.td.attrs(
-  ({ cellWidth, theme, offsetX, height }: StyledTableCellProps) => ({
+  ({ cellWidth, theme, offsetX }: StyledTableCellProps) => ({
     style: {
       width: cellWidth,
       color: theme.alias.color.text.body.base,
       left: `${offsetX}px`,
-      height,
     },
   }),
 )<StyledTableCellProps>`
@@ -24,6 +22,5 @@ export const StyledTableCell = styled.td.attrs(
   align-items: center;
   box-sizing: border-box;
   height: 100%;
-  //overflow: hidden;
   flex: 0 0 auto;
 `;
diff --git a/packages/table/src/core/Cell/StyledTableCellMarker.ts b/packages/table/src/core/Cell/StyledTableCellMarker.ts
@@ -10,7 +10,9 @@ export const StyledTableCellMarker = styled.span`
   opacity: 0;
   cursor: inherit;
 
-  tr:hover & {
+  tr:hover &,
+  *:enabled:hover &,
+  *:enabled:focus & {
     opacity: 1;
   }
 

diff --git a/packages/table/src/core/Cell/StyledTableCellWrapper.ts b/packages/table/src/core/Cell/StyledTableCellWrapper.ts
@@ -1,14 +1,11 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { ColumnCellStyleProps } from '../../declarations';
-import {
-  btnResetMixin,
-  truncateTypoMixin,
-  typoMixin,
-} from '@devoinc/genesys-ui';
+import { btnResetMixin, typoMixin } from '@devoinc/genesys-ui';
 
 interface StyledTableCellWrapperProps extends ColumnCellStyleProps {
   clickable?: boolean;
+  isEditMode?: boolean;
   paddingVer?: React.CSSProperties['paddingBottom'];
   paddingHor?: React.CSSProperties['paddingLeft'];
 }
@@ -22,10 +19,10 @@ const alignMap = {
 };
 
 export const StyledTableCellWrapper = styled.div<StyledTableCellWrapperProps>`
-  ${({ clickable, theme }) => {
+  ${({ clickable, isEditMode, theme }) => {
     const tokens = theme.cmp.table.cellClickableWrapper;
-    return (
-      clickable &&
+    return css`
+      ${clickable &&
       css`
         ${btnResetMixin};
         user-select: auto;
@@ -34,15 +31,22 @@ export const StyledTableCellWrapper = styled.div<StyledTableCellWrapperProps>`
         transition: background-color ease ${tokens.mutation.transitionDuration};
 
         &:hover,
-        &:focus,
         &:active {
           background-color: ${tokens.color.background.hovered};
         }
-      `
-    );
+
+        &:focus {
+          box-shadow: ${theme.alias.elevation.boxShadow.base.focused};
+        }
+      `}
+
+      ${isEditMode &&
+      css`
+        background-color: ${tokens.color.background.hovered};
+      `}
+    `;
   }}
   ${({ theme, textAlign }) => typoMixin({ theme, textAlign })};
-  ${({ truncateLine }) => truncateTypoMixin({ lineClamp: truncateLine })}
   position: absolute;
   top: 0;
   left: 0;

diff --git a/packages/table/src/core/Row/Row.tsx b/packages/table/src/core/Row/Row.tsx
@@ -50,7 +50,7 @@ export const Row: React.FC<RowProps> = ({
           key={`cell-${virtualColumn.key}`}
           data={data[columnDefs[virtualColumn.index].id] ?? ''}
           cellWidth={`${virtualColumn.size}px`}
-          cellHeight={styles.height}
+          //cellHeight={styles.height}
           offsetX={virtualColumn.start}
         />
       ))}

diff --git a/packages/table/src/core/Row/StyledTableRow.ts b/packages/table/src/core/Row/StyledTableRow.ts
@@ -98,8 +98,18 @@ export const StyledTableRow = styled.tr.attrs<StyledTableRowProps>(
         background-color: transparent;
       }
 
-      &:hover::before {
-        background-color: ${hoverBgColor};
+      &:hover,
+      :has(*:focus) {
+        z-index: 1;
+
+        &::before {
+          background-color: ${hoverBgColor};
+        }
+      }
+
+      :has(*:focus),
+      :has([aria-selected='true']) {
+        z-index: 2;
       }
 
       // draggable

diff --git a/packages/table/src/core/Table/Table.tsx b/packages/table/src/core/Table/Table.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTheme } from 'styled-components';
-import { TableContext } from './context';
+import { TableContextProvider } from './context';
 import { TableOptionsProps } from '../../declarations';
 import { TableHead } from '../TableHead';
 import { TableBody } from '../TableBody';
@@ -37,9 +37,9 @@ export const Table: React.FC<TableProps> = ({ tableOptions, data }) => {
   );
   const { hasScroll } = useTableScroll(rowVirtualizer, ref);
   return (
-    <TableContext.Provider
+    <TableContextProvider
       value={{
-        visualOptions: tableOptions.visualOptions,
+        ...tableOptions,
         measures,
       }}
     >
@@ -62,6 +62,6 @@ export const Table: React.FC<TableProps> = ({ tableOptions, data }) => {
           />
         </StyledTable>
       </StyledTableWrapper>
-    </TableContext.Provider>
+    </TableContextProvider>
   );
 };
diff --git a/packages/table/src/core/Table/context.ts b/packages/table/src/core/Table/context.ts
diff --git a/packages/table/src/core/Table/context.tsx b/packages/table/src/core/Table/context.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {
+  MeasuresConfig,
+  TableVisualOptions,
+  TextsType,
+} from '../../declarations';
+
+interface TableContextProps {
+  visualOptions?: TableVisualOptions;
+  texts?: TextsType;
+  measures: MeasuresConfig;
+}
+
+interface TableContextProviderProps {
+  children: React.ReactNode;
+  value: TableContextProps;
+}
+
+const defaultTableContext: TableContextProps = {
+  visualOptions: {
+    density: 'default',
+    rowHeight: 'md',
+    striped: false,
+    maxHeight: 'none',
+  },
+  texts: {
+    general: {
+      noData: 'No data available.',
+      noResults: 'No results found.',
+    },
+    cell: {
+      editTooltip: 'Double click to edit this cell',
+      editSaveTooltip: 'Click outside to save the changes',
+    },
+    editor: {
+      editorTextLabel: 'Edit this text content.',
+    },
+  },
+  measures: {
+    head: { height: 36 },
+    row: {
+      height: {
+        md: 36,
+        lg: 60,
+        xl: 72,
+        xxl: 84,
+        xxxl: 96,
+      },
+    },
+    cell: {
+      horPad: 12,
+      verPad: 8,
+    },
+  },
+};
+
+export const TableContext =
+  React.createContext<TableContextProps>(defaultTableContext);
+
+export const TableContextProvider = ({
+  children,
+  value,
+}: TableContextProviderProps) => {
+  const [context] = React.useState({
+    ...defaultTableContext,
+    ...value,
+  });
+
+  return (
+    <TableContext.Provider value={context}>{children}</TableContext.Provider>
+  );
+};