Skip to content

Commit addd1a7

Browse files
tay1orjoneskodiakhq[bot]
andauthoredFeb 9, 2022
fix(form): update gap to use correct spacing 07, add v11 story (#10645)
* fix(button): use intrinsic width by default, closes #10644 * fix(form): update gap to use correct spacing 07, add v11 story Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent ffa2dfe commit addd1a7

File tree

3 files changed

+64
-1
lines changed

3 files changed

+64
-1
lines changed
 

‎packages/react/src/components/Form/next/Form.stories.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export default {
127127

128128
export const Default = () => (
129129
<Form>
130-
<Stack gap={6}>
130+
<Stack gap={7}>
131131
<FormGroup {...fieldsetCheckboxProps()}>
132132
<Checkbox defaultChecked {...checkboxEvents} id="checkbox-0" />
133133
<Checkbox {...checkboxEvents} id="checkbox-1" />
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2018
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import React from 'react';
9+
import FormGroup from '../FormGroup';
10+
import TextInput from '../../TextInput';
11+
import RadioButtonGroup from '../../RadioButtonGroup';
12+
import RadioButton from '../../RadioButton';
13+
import Button from '../../Button';
14+
import { Stack } from '../../Stack';
15+
16+
export default {
17+
title: 'Components/FormGroup',
18+
component: FormGroup,
19+
argTypes: {
20+
disabled: {
21+
control: {
22+
type: 'boolean',
23+
},
24+
defaultValue: false,
25+
},
26+
// TODO remove hasMargin in v11
27+
hasMargin: {
28+
table: {
29+
disable: true,
30+
},
31+
},
32+
legendText: {
33+
control: { type: 'text' },
34+
defaultValue: 'FormGroup Legend',
35+
},
36+
legendId: {
37+
control: { type: 'text' },
38+
defaultValue: 'formgroup-legend-id',
39+
},
40+
children: {
41+
control: false,
42+
},
43+
},
44+
};
45+
46+
export const Default = (args) => (
47+
<FormGroup style={{ maxWidth: '400px' }} {...args}>
48+
<Stack gap={7}>
49+
<TextInput id="one" labelText="First Name" />
50+
<TextInput id="two" labelText="Last Name" />
51+
<RadioButtonGroup
52+
legendText="Radio button heading"
53+
name="radio-button-group"
54+
defaultSelected="radio-1">
55+
<RadioButton labelText="Option 1" value="radio-1" id="radio-1" />
56+
<RadioButton labelText="Option 2" value="radio-2" id="radio-2" />
57+
<RadioButton labelText="Option 3" value="radio-3" id="radio-3" />
58+
</RadioButtonGroup>
59+
<Button>Submit</Button>
60+
</Stack>
61+
</FormGroup>
62+
);

‎packages/styles/scss/components/button/_mixins.scss

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
2424

2525
position: relative;
2626
display: inline-flex;
27+
width: max-content;
2728
max-width: rem(320px);
2829
min-height: $button-height;
2930
flex-shrink: 0;

0 commit comments

Comments
 (0)
Please sign in to comment.