Skip to content

Commit d86eb54

Browse files
author
Joshua Stübner
committed
feat(ui-gen): add horizontal segmented control and button group examples
1 parent 7483b28 commit d86eb54

File tree

4 files changed

+102
-2
lines changed

4 files changed

+102
-2
lines changed

‎apps/ui-generator/src/modules/components/components/ComponentPreview.astro‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,27 @@ const {
8383
<h3>{ex.title}</h3>
8484
{ex.description ? <p>{ex.description}</p> : null}
8585

86-
<div class="nc-stack -nogap -stretched -contained">
86+
<div class="nc-stack -stretched -contained">
8787
<div class="nc-box -bordered preview-box">
8888
<Fragment set:html={ex.code} />
8989
</div>
9090
<SourceCodeDisplay code={ex.code} title={ex.title} />
91+
{
92+
ex.notes ? (
93+
<div class="nc-stack">
94+
<h4>Notes</h4>
95+
<ul>
96+
{
97+
ex.notes.map(note => (
98+
<li>
99+
<Fragment set:html={note} />
100+
</li>
101+
))
102+
}
103+
</ul>
104+
</div>
105+
) : null
106+
}
91107
</div>
92108
</div>
93109
))

‎apps/ui-generator/src/modules/components/components/sections.ts‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import inputDate from '../examples/input/inputDate.html?raw';
1717
import inputRadioField from '../examples/input/inputRadioField.html?raw';
1818
import inputRange from '../examples/input/inputRange.html?raw';
1919
import inputSegmentedControl from '../examples/input/inputSegmentedControl.html?raw';
20+
import inputSegmentedControlButtonGroup from '../examples/input/inputSegmentedControlButtonGroup.html?raw';
21+
import inputSegmentedControlHorizontal from '../examples/input/inputSegmentedControlHorizontal.html?raw';
2022
import inputSelect from '../examples/input/inputSelect.html?raw';
2123
import inputSwitch from '../examples/input/inputSwitch.html?raw';
2224
import inputTagSelect from '../examples/input/inputTagSelect.html?raw';
@@ -253,7 +255,7 @@ const sections: Array<Section> = [
253255
},
254256
{
255257
title: 'Select',
256-
description: 'Selects are useful for when you have more than 5 items, but still a managable amount.',
258+
description: 'Selects are useful for when you have more than 5 items, but still a manageable amount.',
257259
component: inputSelect,
258260
preview: selectPreview,
259261
},
@@ -270,6 +272,44 @@ const sections: Array<Section> = [
270272
'A styled radio control. Use when you have a small amount of options (2-5). Can be used for on/off switches. Has intrinsic sizing and switches between column and row.',
271273
component: inputSegmentedControl,
272274
preview: segmentedPreview,
275+
cssVariables: [
276+
{
277+
name: '--segmented-control-border-radius',
278+
description:
279+
'Controls the border radius of the segmented control. Defaults to <code>--_input-border-radius</code>.',
280+
},
281+
{
282+
name: '--segmented-control-checked-text-color',
283+
description:
284+
'Controls the text color of the selected segment. Defaults to <code>---color-brand-primary-contrast</code>.',
285+
},
286+
{
287+
name: '--segmented-control-checked-surface-color',
288+
description:
289+
'Controls the background color of the selected segment. Defaults to <code>--color-brand-primary-base</code>.',
290+
},
291+
{
292+
name: '--segmented-control-min-height',
293+
description:
294+
'Controls the height of each segment. Defaults to <code>--control-height-base</code>.',
295+
},
296+
],
297+
examples: [
298+
{
299+
title: 'Horizontal Segmented Control',
300+
description:
301+
'You can also force a horizontal layout by using either -horizontal as class or a style query if full browser support is not relevant to you.',
302+
code: inputSegmentedControlHorizontal,
303+
notes: [
304+
'Pay attention to the modified markup: the legend is made visually hidden, the visual label has <code>aria-hidden</code> and an extra wrapper is added, since fieldsets can not be set to flex containers.',
305+
],
306+
},
307+
{
308+
title: 'Button Group',
309+
description: 'The same segmented control can be used to create a sort of button group.',
310+
code: inputSegmentedControlButtonGroup,
311+
},
312+
],
273313
},
274314
{
275315
title: 'Radio Input Field',

‎apps/ui-generator/src/modules/components/examples/input/inputSegmentedControlButtonGroup.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!-- COMPONENT-START: nc-segmented-control button-group -->
2+
<div class="nc-fieldset nc-input-field nc-segmented-control-group -horizontal" style="--horizontal: true">
3+
<div class="nc-cluster -centered full-width">
4+
<span class="nc-input-label" id="label">Items per column</span>
5+
6+
<div class="nc-segmented-control" aria-labelledby="label">
7+
<button type="button" aria-pressed="true">
8+
Left align
9+
</button>
10+
<button type="button">
11+
Center align
12+
</button>
13+
<button type="button">
14+
Right align
15+
</button>
16+
</div>
17+
</div>
18+
</div>
19+
<!-- COMPONENT-END: nc-segmented-control button-group -->

‎apps/ui-generator/src/modules/components/examples/input/inputSegmentedControlHorizontal.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!-- COMPONENT-START: nc-segmented-control -->
2+
<fieldset class="nc-fieldset nc-input-field nc-segmented-control-group -horizontal" style="--horizontal: true">
3+
<legend class="sr-only">
4+
Items per column
5+
</legend>
6+
<div class="nc-cluster -centered full-width">
7+
<span class="nc-input-label" aria-hidden="true">Items per column</span>
8+
9+
<div class="nc-segmented-control">
10+
<label>
11+
<input type="radio" name="horizontal-test" value="2" checked />
12+
<span class="nc-input-label">2</span>
13+
</label>
14+
<label>
15+
<input type="radio" name="horizontal-test" value="4" />
16+
<span class="nc-input-label">4</span>
17+
</label>
18+
<label>
19+
<input type="radio" name="horizontal-test" value="8" />
20+
<span class="nc-input-label">8</span>
21+
</label>
22+
</div>
23+
</div>
24+
</fieldset>
25+
<!-- COMPONENT-END: nc-segmented-control -->

0 commit comments

Comments
 (0)