@gitlab/ui 78.15.1 → 78.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tokens/css/tokens.css +1 -1
- package/dist/tokens/css/tokens.dark.css +1 -1
- package/dist/tokens/js/tokens.dark.js +1 -1
- package/dist/tokens/js/tokens.js +1 -1
- package/dist/tokens/scss/_tokens.dark.scss +1 -1
- package/dist/tokens/scss/_tokens.scss +1 -1
- package/package.json +1 -1
- package/src/components/base/card/card.scss +4 -4
- package/src/components/base/form/form_input/form_input.stories.js +53 -38
package/dist/tokens/js/tokens.js
CHANGED
package/package.json
CHANGED
|
@@ -24,14 +24,14 @@
|
|
|
24
24
|
|
|
25
25
|
.gl-card-header {
|
|
26
26
|
@include gl-border-b-solid;
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
border-top-left-radius: calc($gl-border-radius-base - $gl-border-size-1);
|
|
28
|
+
border-top-right-radius: calc($gl-border-radius-base - $gl-border-size-1);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
.gl-card-footer {
|
|
32
32
|
@include gl-border-t-solid;
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
border-bottom-left-radius: calc($gl-border-radius-base - $gl-border-size-1);
|
|
34
|
+
border-bottom-right-radius: calc($gl-border-radius-base - $gl-border-size-1);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.gl-card-header,
|
|
@@ -1,23 +1,31 @@
|
|
|
1
1
|
import { formInputWidths } from '../../../../utils/constants';
|
|
2
|
-
import
|
|
2
|
+
import GlFormGroup from '../form_group/form_group.vue';
|
|
3
3
|
import readme from './form_input.md';
|
|
4
|
+
import GlFormInput from './form_input.vue';
|
|
4
5
|
|
|
5
6
|
const template = `
|
|
7
|
+
<gl-form-group :label="labelText" :label-for="inputId">
|
|
6
8
|
<gl-form-input
|
|
9
|
+
:id="inputId"
|
|
7
10
|
type="text"
|
|
8
11
|
:readonly="readonly"
|
|
9
12
|
:disabled="disabled"
|
|
10
13
|
:value="value"
|
|
11
14
|
:width="width"
|
|
12
|
-
|
|
15
|
+
/>
|
|
16
|
+
</gl-form-group>`;
|
|
13
17
|
|
|
14
18
|
const generateProps = ({
|
|
19
|
+
inputId = 'input-id',
|
|
15
20
|
width = GlFormInput.props.width.default,
|
|
16
21
|
value = '',
|
|
17
22
|
disabled = false,
|
|
18
23
|
readonly = false,
|
|
24
|
+
labelText = 'Label',
|
|
19
25
|
type = 'text',
|
|
20
26
|
} = {}) => ({
|
|
27
|
+
labelText,
|
|
28
|
+
inputId,
|
|
21
29
|
width,
|
|
22
30
|
value,
|
|
23
31
|
disabled,
|
|
@@ -26,70 +34,77 @@ const generateProps = ({
|
|
|
26
34
|
});
|
|
27
35
|
|
|
28
36
|
const Template = (args) => ({
|
|
29
|
-
components: { GlFormInput },
|
|
37
|
+
components: { GlFormInput, GlFormGroup },
|
|
30
38
|
props: Object.keys(args),
|
|
31
39
|
template,
|
|
32
40
|
});
|
|
33
41
|
|
|
34
42
|
export const Default = Template.bind({});
|
|
35
|
-
Default.args = generateProps(
|
|
43
|
+
Default.args = generateProps({
|
|
44
|
+
value: 'some text',
|
|
45
|
+
labelText: 'Default',
|
|
46
|
+
});
|
|
36
47
|
|
|
37
48
|
export const Disabled = Template.bind({});
|
|
38
|
-
Disabled.args = generateProps({
|
|
49
|
+
Disabled.args = generateProps({
|
|
50
|
+
value: 'some text',
|
|
51
|
+
disabled: true,
|
|
52
|
+
labelText: 'Disabled',
|
|
53
|
+
});
|
|
39
54
|
|
|
40
55
|
export const Readonly = Template.bind({});
|
|
41
|
-
Readonly.args = generateProps({ value: 'readonly text', readonly: true });
|
|
56
|
+
Readonly.args = generateProps({ value: 'readonly text', readonly: true, labelText: 'Readonly' });
|
|
42
57
|
|
|
43
|
-
export const NumberInput = (
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}),
|
|
49
|
-
template: `
|
|
50
|
-
<gl-form-input
|
|
51
|
-
type="number"
|
|
52
|
-
/>
|
|
53
|
-
`,
|
|
58
|
+
export const NumberInput = Template.bind({});
|
|
59
|
+
NumberInput.args = generateProps({
|
|
60
|
+
value: '42',
|
|
61
|
+
labelText: 'Number input',
|
|
62
|
+
type: 'number',
|
|
54
63
|
});
|
|
55
64
|
NumberInput.tags = ['skip-visual-test'];
|
|
56
65
|
|
|
57
66
|
export const Widths = (args, { argTypes }) => ({
|
|
58
|
-
components: { GlFormInput },
|
|
67
|
+
components: { GlFormInput, GlFormGroup },
|
|
59
68
|
props: Object.keys(argTypes),
|
|
60
69
|
data: () => ({
|
|
61
70
|
formInputWidths,
|
|
62
71
|
}),
|
|
63
72
|
template: `
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
:
|
|
68
|
-
:width="width"
|
|
73
|
+
<div>
|
|
74
|
+
<gl-form-group v-for="(width, name) in formInputWidths" :key="width" :label="name" :label-for="'width-' + width">
|
|
75
|
+
<gl-form-input
|
|
76
|
+
:id="'width-' + width"
|
|
69
77
|
:value="name"
|
|
78
|
+
:width="width"
|
|
70
79
|
class="gl-mb-4"
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
80
|
+
/>
|
|
81
|
+
</gl-form-group>
|
|
82
|
+
</div>`,
|
|
74
83
|
});
|
|
75
84
|
Widths.args = {};
|
|
76
85
|
|
|
77
86
|
export const ResponsiveWidths = (args, { argTypes }) => ({
|
|
78
|
-
components: { GlFormInput },
|
|
87
|
+
components: { GlFormInput, GlFormGroup },
|
|
79
88
|
props: Object.keys(argTypes),
|
|
80
89
|
template: `
|
|
81
90
|
<div>
|
|
82
|
-
<gl-form-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
<gl-form-group label="Default" label-for="responsive-widths-1">
|
|
92
|
+
<gl-form-input
|
|
93
|
+
id="responsive-widths-1"
|
|
94
|
+
:width="{ default: 'md', md: 'lg', lg: 'xl' }"
|
|
95
|
+
value="With \`default\` key"
|
|
96
|
+
class="gl-mb-4"
|
|
97
|
+
/>
|
|
98
|
+
</gl-form-group>
|
|
99
|
+
|
|
100
|
+
<gl-form-group label="Without default" label-for="responsive-widths-2">
|
|
101
|
+
<gl-form-input
|
|
102
|
+
id="responsive-widths-2"
|
|
103
|
+
:width="{ md: 'lg', lg: 'xl' }"
|
|
104
|
+
value="Without \`default\` key"
|
|
105
|
+
/>
|
|
106
|
+
</gl-form-group>
|
|
107
|
+
</div>`,
|
|
93
108
|
});
|
|
94
109
|
ResponsiveWidths.args = {};
|
|
95
110
|
|