fix: Fix bugs (#285)

* fix: Add enableSorting in getDefaultTableOptions fn Signed-off-by: yazhou <yazhouhu@yunify.com> * fix: Fix sheet content title Signed-off-by: yazhou <yazhouhu@yunify.com> * fix: Fix table styles Signed-off-by: yazhou <yazhouhu@yunify.com> * fix: Fix table styles Signed-off-by: yazhou <yazhouhu@yunify.com> * chore: update version Signed-off-by: yazhou <yazhouhu@yunify.com> --------- Signed-off-by: yazhou <yazhouhu@yunify.com>
kubesphere · Jul 30, 2024 · bacf0ca · bacf0ca
1 parent 5fdffa6
commit bacf0ca
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 12 deletions.
diff --git a/.changeset/tender-actors-notice.md b/.changeset/tender-actors-notice.md
@@ -0,0 +1,15 @@
+---
+'@kubed/code-editor': patch
+'@kubed/diff-viewer': patch
+'@kubed/components': patch
+'@kubed/log-viewer': patch
+'@kubed/charts': patch
+'@kubed/hooks': patch
+'@kubed/icons': patch
+'@kubed/tests': patch
+'kubed-documents': patch
+---
+
+fix: Add enableSorting in getDefaultTableOptions function
+fix: Fix sheet content title
+style: Fix table styles
diff --git a/packages/components/src/Sheet/Sheet.styles.ts b/packages/components/src/Sheet/Sheet.styles.ts
@@ -60,7 +60,7 @@ const baseStyles = css`
   gap: 1rem;
   background: ${({ theme }) => theme.palette.background};
   border: none;
-  box-shadow: 0 8px 16px 0 #242E4247;
+  box-shadow: 0 8px 16px 0 #242e4247;
   transition: ease-in-out;
   &[data-state='open'] {
     animation-duration: 500ms;
@@ -219,7 +219,7 @@ export const StyledSheetOverlay = styled(SheetPrimitive.Overlay)`
   position: fixed;
   inset: 0;
   z-index: 998;
-  background: #242E42B2;
+  background: #242e42b2;
 
   &[data-state='open'] {
     animation: fadeIn 0.3s;
@@ -253,7 +253,6 @@ export const StyledSheetHeader = styled.div.attrs(({ className }: { className: s
 }))`
   display: flex;
   flex-direction: column;
-  margin-top: 0.125rem;
   text-align: center;
 
   @media (min-width: 640px) {
@@ -274,7 +273,6 @@ export const StyledSheetFooter = styled.div.attrs(({ className }: { className: s
 `;
 
 export const StyledSheetTitle = styled(SheetPrimitive.Title)`
-  font-size: 1.125rem;
   font-weight: 600;
   color: ${({ theme }) => theme.palette.accents_8};
 `;
@@ -296,3 +294,17 @@ export const HeaderWrapper = styled.div`
   position: relative;
   width: 100%;
 `;
+
+export const HiddenTitle = styled.span`
+  position: absolute;
+  border: 0px;
+  width: 0px;
+  height: 0px;
+  padding: 0px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0px, 0px, 0px, 0px);
+  white-space: nowrap;
+  overflow-wrap: normal;
+  visibility: hidden;
+`;
diff --git a/packages/components/src/Sheet/Sheets.tsx b/packages/components/src/Sheet/Sheets.tsx
@@ -12,6 +12,7 @@ import {
   StyledSheetDescription,
   StyledHeaderClose,
   HeaderWrapper,
+  HiddenTitle,
 } from './Sheet.styles';
 import { Button, Field } from '../index';
 
@@ -60,15 +61,27 @@ export interface SheetContentProps
   side?: 'right' | 'top' | 'left' | 'bottom';
   /** The width of the SheetContent. Accepts any number, string. */
   width?: number | string;
+  /** The accessible title of the SheetContent. */
+  title?: string;
+  /** The accessible description of the SheetContent. */
+  description?: string;
 }
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = 'right', className, children, ...props }, ref) => (
+>(({ side = 'right', className, children, title, description, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
     <StyledSheetContent ref={ref} side={side} className={className} {...props}>
+      <HiddenTitle>
+        <SheetPrimitive.Title>{title ?? 'sheet'}</SheetPrimitive.Title>
+      </HiddenTitle>
+      <HiddenTitle>
+        <SheetPrimitive.Description>
+          {description ?? 'sheet description'}
+        </SheetPrimitive.Description>
+      </HiddenTitle>
       <SheetHeaderClose asChild>
         <Button variant="filled" color="secondary" radius="sm" size="sm">
           <CloseDuotone size={24} variant="light" />

diff --git a/packages/components/src/Table/BaseTable/TableCell.tsx b/packages/components/src/Table/BaseTable/TableCell.tsx
@@ -71,6 +71,11 @@ const TableCellRoot = styled.td<{
       display: 'table-cell',
       verticalAlign: 'inherit',
       // boxShadow: `inset 0 -1px 0 0 ${theme.palette.accents_1}`,
+      ...(size && {
+        height: {
+          'body-medium': '56px',
+        }[`${variant}-${size}`],
+      }),
       ...(hasBorder && {
         borderLeft: `1px solid ${theme.palette.accents_1}`,
         '&:last-child': {
@@ -86,7 +91,7 @@ const TableCellRoot = styled.td<{
         fontSize: theme.font.fontSizeBase,
         fontFamily: theme.font.mono,
         lineHeight: 1.67,
-        cursor: 'pointer',
+        // cursor: 'pointer',
       }),
       ...(variant === 'body' && {
         color: theme.palette.accents_8,

diff --git a/packages/components/src/Table/BaseTable/TableRow.tsx b/packages/components/src/Table/BaseTable/TableRow.tsx
@@ -8,9 +8,9 @@ const TableRowRoot = styled('tr')`
   display: table-row;
   vertical-align: middle;
   outline: 0;
-  &:first-child > th {
+  /* &:first-child > th {
     border-top: 1px solid ${({ theme }) => theme.palette.accents_1};
-  }
+  } */
   & > td {
     box-shadow: ${({ theme }) => `inset 0 -1px 0 0 ${theme.palette.accents_1}`};
   }

diff --git a/packages/components/src/Table/BaseTable/Toolbar/index.tsx b/packages/components/src/Table/BaseTable/Toolbar/index.tsx
@@ -14,6 +14,7 @@ export type Suggestions = {
 }[];
 
 export interface ToolbarProps {
+  className?: string;
   enableBatchActions: boolean;
   enableSettingMenu?: boolean;
   onDisableBatchActions?: () => void;
@@ -52,9 +53,10 @@ export const Toolbar = (props: ToolbarProps) => {
     refetch,
     loading,
     enableSettingMenu = true,
+    className,
   } = props;
   return (
-    <ToolbarWrapper>
+    <ToolbarWrapper className={className}>
       {enableBatchActions && (
         <BatchActions>
           <div className="toolbar-left">{batchActions}</div>

diff --git a/packages/components/src/Table/DataTable/Table.tsx b/packages/components/src/Table/DataTable/Table.tsx
@@ -1,6 +1,7 @@
 import type { Header, Row, RowData, Table, TableState } from '@tanstack/react-table';
 import cx from 'classnames';
 import * as React from 'react';
+import styled from 'styled-components';
 import * as BaseTable from '../BaseTable';
 import { BaseDataTable } from './BaseTable';
 import { Pagination, TableFooter } from './Pagination';
@@ -13,6 +14,9 @@ import {
   StorageStateOptions,
 } from './interfaces';
 
+const ToolbarWithBorder = styled(Toolbar)`
+  border-bottom: 1px solid ${({ theme }) => theme.palette.accents_1};
+`;
 declare module '@tanstack/react-table' {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface TableOptionsResolved<TData extends RowData>
@@ -89,7 +93,7 @@ export function DataTable<T>({ className, table }: DataTableRootProps<T>) {
   const { options: { meta: { enable: { pagination, toolbar } = {} } = {} } = {} } = table;
   return (
     <div className={cx('table-container', className)}>
-      {!!toolbar && <Toolbar table={table} />}
+      {!!toolbar && <ToolbarWithBorder table={table} />}
       <BaseDataTable table={table} />
       {!!pagination && (
         <TableFooter>

diff --git a/packages/components/src/Table/DataTable/TableHead.tsx b/packages/components/src/Table/DataTable/TableHead.tsx
@@ -37,6 +37,7 @@ const DropdownWrapper = styled.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 `;
 
 interface TableHeadProps<TData extends RowData> {

diff --git a/packages/components/src/Table/DataTable/Toolbar.tsx b/packages/components/src/Table/DataTable/Toolbar.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classNames from 'classnames';
 
 import { Table } from '@tanstack/react-table';
 import * as BaseTable from '../BaseTable';
@@ -7,9 +8,10 @@ import { useLocales } from '../../ConfigProvider/LocaleProvider/LocaleContext';
 
 interface ToolbarProps<T> {
   table: Table<T>;
+  className?: string;
 }
 
-export function Toolbar<T>({ table }: ToolbarProps<T>) {
+export function Toolbar<T>({ table, className }: ToolbarProps<T>) {
   const {
     options: {
       meta: {
@@ -29,5 +31,11 @@ export function Toolbar<T>({ table }: ToolbarProps<T>) {
       })
     : ({ filterProps } as BaseTable.ToolbarProps);
 
-  return <BaseTable.Toolbar {...defaultToolbarProps} {...rest} />;
+  return (
+    <BaseTable.Toolbar
+      {...defaultToolbarProps}
+      {...rest}
+      className={classNames('table-toolbar', className, props.className || '')}
+    />
+  );
 }
diff --git a/packages/components/src/Table/DataTable/utils/index.tsx b/packages/components/src/Table/DataTable/utils/index.tsx
@@ -197,6 +197,7 @@ function _getDefaultTableOptions<TData extends RowData>(
     enableFilters,
     enableMultiRowSelection: enableMultiSelection,
     enableRowSelection: enableSelection,
+    enableSorting: enableSort,
     getCoreRowModel: getCoreRowModel(),
     meta: {
       tableName,