Skip to content

Commit bb41a5f

Browse files
mukunkumukunku
committed
pr feedback
1 parent 7f32c1f commit bb41a5f

File tree

2 files changed

+38
-32
lines changed

2 files changed

+38
-32
lines changed

‎packages/stacks-classic/lib/components/toggle-switch/toggle-switch.less‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,13 @@
4747
background-color: var(--_ts-multiple-bg);
4848
color: var(--_ts-multiple-fc);
4949

50-
border-radius: 1000px;
50+
border-radius: var(--br-pill);
5151
cursor: pointer;
5252
font-size: var(--fs-body1);
5353
font-weight: 400;
5454
line-height: 1;
5555
margin: 0;
56-
padding: 5px 10px;
56+
padding: calc(var(--su4) + var(--su1)) calc(var(--su8) + var(--su2)); //5px 10px
5757
text-align: center;
5858
white-space: nowrap;
5959
width: 100%;
@@ -64,8 +64,8 @@
6464

6565
align-items: stretch;
6666
display: flex;
67-
border: 2px solid var(--black-150);
68-
border-radius: 1000px;
67+
border: var(--su2) solid var(--black-150);
68+
border-radius: var(--br-pill);
6969
background-color: var(--black-150);
7070
}
7171

‎packages/stacks-docs/product/components/toggle-switch.html‎

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -52,39 +52,45 @@
5252
<p class="docs-copy">Toggles switches can be extended to choose between two or more states where each state is represented by an icon. Using the <code>__multiple</code> toggle instead of a radio group and making sure labels follow their inputs in this case is important.</p>
5353
<div class="docs-preview">
5454
{% highlight html %}
55-
<div class="d-flex ai-center g8">
56-
<label class="s-label c-default">…</label>
57-
<div class="s-toggle-switch s-toggle-switch__multiple">
58-
<input type="radio" name="group1" id="input-1" checked value="value1">
59-
<label for="input-1" aria-label="First value" title="First value">@Svg.Icon1</label>
60-
<input type="radio" name="group1" id="input-2" value="value2">
61-
<label for="input-2" aria-label="Second value" title="Second value">@Svg.Icon2</label>
62-
<input type="radio" name="group1" id="input-3" value="value3">
63-
<label for="input-3" aria-label="Third value" title="Third value">@Svg.Icon3</label>
55+
<fieldset>
56+
<div class="d-flex ai-center g8">
57+
<legend class="s-label c-default">…</legend>
58+
<div class="s-toggle-switch s-toggle-switch__multiple">
59+
<input type="radio" name="group1" id="input-1" checked value="value1">
60+
<label for="input-1" aria-label="First value" title="First value">@Svg.Icon1</label>
61+
<input type="radio" name="group1" id="input-2" value="value2">
62+
<label for="input-2" aria-label="Second value" title="Second value">@Svg.Icon2</label>
63+
<input type="radio" name="group1" id="input-3" value="value3">
64+
<label for="input-3" aria-label="Third value" title="Third value">@Svg.Icon3</label>
65+
</div>
6466
</div>
65-
</div>
67+
</fieldset>
6668
{% endhighlight %}
6769
<div class="docs-preview--example d-flex fd-column g24">
68-
<div class="d-flex ai-center g8">
69-
<label class="c-default s-label">Search Style</label>
70-
<div class="s-toggle-switch s-toggle-switch__multiple">
71-
<input type="radio" name="example1" id="assistant" checked value="ai">
72-
<label for="assistant" aria-label="AI Search" title="AI Search">{% icon "Assistant" %}</label>
73-
<input type="radio" name="example1" id="search" value="lexical">
74-
<label for="search" aria-label="Lexical Search" title="Lexical Search">{% icon "Search" %}</label>
70+
<fieldset>
71+
<div class="d-flex ai-center g8">
72+
<legend class="c-default s-label">Search Style</legend>
73+
<div class="s-toggle-switch s-toggle-switch__multiple">
74+
<input type="radio" name="example1" id="assistant" checked value="ai">
75+
<label for="assistant" aria-label="AI Search" title="AI Search">{% icon "Assistant" %}</label>
76+
<input type="radio" name="example1" id="search" value="lexical">
77+
<label for="search" aria-label="Lexical Search" title="Lexical Search">{% icon "Search" %}</label>
78+
</div>
7579
</div>
76-
</div>
77-
<div class="d-flex ai-center g8">
78-
<label class="c-default s-label">Export Type</label>
79-
<div class="s-toggle-switch s-toggle-switch__multiple">
80-
<input type="radio" name="example2" id="xml" value="xml">
81-
<label for="xml" aria-label="XML" title="XML">{% icon "CodeDocument" %}</label>
82-
<input type="radio" name="example2" id="pdf" checked value="pdf">
83-
<label for="pdf" aria-label="PDF" title="PDF">{% icon "Document" %}</label>
84-
<input type="radio" name="example2" id="json" value="json">
85-
<label for="json" aria-label="JSON" title="JSON">{% icon "ComposeDocument" %}</label>
80+
</fieldset>
81+
<fieldset>
82+
<div class="d-flex ai-center g8">
83+
<legend class="c-default s-label">Export Type</legend>
84+
<div class="s-toggle-switch s-toggle-switch__multiple">
85+
<input type="radio" name="example2" id="xml" value="xml">
86+
<label for="xml" aria-label="XML" title="XML">{% icon "CodeDocument" %}</label>
87+
<input type="radio" name="example2" id="pdf" checked value="pdf">
88+
<label for="pdf" aria-label="PDF" title="PDF">{% icon "Document" %}</label>
89+
<input type="radio" name="example2" id="json" value="json">
90+
<label for="json" aria-label="JSON" title="JSON">{% icon "ComposeDocument" %}</label>
91+
</div>
8692
</div>
87-
</div>
93+
</fieldset>
8894
</div>
8995
</div>
9096
</section>

0 commit comments

Comments
 (0)