fix(core): disable border thickness setting when no border is selected (#8152)

close AF-1351

Author: JimmFly

packages/frontend/component/src/ui/slider/index.css.ts

@@ -3,7 +3,13 @@ import { createVar, style } from '@vanilla-extract/css';
 
 export const thumbSize = createVar();
 
-export const root = style({});
+export const root = style({
+  selectors: {
+    '&[data-disabled]': {
+      opacity: 0.5,
+    },
+  },
+});
 
 export const trackStyle = style({
   width: '100%',
@@ -13,6 +19,11 @@ export const trackStyle = style({
   alignItems: 'center',
   padding: '12px 0',
   cursor: 'pointer',
+  selectors: {
+    '&[data-disabled]': {
+      cursor: 'not-allowed',
+    },
+  },
 });
 export const fakeTrackStyle = style({
   width: `calc(100% - ${thumbSize})`,
@@ -42,6 +53,11 @@ export const thumbStyle = style({
   top: '50%',
   transform: 'translate(-50%, -50%)',
   cursor: 'pointer',
+  selectors: {
+    '&[data-disabled]': {
+      cursor: 'not-allowed',
+    },
+  },
 });
 
 export const nodeStyle = style({
@@ -58,5 +74,8 @@ export const nodeStyle = style({
     '&[data-active="true"]': {
       backgroundColor: cssVarV2('icon/primary'),
     },
+    '&[data-disabled="true"]': {
+      cursor: 'not-allowed',
+    },
   },
 });

packages/frontend/component/src/ui/slider/slider.tsx

@@ -71,6 +71,7 @@ export const Slider = ({
   thumbStyle,
   noteStyle,
   thumbSize = 14,
+  disabled,
   ...props
 }: SliderProps) => {
   const sliderRef = useRef<HTMLDivElement>(null);
@@ -93,6 +94,7 @@ export const Slider = ({
         style={rootStyle}
         className={styles.root}
         {...props}
+        disabled={disabled}
       >
         <Sliders.Track className={styles.trackStyle} ref={sliderRef}>
           <div className={styles.fakeTrackStyle} style={trackStyle}>
@@ -108,6 +110,7 @@ export const Slider = ({
                 key={index}
                 className={styles.nodeStyle}
                 data-active={value && value[0] >= nodeValue}
+                data-disabled={disabled}
                 style={{
                   left: calcStepMarkOffset(
                     index,

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/note.tsx

@@ -256,6 +256,7 @@ export const NoteSettings = () => {
           max={12}
           step={2}
           nodes={[2, 4, 6, 8, 10, 12]}
+          disabled={borderStyle === StrokeStyle.None}
         />
       </SettingRow>
     </>

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/shape.tsx

@@ -494,6 +494,7 @@ export const ShapeSettings = () => {
           max={12}
           step={2}
           nodes={[2, 4, 6, 8, 10, 12]}
+          disabled={borderStyle === StrokeStyle.None}
         />
       </SettingRow>
       <SettingRow