@gitlab/ui 80.3.0 → 80.4.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 +12 -0
- package/README.md +24 -0
- 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 +2 -2
- package/src/components/base/toggle/toggle.stories.js +11 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# [80.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.3.0...v80.4.0) (2024-05-07)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* linting errors ([52938a5](https://gitlab.com/gitlab-org/gitlab-ui/commit/52938a58ec1b51a0544c44633c9f13949da0fc35))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **README:** Add design tokens mention ([3ff1f07](https://gitlab.com/gitlab-org/gitlab-ui/commit/3ff1f0702af61ba1efc3592e5759c95e6111f110))
|
|
12
|
+
|
|
1
13
|
# [80.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.2.0...v80.3.0) (2024-05-06)
|
|
2
14
|
|
|
3
15
|
|
package/README.md
CHANGED
|
@@ -159,6 +159,30 @@ You have two options to include those stylesheets:
|
|
|
159
159
|
@import '@gitlab/ui/dist/utility_classes.css';
|
|
160
160
|
```
|
|
161
161
|
|
|
162
|
+
### Design tokens
|
|
163
|
+
|
|
164
|
+
GitLab UI uses design tokens to maintain a single source of truth that, through automation,
|
|
165
|
+
can be formatted for different uses.
|
|
166
|
+
|
|
167
|
+
- See [Pajamas](https://design.gitlab.com/product-foundations/design-tokens) for an overview
|
|
168
|
+
on design tokens.
|
|
169
|
+
- See [GitLab Docs](https://docs.gitlab.com/ee/development/fe_guide/design_tokens.html) for
|
|
170
|
+
in-depth guides on creating and using design tokens.
|
|
171
|
+
|
|
172
|
+
Example design token inheritance and automation:
|
|
173
|
+
|
|
174
|
+
```mermaid
|
|
175
|
+
flowchart TD
|
|
176
|
+
A[#1f1e24] -->|Constant token| B[color.neutral.950]
|
|
177
|
+
B -->|Semantic token| C[text.color.default]
|
|
178
|
+
C --> D{Automation}
|
|
179
|
+
D -->|Figma| E[text/color/default]
|
|
180
|
+
D -->|CSS| F[--gl-text-color-default]
|
|
181
|
+
D -->|SCSS| G[$gl-text-color-default]
|
|
182
|
+
D -->|JavaScript| H[GL_TEXT_COLOR_DEFAULT]
|
|
183
|
+
D -->|Tailwind| I[gl-text-default]
|
|
184
|
+
```
|
|
185
|
+
|
|
162
186
|
## Releases
|
|
163
187
|
|
|
164
188
|
See [Updating GitLab UI Packages](doc/updating-gitlab-ui-packages.md) for information on how the
|
package/dist/tokens/js/tokens.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 07 May 2024 00:27:09 GMT
|
|
4
4
|
|
|
5
5
|
$gl-text-color-disabled: #89888d !default; // Used for disabled text.
|
|
6
6
|
$gl-text-color-link: #63a6e9 !default; // Used for default text links.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 07 May 2024 00:27:09 GMT
|
|
4
4
|
|
|
5
5
|
$gl-text-color-disabled: #89888d !default; // Used for disabled text.
|
|
6
6
|
$gl-text-color-success: #217645 !default; // Used for text indicating success or validity.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "80.
|
|
3
|
+
"version": "80.4.0",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
"emoji-regex": "^10.0.0",
|
|
139
139
|
"eslint": "8.57.0",
|
|
140
140
|
"eslint-import-resolver-jest": "3.0.2",
|
|
141
|
-
"eslint-plugin-cypress": "3.0
|
|
141
|
+
"eslint-plugin-cypress": "3.1.0",
|
|
142
142
|
"eslint-plugin-storybook": "0.8.0",
|
|
143
143
|
"glob": "10.3.3",
|
|
144
144
|
"identity-obj-proxy": "^3.0.0",
|
|
@@ -34,10 +34,20 @@ const generateProps = ({
|
|
|
34
34
|
const Template = (args, { argTypes }) => ({
|
|
35
35
|
components: { GlToggle },
|
|
36
36
|
props: Object.keys(argTypes),
|
|
37
|
+
data() {
|
|
38
|
+
return {
|
|
39
|
+
localValue: this.value,
|
|
40
|
+
};
|
|
41
|
+
},
|
|
42
|
+
watch: {
|
|
43
|
+
value(newValue) {
|
|
44
|
+
this.localValue = newValue;
|
|
45
|
+
},
|
|
46
|
+
},
|
|
37
47
|
template: `
|
|
38
48
|
<div class="gl-font-base">
|
|
39
49
|
<gl-toggle
|
|
40
|
-
v-model="
|
|
50
|
+
v-model="localValue"
|
|
41
51
|
:disabled="disabled"
|
|
42
52
|
:description="description"
|
|
43
53
|
:help="help"
|