@gitlab/ui 105.0.1 → 105.1.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/components/base/filtered_search/filtered_search_token_segment.js +12 -0
  3. package/dist/tokens/tailwind/tokens.cjs +31 -0
  4. package/package.json +1 -1
  5. package/src/components/base/filtered_search/filtered_search_token_segment.vue +12 -0
  6. package/src/tokens/build/tailwind/tokens.cjs +31 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## [105.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v105.1.0...v105.1.1) (2024-12-10)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **GlFilteredSearch:** allow passing null values to non multi select inputs ([01446a9](https://gitlab.com/gitlab-org/gitlab-ui/commit/01446a98d1afc579574e1bacad742788a0bf4837))
7
+
8
+ # [105.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v105.0.1...v105.1.0) (2024-12-06)
9
+
10
+
11
+ ### Features
12
+
13
+ * **Tailwind:** add feedback design tokens to Tailwind classes ([1af64c6](https://gitlab.com/gitlab-org/gitlab-ui/commit/1af64c635872b5ac05a0b790a0f8f66d9bc0f2f6))
14
+
1
15
  ## [105.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v105.0.0...v105.0.1) (2024-12-05)
2
16
 
3
17
 
package/dist/components/base/filtered_search/filtered_search_token_segment.js CHANGED
@@ -214,6 +214,18 @@ var script = {
214
214
  inputValue(newValue) {
215
215
  if (this.termsAsTokens()) return;
216
216
  if (this.multiSelect) return;
217
+
218
+ /**
219
+ * This is a temporary workaround to implement the same behaviour
220
+ * implemented in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2381
221
+ * for tokens with `terms-as-tokens=false` and `multi-select=false`.
222
+ *
223
+ * We're aiming to remove this temporary fix when
224
+ * https://gitlab.com/groups/gitlab-org/-/epics/15948 gets completed, as
225
+ * that refactoring will use the `@input` handler on the GlFilteredSearch
226
+ * component to handle tokens instead of doing workarounds.
227
+ */
228
+ if (typeof newValue !== 'string') return;
217
229
  const hasUnclosedQuote = newValue.split('"').length % 2 === 0;
218
230
  if (newValue.indexOf(' ') === -1 || hasUnclosedQuote) {
219
231
  return;
package/dist/tokens/tailwind/tokens.cjs CHANGED
@@ -308,6 +308,34 @@ const statusIconColors = {
308
308
  'status-danger': 'var(--gl-status-danger-icon-color, var(--gl-color-red-500, #dd2b0e))',
309
309
  'status-brand': 'var(--gl-status-brand-icon-color, var(--gl-color-purple-500, #7b58cf))',
310
310
  };
311
+ const feedbackBackgroundColors = {
312
+ 'feedback-strong':
313
+ 'var(--gl-feedback-strong-background-color, var(--gl-color-neutral-800, #3a383f))',
314
+ 'feedback-neutral':
315
+ 'var(--gl-feedback-neutral-background-color, var(--gl-color-neutral-50, #ececef))',
316
+ 'feedback-info': 'var(--gl-feedback-info-background-color, var(--gl-color-blue-50, #e9f3fc))',
317
+ 'feedback-success':
318
+ 'var(--gl-feedback-success-background-color, var(--gl-color-green-50, #ecf4ee))',
319
+ 'feedback-warning':
320
+ 'var(--gl-feedback-warning-background-color, var(--gl-color-orange-50, #fdf1dd))',
321
+ 'feedback-danger': 'var(--gl-feedback-danger-background-color, var(--gl-color-red-50, #fcf1ef))',
322
+ };
323
+ const feedbackTextColors = {
324
+ 'feedback-strong': 'var(--gl-feedback-strong-text-color, var(--gl-color-neutral-0, #fff))',
325
+ 'feedback-neutral': 'var(--gl-feedback-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))',
326
+ 'feedback-info': 'var(--gl-feedback-info-text-color, var(--gl-color-blue-700, #0b5cad))',
327
+ 'feedback-success': 'var(--gl-feedback-success-text-color, var(--gl-color-green-700, #24663b))',
328
+ 'feedback-warning': 'var(--gl-feedback-warning-text-color, var(--gl-color-orange-700, #8f4700))',
329
+ 'feedback-danger': 'var(--gl-feedback-danger-text-color, var(--gl-color-red-700, #ae1800))',
330
+ };
331
+ const feedbackIconColors = {
332
+ 'feedback-strong': 'var(--gl-feedback-strong-icon-color, var(--gl-color-neutral-0, #fff))',
333
+ 'feedback-neutral': 'var(--gl-feedback-neutral-icon-color, var(--gl-color-neutral-600, #626168))',
334
+ 'feedback-info': 'var(--gl-feedback-info-icon-color, var(--gl-color-blue-600, #1068bf))',
335
+ 'feedback-success': 'var(--gl-feedback-success-icon-color, var(--gl-color-green-600, #217645))',
336
+ 'feedback-warning': 'var(--gl-feedback-warning-icon-color, var(--gl-color-orange-600, #9e5400))',
337
+ 'feedback-danger': 'var(--gl-feedback-danger-icon-color, var(--gl-color-red-600, #c91c00))',
338
+ };
311
339
 
312
340
  const colors = {
313
341
  inherit: 'inherit',
@@ -329,6 +357,7 @@ const backgroundColor = {
329
357
  ...colors,
330
358
  ...backgroundColors,
331
359
  ...statusBackgroundColors,
360
+ ...feedbackBackgroundColors,
332
361
  dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
333
362
  };
334
363
 
@@ -345,6 +374,7 @@ const outlineColor = {
345
374
  const fill = {
346
375
  ...colors,
347
376
  ...statusIconColors,
377
+ ...feedbackIconColors,
348
378
  icon: {
349
379
  ...iconColors,
350
380
  },
@@ -354,6 +384,7 @@ const textColor = {
354
384
  ...colors,
355
385
  ...textColors,
356
386
  ...statusTextColors,
387
+ ...feedbackTextColors,
357
388
  primary: 'var(--gl-text-primary, #28272d)',
358
389
  secondary: 'var(--gl-text-secondary, #737278)',
359
390
  tertiary: 'var(--gl-text-tertiary, #89888d)',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "105.0.1",
3
+ "version": "105.1.1",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
package/src/components/base/filtered_search/filtered_search_token_segment.vue CHANGED
@@ -232,6 +232,18 @@ export default {
232
232
 
233
233
  if (this.multiSelect) return;
234
234
 
235
+ /**
236
+ * This is a temporary workaround to implement the same behaviour
237
+ * implemented in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2381
238
+ * for tokens with `terms-as-tokens=false` and `multi-select=false`.
239
+ *
240
+ * We're aiming to remove this temporary fix when
241
+ * https://gitlab.com/groups/gitlab-org/-/epics/15948 gets completed, as
242
+ * that refactoring will use the `@input` handler on the GlFilteredSearch
243
+ * component to handle tokens instead of doing workarounds.
244
+ */
245
+ if (typeof newValue !== 'string') return;
246
+
235
247
  const hasUnclosedQuote = newValue.split('"').length % 2 === 0;
236
248
  if (newValue.indexOf(' ') === -1 || hasUnclosedQuote) {
237
249
  return;
package/src/tokens/build/tailwind/tokens.cjs CHANGED
@@ -308,6 +308,34 @@ const statusIconColors = {
308
308
  'status-danger': 'var(--gl-status-danger-icon-color, var(--gl-color-red-500, #dd2b0e))',
309
309
  'status-brand': 'var(--gl-status-brand-icon-color, var(--gl-color-purple-500, #7b58cf))',
310
310
  };
311
+ const feedbackBackgroundColors = {
312
+ 'feedback-strong':
313
+ 'var(--gl-feedback-strong-background-color, var(--gl-color-neutral-800, #3a383f))',
314
+ 'feedback-neutral':
315
+ 'var(--gl-feedback-neutral-background-color, var(--gl-color-neutral-50, #ececef))',
316
+ 'feedback-info': 'var(--gl-feedback-info-background-color, var(--gl-color-blue-50, #e9f3fc))',
317
+ 'feedback-success':
318
+ 'var(--gl-feedback-success-background-color, var(--gl-color-green-50, #ecf4ee))',
319
+ 'feedback-warning':
320
+ 'var(--gl-feedback-warning-background-color, var(--gl-color-orange-50, #fdf1dd))',
321
+ 'feedback-danger': 'var(--gl-feedback-danger-background-color, var(--gl-color-red-50, #fcf1ef))',
322
+ };
323
+ const feedbackTextColors = {
324
+ 'feedback-strong': 'var(--gl-feedback-strong-text-color, var(--gl-color-neutral-0, #fff))',
325
+ 'feedback-neutral': 'var(--gl-feedback-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))',
326
+ 'feedback-info': 'var(--gl-feedback-info-text-color, var(--gl-color-blue-700, #0b5cad))',
327
+ 'feedback-success': 'var(--gl-feedback-success-text-color, var(--gl-color-green-700, #24663b))',
328
+ 'feedback-warning': 'var(--gl-feedback-warning-text-color, var(--gl-color-orange-700, #8f4700))',
329
+ 'feedback-danger': 'var(--gl-feedback-danger-text-color, var(--gl-color-red-700, #ae1800))',
330
+ };
331
+ const feedbackIconColors = {
332
+ 'feedback-strong': 'var(--gl-feedback-strong-icon-color, var(--gl-color-neutral-0, #fff))',
333
+ 'feedback-neutral': 'var(--gl-feedback-neutral-icon-color, var(--gl-color-neutral-600, #626168))',
334
+ 'feedback-info': 'var(--gl-feedback-info-icon-color, var(--gl-color-blue-600, #1068bf))',
335
+ 'feedback-success': 'var(--gl-feedback-success-icon-color, var(--gl-color-green-600, #217645))',
336
+ 'feedback-warning': 'var(--gl-feedback-warning-icon-color, var(--gl-color-orange-600, #9e5400))',
337
+ 'feedback-danger': 'var(--gl-feedback-danger-icon-color, var(--gl-color-red-600, #c91c00))',
338
+ };
311
339
 
312
340
  const colors = {
313
341
  inherit: 'inherit',
@@ -329,6 +357,7 @@ const backgroundColor = {
329
357
  ...colors,
330
358
  ...backgroundColors,
331
359
  ...statusBackgroundColors,
360
+ ...feedbackBackgroundColors,
332
361
  dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
333
362
  };
334
363
 
@@ -345,6 +374,7 @@ const outlineColor = {
345
374
  const fill = {
346
375
  ...colors,
347
376
  ...statusIconColors,
377
+ ...feedbackIconColors,
348
378
  icon: {
349
379
  ...iconColors,
350
380
  },
@@ -354,6 +384,7 @@ const textColor = {
354
384
  ...colors,
355
385
  ...textColors,
356
386
  ...statusTextColors,
387
+ ...feedbackTextColors,
357
388
  primary: 'var(--gl-text-primary, #28272d)',
358
389
  secondary: 'var(--gl-text-secondary, #737278)',
359
390
  tertiary: 'var(--gl-text-tertiary, #89888d)',