fix: fix styling of ColorPicker

packages/base-ui/package.json

@@ -46,7 +46,6 @@
  "build:doc": "storybook build"
  },
  "dependencies": {
- "@rc-component/trigger": "^1.18.1",
  "@univerjs/base-render": "workspace:*",
  "@univerjs/core": "workspace:*",
  "@univerjs/design": "workspace:*",

packages/design/src/components/color-picker/index.module.less

@@ -53,6 +53,8 @@
  }
 
  &-handler {
+ transform: translateY(-1px);
+
  box-sizing: border-box;
  width: @default-handler-size;
  height: @default-handler-size;
@@ -110,7 +112,7 @@
  &-slider-container {
  display: flex;
  flex-direction: row-reverse;
- gap: var(--margin-xs);
+ gap: var(--margin-sm);
 
  .color-picker-slider-group {
  flex: 1;

packages/ui-plugin-sheets/src/components/border-panel/BorderPanel.tsx

@@ -129,6 +129,10 @@ export function BorderPanel(props: IBorderPanelProps) {
  return Icon && <Icon extend={{ colorChannel1: 'rgb(var(--primary-color))' }} />;
  }
 
+ function stopPropagation(e: React.MouseEvent) {
+ e.stopPropagation();
+ }
+
  return (
  <section className={styles.uiPluginSheetsBorderPanel}>
  <div className={styles.uiPluginSheetsBorderPanelPosition}>
@@ -150,12 +154,12 @@ export function BorderPanel(props: IBorderPanelProps) {
  offset: [0, 18],
  }}
  overlay={
- <section className={styles.uiPluginSheetsBorderPanelBoard}>
+ <section className={styles.uiPluginSheetsBorderPanelBoard} onClick={stopPropagation}>
  <ColorPicker onChange={(value) => handleClick({ value }, BorderPanelType.COLOR)} />
  </section>
  }
  >
- <a className={styles.uiPluginSheetsBorderPanelButton} onClick={(e) => e.stopPropagation()}>
+ <a className={styles.uiPluginSheetsBorderPanelButton} onClick={stopPropagation}>
  <PaintBucket extend={{ colorChannel1: 'rgb(var(--primary-color))' }} />
  <span className={styles.uiPluginSheetsBorderPanelMoreIcon}>
  <MoreDownSingle />
@@ -170,20 +174,22 @@ export function BorderPanel(props: IBorderPanelProps) {
  offset: [0, 18],
  }}
  overlay={
- <Menu>
- {BORDER_SIZE_CHILDREN.map((item) => (
- <MenuItem
- key={item.value}
- eventKey={item.value.toString()}
- onClick={() => handleClick({ value: item.value }, BorderPanelType.STYLE)}
- >
- <BorderLine type={item.value} />
- </MenuItem>
- ))}
- </Menu>
+ <section onClick={stopPropagation}>
+ <Menu>
+ {BORDER_SIZE_CHILDREN.map((item) => (
+ <MenuItem
+ key={item.value}
+ eventKey={item.value.toString()}
+ onClick={() => handleClick({ value: item.value }, BorderPanelType.STYLE)}
+ >
+ <BorderLine type={item.value} />
+ </MenuItem>
+ ))}
+ </Menu>
+ </section>
  }
  >
- <a className={styles.uiPluginSheetsBorderPanelButton} onClick={(e) => e.stopPropagation()}>
+ <a className={styles.uiPluginSheetsBorderPanelButton} onClick={stopPropagation}>
  <BorderLine type={BorderStyleTypes.THIN} />
  <span className={styles.uiPluginSheetsBorderPanelMoreIcon}>
  <MoreDownSingle />

packages/ui-plugin-sheets/src/components/border-panel/index.module.less

@@ -22,6 +22,8 @@
 
  font-size: var(--font-size-lg);
 
+ border-radius: var(--border-radius-base);
+
  &:hover {
  background-color: rgb(var(--bg-color-hover));
  }