Skip to content

Commit 6fcd619

Browse files
committed
fix(radio): update usage documentation for invalid radio groups
1 parent 8c276f8 commit 6fcd619

File tree

2 files changed

+2
-48
lines changed

2 files changed

+2
-48
lines changed

components/radio/index.css

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -280,14 +280,6 @@ governing permissions and limitations under the License.
280280
var(--spectrum-radio-neutral-content-color-focus))); }
281281
}
282282

283-
&.is-invalid {
284-
.spectrum-Radio-label {
285-
color: var(--highcontrast-radio-neutral-content-color,
286-
var(--mod-radio-neutral-content-color,
287-
var(--spectrum-radio-neutral-content-color)));
288-
}
289-
}
290-
291283
&.is-readOnly {
292284
.spectrum-Radio-input:read-only {
293285
cursor: initial;

components/radio/metadata/radio.yml

Lines changed: 2 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ status: Verified
33
SpectrumSiteSlug: https://spectrum.adobe.com/page/radio-button/
44
description: |
55
- Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.
6-
- Invalid radio buttons are signified by alert [HelpText](helptext.html) and [Icon](icon.html) included in [FieldGroup](fieldgroup.html).
76
- Radio buttons should not be used on their own, they should always be used within a [FieldGroup](fieldgroup.html).
7+
- Invalid radio buttons are signified by including [HelpText](helptext.html) in a [FieldGroup](fieldgroup.html). Sample usage for an invalid radio state is included in the [FieldGroup](fieldgroup.html#invalid) documentation.
88
99
sections:
1010
- name: Custom Properties API
@@ -21,7 +21,7 @@ sections:
2121
- Read-only radio buttons do not have a focus ring, but the button should be focusable.]
2222
2323
### Invalid/Error State
24-
- Invalid radio buttons are signified by alert [HelpText](helptext.html) and [Icon](icon.html) included in [FieldGroup](fieldgroup.html).
24+
- Invalid radio buttons are signified by including [HelpText](helptext.html) in a [FieldGroup](fieldgroup.html).
2525
2626
### Remove focus-ring class
2727
We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
@@ -131,25 +131,6 @@ examples:
131131
132132
</div>
133133
134-
<div class="spectrum-Examples-item">
135-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
136-
137-
<form>
138-
<div class="spectrum-Radio is-invalid">
139-
<input type="radio" name="pets" class="spectrum-Radio-input" id="radio-10">
140-
<span class="spectrum-Radio-button"></span>
141-
<label class="spectrum-Radio-label" for="radio-0">Kittens</label>
142-
</div>
143-
<br>
144-
<div class="spectrum-Radio is-invalid">
145-
<input type="radio" name="pets" class="spectrum-Radio-input" id="radio-11" checked>
146-
<span class="spectrum-Radio-button"></span>
147-
<label class="spectrum-Radio-label" for="radio-1">Puppies</label>
148-
</div>
149-
</form>
150-
151-
</div>
152-
153134
<div class="spectrum-Examples-item">
154135
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
155136
@@ -212,25 +193,6 @@ examples:
212193
213194
</div>
214195
215-
<div class="spectrum-Examples-item">
216-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
217-
218-
<form>
219-
<div class="spectrum-Radio spectrum-Radio--sizeM spectrum-Radio--emphasized is-invalid">
220-
<input type="radio" name="pets" class="spectrum-Radio-input" id="radio-18">
221-
<span class="spectrum-Radio-button"></span>
222-
<label class="spectrum-Radio-label" for="radio-0">Kittens</label>
223-
</div>
224-
<br>
225-
<div class="spectrum-Radio spectrum-Radio--sizeM spectrum-Radio--emphasized is-invalid">
226-
<input type="radio" name="pets" class="spectrum-Radio-input" id="radio-19" checked>
227-
<span class="spectrum-Radio-button"></span>
228-
<label class="spectrum-Radio-label" for="radio-1">Puppies</label>
229-
</div>
230-
</form>
231-
232-
</div>
233-
234196
<div class="spectrum-Examples-item">
235197
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
236198

0 commit comments

Comments
 (0)