Fix how the changeTo label is overriden (related to #65)

Ennoriel · Jan 26, 2024 · 973043f · 973043f
1 parent a2277bd
commit 973043f
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 53 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte-awesome-color-picker
 
+## 3.0.4
+
+### Patch Changes
+
+- Fix how the changeTo label is overriden (related to #65)
+
 ## 3.0.3
 
 ### Patch Changes

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "svelte-awesome-color-picker",
-	"version": "3.0.3",
+	"version": "3.0.4",
 	"description": "A highly customizable color picker component library",
 	"homepage": "https://svelte-awesome-color-picker.vercel.app",
 	"repository": {
@@ -68,4 +68,4 @@
 		"svelte",
 		"color picker"
 	]
-}
+}
diff --git a/src/lib/components/ColorPicker.svelte b/src/lib/components/ColorPicker.svelte
@@ -75,10 +75,10 @@
 	/** required WCAG contrast level */
 	export let a11yLevel: 'AA' | 'AAA' = 'AA';
 
-	/** all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts) */
+	/** all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/utils/texts.ts) */
 	export let texts: TextsPartial | undefined = undefined;
 
-	/** all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts) */
+	/** all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/utils/texts.ts) */
 	export let a11yTexts: A11yTextsPartial | undefined = undefined;
 
 	/**
@@ -122,7 +122,7 @@
 				...defaultTexts.color,
 				...texts?.color
 			},
-			changeTo: defaultTexts.changeTo ?? texts?.changeTo
+			changeTo: texts?.changeTo ?? defaultTexts.changeTo
 		};
 	}
 
@@ -367,8 +367,8 @@ import ColorPicker from 'svelte-awesome-color-picker';
 @prop disableCloseClickOutside: boolean = false — If set to true, it will not be possible to close the color picker by clicking outside
 @prop a11yColors: Array&lt;A11yColor&gt; = [{ bgHex: '#ffffff' }] — used with the A11yVariant. Define the accessibility examples in the color picker
 @prop a11yLevel: 'AA' | 'AAA' = 'AA' — required WCAG contrast level
-@prop texts: TextsPartial | undefined = undefined — all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts)
-@prop a11yTexts: A11yTextsPartial | undefined = undefined — all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts)
+@prop texts: TextsPartial | undefined = undefined — all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/utils/texts.ts)
+@prop a11yTexts: A11yTextsPartial | undefined = undefined — all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/utils/texts.ts)
 -->
 <style>
 	span {

diff --git a/src/lib/components/variant/accessibility/A11yNotice.svelte b/src/lib/components/variant/accessibility/A11yNotice.svelte
@@ -19,7 +19,7 @@
 	/** required WCAG contrast level */
 	export let a11yLevel: 'AA' | 'AAA';
 
-	/** all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts) */
+	/** all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/utils/texts.ts) */
 	export let a11yTexts: A11yTextsPartial | undefined = undefined;
 
 	extend([a11yPlugin]);
@@ -79,7 +79,7 @@ import { A11yVariant } from 'svelte-awesome-color-picker';
 @prop hex: string — hex color
 @prop a11yColors: Array&lt;A11yColor&gt; — define the accessibility examples in the color picker
 @prop a11yLevel: 'AA' | 'AAA' — required WCAG contrast level
-@prop a11yTexts: A11yTextsPartial | undefined = undefined — all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts)
+@prop a11yTexts: A11yTextsPartial | undefined = undefined — all a11y translation tokens used in the library; override with translations if necessary; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/utils/texts.ts)
 -->
 <style>
 	.a11y-notice {

diff --git a/src/lib/components/variant/default/NullabilityCheckbox.svelte b/src/lib/components/variant/default/NullabilityCheckbox.svelte
@@ -4,7 +4,7 @@
 	/** whether the color picker is undefined */
 	export let isUndefined: boolean;
 
-	/** all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts) */
+	/** all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/utils/texts.ts) */
 	export let texts: Texts;
 </script>
 

diff --git a/src/lib/components/variant/default/TextInput.svelte b/src/lib/components/variant/default/TextInput.svelte
@@ -22,7 +22,7 @@
 	/** configure which hex, rgb and hsv inputs will be visible and in which order. If overridden, it is necessary to provide at least one value */
 	export let textInputModes: Array<'hex' | 'rgb' | 'hsv'>;
 
-	/** all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts) */
+	/** all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/utils/texts.ts) */
 	export let texts: Texts;
 
 	const HEX_COLOR_REGEX = /^#?([A-F0-9]{6}|[A-F0-9]{8})$/i;
@@ -109,7 +109,7 @@ _N.A._
 @prop hsv: HsvaColor — hsv color
 @prop hex: string — hex color
 @prop textInputModes: Array&lt;'hex' | 'rgb' | 'hsv'&gt; — configure which hex, rgb and hsv inputs will be visible and in which order. If overridden, it is necessary to provide at least one value
-@prop texts: Texts — all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/texts.ts)
+@prop texts: Texts — all translation tokens used in the library; can be partially overridden; see [full object type](https://github.com/Ennoriel/svelte-awesome-color-picker/blob/master/src/lib/utils/texts.ts)
 -->
 <style>
 	.text-input {

diff --git a/src/routes/sections/40-Summary.md b/src/routes/sections/40-Summary.md
@@ -14,6 +14,7 @@
   - [Bind event '`on:input`'](#bind-event-oninput)
   - [Override the css variables](#override-the-css-variables)
   - [Dark theme](#dark-theme)
+  - [Override the css variables](#override-the-css-variables)
 - [Api](#api)
   - [Color picker](#color-picker)
     - [events](#events)

diff --git a/src/routes/sections/50-Examples.md b/src/routes/sections/50-Examples.md
@@ -272,3 +272,71 @@ In this example, the color is appended to the history at each event.
 
 </div>
 </div>
+
+### Override the css variables
+
+Note: the `texts` props can be **partially** overridden. It's mostly used to translate the component. Most texts are used for accessibility aria-labels.
+
+<div class="example-wrapper">
+  <div>
+	<ColorPicker
+		bind:rgb
+		bind:hsv
+		bind:hex
+		label="Choisir une couleur"
+		texts={{
+			label: {
+				h: 'teinte',
+				s: 'saturation',
+				v: 'luminosité',
+				r: 'rouge',
+				g: 'vert',
+				b: 'bleu',
+				a: 'transparence',
+				hex: 'couleur hexadécimale',
+				withoutColor: 'sans couleur'
+			},
+			color: {
+				rgb: 'rgb',
+				hsv: 'hsv',
+				hex: 'hex'
+			},
+			changeTo: 'changer à '
+		}}
+	/>
+  </div>
+  <div class="overflow">
+
+**Source code**
+
+<!-- prettier-ignore -->
+```svelte
+<ColorPicker
+	bind:rgb
+	bind:hsv
+	bind:hex
+	label="Choisir une couleur"
+	texts={{
+		label: {
+			h: 'teinte',
+			s: 'saturation',
+			v: 'luminosité',
+			r: 'rouge',
+			g: 'vert',
+			b: 'bleu',
+			a: 'transparence',
+			hex: 'couleur hexadécimale',
+			withoutColor: 'sans couleur'
+		},
+		color: {
+			rgb: 'rgb',
+			hsv: 'hsv',
+			hex: 'hex'
+		},
+		changeTo: 'changer à '
+	}}
+/>
+```
+
+</div>
+</div>