@gitlab/ui 123.3.1 → 123.5.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/dist/components/base/button/button.js +27 -8
- package/dist/config.js +23 -2
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/tailwind.css +1 -1
- package/dist/tailwind.css.map +1 -1
- package/dist/tokens/docs/tokens-tailwind-docs.dark.json +1339 -1339
- package/dist/tokens/docs/tokens-tailwind-docs.json +1339 -1339
- package/dist/tokens/tailwind/tokens.cjs +40 -40
- package/package.json +2 -2
- package/src/components/base/button/button.vue +25 -6
- package/src/config.js +22 -1
- package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +1339 -1339
- package/src/tokens/build/docs/tokens-tailwind-docs.json +1339 -1339
- package/src/tokens/build/tailwind/tokens.cjs +383 -392
|
@@ -3,35 +3,35 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
const baseColors = {"blue-50":"var(--blue-50
|
|
7
|
-
const themeColors = {"theme-indigo-10":"var(--theme-indigo-10
|
|
8
|
-
const dataVizColors = {"data-viz-green-50":"var(--data-viz-green-50
|
|
9
|
-
const neutralColors = {"neutral-0":"var(--gl-color-neutral-0
|
|
10
|
-
const textColors = {"default":"var(--gl-text-color-default
|
|
11
|
-
const backgroundColors = {"default":"var(--gl-background-color-default
|
|
12
|
-
const borderColors = {"default":"var(--gl-border-color-default
|
|
13
|
-
const iconColors = {"default":"var(--gl-icon-color-default
|
|
14
|
-
const alphaDarkColors = {"2":"var(--gl-color-alpha-dark-2
|
|
15
|
-
const alphaLightColors = {"2":"var(--gl-color-alpha-light-2
|
|
16
|
-
const brandColors = {"brand-white":"var(--gl-color-brand-white
|
|
17
|
-
const statusBackgroundColors = {"status-neutral":"var(--gl-status-neutral-background-color
|
|
18
|
-
const statusTextColors = {"status-neutral":"var(--gl-status-neutral-text-color
|
|
19
|
-
const statusIconColors = {"status-neutral":"var(--gl-status-neutral-icon-color
|
|
20
|
-
const feedbackBackgroundColors = {"feedback-strong":"var(--gl-feedback-strong-background-color
|
|
21
|
-
const feedbackTextColors = {"feedback-strong":"var(--gl-feedback-strong-text-color
|
|
22
|
-
const feedbackIconColors = {"feedback-strong":"var(--gl-feedback-strong-icon-color
|
|
23
|
-
const spacingScale = {"0":"var(--gl-spacing-scale-0
|
|
24
|
-
const borderRadius = {"none":"var(--gl-border-radius-none
|
|
25
|
-
const opacity = {"0":"var(--gl-opacity-0
|
|
26
|
-
const zindexes = {"0":"var(--gl-zindex-0
|
|
6
|
+
const baseColors = {"blue-50":"var(--blue-50)","blue-100":"var(--blue-100)","blue-200":"var(--blue-200)","blue-300":"var(--blue-300)","blue-400":"var(--blue-400)","blue-500":"var(--blue-500)","blue-600":"var(--blue-600)","blue-700":"var(--blue-700)","blue-800":"var(--blue-800)","blue-900":"var(--blue-900)","blue-950":"var(--blue-950)","gray-10":"var(--gray-10)","gray-50":"var(--gray-50)","gray-100":"var(--gray-100)","gray-200":"var(--gray-200)","gray-300":"var(--gray-300)","gray-400":"var(--gray-400)","gray-500":"var(--gray-500)","gray-600":"var(--gray-600)","gray-700":"var(--gray-700)","gray-800":"var(--gray-800)","gray-900":"var(--gray-900)","gray-950":"var(--gray-950)","green-50":"var(--green-50)","green-100":"var(--green-100)","green-200":"var(--green-200)","green-300":"var(--green-300)","green-400":"var(--green-400)","green-500":"var(--green-500)","green-600":"var(--green-600)","green-700":"var(--green-700)","green-800":"var(--green-800)","green-900":"var(--green-900)","green-950":"var(--green-950)","orange-50":"var(--orange-50)","orange-100":"var(--orange-100)","orange-200":"var(--orange-200)","orange-300":"var(--orange-300)","orange-400":"var(--orange-400)","orange-500":"var(--orange-500)","orange-600":"var(--orange-600)","orange-700":"var(--orange-700)","orange-800":"var(--orange-800)","orange-900":"var(--orange-900)","orange-950":"var(--orange-950)","purple-50":"var(--purple-50)","purple-100":"var(--purple-100)","purple-200":"var(--purple-200)","purple-300":"var(--purple-300)","purple-400":"var(--purple-400)","purple-500":"var(--purple-500)","purple-600":"var(--purple-600)","purple-700":"var(--purple-700)","purple-800":"var(--purple-800)","purple-900":"var(--purple-900)","purple-950":"var(--purple-950)","red-50":"var(--red-50)","red-100":"var(--red-100)","red-200":"var(--red-200)","red-300":"var(--red-300)","red-400":"var(--red-400)","red-500":"var(--red-500)","red-600":"var(--red-600)","red-700":"var(--red-700)","red-800":"var(--red-800)","red-900":"var(--red-900)","red-950":"var(--red-950)"};
|
|
7
|
+
const themeColors = {"theme-indigo-10":"var(--theme-indigo-10)","theme-indigo-50":"var(--theme-indigo-50)","theme-indigo-100":"var(--theme-indigo-100)","theme-indigo-200":"var(--theme-indigo-200)","theme-indigo-300":"var(--theme-indigo-300)","theme-indigo-400":"var(--theme-indigo-400)","theme-indigo-500":"var(--theme-indigo-500)","theme-indigo-600":"var(--theme-indigo-600)","theme-indigo-700":"var(--theme-indigo-700)","theme-indigo-800":"var(--theme-indigo-800)","theme-indigo-900":"var(--theme-indigo-900)","theme-indigo-950":"var(--theme-indigo-950)","theme-blue-10":"var(--theme-blue-10)","theme-blue-50":"var(--theme-blue-50)","theme-blue-100":"var(--theme-blue-100)","theme-blue-200":"var(--theme-blue-200)","theme-blue-300":"var(--theme-blue-300)","theme-blue-400":"var(--theme-blue-400)","theme-blue-500":"var(--theme-blue-500)","theme-blue-600":"var(--theme-blue-600)","theme-blue-700":"var(--theme-blue-700)","theme-blue-800":"var(--theme-blue-800)","theme-blue-900":"var(--theme-blue-900)","theme-blue-950":"var(--theme-blue-950)","theme-light-blue-10":"var(--theme-light-blue-10)","theme-light-blue-50":"var(--theme-light-blue-50)","theme-light-blue-100":"var(--theme-light-blue-100)","theme-light-blue-200":"var(--theme-light-blue-200)","theme-light-blue-300":"var(--theme-light-blue-300)","theme-light-blue-400":"var(--theme-light-blue-400)","theme-light-blue-500":"var(--theme-light-blue-500)","theme-light-blue-600":"var(--theme-light-blue-600)","theme-light-blue-700":"var(--theme-light-blue-700)","theme-light-blue-800":"var(--theme-light-blue-800)","theme-light-blue-900":"var(--theme-light-blue-900)","theme-light-blue-950":"var(--theme-light-blue-950)","theme-green-10":"var(--theme-green-10)","theme-green-50":"var(--theme-green-50)","theme-green-100":"var(--theme-green-100)","theme-green-200":"var(--theme-green-200)","theme-green-300":"var(--theme-green-300)","theme-green-400":"var(--theme-green-400)","theme-green-500":"var(--theme-green-500)","theme-green-600":"var(--theme-green-600)","theme-green-700":"var(--theme-green-700)","theme-green-800":"var(--theme-green-800)","theme-green-900":"var(--theme-green-900)","theme-green-950":"var(--theme-green-950)","theme-red-10":"var(--theme-red-10)","theme-red-50":"var(--theme-red-50)","theme-red-100":"var(--theme-red-100)","theme-red-200":"var(--theme-red-200)","theme-red-300":"var(--theme-red-300)","theme-red-400":"var(--theme-red-400)","theme-red-500":"var(--theme-red-500)","theme-red-600":"var(--theme-red-600)","theme-red-700":"var(--theme-red-700)","theme-red-800":"var(--theme-red-800)","theme-red-900":"var(--theme-red-900)","theme-red-950":"var(--theme-red-950)","theme-light-red-10":"var(--theme-light-red-10)","theme-light-red-50":"var(--theme-light-red-50)","theme-light-red-100":"var(--theme-light-red-100)","theme-light-red-200":"var(--theme-light-red-200)","theme-light-red-300":"var(--theme-light-red-300)","theme-light-red-400":"var(--theme-light-red-400)","theme-light-red-500":"var(--theme-light-red-500)","theme-light-red-600":"var(--theme-light-red-600)","theme-light-red-700":"var(--theme-light-red-700)","theme-light-red-800":"var(--theme-light-red-800)","theme-light-red-900":"var(--theme-light-red-900)","theme-light-red-950":"var(--theme-light-red-950)"};
|
|
8
|
+
const dataVizColors = {"data-viz-green-50":"var(--data-viz-green-50)","data-viz-green-100":"var(--data-viz-green-100)","data-viz-green-200":"var(--data-viz-green-200)","data-viz-green-300":"var(--data-viz-green-300)","data-viz-green-400":"var(--data-viz-green-400)","data-viz-green-500":"var(--data-viz-green-500)","data-viz-green-600":"var(--data-viz-green-600)","data-viz-green-700":"var(--data-viz-green-700)","data-viz-green-800":"var(--data-viz-green-800)","data-viz-green-900":"var(--data-viz-green-900)","data-viz-green-950":"var(--data-viz-green-950)","data-viz-aqua-50":"var(--data-viz-aqua-50)","data-viz-aqua-100":"var(--data-viz-aqua-100)","data-viz-aqua-200":"var(--data-viz-aqua-200)","data-viz-aqua-300":"var(--data-viz-aqua-300)","data-viz-aqua-400":"var(--data-viz-aqua-400)","data-viz-aqua-500":"var(--data-viz-aqua-500)","data-viz-aqua-600":"var(--data-viz-aqua-600)","data-viz-aqua-700":"var(--data-viz-aqua-700)","data-viz-aqua-800":"var(--data-viz-aqua-800)","data-viz-aqua-900":"var(--data-viz-aqua-900)","data-viz-aqua-950":"var(--data-viz-aqua-950)","data-viz-blue-50":"var(--data-viz-blue-50)","data-viz-blue-100":"var(--data-viz-blue-100)","data-viz-blue-200":"var(--data-viz-blue-200)","data-viz-blue-300":"var(--data-viz-blue-300)","data-viz-blue-400":"var(--data-viz-blue-400)","data-viz-blue-500":"var(--data-viz-blue-500)","data-viz-blue-600":"var(--data-viz-blue-600)","data-viz-blue-700":"var(--data-viz-blue-700)","data-viz-blue-800":"var(--data-viz-blue-800)","data-viz-blue-900":"var(--data-viz-blue-900)","data-viz-blue-950":"var(--data-viz-blue-950)","data-viz-magenta-50":"var(--data-viz-magenta-50)","data-viz-magenta-100":"var(--data-viz-magenta-100)","data-viz-magenta-200":"var(--data-viz-magenta-200)","data-viz-magenta-300":"var(--data-viz-magenta-300)","data-viz-magenta-400":"var(--data-viz-magenta-400)","data-viz-magenta-500":"var(--data-viz-magenta-500)","data-viz-magenta-600":"var(--data-viz-magenta-600)","data-viz-magenta-700":"var(--data-viz-magenta-700)","data-viz-magenta-800":"var(--data-viz-magenta-800)","data-viz-magenta-900":"var(--data-viz-magenta-900)","data-viz-magenta-950":"var(--data-viz-magenta-950)","data-viz-orange-50":"var(--data-viz-orange-50)","data-viz-orange-100":"var(--data-viz-orange-100)","data-viz-orange-200":"var(--data-viz-orange-200)","data-viz-orange-300":"var(--data-viz-orange-300)","data-viz-orange-400":"var(--data-viz-orange-400)","data-viz-orange-500":"var(--data-viz-orange-500)","data-viz-orange-600":"var(--data-viz-orange-600)","data-viz-orange-700":"var(--data-viz-orange-700)","data-viz-orange-800":"var(--data-viz-orange-800)","data-viz-orange-900":"var(--data-viz-orange-900)","data-viz-orange-950":"var(--data-viz-orange-950)"};
|
|
9
|
+
const neutralColors = {"neutral-0":"var(--gl-color-neutral-0)","neutral-10":"var(--gl-color-neutral-10)","neutral-50":"var(--gl-color-neutral-50)","neutral-100":"var(--gl-color-neutral-100)","neutral-200":"var(--gl-color-neutral-200)","neutral-300":"var(--gl-color-neutral-300)","neutral-400":"var(--gl-color-neutral-400)","neutral-500":"var(--gl-color-neutral-500)","neutral-600":"var(--gl-color-neutral-600)","neutral-700":"var(--gl-color-neutral-700)","neutral-800":"var(--gl-color-neutral-800)","neutral-900":"var(--gl-color-neutral-900)","neutral-950":"var(--gl-color-neutral-950)","neutral-1000":"var(--gl-color-neutral-1000)"};
|
|
10
|
+
const textColors = {"default":"var(--gl-text-color-default)","subtle":"var(--gl-text-color-subtle)","strong":"var(--gl-text-color-strong)","heading":"var(--gl-text-color-heading)","link":"var(--gl-text-color-link)","warning":"var(--gl-text-color-warning)","danger":"var(--gl-text-color-danger)","success":"var(--gl-text-color-success)","disabled":"var(--gl-text-color-disabled)"};
|
|
11
|
+
const backgroundColors = {"default":"var(--gl-background-color-default)","subtle":"var(--gl-background-color-subtle)","strong":"var(--gl-background-color-strong)","disabled":"var(--gl-background-color-disabled)","overlap":"var(--gl-background-color-overlap)","section":"var(--gl-background-color-section)","overlay":"var(--gl-background-color-overlay)"};
|
|
12
|
+
const borderColors = {"default":"var(--gl-border-color-default)","subtle":"var(--gl-border-color-subtle)","strong":"var(--gl-border-color-strong)","section":"var(--gl-border-color-section)","transparent":"var(--gl-border-color-transparent)"};
|
|
13
|
+
const iconColors = {"default":"var(--gl-icon-color-default)","subtle":"var(--gl-icon-color-subtle)","strong":"var(--gl-icon-color-strong)","disabled":"var(--gl-icon-color-disabled)","link":"var(--gl-icon-color-link)","info":"var(--gl-icon-color-info)","warning":"var(--gl-icon-color-warning)","danger":"var(--gl-icon-color-danger)","success":"var(--gl-icon-color-success)"};
|
|
14
|
+
const alphaDarkColors = {"2":"var(--gl-color-alpha-dark-2)","4":"var(--gl-color-alpha-dark-4)","6":"var(--gl-color-alpha-dark-6)","8":"var(--gl-color-alpha-dark-8)","16":"var(--gl-color-alpha-dark-16)","24":"var(--gl-color-alpha-dark-24)","40":"var(--gl-color-alpha-dark-40)"};
|
|
15
|
+
const alphaLightColors = {"2":"var(--gl-color-alpha-light-2)","4":"var(--gl-color-alpha-light-4)","6":"var(--gl-color-alpha-light-6)","8":"var(--gl-color-alpha-light-8)","16":"var(--gl-color-alpha-light-16)","24":"var(--gl-color-alpha-light-24)","36":"var(--gl-color-alpha-light-36)"};
|
|
16
|
+
const brandColors = {"brand-white":"var(--gl-color-brand-white)","brand-charcoal":"var(--gl-color-brand-charcoal)","brand-orange":{"01g":"var(--gl-color-brand-orange-01g)","01p":"var(--gl-color-brand-orange-01p)","02p":"var(--gl-color-brand-orange-02p)","03p":"var(--gl-color-brand-orange-03p)"},"brand-purple":{"01g":"var(--gl-color-brand-purple-01g)","01p":"var(--gl-color-brand-purple-01p)","02p":"var(--gl-color-brand-purple-02p)"},"brand-gray":{"01":"var(--gl-color-brand-gray-01)","02":"var(--gl-color-brand-gray-02)","03":"var(--gl-color-brand-gray-03)","04":"var(--gl-color-brand-gray-04)","05":"var(--gl-color-brand-gray-05)"},"brand-pink":{"01g":"var(--gl-color-brand-pink-01g)"}};
|
|
17
|
+
const statusBackgroundColors = {"status-neutral":"var(--gl-status-neutral-background-color)","status-info":"var(--gl-status-info-background-color)","status-success":"var(--gl-status-success-background-color)","status-warning":"var(--gl-status-warning-background-color)","status-danger":"var(--gl-status-danger-background-color)","status-brand":"var(--gl-status-brand-background-color)"};
|
|
18
|
+
const statusTextColors = {"status-neutral":"var(--gl-status-neutral-text-color)","status-info":"var(--gl-status-info-text-color)","status-success":"var(--gl-status-success-text-color)","status-warning":"var(--gl-status-warning-text-color)","status-danger":"var(--gl-status-danger-text-color)","status-brand":"var(--gl-status-brand-text-color)"};
|
|
19
|
+
const statusIconColors = {"status-neutral":"var(--gl-status-neutral-icon-color)","status-info":"var(--gl-status-info-icon-color)","status-success":"var(--gl-status-success-icon-color)","status-warning":"var(--gl-status-warning-icon-color)","status-danger":"var(--gl-status-danger-icon-color)","status-brand":"var(--gl-status-brand-icon-color)"};
|
|
20
|
+
const feedbackBackgroundColors = {"feedback-strong":"var(--gl-feedback-strong-background-color)","feedback-neutral":"var(--gl-feedback-neutral-background-color)","feedback-info":"var(--gl-feedback-info-background-color)","feedback-success":"var(--gl-feedback-success-background-color)","feedback-warning":"var(--gl-feedback-warning-background-color)","feedback-danger":"var(--gl-feedback-danger-background-color)"};
|
|
21
|
+
const feedbackTextColors = {"feedback-strong":"var(--gl-feedback-strong-text-color)","feedback-neutral":"var(--gl-feedback-neutral-text-color)","feedback-info":"var(--gl-feedback-info-text-color)","feedback-success":"var(--gl-feedback-success-text-color)","feedback-warning":"var(--gl-feedback-warning-text-color)","feedback-danger":"var(--gl-feedback-danger-text-color)"};
|
|
22
|
+
const feedbackIconColors = {"feedback-strong":"var(--gl-feedback-strong-icon-color)","feedback-neutral":"var(--gl-feedback-neutral-icon-color)","feedback-info":"var(--gl-feedback-info-icon-color)","feedback-success":"var(--gl-feedback-success-icon-color)","feedback-warning":"var(--gl-feedback-warning-icon-color)","feedback-danger":"var(--gl-feedback-danger-icon-color)"};
|
|
23
|
+
const spacingScale = {"0":"var(--gl-spacing-scale-0)","1":"var(--gl-spacing-scale-1)","2":"var(--gl-spacing-scale-2)","3":"var(--gl-spacing-scale-3)","4":"var(--gl-spacing-scale-4)","5":"var(--gl-spacing-scale-5)","6":"var(--gl-spacing-scale-6)","7":"var(--gl-spacing-scale-7)","8":"var(--gl-spacing-scale-8)","9":"var(--gl-spacing-scale-9)","10":"var(--gl-spacing-scale-10)","11":"var(--gl-spacing-scale-11)","12":"var(--gl-spacing-scale-12)","13":"var(--gl-spacing-scale-13)","15":"var(--gl-spacing-scale-15)","18":"var(--gl-spacing-scale-18)","20":"var(--gl-spacing-scale-20)","26":"var(--gl-spacing-scale-26)","28":"var(--gl-spacing-scale-28)","30":"var(--gl-spacing-scale-30)","31":"var(--gl-spacing-scale-31)","33":"var(--gl-spacing-scale-33)","34":"var(--gl-spacing-scale-34)","37":"var(--gl-spacing-scale-37)","48":"var(--gl-spacing-scale-48)","62":"var(--gl-spacing-scale-62)","75":"var(--gl-spacing-scale-75)","80":"var(--gl-spacing-scale-80)","88":"var(--gl-spacing-scale-88)","px":"var(--gl-spacing-scale-px)","2-5":"var(--gl-spacing-scale-2-5)","11-5":"var(--gl-spacing-scale-11-5)"};
|
|
24
|
+
const borderRadius = {"none":"var(--gl-border-radius-none)","xs":"var(--gl-border-radius-xs)","sm":"var(--gl-border-radius-sm)","md":"var(--gl-border-radius-md)","lg":"var(--gl-border-radius-lg)","xl":"var(--gl-border-radius-xl)","2xl":"var(--gl-border-radius-2xl)","3xl":"var(--gl-border-radius-3xl)","full":"var(--gl-border-radius-full)","default":"var(--gl-border-radius-default)","control":"var(--gl-control-border-radius)"};
|
|
25
|
+
const opacity = {"0":"var(--gl-opacity-0)","1":"var(--gl-opacity-1)","2":"var(--gl-opacity-2)","3":"var(--gl-opacity-3)","4":"var(--gl-opacity-4)","5":"var(--gl-opacity-5)","6":"var(--gl-opacity-6)","7":"var(--gl-opacity-7)","8":"var(--gl-opacity-8)","9":"var(--gl-opacity-9)","10":"var(--gl-opacity-10)"};
|
|
26
|
+
const zindexes = {"0":"var(--gl-zindex-0)","1":"var(--gl-zindex-1)","2":"var(--gl-zindex-2)","3":"var(--gl-zindex-3)","4":"var(--gl-zindex-4)","200":"var(--gl-zindex-200)","9999":"var(--gl-zindex-9999)"};
|
|
27
27
|
const boxShadow = {"sm":"var(--gl-shadow-sm)","md":"var(--gl-shadow-md)","lg":"var(--gl-shadow-lg)"};
|
|
28
28
|
|
|
29
29
|
const colors = {
|
|
30
30
|
inherit: 'inherit',
|
|
31
31
|
current: 'currentColor',
|
|
32
32
|
transparent: 'transparent',
|
|
33
|
-
white: 'var(--white
|
|
34
|
-
black: 'var(--black
|
|
33
|
+
white: 'var(--white)',
|
|
34
|
+
black: 'var(--black)',
|
|
35
35
|
alpha: {
|
|
36
36
|
dark: {...alphaDarkColors},
|
|
37
37
|
light: {...alphaLightColors},
|
|
@@ -48,29 +48,29 @@
|
|
|
48
48
|
...backgroundColors,
|
|
49
49
|
...statusBackgroundColors,
|
|
50
50
|
...feedbackBackgroundColors,
|
|
51
|
-
dropdown: 'var(--gl-dropdown-background-color
|
|
51
|
+
dropdown: 'var(--gl-dropdown-background-color)',
|
|
52
52
|
control: {
|
|
53
|
-
default: 'var(--gl-control-background-color-default
|
|
54
|
-
disabled: 'var(--gl-control-background-color-disabled
|
|
55
|
-
concatenation: 'var(--gl-control-background-color-concatenation
|
|
56
|
-
readonly: 'var(--gl-control-background-color-readonly
|
|
53
|
+
default: 'var(--gl-control-background-color-default)',
|
|
54
|
+
disabled: 'var(--gl-control-background-color-disabled)',
|
|
55
|
+
concatenation: 'var(--gl-control-background-color-concatenation)',
|
|
56
|
+
readonly: 'var(--gl-control-background-color-readonly)',
|
|
57
57
|
},
|
|
58
58
|
};
|
|
59
59
|
|
|
60
60
|
const borderColor = {
|
|
61
61
|
...colors,
|
|
62
62
|
...borderColors,
|
|
63
|
-
dropdown: 'var(--gl-dropdown-border-color
|
|
64
|
-
'dropdown-divider': 'var(--gl-dropdown-divider-color
|
|
63
|
+
dropdown: 'var(--gl-dropdown-border-color)',
|
|
64
|
+
'dropdown-divider': 'var(--gl-dropdown-divider-color)',
|
|
65
65
|
control: {
|
|
66
|
-
default: 'var(--gl-control-border-color-default
|
|
67
|
-
disabled: 'var(--gl-control-border-color-disabled
|
|
68
|
-
error: 'var(--gl-control-border-color-error
|
|
66
|
+
default: 'var(--gl-control-border-color-default)',
|
|
67
|
+
disabled: 'var(--gl-control-border-color-disabled)',
|
|
68
|
+
error: 'var(--gl-control-border-color-error)',
|
|
69
69
|
},
|
|
70
70
|
};
|
|
71
71
|
|
|
72
72
|
const outlineColor = {
|
|
73
|
-
focus: 'var(--gl-focus-ring-outer-color
|
|
73
|
+
focus: 'var(--gl-focus-ring-outer-color)',
|
|
74
74
|
};
|
|
75
75
|
|
|
76
76
|
const fill = {
|
|
@@ -87,13 +87,13 @@
|
|
|
87
87
|
...textColors,
|
|
88
88
|
...statusTextColors,
|
|
89
89
|
...feedbackTextColors,
|
|
90
|
-
primary: 'var(--gl-text-primary
|
|
91
|
-
secondary: 'var(--gl-text-secondary
|
|
92
|
-
tertiary: 'var(--gl-text-tertiary
|
|
90
|
+
primary: 'var(--gl-text-primary)',
|
|
91
|
+
secondary: 'var(--gl-text-secondary)',
|
|
92
|
+
tertiary: 'var(--gl-text-tertiary)',
|
|
93
93
|
control: {
|
|
94
|
-
placeholder: 'var(--gl-control-placeholder-color
|
|
95
|
-
error: 'var(--gl-control-text-color-error
|
|
96
|
-
valid: 'var(--gl-control-text-color-valid
|
|
94
|
+
placeholder: 'var(--gl-control-placeholder-color)',
|
|
95
|
+
error: 'var(--gl-control-text-color-error)',
|
|
96
|
+
valid: 'var(--gl-control-text-color-valid)',
|
|
97
97
|
},
|
|
98
98
|
};
|
|
99
99
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "123.
|
|
3
|
+
"version": "123.5.0",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
"@cypress/grep": "^4.1.1",
|
|
103
103
|
"@gitlab/fonts": "^1.3.1",
|
|
104
104
|
"@gitlab/svgs": "3.147.0",
|
|
105
|
-
"@jest/test-sequencer": "30.
|
|
105
|
+
"@jest/test-sequencer": "30.2.0",
|
|
106
106
|
"@rollup/plugin-commonjs": "^28.0.6",
|
|
107
107
|
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
108
108
|
"@rollup/plugin-replace": "^6.0.2",
|
|
@@ -14,6 +14,7 @@ import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';
|
|
|
14
14
|
import GlIcon from '../icon/icon.vue';
|
|
15
15
|
import GlLoadingIcon from '../loading_icon/loading_icon.vue';
|
|
16
16
|
import { ENTER, SPACE } from '../new_dropdowns/constants';
|
|
17
|
+
import { glButtonConfig } from '../../../config';
|
|
17
18
|
|
|
18
19
|
export default {
|
|
19
20
|
name: 'GlButton',
|
|
@@ -82,6 +83,14 @@ export default {
|
|
|
82
83
|
required: false,
|
|
83
84
|
default: false,
|
|
84
85
|
},
|
|
86
|
+
/**
|
|
87
|
+
* Keep the button accessible when `loading` is `true`.
|
|
88
|
+
*/
|
|
89
|
+
accessibleLoading: {
|
|
90
|
+
type: Boolean,
|
|
91
|
+
required: false,
|
|
92
|
+
default: () => glButtonConfig.accessibleLoadingButton,
|
|
93
|
+
},
|
|
85
94
|
/**
|
|
86
95
|
* CSS classes to add to the button text.
|
|
87
96
|
*/
|
|
@@ -241,6 +250,9 @@ export default {
|
|
|
241
250
|
isButtonDisabled() {
|
|
242
251
|
return this.disabled || this.loading;
|
|
243
252
|
},
|
|
253
|
+
isButtonAriaDisabled() {
|
|
254
|
+
return this.accessibleLoading && this.isButton && this.loading;
|
|
255
|
+
},
|
|
244
256
|
buttonClasses() {
|
|
245
257
|
const classes = ['btn', 'gl-button', `btn-${this.variant}`, `btn-${this.buttonSize}`];
|
|
246
258
|
|
|
@@ -253,7 +265,7 @@ export default {
|
|
|
253
265
|
'button-ellipsis-horizontal': this.hasIconOnly && this.icon === 'ellipsis_h',
|
|
254
266
|
selected: this.selected,
|
|
255
267
|
'btn-block': this.displayBlock,
|
|
256
|
-
disabled: this.disabled,
|
|
268
|
+
disabled: this.disabled || this.isButtonAriaDisabled,
|
|
257
269
|
});
|
|
258
270
|
|
|
259
271
|
if (this.label) {
|
|
@@ -304,6 +316,8 @@ export default {
|
|
|
304
316
|
// We set the `aria-disabled` state for non-standard tags
|
|
305
317
|
...(this.isNonStandardTag ? { 'aria-disabled': String(this.disabled) } : {}),
|
|
306
318
|
tabindex: this.tabindex,
|
|
319
|
+
// We set the `aria-disabled` state for buttons while loading
|
|
320
|
+
...(this.isButtonAriaDisabled ? { 'aria-disabled': 'true', disabled: null } : {}),
|
|
307
321
|
};
|
|
308
322
|
|
|
309
323
|
if (this.isLink) {
|
|
@@ -328,11 +342,14 @@ export default {
|
|
|
328
342
|
return { ...this.$attrs, ...base };
|
|
329
343
|
},
|
|
330
344
|
computedListeners() {
|
|
331
|
-
|
|
332
|
-
click: this.onClick,
|
|
333
|
-
keydown: this.onKeydown,
|
|
345
|
+
const listeners = {
|
|
334
346
|
...this.$listeners,
|
|
335
347
|
};
|
|
348
|
+
|
|
349
|
+
if (this.isButtonAriaDisabled) {
|
|
350
|
+
delete listeners.click;
|
|
351
|
+
}
|
|
352
|
+
return listeners;
|
|
336
353
|
},
|
|
337
354
|
componentIs() {
|
|
338
355
|
if (this.label) {
|
|
@@ -373,8 +390,8 @@ export default {
|
|
|
373
390
|
}
|
|
374
391
|
}
|
|
375
392
|
},
|
|
376
|
-
|
|
377
|
-
if (this.
|
|
393
|
+
maybeStopEvent(event) {
|
|
394
|
+
if (this.isButtonAriaDisabled && isEvent(event)) {
|
|
378
395
|
stopEvent(event);
|
|
379
396
|
}
|
|
380
397
|
},
|
|
@@ -387,6 +404,8 @@ export default {
|
|
|
387
404
|
v-bind="computedPropsAndAttributes"
|
|
388
405
|
v-safe-link:[safeLinkConfig]
|
|
389
406
|
:class="buttonClasses"
|
|
407
|
+
@click="maybeStopEvent"
|
|
408
|
+
@keydown="onKeydown"
|
|
390
409
|
v-on="computedListeners"
|
|
391
410
|
>
|
|
392
411
|
<gl-loading-icon v-if="loading" inline class="gl-button-icon gl-button-loading-indicator" />
|
package/src/config.js
CHANGED
|
@@ -39,6 +39,8 @@ export const defaultConfig = {
|
|
|
39
39
|
firstDayOfWeek: 0, // Defaults to 0 (Sunday)
|
|
40
40
|
};
|
|
41
41
|
|
|
42
|
+
export const glButtonConfig = {};
|
|
43
|
+
|
|
42
44
|
let configured = false;
|
|
43
45
|
|
|
44
46
|
/**
|
|
@@ -48,8 +50,10 @@ let configured = false;
|
|
|
48
50
|
* @template TValue=string
|
|
49
51
|
* @property {undefined | Object} translations Generic translations for component labels to fall back to.
|
|
50
52
|
* @property {undefined | Number} firstDayOfWeek Configured first day of the week, from 0 (Sunday) to 6 (Saturday).
|
|
53
|
+
* @property {boolean} [accessibleLoadingButton] Temporary flag to enable accessible loading button.
|
|
54
|
+
*
|
|
51
55
|
*/
|
|
52
|
-
const setConfigs = ({ translations, firstDayOfWeek } = {}) => {
|
|
56
|
+
const setConfigs = ({ translations, firstDayOfWeek, accessibleLoadingButton = false } = {}) => {
|
|
53
57
|
if (configured) {
|
|
54
58
|
if (process.env.NODE_ENV === 'development') {
|
|
55
59
|
throw new Error('GitLab UI can only be configured once!');
|
|
@@ -90,6 +94,23 @@ const setConfigs = ({ translations, firstDayOfWeek } = {}) => {
|
|
|
90
94
|
|
|
91
95
|
Object.assign(i18n, translations);
|
|
92
96
|
}
|
|
97
|
+
|
|
98
|
+
// Temporary flag to enable the accessible loading button feature.
|
|
99
|
+
// This flag allows the feature to be opt-in during the rollout phase,
|
|
100
|
+
// giving us the flexibility to test and validate its impact on user experience.
|
|
101
|
+
|
|
102
|
+
// The global variable `accessibleLoadingButton` is set to a boolean value
|
|
103
|
+
// to indicate whether the button should be disabled while loading.
|
|
104
|
+
|
|
105
|
+
// Future Plan:
|
|
106
|
+
// Once the accessible loading button feature is validated and stable,
|
|
107
|
+
// we will remove this temporary flag and make the feature the default behavior.
|
|
108
|
+
// At that point, there will be no need for opt-in or opt-out mechanisms for this feature.
|
|
109
|
+
if (typeof accessibleLoadingButton === 'boolean') {
|
|
110
|
+
Object.assign(glButtonConfig, {
|
|
111
|
+
accessibleLoadingButton,
|
|
112
|
+
});
|
|
113
|
+
}
|
|
93
114
|
};
|
|
94
115
|
|
|
95
116
|
export default setConfigs;
|