button-toggle improvements

CHANGELOG.md

@@ -2,6 +2,22 @@ Changelog
 =========
 
 
+## v8.0.0 *(2023-07-?)*
+- **Improved:** `info`, `error` and `label` attributes are now supported on other inputs (`Autocomplete`, `Datepicker`, `Select`, `ButtonToggle`, and `Toggle`).
+
+### Breaking changes!
+
+#### Autocomplete
+- HTML structure changed `.autocomplete input` --> `.autocomplete .input-text-inner .input-text-row input`
+
+
+#### Select
+- HTML structure changed `.select-wrap select` --> `.select .input-text-inner .input-text-row select`
+
+
+----
+
+
 ## v7.1.2 *(2023-07-05)*
 - Fix `Checkbox` label (don't render empty label if no label attribute was passed).
 
@@ -27,7 +43,7 @@ Changelog
 ## v7.0.0 *(2023-06-28)*
 - **New:** [InfoBar](#InfoBar) component.
 - **New:** [InputText](#InputText), [InputNumber](#InputNumber), and [Radio](#Radio) components.
-- **New:** `info`, `error` and `label` attributes are now supported in all basic inputs (`InputText`, `InputNumber`, `InputMath`, `InputPassword`, `Radio`, and `Checkbox`).
+- **New:** `info`, `error` and `label` attributes are now supported on all basic inputs (`InputText`, `InputNumber`, `InputMath`, `InputPassword`, `Radio`, and `Checkbox`).
 - **Improved:** `InputMath` component: support for `()` characters, to allow for more complex expressions.
 
 ### Breaking changes!
@@ -240,6 +256,9 @@ Changelog
 - rebrand `simple-ui-components-in-svelte` to `@perfectthings/ui`
 
 
+----
+
+
 ## v5.1.0 *(2023-03-12)*
 - Better Menu highlighting (doesn't hl first item on open, mouseout removes the highlighting), inline with how native menus work on MacOS
 - Mobile friendlier buttons (touchstart invokes :active styling)
@@ -281,11 +300,17 @@ Changelog
 - Components don't use `$$props` anymore, as it was causing issues with the `class` prop. Instead, the props are now explicitly passed down to the component. This is a good thing to do, as it makes the components more explicit and easier to understand.
 
 
+----
+
+
 ## v4.0.0 *(2023-02-28)*
 - Breaking change: renamed components: `Item` -> `MenuItem`, `Separator` -> `MenuSeparator`
 - Refactored the folder structure
 
 
+----
+
+
 ## v3.1.2 *(2023-01-04)*
 - Toggle's `innerWidth` function was somehow overwriting `window.innerWidth` property (maybe a compiler issue?)
 
@@ -310,8 +335,14 @@ Changelog
 - some components (where possible) are now using `$$props` to pass-through the properties of the instance down to the component.
 
 
+----
+
+
 ## v2.1.1 (2022-12-24)
 - breaking change: `dist` folder has been renamed to `docs`, as this is the only allowed name for a GH pages folder so that the GH pages is published automatically (without writing a GH action specifically for this).
 
 
+----
+
+
 ## v1.7.12

docs-src/components/button-toggle/ButtonToggle.svelte

@@ -36,6 +36,17 @@
 <ButtonToggle items="{strings}" value="One" /><br><br>
 
 
+<h3>Label</h3>
+<ButtonToggle items="{items}" label="Pick one" />
+
+<h3>Info</h3>
+<ButtonToggle items="{items}" label="Pick one" info="Pick your pick" />
+
+<h3>Error</h3>
+<ButtonToggle items="{items}"
+	label="Pick one"
+	error="{error}"
+	on:change="{onchange}"/>
 
 
 <CodeExample html="{exampleHtml}" />
@@ -56,6 +67,9 @@ const apiProps = [
 	{ name: 'class', type: 'string', description: 'Additional css class name to be added to the component.' },
 	{ name: 'disabled', description: 'Makes the component disabled.' },
 	{ name: 'id', type: 'string', description: 'Assign id to the first radio button in the group (useful for the associate label\'s <i>for</i> attribute)' },
+	{ name: 'info', type: 'string', description: 'Show info message above the toggle.' },
+	{ name: 'error', type: 'string', description: 'Error message to show above the toggle.' },
+	{ name: 'label', type: 'string', description: 'Label for the toggle.' },
 	{ name: 'items', type: 'array', required: true, description: 'An array of strings or objects in the following format: <code>&lbrace; name: string, value: string | number, icon?: string &rbrace;</code>' },
 	{ name: 'name', type: 'string', description: 'Assign name to the underlying radio group' },
 	{ name: 'round', description: 'Makes the buttons, on both sides of the group, round.' },
@@ -108,4 +122,12 @@ const icons = [
 
 const strings = ['One', 'Two', 'Three'];
 
+let error = 'You picked wrong!';
+
+function onchange (e) {
+	const val = e.detail;
+	error = val === '1' ? '' : 'You picked wrong!';
+
+}
+
 </script>

docs-src/components/button/Button.css

@@ -0,0 +1,12 @@
+.button-demo-props {
+	display: flex;
+	flex-flow: column;
+	align-items: flex-start;
+	justify-content: flex-start;
+	gap: 0.5rem;
+	width: clamp(300px, 50vw, 600px);
+}
+
+.button-demo-props .input-text { display: flex; flex-flow: row; width: 100%; }
+.button-demo-props .input-text .label { width: 8rem; }
+.button-demo-props .input-text .input-text-inner { flex: 1; }

docs-src/components/button/Button.svelte

@@ -1,42 +1,33 @@
 <h2>Button</h2>
 
-<div class="docs-layout">
-	<div class="docs-column">
-		<h3>Demo</h3>
-		{#if buttonText}
-			<Button {...props}>{buttonText}</Button>
-		{:else}
-			<Button {...props}/>
-		{/if}
-
-		<hr>
-		<h3>Example instantiation</h3>
-		<CodeBox tag="Button" text="{buttonText}" {props} />
-	</div>
-	<div class="docs-column">
-		<h3>Properties</h3>
-		<h4>Text</h4>
-		<input bind:value="{buttonText}"/>
-		<h4>Style</h4>
-		<ButtonToggle items="{buttonStyles}" value="" on:change="{onStyleChange}" />
-		<h4>Type</h4>
-		<ButtonToggle items="{buttonTypes}" value="" on:change="{onTypeChange}" />
-		<h4>Icon</h4>
-		<ButtonToggle items="{buttonIcons}" value="" on:change="{onIconChange}" />
-		<h4>Round</h4>
-		<Toggle bind:value="{props.round}"/>
-		<h4>Disabled</h4>
-		<Toggle bind:value="{props.disabled}"/>
-	</div>
+<h3>Live demo</h3>
+<div class="docs-buttons-row" style="margin-bottom: 2rem;">
+	{#if buttonText}
+		<Button {...props}>{buttonText}</Button>
+	{:else}
+		<Button {...props}/>
+	{/if}
 </div>
 
+<CodeBox tag="Button" text="{buttonText}" {props} />
+
+<hr>
+
+<div class="button-demo-props">
+	<InputText label="Text" bind:value="{buttonText}"/>
+	<ButtonToggle label="Style" items="{buttonStyles}" value="" on:change="{onStyleChange}" />
+	<ButtonToggle label="Type" items="{buttonTypes}" value="" on:change="{onTypeChange}" />
+	<ButtonToggle label="Icon" items="{buttonIcons}" value="" on:change="{onIconChange}" />
+	<Toggle label="Round" bind:value="{props.round}"/>
+	<Toggle label="Disabled" bind:value="{props.disabled}"/>
+</div>
 
 
 <hr>
 <API props="{apiProps}"/>
 
 <script>
-import { Button, ButtonToggle, Toggle } from '../../../src';
+import { Button, ButtonToggle, Toggle, InputText } from '../../../src';
 import { API } from '../../api-table';
 import { CodeBox } from '../../code-example';