fix(app): allow zero padding

Author: SarjuHansaliya

apps/codeimage/src/components/PropertyEditor/FrameStyleForm.tsx

@@ -12,12 +12,24 @@ import {CustomColorPicker} from './controls/ColorPicker/CustomColorPicker';
 import {PanelHeader} from './PanelHeader';
 import {PanelRow, TwoColumnPanelRow} from './PanelRow';
 import {SuspenseEditorItem} from './SuspenseEditorItem';
+import {Select, createSelectOptions} from '@codeui/kit';
 
 export const FrameStyleForm: ParentComponent = () => {
   const [t] = useI18n<AppLocaleEntries>();
   const {editorPadding, editorRadius} = appEnvironment;
   const frame = getFrameState();
 
+  const paddingOptions = createSelectOptions(
+    editorPadding.map(padding => ({
+      label: padding.label,
+      value: padding.value,
+    })),
+    {
+      key: 'label',
+      valueKey: 'value',
+    },
+  );
+
   return (
     <>
       <PanelHeader label={t('frame.frame')} />
@@ -27,16 +39,24 @@ export const FrameStyleForm: ParentComponent = () => {
           <SuspenseEditorItem
             fallback={<SkeletonLine width={'100%'} height={'26px'} />}
           >
-            <SegmentedField
-              adapt
+            <Select
+              {...paddingOptions.props()}
+              {...paddingOptions.controlled(
+                () => String(frame.store.padding),
+                padding => {
+                  if (typeof padding !== 'undefined') {
+                    frame.setPadding(Number(padding));
+                    // when padding is 0, we would like to set radius to bigger number to hide any background issues
+                    if (Number(padding) === 0) {
+                      frame.setRadius(16);
+                    }
+                  }
+                },
+              )}
+              options={paddingOptions.options()}
+              aria-label={'Padding'}
               id={'paddingField'}
               size={'xs'}
-              value={frame.store.padding}
-              onChange={frame.setPadding}
-              items={editorPadding.map(padding => ({
-                label: padding.toString(),
-                value: padding,
-              }))}
             />
           </SuspenseEditorItem>
         </TwoColumnPanelRow>

apps/codeimage/src/core/configuration.ts

@@ -7,7 +7,13 @@ export const [appEnvironment] = createConfiguration({
   locales: SUPPORTED_LOCALES,
   themes: [],
   languages: [],
-  editorPadding: [16, 32, 64, 128],
+  editorPadding: [
+    {label: '0', value: "0"},
+    {label: '16', value: "16"},
+    {label: '32', value: "32"},
+    {label: '64', value: "64"},
+    {label: '128', value: "128"},
+  ],
   editorRadius: [
     {label: '0', value: 0},
     {label: '8', value: 8},

apps/codeimage/src/state/editor/frame.ts

@@ -86,9 +86,11 @@ const frameState = defineStore(() => getInitialFrameState())
       .hold(store.commands.setNextPadding, (_, {state}) => {
         const availablePadding = appEnvironment.editorPadding;
         const padding = state.padding;
-        const currentIndex = appEnvironment.editorPadding.indexOf(padding);
+        const currentIndex = appEnvironment.editorPadding.findIndex(
+          item => Number(item.value) === padding,
+        );
         const next = (currentIndex + 1) % availablePadding.length;
-        return {...state, padding: availablePadding[next]};
+        return {...state, padding: Number(availablePadding[next].value)};
       })
       .hold(store.commands.setFromPreset, presetData => {
         store.set(state => ({...state, ...presetData}));