🚀 - Allow padding to be Zero

[SarjuHansaliya]

Which @codeimage/* package(s) are relevant/releated to the feature request?

ui

Description

Currently padding options are 16, 32, 64, 128.

It would be great if it allow 0 option also.

If you think this is helpful, I can work on creating PR.

[riccardoperra]

Hi, yes this could be helpful 🙂

In my opinion the segmentedControl cannot be used anymore since there is no enough space for five items. Instead, we should use the Select control.

Anyway, some info for the pr since navigating into the codebase could be painful:

Here’s the configuration file with the padding settings
configuration.ts

I’d recommend you to refactor the current number[] array to a key-value object with label and value property, just like the “editorRadius” config.

The editor ui for padding is here: FrameStyleForm

You can copy a select implementation from this:

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

Lines 47 to 56 in d3bcdac

	const languagesOptions = createSelectOptions(
	languages.map(language => ({
	label: language.label,
	value: language.id,
	})),
	{
	key: 'label',
	valueKey: 'value',
	},
	);

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

Lines 106 to 120 in d3bcdac

	<PanelRow for={'frameLanguageField'} label={t('frame.language')}>
	<TwoColumnPanelRow>
	<SuspenseEditorItem
	fallback={<SkeletonLine width={'100%'} height={'26px'} />}
	>
	<Select
	{...languagesOptions.props()}
	{...languagesOptions.controlled(
	() => editor().languageId,
	language => {
	setLanguageId(language!);
	getUmami().track('change-language', {
	language: language!,
	});
	},

Note: currently the radius between the frame and the editor could be different, then the editor frame border radius must be 0 when frame padding = 0

I think you can update here the “styles.terminalVars.radius” css variable

codeimage/apps/codeimage/src/components/Terminal/TerminalHost.tsx

Lines 54 to 66 in d3bcdac

	style={assignInlineVars({
	[styles.terminalVars.headerBackgroundColor]:
	tabTheme()?.background ?? '',
	[styles.terminalVars.backgroundColor]: background(),
	[styles.terminalVars.textColor]: props.textColor,
	[styles.terminalVars.boxShadow]: props.shadow ?? 'unset',
	[styles.terminalVars.tabTextColor]: tabTheme()?.textColor ?? '',
	[styles.terminalVars.tabAccentActiveBackground]:
	tabTheme().activeTabBackground ?? '',
	[styles.terminalVars.tabAccentInactiveBackground]:
	tabTheme().inactiveTabBackground ?? '',
	...(props.style ?? {}),
	})}

[SarjuHansaliya]

awesome @riccardoperra thank you for the information, let me work on it.

[riccardoperra]

Thanks for your collaboration 😃 use the contributions.md to startup the project but if you need something, just ask.

if you don’t want to run docker etc because you don’t need the backend for this change, I think you will have to run the build command manually for each package in “packages” folder, except “api-types” (which requires you to have a backend with Postgres up)

[SarjuHansaliya]

@riccardoperra I have created PR here #625

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[riccardoperra]

#625 to be merged

[riccardoperra]

Released with 1.6.0. Thanks for your contribution :)

[SarjuHansaliya]

Awesome @riccardoperra Thanks for publishing those changes