Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[@svelteui/core] Checkbox group #46

Merged

Conversation

BeeMargarida
Copy link
Member

@BeeMargarida BeeMargarida commented May 7, 2022

Added checkbox group component.

Decision taken:

  • It differs from the Mantine approach, for example, where the checkbox instead of being passed as slots, are built by the CheckboxGroup component, since this is the only way for it to access its children props.
  • Due to the existence of a known limitation of svelte in the usage of groups in checkboxes - bind:group does not work with nested components sveltejs/svelte#2308 - another approach was taken (using the on:change and managing the checked entities inside CheckboxGroup)
checkbox-group.mp4

Example Code:

<script>
       const items = [
		{
			value: "react",
			label: "React"
		},
		{
			value: "vue",
			label: "Vue"
		},
		{
			value: "svelte",
			label: "Svelte"
		}
	];
	let value = ["svelte"];
	$: console.log("value", value);
</script>

<CheckboxGroup label={"Choose your favorite framework"} description={"Choose carefuly"} bind:value={value} items={items} />
<div>Value contents: {JSON.stringify(value)}</div>

<div style="margin-top: 30px"></div>
<CheckboxGroup label={"Now with spacing"} bind:value={value} items={items} spacing={'xs'} error={"Something went wrong, oops"} />

<div style="margin-top: 30px"></div>
<CheckboxGroup label={"Now with direction 'column'"}  bind:value={value} items={items} direction={'column'}/>

Before submitting the PR, please make sure you do the following

  • Read the Contributing guide
  • Prefix your PR title with [@svelteui/core], [@svelteui/actions], [@svelteui/motion], [@svelteui/core], [core], or [docs].
  • This message body should clearly illustrate what problems it solves.

Tests

  • Run the tests with npm test and lint the project with npm run lint or just run npm run repo:prepush and check to see if it's passing.

@BeeMargarida BeeMargarida changed the base branch from main to next-minor May 7, 2022 13:51
@Brisklemonade Brisklemonade merged commit fd3ed24 into svelteuidev:next-minor May 7, 2022
@BeeMargarida BeeMargarida deleted the core/checkbox-group branch May 8, 2022 06:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants