Merge pull request #99 from chenz24/fix/improve

Some improves

Author: chenz24

.changeset/fair-fireants-brush.md

@@ -0,0 +1,8 @@
+---
+'@kubed/components': patch
+---
+
+1. Divider support height and color.
+2. Fix modal cannot hide header and footer.
+3. Fix react key warning when open imperative modal.
+4. Popover support set width and contentClassName.

packages/components/src/Divider/Divider.story.tsx

@@ -28,7 +28,7 @@ export const Label = () => (
 export const Vertical = () => (
   <Group>
     <Button>1</Button>
-    <Divider direction="vertical" margins="sm" />
+    <Divider direction="vertical" height={20} margins="sm" />
     <Button>2</Button>
     <Divider direction="vertical" margins="sm" />
     <Button>3</Button>

packages/components/src/Divider/Divider.styles.ts

@@ -20,16 +20,16 @@ export const DividerWrapper = styled('div')<React.ComponentPropsWithoutRef<any>>
 
   &.horizontal {
     border-top-style: ${({ variant }) => variant};
-    border-top-width: ${({ size }) => getSizeValue(size, sizes)};
-    border-top-color: ${({ theme }) => theme.palette.border};
+    border-top-width: ${({ $size }) => getSizeValue($size, sizes)};
+    border-top-color: ${({ theme, $color }) => $color || theme.palette.border};
     margin: ${({ $margins, theme }) => getSizeValue($margins, theme.layout.spacing)} 0;
   }
 
   &.vertical {
-    align-self: stretch;
+    ${({ $height }) => ($height ? `height: ${$height}px;` : 'align-self: stretch;')};
     border-left-style: ${({ variant }) => variant};
-    border-left-color: ${({ theme }) => theme.palette.border};
-    border-left-width: ${({ size }) => getSizeValue(size, sizes)};
+    border-left-color: ${({ theme, $color }) => $color || theme.palette.border};
+    border-left-width: ${({ $size }) => getSizeValue($size, sizes)};
     margin-left: ${({ $margins, theme }) => getSizeValue($margins, theme.layout.spacing)};
     margin-right: ${({ $margins, theme }) => getSizeValue($margins, theme.layout.spacing)};
   }

packages/components/src/Divider/Divider.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'clsx';
+import cx from 'classnames';
 import forwardRef from '../utils/forwardRef';
 import { DefaultProps, KubedNumberSize } from '../theme';
 import { DividerWrapper, Label } from './Divider.styles';
@@ -28,6 +28,9 @@ export interface DividerProps extends DefaultProps {
 
   /** Top and bottom margins for horizontal variant, left and right for vertical, xs, sm, md, lg, xl for value from theme.spacing, number for margins in px */
   margins?: KubedNumberSize;
+
+  /** Divider height, only available if direction is vertical */
+  height?: number;
 }
 
 export const Divider = forwardRef<DividerProps, 'hr'>(
@@ -43,6 +46,7 @@ export const Divider = forwardRef<DividerProps, 'hr'>(
       themeOverride,
       variant = 'solid',
       margins = 0,
+      height,
       ...rest
     },
     ref
@@ -58,7 +62,9 @@ export const Divider = forwardRef<DividerProps, 'hr'>(
         direction={direction}
         variant={variant}
         $margins={margins}
-        size={size}
+        $size={size}
+        $height={height}
+        $color={color}
         {...rest}
       >
         {!!label && horizontal && (

packages/components/src/Modal/Modal.tsx

@@ -1,5 +1,6 @@
 import React, { RefObject, useEffect, useImperativeHandle, useState } from 'react';
 import cx from 'classnames';
+import { isNull } from 'lodash';
 import { Close } from '@kubed/icons';
 import { StyledDialog } from './Modal.styles';
 import { ButtonProps, Button } from '../Button/Button';
@@ -101,8 +102,7 @@ interface ModalRef {
 
 export type ModalType = 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm' | 'open';
 
-export interface ModalFuncProps
-  extends Omit<ModalProps, 'footer' | 'forceRender' | 'destroyOnClose'> {
+export interface ModalFuncProps extends Omit<ModalProps, 'forceRender' | 'destroyOnClose'> {
   content?: React.ReactNode;
   icon?: React.ReactNode;
   type?: ModalType;
@@ -126,8 +126,17 @@ const Modal = forwardRef<ModalProps, any>((props, ref) => {
     onOk?.(e);
   };
 
+  const renderHeader = () => {
+    const { header, title, description, titleIcon } = props;
+    if (header || isNull(header)) return header;
+
+    return <Field value={title} label={description} avatar={titleIcon} />;
+  };
+
   const renderFooter = () => {
-    const { okText, cancelText, confirmLoading, cancelButtonProps, okButtonProps } = props;
+    const { footer, okText, cancelText, confirmLoading, cancelButtonProps, okButtonProps } = props;
+    if (footer || isNull(footer)) return footer;
+
     return (
       <>
         <Button onClick={handleCancel} radius="xl" {...cancelButtonProps}>
@@ -148,18 +157,13 @@ const Modal = forwardRef<ModalProps, any>((props, ref) => {
   };
 
   const {
-    footer,
     visible,
     centered = true,
     getContainer,
     closeIcon,
     focusTriggerAfterClose = true,
     width = 600,
     wrapClassName,
-    header,
-    title,
-    description,
-    titleIcon,
     ...restProps
   } = props;
   const [internalVisible, setInternalVisible] = useState(visible);
@@ -178,8 +182,6 @@ const Modal = forwardRef<ModalProps, any>((props, ref) => {
 
   const renderCloseIcon = <>{closeIcon || <Close size={24} />}</>;
 
-  const renderHeader = header || <Field value={title} label={description} avatar={titleIcon} />;
-
   return (
     <StyledDialog
       {...restProps}
@@ -190,8 +192,8 @@ const Modal = forwardRef<ModalProps, any>((props, ref) => {
       width={width}
       closeIcon={renderCloseIcon}
       onClose={handleCancel}
-      title={renderHeader}
-      footer={footer || renderFooter()}
+      title={renderHeader()}
+      footer={renderFooter()}
       transitionName={getTransitionName('kubed', 'zoom', props.transitionName)}
       maskTransitionName={getTransitionName('kubed', 'fade', props.maskTransitionName)}
     />

packages/components/src/Modal/ModalProvider/ModalProvider.tsx

@@ -52,9 +52,13 @@ export function ModalProvider({ children }: PropsWithChildren<Props>) {
       {children}
       {modalState.map((modal) => {
         if (!modal.type) {
-          return <Modal {...modal}>{modal.content}</Modal>;
+          return (
+            <Modal {...modal} key={modal.id}>
+              {modal.content}
+            </Modal>
+          );
         }
-        return <ConfirmDialog {...modal} />;
+        return <ConfirmDialog {...modal} key={modal.id} />;
       })}
     </ModalContext.Provider>
   );

packages/components/src/Popover/Popover.story.tsx

@@ -8,7 +8,12 @@ export default {
 
 export const Basic = () => (
   <div style={{ marginTop: '70px', marginLeft: '100px' }}>
-    <Popover title="popover title" content="Display additional, floating content on click">
+    <Popover
+      title="popover title"
+      content="Display additional, floating content on click"
+      width={240}
+      contentClassName="test-classname"
+    >
       <Button radius="xl">KubeSphere</Button>
     </Popover>
   </div>

packages/components/src/Popover/Popover.tsx

@@ -3,9 +3,14 @@ import styled from 'styled-components';
 import { Tooltip, TooltipProps } from '../Tooltip/Tooltip';
 import { addColorAlpha } from '../utils/color';
 
-const PopoverWrapper = styled.div`
+interface WrapperProps {
+  $width?: number;
+}
+
+const PopoverWrapper = styled('div')<WrapperProps>`
   display: flex;
   flex-direction: column;
+  ${({ $width }) => ($width ? `width: ${$width}px` : null)};
 `;
 
 const PopoverTitle = styled.div`
@@ -19,18 +24,22 @@ const PopoverContent = styled.div`
 
 export interface PopoverProps extends TooltipProps {
   title?: string;
+  width?: number;
+  contentClassName?: string;
 }
 
 export function Popover({
   title,
   children,
   maxWidth = '264px',
+  width,
   interactive = true,
   content,
+  contentClassName,
   ...rest
 }: PopoverProps) {
   const popContent = (
-    <PopoverWrapper>
+    <PopoverWrapper $width={width} className={contentClassName}>
       {title && <PopoverTitle>{title}</PopoverTitle>}
       <PopoverContent>{content}</PopoverContent>
     </PopoverWrapper>