[feat](@svelteui/core): add Switch innerLabelSize property (#440)

* [@svelteui/core]: added Switch innerLabelSize property * [@svelteui/core]: modified Switch onLabel position calculation * [fix](docs): fix small typo in the new prop for Switch * [feat](@svelteui/core): more stories for Switch --------- Co-authored-by: Ana Margarida <[email protected]>
svelteuidev · Aug 20, 2023 · c487a92 · c487a92
1 parent b96c2d7
commit c487a92
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 3 deletions.
diff --git a/apps/docs/src/routes/core/switch/+page.md b/apps/docs/src/routes/core/switch/+page.md
@@ -32,6 +32,8 @@ Switch component is used to enable/disable something, normally used for boolean
 
 There is support for inserting text inside the switch for when it is enabled and/or disabled. It is also possible to control the size of the switch with predefined values: `xs`, `sm`, `md`, `lg`, `xl`.
 
+This inner label size can be overridden using the `insideLabelSize` property.
+
 <Demo demo={SwitchDemos.inner} />
 
 ## Accessibility

diff --git a/packages/svelteui-core/src/components/Switch/Switch.d.ts b/packages/svelteui-core/src/components/Switch/Switch.d.ts
@@ -16,6 +16,7 @@ export interface SwitchProps
 	color?: SvelteUIColor;
 	size?: SvelteUINumberSize;
 	radius?: SvelteUINumberSize;
+	insideLabelSize?: SvelteUINumberSize;
 	transitionFunction?: SwitchTimingFunction;
 	className?: string;
 	id?: string;

diff --git a/packages/svelteui-core/src/components/Switch/Switch.stories.svelte b/packages/svelteui-core/src/components/Switch/Switch.stories.svelte
@@ -14,3 +14,15 @@
 <Story name="Disabled" id="switchDisabledStory">
 	<Switch disabled />
 </Story>
+
+<Story
+	name="With label"
+	id="switchLabelStory"
+	args={{ label: 'I would like to receive annoying notifications ' }}
+/>
+
+<Story
+	name="With inside label"
+	id="switchInsideLabelStory"
+	args={{ size: 'md', onLabel: 'ON', offLabel: 'OFF' }}
+/>
diff --git a/packages/svelteui-core/src/components/Switch/Switch.styles.ts b/packages/svelteui-core/src/components/Switch/Switch.styles.ts
@@ -6,6 +6,7 @@ export interface SwitchStyleParams {
 	color: SvelteUIColor;
 	radius: SvelteUINumberSize;
 	size: SvelteUINumberSize;
+	insideLabelSize: SvelteUINumberSize;
 	transitionFunction: SwitchTimingFunction;
 	onLabel: string;
 	offLabel: string;
@@ -58,7 +59,18 @@ export const sizes = {
 };
 
 export default createStyles(
-	(theme, { radius, size, transitionFunction, color, offLabel, onLabel }: SwitchStyleParams) => {
+	(
+		theme,
+		{
+			radius,
+			size,
+			transitionFunction,
+			color,
+			offLabel,
+			onLabel,
+			insideLabelSize
+		}: SwitchStyleParams
+	) => {
 		return {
 			root: {
 				display: 'flex',
@@ -83,7 +95,7 @@ export default createStyles(
 				appearance: 'none',
 				display: 'flex',
 				alignItems: 'center',
-				fontSize: sizes[size].insideLabelFont,
+				fontSize: insideLabelSize || sizes[size].insideLabelFont,
 				fontWeight: 600,
 
 				[`${dark.selector} &`]: {
@@ -142,7 +154,7 @@ export default createStyles(
 					},
 
 					'&::after': {
-						transform: 'translateX(-200%)',
+						left: '10%',
 						content: onLabel ? `'${onLabel}'` : "''",
 						color: 'White'
 					}

diff --git a/packages/svelteui-core/src/components/Switch/Switch.svelte b/packages/svelteui-core/src/components/Switch/Switch.svelte
@@ -14,6 +14,7 @@
 		color: $$Props['color'] = 'blue',
 		size: $$Props['size'] = 'sm',
 		radius: $$Props['radius'] = 'xl',
+		insideLabelSize: $$Props['insideLabelSize'] = undefined,
 		transitionFunction: $$Props['transitionFunction'] = 'linear',
 		id: $$Props['id'] = randomID(),
 		label: $$Props['label'] = '',
@@ -31,6 +32,7 @@
 			color,
 			offLabel,
 			onLabel,
+			insideLabelSize,
 			radius,
 			size,
 			transitionFunction