fix: improve examples for select (#74)

annam002 · web-flow · commit f6a7ec65f48e · 2022-10-19T11:52:58.000Z
diff --git a/source/_patterns/01-elements/select/_select.hbs b/source/_patterns/01-elements/select/_select.hbs
@@ -6,16 +6,16 @@
 	{{#if aria-invalid }} aria-invalid="{{ aria-invalid }}" {{/if }}
 	{{#if variant}} data-variant="{{variant}}"{{/if }}>
 	{{#if optgroup}}<optgroup label="Devices">{{else}}{{#unless multiple}}<option></option>{{/unless}}{{/if }}
-		<option value="Row 1">Smartphone</option>
-		<option>Softphone</option>
-		<option>Headphone</option>
-		<option disabled>Row 4 / disabled</option>
+		<option value="smartphone">Smartphone</option>
+		<option value="softphone">Softphone</option>
+		<option value="headset">Headset</option>
+		<option value="fax" disabled>Fax / disabled</option>
 		{{#if optgroup}}
 	</optgroup>
 	<optgroup label="Roles">
-		<option>User</option>
-		<option>Tester</option>
-		<option>Developer</option>
+		<option value="user">User</option>
+		<option value="tester">Tester</option>
+		<option value="developer">Developer</option>
 	</optgroup>{{/if }}
 </select>
 <label class="elm-label" for="{{ id }}">{{ label }}</label>
diff --git a/source/_patterns/01-elements/select/select-variations.json b/source/_patterns/01-elements/select/select-variations.json
@@ -3,22 +3,22 @@
 		{
 			"variant": "semitransparent",
 			"id": "select01",
-			"label": "Select label"
+			"label": "Devices"
 		},
 		{
 			"variant": "white",
 			"id": "select02",
-			"label": "Select label"
+			"label": "Devices"
 		},
 		{
 			"variant": "solid",
 			"id": "select03",
-			"label": "Select label"
+			"label": "Devices"
 		},
 		{
 			"variant": "outline",
 			"id": "select04",
-			"label": "Select label"
+			"label": "Devices"
 		}
 	]
 }
diff --git a/source/_patterns/01-elements/select/select-variations~optgroups.json b/source/_patterns/01-elements/select/select-variations~optgroups.json
@@ -3,25 +3,25 @@
 		{
 			"variant": "semitransparent",
 			"id": "select09",
-			"label": "Select label",
+			"label": "Devices/Roles",
 			"optgroup": true
 		},
 		{
 			"variant": "white",
 			"id": "select10",
-			"label": "Select label",
+			"label": "Devices/Roles",
 			"optgroup": true
 		},
 		{
 			"variant": "solid",
 			"id": "select11",
-			"label": "Select label",
+			"label": "Devices/Roles",
 			"optgroup": true
 		},
 		{
 			"variant": "outline",
 			"id": "select12",
-			"label": "Select label",
+			"label": "Devices/Roles",
 			"optgroup": true
 		}
 	]

Original file line number	Diff line number	Diff line change
`@@ -3,22 +3,22 @@`
`3`	`3`	`{`
`4`	`4`	`"variant": "semitransparent",`
`5`	`5`	`"id": "select01",`
`6`		`- "label": "Select label"`
	`6`	`+ "label": "Devices"`
`7`	`7`	`},`
`8`	`8`	`{`
`9`	`9`	`"variant": "white",`
`10`	`10`	`"id": "select02",`
`11`		`- "label": "Select label"`
	`11`	`+ "label": "Devices"`
`12`	`12`	`},`
`13`	`13`	`{`
`14`	`14`	`"variant": "solid",`
`15`	`15`	`"id": "select03",`
`16`		`- "label": "Select label"`
	`16`	`+ "label": "Devices"`
`17`	`17`	`},`
`18`	`18`	`{`
`19`	`19`	`"variant": "outline",`
`20`	`20`	`"id": "select04",`
`21`		`- "label": "Select label"`
	`21`	`+ "label": "Devices"`
`22`	`22`	`}`
`23`	`23`	`]`
`24`	`24`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,25 +3,25 @@`
`3`	`3`	`{`
`4`	`4`	`"variant": "semitransparent",`
`5`	`5`	`"id": "select09",`
`6`		`- "label": "Select label",`
	`6`	`+ "label": "Devices/Roles",`
`7`	`7`	`"optgroup": true`
`8`	`8`	`},`
`9`	`9`	`{`
`10`	`10`	`"variant": "white",`
`11`	`11`	`"id": "select10",`
`12`		`- "label": "Select label",`
	`12`	`+ "label": "Devices/Roles",`
`13`	`13`	`"optgroup": true`
`14`	`14`	`},`
`15`	`15`	`{`
`16`	`16`	`"variant": "solid",`
`17`	`17`	`"id": "select11",`
`18`		`- "label": "Select label",`
	`18`	`+ "label": "Devices/Roles",`
`19`	`19`	`"optgroup": true`
`20`	`20`	`},`
`21`	`21`	`{`
`22`	`22`	`"variant": "outline",`
`23`	`23`	`"id": "select12",`
`24`		`- "label": "Select label",`
	`24`	`+ "label": "Devices/Roles",`
`25`	`25`	`"optgroup": true`
`26`	`26`	`}`
`27`	`27`	`]`