@gitlab/ui 32.39.0 → 32.40.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 +7 -0
- package/dist/components/base/form/form_input_group/form_input_group.js +6 -1
- package/dist/components/base/markdown/markdown.documentation.js +2 -6
- package/documentation/documented_stories.js +1 -0
- package/package.json +2 -2
- package/src/components/base/form/form_input_group/form_input_group.spec.js +18 -1
- package/src/components/base/form/form_input_group/form_input_group.vue +6 -1
- package/src/components/base/markdown/markdown.documentation.js +0 -3
- package/src/components/base/markdown/markdown.md +0 -2
- package/src/components/base/markdown/markdown.stories.js +25 -24
- package/dist/components/base/markdown/examples/index.js +0 -13
- package/dist/components/base/markdown/examples/markdown.basic.example.js +0 -38
- package/src/components/base/markdown/examples/index.js +0 -15
- package/src/components/base/markdown/examples/markdown.basic.example.vue +0 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [32.40.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.39.0...v32.40.0) (2021-11-22)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **GlFormInputGroup:** Add `inputClass` prop to `GlFormInputGroup` ([cdc7c70](https://gitlab.com/gitlab-org/gitlab-ui/commit/cdc7c70f81b462237deda76f2a3709119b52489f))
|
|
7
|
+
|
|
1
8
|
# [32.39.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.38.0...v32.39.0) (2021-11-19)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -34,6 +34,11 @@ var script = {
|
|
|
34
34
|
type: String,
|
|
35
35
|
required: false,
|
|
36
36
|
default: undefined
|
|
37
|
+
},
|
|
38
|
+
inputClass: {
|
|
39
|
+
type: [String, Array, Object],
|
|
40
|
+
required: false,
|
|
41
|
+
default: ''
|
|
37
42
|
}
|
|
38
43
|
},
|
|
39
44
|
|
|
@@ -66,7 +71,7 @@ var script = {
|
|
|
66
71
|
const __vue_script__ = script;
|
|
67
72
|
|
|
68
73
|
/* template */
|
|
69
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-input-group',[(_vm.activeOption || _vm.$scopedSlots.prepend)?_c('b-input-group-prepend',[_vm._t("prepend"),_vm._v(" "),(_vm.activeOption)?_c('gl-dropdown',{attrs:{"text":_vm.activeOption}},_vm._l((_vm.predefinedOptions),function(option){return _c('gl-dropdown-item',{key:option.value,attrs:{"is-check-item":"","is-checked":_vm.activeOption === option.name},on:{"click":function($event){return _vm.updateValue(option)}}},[_vm._v("\n "+_vm._s(option.name)+"\n ")])}),1):_vm._e()],2):_vm._e(),_vm._v(" "),_vm._t("default",[_c('b-form-input',_vm._g(_vm._b({ref:"input",
|
|
74
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-input-group',[(_vm.activeOption || _vm.$scopedSlots.prepend)?_c('b-input-group-prepend',[_vm._t("prepend"),_vm._v(" "),(_vm.activeOption)?_c('gl-dropdown',{attrs:{"text":_vm.activeOption}},_vm._l((_vm.predefinedOptions),function(option){return _c('gl-dropdown-item',{key:option.value,attrs:{"is-check-item":"","is-checked":_vm.activeOption === option.name},on:{"click":function($event){return _vm.updateValue(option)}}},[_vm._v("\n "+_vm._s(option.name)+"\n ")])}),1):_vm._e()],2):_vm._e(),_vm._v(" "),_vm._t("default",[_c('b-form-input',_vm._g(_vm._b({ref:"input",class:['gl-form-input', _vm.inputClass],attrs:{"aria-label":_vm.label},on:{"click":_vm.handleClick},model:{value:(_vm.localValue),callback:function ($$v) {_vm.localValue=$$v;},expression:"localValue"}},'b-form-input',_vm.$attrs,false),_vm.$listeners))]),_vm._v(" "),(_vm.$scopedSlots.append)?_c('b-input-group-append',[_vm._t("append")],2):_vm._e()],2)],1)};
|
|
70
75
|
var __vue_staticRenderFns__ = [];
|
|
71
76
|
|
|
72
77
|
/* style */
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var markdown = "# GlMarkdown\n\nThe `GlMarkdown` component styles markdown-generated HTML following the Pajamas Documentation Markdown\n[styling specifications](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit---Beta?node-id=542%3A2).\n\n## Usage\n\nYou can use the `GlMarkdown` component in two ways.\n\n### Vue component\n\n```html\n<script>\nimport { GlMarkdown } from '@gitlab/ui';\n\nexport default {\n components: {\n GlMarkdown,\n }\n}\n</script>\n<template>\n <gl-markdown>\n <!-- All the content inside gl-markdown will inherit the documentation markdown styles -->\n </gl-markdown>\n</template>\n```\n\n### `gl-markdown` class selector\n\nFollow the [GitLab UI CSS guidelines](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/css.md)\nto include GitLab UI CSS in your application. Afterwards, you can apply the `gl-markdown` class\nselector to the root element that contains the markdown-generated HTML.\n\n```html\n<body class=\"gl-markdown\">\n <!-- All the content inside body.gl-markdown will inherit the documentation markdown styles -->\n</body>\n```\n\n### Compact markdown\n\nSet the `compact` property to true in `GlMarkdown` to apply the compact markdown styles.\n\n```html\n<gl-markdown compact></gl-compact>\n```\n\nYou can also append the `gl-compact-markdown` class selector after `gl-markdown` in markdown-generated\nHTML.\n\n```html\n<body class=\"gl-markdown gl-compact-markdown\">\n</body>\n```\n\n<!--\n## Browser compatibility\n\nIf the component requires any polyfill or fallback on certain browsers, describe those requirements\nhere.\n-->\n\n<!--\n## Edge cases\n\nIf the component has some known limitations, describe them here.\n-->\n\n<!--\n## Deprecation warning\n\nIf and when this component introduced API changes that would require deprecating old APIs, describe\nthe changes here, and provide a migration paths to the new API.\n-->\n";
|
|
1
|
+
var markdown = "The `GlMarkdown` component styles markdown-generated HTML following the Pajamas Documentation Markdown\n[styling specifications](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit---Beta?node-id=542%3A2).\n\n## Usage\n\nYou can use the `GlMarkdown` component in two ways.\n\n### Vue component\n\n```html\n<script>\nimport { GlMarkdown } from '@gitlab/ui';\n\nexport default {\n components: {\n GlMarkdown,\n }\n}\n</script>\n<template>\n <gl-markdown>\n <!-- All the content inside gl-markdown will inherit the documentation markdown styles -->\n </gl-markdown>\n</template>\n```\n\n### `gl-markdown` class selector\n\nFollow the [GitLab UI CSS guidelines](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/css.md)\nto include GitLab UI CSS in your application. Afterwards, you can apply the `gl-markdown` class\nselector to the root element that contains the markdown-generated HTML.\n\n```html\n<body class=\"gl-markdown\">\n <!-- All the content inside body.gl-markdown will inherit the documentation markdown styles -->\n</body>\n```\n\n### Compact markdown\n\nSet the `compact` property to true in `GlMarkdown` to apply the compact markdown styles.\n\n```html\n<gl-markdown compact></gl-compact>\n```\n\nYou can also append the `gl-compact-markdown` class selector after `gl-markdown` in markdown-generated\nHTML.\n\n```html\n<body class=\"gl-markdown gl-compact-markdown\">\n</body>\n```\n\n<!--\n## Browser compatibility\n\nIf the component requires any polyfill or fallback on certain browsers, describe those requirements\nhere.\n-->\n\n<!--\n## Edge cases\n\nIf the component has some known limitations, describe them here.\n-->\n\n<!--\n## Deprecation warning\n\nIf and when this component introduced API changes that would require deprecating old APIs, describe\nthe changes here, and provide a migration paths to the new API.\n-->\n";
|
|
4
2
|
|
|
5
3
|
var description = /*#__PURE__*/Object.freeze({
|
|
6
4
|
__proto__: null,
|
|
@@ -8,9 +6,7 @@ var description = /*#__PURE__*/Object.freeze({
|
|
|
8
6
|
});
|
|
9
7
|
|
|
10
8
|
var markdown_documentation = {
|
|
11
|
-
description
|
|
12
|
-
examples,
|
|
13
|
-
propsInfo: {}
|
|
9
|
+
description
|
|
14
10
|
};
|
|
15
11
|
|
|
16
12
|
export default markdown_documentation;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "32.
|
|
3
|
+
"version": "32.40.0",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"@babel/preset-env": "^7.10.2",
|
|
85
85
|
"@gitlab/eslint-plugin": "9.4.0",
|
|
86
86
|
"@gitlab/stylelint-config": "2.6.0",
|
|
87
|
-
"@gitlab/svgs": "1.
|
|
87
|
+
"@gitlab/svgs": "1.221.0",
|
|
88
88
|
"@rollup/plugin-commonjs": "^11.1.0",
|
|
89
89
|
"@rollup/plugin-node-resolve": "^7.1.3",
|
|
90
90
|
"@rollup/plugin-replace": "^2.3.2",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { shallowMount } from '@vue/test-utils';
|
|
2
|
-
import { BInputGroup } from 'bootstrap-vue';
|
|
2
|
+
import { BInputGroup, BFormInput } from 'bootstrap-vue';
|
|
3
3
|
import GlDropdownItem from '../../dropdown/dropdown_item.vue';
|
|
4
4
|
import InputGroup from './form_input_group.vue';
|
|
5
5
|
|
|
@@ -54,6 +54,23 @@ describe('Input Group', () => {
|
|
|
54
54
|
expect(wrapper.emitted('input')).toBeUndefined();
|
|
55
55
|
});
|
|
56
56
|
|
|
57
|
+
describe('`inputClass` prop', () => {
|
|
58
|
+
it.each`
|
|
59
|
+
inputClass
|
|
60
|
+
${'foo-bar baz'}
|
|
61
|
+
${['foo-bar', 'baz']}
|
|
62
|
+
${{ 'foo-bar': true, baz: true }}
|
|
63
|
+
`('correctly adds classes to input when `inputClass` prop is $inputClass', ({ inputClass }) => {
|
|
64
|
+
createWrapper({
|
|
65
|
+
propsData: { inputClass },
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
expect(wrapper.findComponent(BFormInput).classes()).toEqual(
|
|
69
|
+
expect.arrayContaining(['gl-form-input', 'foo-bar', 'baz'])
|
|
70
|
+
);
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
|
|
57
74
|
describe('predefined options', () => {
|
|
58
75
|
const options = [
|
|
59
76
|
{ name: 'Foo', value: 'foo.com' },
|
|
@@ -32,6 +32,11 @@ export default {
|
|
|
32
32
|
required: false,
|
|
33
33
|
default: undefined,
|
|
34
34
|
},
|
|
35
|
+
inputClass: {
|
|
36
|
+
type: [String, Array, Object],
|
|
37
|
+
required: false,
|
|
38
|
+
default: '',
|
|
39
|
+
},
|
|
35
40
|
},
|
|
36
41
|
data() {
|
|
37
42
|
return {
|
|
@@ -73,7 +78,7 @@ export default {
|
|
|
73
78
|
<b-form-input
|
|
74
79
|
ref="input"
|
|
75
80
|
v-model="localValue"
|
|
76
|
-
class="gl-form-input"
|
|
81
|
+
:class="['gl-form-input', inputClass]"
|
|
77
82
|
:aria-label="label"
|
|
78
83
|
v-bind="$attrs"
|
|
79
84
|
v-on="$listeners"
|
|
@@ -1,30 +1,31 @@
|
|
|
1
|
-
import { withKnobs, boolean } from '@storybook/addon-knobs';
|
|
2
|
-
import { documentedStoriesOf } from '../../../../documentation/documented_stories';
|
|
3
1
|
import readme from './markdown.md';
|
|
4
2
|
import GlMarkdown from './markdown.vue';
|
|
5
3
|
import markdownTypescaleDemoContent from './markdown_typescale_demo.html';
|
|
6
4
|
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
const template = `
|
|
6
|
+
<gl-markdown :compact="compact">${markdownTypescaleDemoContent}</gl-markdown>
|
|
7
|
+
`;
|
|
8
|
+
|
|
9
|
+
const generateProps = ({ compact = false } = {}) => ({ compact });
|
|
10
|
+
|
|
11
|
+
const Template = (args, { argTypes }) => ({
|
|
12
|
+
components: { GlMarkdown },
|
|
13
|
+
props: Object.keys(argTypes),
|
|
14
|
+
template,
|
|
15
|
+
});
|
|
10
16
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
},
|
|
17
|
+
export const Typescale = Template.bind({});
|
|
18
|
+
Typescale.args = generateProps();
|
|
19
|
+
|
|
20
|
+
export default {
|
|
21
|
+
title: 'base/markdown',
|
|
22
|
+
component: GlMarkdown,
|
|
23
|
+
parameters: {
|
|
24
|
+
docs: {
|
|
25
|
+
description: {
|
|
26
|
+
component: readme,
|
|
22
27
|
},
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
{
|
|
28
|
-
viewport: { defaultViewport: 'breakpointExtraLarge' },
|
|
29
|
-
}
|
|
30
|
-
);
|
|
28
|
+
},
|
|
29
|
+
knobs: { disabled: true },
|
|
30
|
+
},
|
|
31
|
+
};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
2
|
-
|
|
3
|
-
/* script */
|
|
4
|
-
|
|
5
|
-
/* template */
|
|
6
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-markdown',[_c('h1',[_vm._v("MD Doc h1 • GitLab uses \"GitLab Flavored Markdown\" (GFM)")]),_vm._v(" "),_c('p',[_vm._v("\n MD Doc Paragraph • GitLab uses \"GitLab Flavored Markdown\" (GFM). It extends the standard\n Markdown in a few significant ways to add some useful functionality. You can use GFM in the\n following areas: comments, issues, merge requests, milestones, snippets and more.\n ")]),_vm._v(" "),_c('p',{staticClass:"sm"},[_vm._v("\n MD Doc Small Paragraph • GitLab uses \"GitLab Flavored Markdown\" (GFM). It extends the standard\n Markdown in a few significant ways to add some useful functionality. You can use GFM in the\n following areas: comments, issues, merge requests, milestones, snippets and more.\n ")])])};
|
|
7
|
-
var __vue_staticRenderFns__ = [];
|
|
8
|
-
|
|
9
|
-
/* style */
|
|
10
|
-
const __vue_inject_styles__ = undefined;
|
|
11
|
-
/* scoped */
|
|
12
|
-
const __vue_scope_id__ = undefined;
|
|
13
|
-
/* module identifier */
|
|
14
|
-
const __vue_module_identifier__ = undefined;
|
|
15
|
-
/* functional template */
|
|
16
|
-
const __vue_is_functional_template__ = false;
|
|
17
|
-
/* style inject */
|
|
18
|
-
|
|
19
|
-
/* style inject SSR */
|
|
20
|
-
|
|
21
|
-
/* style inject shadow dom */
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
const __vue_component__ = __vue_normalize__(
|
|
26
|
-
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
|
27
|
-
__vue_inject_styles__,
|
|
28
|
-
{},
|
|
29
|
-
__vue_scope_id__,
|
|
30
|
-
__vue_is_functional_template__,
|
|
31
|
-
__vue_module_identifier__,
|
|
32
|
-
false,
|
|
33
|
-
undefined,
|
|
34
|
-
undefined,
|
|
35
|
-
undefined
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
export default __vue_component__;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<gl-markdown>
|
|
3
|
-
<h1>MD Doc h1 • GitLab uses "GitLab Flavored Markdown" (GFM)</h1>
|
|
4
|
-
<p>
|
|
5
|
-
MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard
|
|
6
|
-
Markdown in a few significant ways to add some useful functionality. You can use GFM in the
|
|
7
|
-
following areas: comments, issues, merge requests, milestones, snippets and more.
|
|
8
|
-
</p>
|
|
9
|
-
<p class="sm">
|
|
10
|
-
MD Doc Small Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard
|
|
11
|
-
Markdown in a few significant ways to add some useful functionality. You can use GFM in the
|
|
12
|
-
following areas: comments, issues, merge requests, milestones, snippets and more.
|
|
13
|
-
</p>
|
|
14
|
-
</gl-markdown>
|
|
15
|
-
</template>
|