ux nits

argyleink · Nov 28, 2023 · 7a8b631 · 7a8b631
1 parent 4212567
commit 7a8b631
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/docs/src/components/easings.svelte b/docs/src/components/easings.svelte
@@ -1,5 +1,6 @@
 <script>
 	export let ease;
+	export let prefix;
 	export let playstate = 'paused';
 	export let duration = '2s';
 	export let strength = 3;
@@ -27,18 +28,18 @@
 				<path d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
 			</svg>
 		</button>
-		<select bind:value={strength}>
+		<select bind:value={strength} title="Change preview easing strength">
 			{#each strengths as str}
 				<option value={str}>
-					{ease} {str}
+					{prefix} {str}
 				</option>
 			{/each}
 		</select>
-		<select bind:value={animation}>
+		<select bind:value={animation} title="Change preview animation style">
 			<option value="change-side">Translate</option>
 			<option value="change-scale">Scale</option>
 		</select>
-		<select bind:value={duration}>
+		<select bind:value={duration} title="Change preview animation duration">
 			{#each durations as dur}
 				<option value={dur}>
 					{dur}

diff --git a/docs/src/content/docs/props/easings.mdx b/docs/src/content/docs/props/easings.mdx
@@ -94,7 +94,7 @@ The lower the number, the weaker the effect.
   </TabItem>
 </Tabs>
 
-<Easings ease="ease" client:visible />
+<Easings ease="ease" prefix="ease" client:visible />
 
 ### Ease in
 
@@ -124,7 +124,7 @@ The lower the number, the weaker the effect.
   </TabItem>
 </Tabs>
 
-<Easings ease="ease-in" client:visible />
+<Easings ease="ease-in" prefix="ease in" client:visible />
 
 ### Ease out
 
@@ -154,7 +154,7 @@ The lower the number, the weaker the effect.
   </TabItem>
 </Tabs>
 
-<Easings ease="ease-out" client:visible />
+<Easings ease="ease-out" prefix="ease out" client:visible />
 
 ### Ease in-out
 
@@ -184,7 +184,7 @@ The lower the number, the weaker the effect.
   </TabItem>
 </Tabs>
 
-<Easings ease="ease-in-out" client:visible />
+<Easings ease="ease-in-out" prefix="ease in-out" client:visible />
 
 ### Elastic in
 
@@ -214,7 +214,7 @@ The lower the number, the weaker the effect.
   </TabItem>
 </Tabs>
 
-<Easings ease="ease-elastic-in" client:visible />
+<Easings ease="ease-elastic-in" prefix="elastic in" client:visible />
 
 ### Elastic out
 
@@ -244,7 +244,7 @@ The lower the number, the weaker the effect.
   </TabItem>
 </Tabs>
 
-<Easings ease="ease-elastic-out" client:visible />
+<Easings ease="ease-elastic-out" prefix="elastic out" client:visible />
 
 ### Elastic in-out
 
@@ -274,7 +274,7 @@ The lower the number, the weaker the effect.
   </TabItem>
 </Tabs>
 
-<Easings ease="ease-elastic-in-out" client:visible />
+<Easings ease="ease-elastic-in-out" prefix="elastic in-out" client:visible />
 
 ### Step
 
@@ -304,7 +304,7 @@ The lower the number, the weaker the effect.
   </TabItem>
 </Tabs>
 
-<Easings ease="ease-step" client:visible />
+<Easings ease="ease-step" prefix="step" client:visible />
 
 ### Spring
 
@@ -357,7 +357,7 @@ The lower the number, the weaker the effect.
   </TabItem>
 </Tabs>
 
-<Easings ease="ease-spring" duration="3s" client:visible />
+<Easings ease="ease-spring" prefix="spring" duration="3s" client:visible />
 
 ### Bounce
 
@@ -413,7 +413,7 @@ The lower the number, the weaker the effect.
   </TabItem>
 </Tabs>
 
-<Easings ease="ease-bounce" rotation="0" duration="3s" client:visible />
+<Easings ease="ease-bounce" prefix="bounce" rotation="0" duration="3s" client:visible />
 
 ----