Skip to content

Commit 74e842a

Browse files
ericwbaileyericwbailey
committed
Added button states
1 parent de7d456 commit 74e842a

File tree

1 file changed

+110
-91
lines changed

1 file changed

+110
-91
lines changed

‎index.html

Lines changed: 110 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -946,107 +946,126 @@ <h1 id="title__forms">Forms</h1>
946946

947947
<fieldset id="subsection__states-and-validation" role="region" aria-labelledby="subtitle__states-and-validation"><!-- Start of #subsection__states-and-validation -->
948948
<legend id="subtitle__states-and-validation">States and Validation</legend>
949+
<div id="subsection__input" role="region" aria-labelledby="subtitle__input"><!-- Start of #subsection__input -->
950+
<h2 id="subtitle__input">Input</h2>
951+
<label for="input__required">
952+
Required
953+
<input
954+
required
955+
id="input__required"
956+
name="required"
957+
type="text" />
958+
</label>
949959

950-
<label for="input__required">
951-
Required
952-
<input
953-
required
954-
id="input__required"
955-
name="required"
956-
type="text" />
957-
</label>
958-
959-
<label for="input__readonly">
960-
Readonly
961-
<input
962-
readonly
963-
value="Read Only"
964-
id="input__readonly"
965-
name="readonly"
966-
type="text" />
967-
</label>
968-
969-
<label for="input__loading">
970-
Loading
971-
<input
972-
id="input__loading"
973-
name="loading"
974-
data-input-state="loading"
975-
type="text" />
976-
</label>
960+
<label for="input__readonly">
961+
Readonly
962+
<input
963+
readonly
964+
value="Read Only"
965+
id="input__readonly"
966+
name="readonly"
967+
type="text" />
968+
</label>
977969

978-
<label for="input__disabled">
979-
Disabled
980-
<input
981-
disabled
982-
id="input__disabled"
983-
name="disabled"
984-
type="text" />
985-
</label>
970+
<label for="input__loading">
971+
Loading
972+
<input
973+
id="input__loading"
974+
name="loading"
975+
aria-busy="true"
976+
data-input-state="loading"
977+
type="text" />
978+
</label>
986979

987-
<label for="input__valid">
988-
Valid
989-
<input
990-
id="input__valid"
991-
name="valid"
992-
data-input-state="valid"
993-
type="text" />
994-
</label>
980+
<label for="input__disabled">
981+
Disabled
982+
<input
983+
disabled
984+
id="input__disabled"
985+
name="disabled"
986+
type="text" />
987+
</label>
995988

996-
<label for="input__invalid">
997-
Invalid
998-
<input
999-
id="input__invalid"
1000-
name="invalid"
1001-
data-input-state="invalid"
1002-
type="text" />
1003-
</label>
989+
<label for="input__valid">
990+
Valid
991+
<input
992+
id="input__valid"
993+
name="valid"
994+
aria-invalid="false"
995+
type="text" />
996+
</label>
1004997

1005-
<label for="input__warning">
1006-
Warning
1007-
<input
1008-
id="input__warning"
1009-
name="warning"
1010-
data-input-state="warning"
1011-
type="text" />
1012-
</label>
998+
<label for="input__invalid">
999+
Invalid
1000+
<input
1001+
id="input__invalid"
1002+
name="invalid"
1003+
aria-invalid="true"
1004+
type="text" />
1005+
</label>
10131006

1014-
<label for="input__search-with-autosave">
1015-
Search with Autosave
1016-
<input
1017-
autosave
1018-
id="input__search-with-autosave"
1019-
name="search-with-autosave"
1020-
type="search" />
1021-
</label>
1007+
<label for="input__warning">
1008+
Warning
1009+
<input
1010+
id="input__warning"
1011+
name="warning"
1012+
data-input-state="warning"
1013+
type="text" />
1014+
</label>
10221015

1023-
<label for="input__pattern">
1024-
Input with Pattern Validation
1025-
<input
1026-
pattern="[0-9]{13,16}"
1027-
id="input__pattern"
1028-
name="pattern"
1029-
type="number" />
1030-
</label>
1016+
<label for="input__search-with-autosave">
1017+
Search with Autosave
1018+
<input
1019+
autosave
1020+
id="input__search-with-autosave"
1021+
name="search-with-autosave"
1022+
type="search" />
1023+
</label>
10311024

1032-
<label for="input__minlength">
1033-
Minlength
1034-
<input
1035-
id="input__minlength"
1036-
name="minlength"
1037-
minlength="5"
1038-
type="number" />
1039-
</label>
1025+
<label for="input__pattern">
1026+
Input with Pattern Validation
1027+
<input
1028+
pattern="[0-9]{13,16}"
1029+
id="input__pattern"
1030+
name="pattern"
1031+
type="number" />
1032+
</label>
10401033

1041-
<label for="input__maxlength">
1042-
Maxlength
1043-
<input
1044-
id="input__maxlength"
1045-
name="maxlength"
1046-
maxlength="10"
1047-
type="number" />
1048-
</label>
1034+
<label for="input__minlength">
1035+
Minlength
1036+
<input
1037+
id="input__minlength"
1038+
name="minlength"
1039+
minlength="5"
1040+
type="number" />
1041+
</label>
10491042

1043+
<label for="input__maxlength">
1044+
Maxlength
1045+
<input
1046+
id="input__maxlength"
1047+
name="maxlength"
1048+
maxlength="10"
1049+
type="number" />
1050+
</label>
1051+
</div><!-- End of #subsection__input -->
1052+
1053+
<div id="subsection__buttons" role="region" aria-labelledby="subtitle__buttons"><!-- Start of #subsection__buttons -->
1054+
<h2 id="subtitle__buttons">Buttons</h2>
1055+
<button
1056+
disabled>
1057+
Disabled
1058+
</button>
1059+
1060+
<button
1061+
aria-busy="true">
1062+
Loading
1063+
</button>
1064+
1065+
<p>
1066+
<small>Note: Use <code>:hover</code>, <code>:focus</code>, and <code>:active</code> selectors to control the other button states. Learn more about <a rel="external" href="https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23#.b1p96hsrw">Buttons in Design Systems</a>.</small>
1067+
</p>
1068+
</div><!-- End of #subsection__buttons -->
10501069
</fieldset><!-- End of #subsection__states-and-validation -->
10511070

10521071
<fieldset role="region" aria-labelledby="subtitle__autocomplete" id="subsection__autocomplete"><!-- Start of #subsection__autocomplete -->

0 commit comments

Comments
 (0)