@gitlab/ui 52.6.0 → 52.6.1
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 +7 -0
- package/dist/components/base/accordion/accordion_item.js +13 -13
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/utility_classes.css +1 -1
- package/dist/utility_classes.css.map +1 -1
- package/package.json +3 -3
- package/src/components/base/accordion/accordion.stories.js +2 -8
- package/src/components/base/accordion/accordion_item.stories.js +2 -5
- package/src/components/base/accordion/accordion_item.vue +13 -13
- package/src/scss/utilities.scss +2 -0
- package/src/scss/utility-mixins/typography.scss +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "52.6.
|
|
3
|
+
"version": "52.6.1",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -85,9 +85,9 @@
|
|
|
85
85
|
"@babel/core": "^7.20.5",
|
|
86
86
|
"@babel/preset-env": "^7.20.2",
|
|
87
87
|
"@gitlab/eslint-plugin": "18.1.0",
|
|
88
|
-
"@gitlab/fonts": "^1.0.
|
|
88
|
+
"@gitlab/fonts": "^1.0.1",
|
|
89
89
|
"@gitlab/stylelint-config": "4.1.0",
|
|
90
|
-
"@gitlab/svgs": "3.
|
|
90
|
+
"@gitlab/svgs": "3.14.0",
|
|
91
91
|
"@rollup/plugin-commonjs": "^11.1.0",
|
|
92
92
|
"@rollup/plugin-node-resolve": "^7.1.3",
|
|
93
93
|
"@rollup/plugin-replace": "^2.3.2",
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { disableControls } from '../../../utils/stories_utils';
|
|
2
1
|
import readme from './accordion.md';
|
|
3
2
|
import GlAccordion from './accordion.vue';
|
|
4
3
|
import GlAccordionItem from './accordion_item.vue';
|
|
@@ -9,11 +8,11 @@ const template = `
|
|
|
9
8
|
Each accordion can be expanded or collapsed independently of others.
|
|
10
9
|
</gl-accordion-item>
|
|
11
10
|
|
|
12
|
-
<gl-accordion-item title="Item 2" :header-level="headerLevel">
|
|
11
|
+
<gl-accordion-item title="Item 2" :header-level="headerLevel" :visible="true">
|
|
13
12
|
If you want to have an accordion item to be initially visible, please see
|
|
14
13
|
<code>Initially Expanded</code> example for the <code>GLAccordionItem</code>.
|
|
15
14
|
</gl-accordion-item>
|
|
16
|
-
|
|
15
|
+
|
|
17
16
|
<gl-accordion-item title="Item 3" :header-level="headerLevel" :visible="autoCollapse">
|
|
18
17
|
If you want the other accordion items to collapse when one is open, please see
|
|
19
18
|
<code>Auto Collapse</code> example.
|
|
@@ -40,15 +39,11 @@ const Template = (args) => ({
|
|
|
40
39
|
export const Default = Template.bind({});
|
|
41
40
|
Default.args = generateProps();
|
|
42
41
|
|
|
43
|
-
export const AutoCollapse = Template.bind({});
|
|
44
|
-
AutoCollapse.args = generateProps({ autoCollapse: true });
|
|
45
|
-
|
|
46
42
|
export default {
|
|
47
43
|
title: 'base/accordion',
|
|
48
44
|
component: GlAccordion,
|
|
49
45
|
parameters: {
|
|
50
46
|
bootstrapComponent: 'b-collapse',
|
|
51
|
-
storyshots: { disable: true },
|
|
52
47
|
docs: {
|
|
53
48
|
description: {
|
|
54
49
|
component: readme,
|
|
@@ -60,6 +55,5 @@ export default {
|
|
|
60
55
|
options: [1, 2, 3, 4, 5, 6],
|
|
61
56
|
control: 'select',
|
|
62
57
|
},
|
|
63
|
-
...disableControls(['autoCollapse']),
|
|
64
58
|
},
|
|
65
59
|
};
|
|
@@ -4,7 +4,7 @@ import GlAccordionItem from './accordion_item.vue';
|
|
|
4
4
|
const template = `
|
|
5
5
|
<gl-accordion-item :title="title" :titleVisible="titleVisible" :visible="visible" :header-level="headerLevel">
|
|
6
6
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, maiores.
|
|
7
|
-
|
|
7
|
+
</gl-accordion-item>
|
|
8
8
|
`;
|
|
9
9
|
|
|
10
10
|
const defaultValue = (prop) => GlAccordionItem.props[prop].default;
|
|
@@ -34,10 +34,7 @@ const Template = (args) => ({
|
|
|
34
34
|
});
|
|
35
35
|
|
|
36
36
|
export const Default = Template.bind({});
|
|
37
|
-
Default.args = generateProps({ titleVisible: 'Accordion Item Title Expanded' });
|
|
38
|
-
|
|
39
|
-
export const InitiallyExpanded = Template.bind({});
|
|
40
|
-
InitiallyExpanded.args = generateProps({ visible: true, title: 'Item Content Initially Expanded' });
|
|
37
|
+
Default.args = generateProps({ visible: true, titleVisible: 'Accordion Item Title Expanded' });
|
|
41
38
|
|
|
42
39
|
export default {
|
|
43
40
|
title: 'base/accordion/accordion-item',
|
|
@@ -20,32 +20,32 @@ export default {
|
|
|
20
20
|
event: 'input',
|
|
21
21
|
},
|
|
22
22
|
props: {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
/**
|
|
24
|
+
* Used to set the title of accordion link
|
|
25
|
+
*/
|
|
26
26
|
title: {
|
|
27
27
|
type: String,
|
|
28
28
|
required: true,
|
|
29
29
|
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
/**
|
|
31
|
+
* Used to set the title of accordion link when the content is visible
|
|
32
|
+
* */
|
|
33
33
|
titleVisible: {
|
|
34
34
|
type: String,
|
|
35
35
|
default: null,
|
|
36
36
|
required: false,
|
|
37
37
|
},
|
|
38
|
-
|
|
39
|
-
When set, it will ensure the accordion item is initially visible
|
|
40
|
-
|
|
38
|
+
/**
|
|
39
|
+
* When set, it will ensure the accordion item is initially visible
|
|
40
|
+
*/
|
|
41
41
|
visible: {
|
|
42
42
|
type: Boolean,
|
|
43
43
|
default: false,
|
|
44
44
|
required: false,
|
|
45
45
|
},
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
*/
|
|
46
|
+
/**
|
|
47
|
+
* The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.,
|
|
48
|
+
*/
|
|
49
49
|
headerLevel: {
|
|
50
50
|
type: Number,
|
|
51
51
|
required: false,
|
|
@@ -55,7 +55,7 @@ When set, it will ensure the accordion item is initially visible
|
|
|
55
55
|
},
|
|
56
56
|
},
|
|
57
57
|
/**
|
|
58
|
-
* Additional CSS class(es) to be applied to the header
|
|
58
|
+
* Additional CSS class(es) to be applied to the header
|
|
59
59
|
*/
|
|
60
60
|
headerClass: {
|
|
61
61
|
type: [String, Object, Array],
|
package/src/scss/utilities.scss
CHANGED
|
@@ -7789,10 +7789,12 @@
|
|
|
7789
7789
|
}
|
|
7790
7790
|
.gl-font-monospace {
|
|
7791
7791
|
font-family: $gl-monospace-font;
|
|
7792
|
+
font-variant-ligatures: none;
|
|
7792
7793
|
}
|
|
7793
7794
|
|
|
7794
7795
|
.gl-font-monospace\! {
|
|
7795
7796
|
font-family: $gl-monospace-font !important;
|
|
7797
|
+
font-variant-ligatures: none !important;
|
|
7796
7798
|
}
|
|
7797
7799
|
|
|
7798
7800
|
.gl-font-regular {
|