@gitlab/ui 78.15.2 → 78.17.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/form/form_input/form_input.stories.js +53 -38
- package/src/components/base/label/label.scss +9 -10
package/dist/tokens/js/tokens.js
CHANGED
package/package.json
CHANGED
|
@@ -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
|
|
|
@@ -9,7 +9,8 @@ $label-close-button: '.gl-label-close.gl-button';
|
|
|
9
9
|
@include gl-rounded-pill;
|
|
10
10
|
position: relative;
|
|
11
11
|
@include gl-max-w-full;
|
|
12
|
-
@include gl-font-
|
|
12
|
+
@include gl-font-sm;
|
|
13
|
+
@include gl-line-height-normal;
|
|
13
14
|
box-shadow: var(--label-inset-border) !important;
|
|
14
15
|
|
|
15
16
|
&:not(.gl-label-scoped) {
|
|
@@ -21,13 +22,12 @@ $label-close-button: '.gl-label-close.gl-button';
|
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
.gl-label-link {
|
|
24
|
-
@include gl-line-height-normal;
|
|
25
25
|
@include gl-display-flex;
|
|
26
|
-
@include gl-font-sm;
|
|
27
26
|
@include gl-font-weight-normal;
|
|
28
27
|
@include gl-overflow-hidden;
|
|
29
28
|
@include gl-reset-color;
|
|
30
29
|
@include gl-max-w-full;
|
|
30
|
+
@include gl-text-decoration-none;
|
|
31
31
|
|
|
32
32
|
&:focus,
|
|
33
33
|
&:hover,
|
|
@@ -41,8 +41,7 @@ $label-close-button: '.gl-label-close.gl-button';
|
|
|
41
41
|
.gl-label-text,
|
|
42
42
|
.gl-label-text-scoped {
|
|
43
43
|
@include gl-display-block;
|
|
44
|
-
padding
|
|
45
|
-
padding-inline: calc(#{$gl-spacing-scale-3} - 2px);
|
|
44
|
+
padding: $gl-spacing-scale-1 #{$gl-spacing-scale-3 - $gl-spacing-scale-1};
|
|
46
45
|
@include str-truncated($label-max-width);
|
|
47
46
|
}
|
|
48
47
|
|
|
@@ -51,8 +50,8 @@ $label-close-button: '.gl-label-close.gl-button';
|
|
|
51
50
|
@include gl-display-flex;
|
|
52
51
|
width: px-to-rem(14px);
|
|
53
52
|
height: px-to-rem(14px);
|
|
54
|
-
margin-left:
|
|
55
|
-
margin-right:
|
|
53
|
+
margin-left: #{-$gl-spacing-scale-1 - ($gl-spacing-scale-1 / 2)};
|
|
54
|
+
margin-right: #{$gl-spacing-scale-2 - ($gl-spacing-scale-1 / 2)};
|
|
56
55
|
@include gl-p-0;
|
|
57
56
|
@include gl-rounded-full;
|
|
58
57
|
@include gl-shadow-none;
|
|
@@ -149,7 +148,7 @@ $label-close-button: '.gl-label-close.gl-button';
|
|
|
149
148
|
}
|
|
150
149
|
|
|
151
150
|
#{$label-close-button} {
|
|
152
|
-
margin-left:
|
|
151
|
+
margin-left: #{-$gl-spacing-scale-2 - $gl-spacing-scale-1};
|
|
153
152
|
|
|
154
153
|
&:focus,
|
|
155
154
|
&:hover {
|
|
@@ -165,8 +164,8 @@ $label-close-button: '.gl-label-close.gl-button';
|
|
|
165
164
|
|
|
166
165
|
.gl-label-text-scoped {
|
|
167
166
|
@include gl-text-gray-950;
|
|
168
|
-
padding-
|
|
169
|
-
padding-
|
|
167
|
+
padding-left: #{$gl-spacing-scale-3 - $gl-spacing-scale-2};
|
|
168
|
+
padding-right: $gl-spacing-scale-3;
|
|
170
169
|
}
|
|
171
170
|
}
|
|
172
171
|
|