@gitlab/ui 105.0.0 → 105.1.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [105.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v105.0.1...v105.1.0) (2024-12-06)
+
+
+### Features
+
+* **Tailwind:** add feedback design tokens to Tailwind classes ([1af64c6](https://gitlab.com/gitlab-org/gitlab-ui/commit/1af64c635872b5ac05a0b790a0f8f66d9bc0f2f6))
+
+## [105.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v105.0.0...v105.0.1) (2024-12-05)
+
+
+### Bug Fixes
+
+* **GlFormCheckbox:** checked state with non-boolean value ([eb28dd3](https://gitlab.com/gitlab-org/gitlab-ui/commit/eb28dd37fcfb934a9e1c820b4ce09fd51d781d49)), closes [/gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4863#note_2236852320](https://gitlab.com//gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4863/issues/note_2236852320)
+
 # [105.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v104.2.0...v105.0.0) (2024-12-05)
 
 

package/dist/tokens/tailwind/tokens.cjs

@@ -308,6 +308,34 @@ const statusIconColors = {
   'status-danger': 'var(--gl-status-danger-icon-color, var(--gl-color-red-500, #dd2b0e))',
   'status-brand': 'var(--gl-status-brand-icon-color, var(--gl-color-purple-500, #7b58cf))',
 };
+const feedbackBackgroundColors = {
+  'feedback-strong':
+    'var(--gl-feedback-strong-background-color, var(--gl-color-neutral-800, #3a383f))',
+  'feedback-neutral':
+    'var(--gl-feedback-neutral-background-color, var(--gl-color-neutral-50, #ececef))',
+  'feedback-info': 'var(--gl-feedback-info-background-color, var(--gl-color-blue-50, #e9f3fc))',
+  'feedback-success':
+    'var(--gl-feedback-success-background-color, var(--gl-color-green-50, #ecf4ee))',
+  'feedback-warning':
+    'var(--gl-feedback-warning-background-color, var(--gl-color-orange-50, #fdf1dd))',
+  'feedback-danger': 'var(--gl-feedback-danger-background-color, var(--gl-color-red-50, #fcf1ef))',
+};
+const feedbackTextColors = {
+  'feedback-strong': 'var(--gl-feedback-strong-text-color, var(--gl-color-neutral-0, #fff))',
+  'feedback-neutral': 'var(--gl-feedback-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))',
+  'feedback-info': 'var(--gl-feedback-info-text-color, var(--gl-color-blue-700, #0b5cad))',
+  'feedback-success': 'var(--gl-feedback-success-text-color, var(--gl-color-green-700, #24663b))',
+  'feedback-warning': 'var(--gl-feedback-warning-text-color, var(--gl-color-orange-700, #8f4700))',
+  'feedback-danger': 'var(--gl-feedback-danger-text-color, var(--gl-color-red-700, #ae1800))',
+};
+const feedbackIconColors = {
+  'feedback-strong': 'var(--gl-feedback-strong-icon-color, var(--gl-color-neutral-0, #fff))',
+  'feedback-neutral': 'var(--gl-feedback-neutral-icon-color, var(--gl-color-neutral-600, #626168))',
+  'feedback-info': 'var(--gl-feedback-info-icon-color, var(--gl-color-blue-600, #1068bf))',
+  'feedback-success': 'var(--gl-feedback-success-icon-color, var(--gl-color-green-600, #217645))',
+  'feedback-warning': 'var(--gl-feedback-warning-icon-color, var(--gl-color-orange-600, #9e5400))',
+  'feedback-danger': 'var(--gl-feedback-danger-icon-color, var(--gl-color-red-600, #c91c00))',
+};
 
 const colors = {
   inherit: 'inherit',
@@ -329,6 +357,7 @@ const backgroundColor = {
   ...colors,
   ...backgroundColors,
   ...statusBackgroundColors,
+  ...feedbackBackgroundColors,
   dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
 };
 
@@ -345,6 +374,7 @@ const outlineColor = {
 const fill = {
   ...colors,
   ...statusIconColors,
+  ...feedbackIconColors,
   icon: {
     ...iconColors,
   },
@@ -354,6 +384,7 @@ const textColor = {
   ...colors,
   ...textColors,
   ...statusTextColors,
+  ...feedbackTextColors,
   primary: 'var(--gl-text-primary, #28272d)',
   secondary: 'var(--gl-text-secondary, #737278)',
   tertiary: 'var(--gl-text-tertiary, #89888d)',

package/dist/vendor/bootstrap-vue/src/mixins/form-radio-check.js

@@ -190,10 +190,6 @@ const formRadioCheckMixin = extend({
     const $content = this.normalizeSlot();
     const $input = h('input', {
       class: ['custom-control-input', this.stateClass],
-      directives: [{
-        name: 'model',
-        value: this.computedLocalChecked
-      }],
       attrs: this.computedAttrs,
       domProps: {
         value: this.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "105.0.0",
+  "version": "105.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/tokens/build/tailwind/tokens.cjs

@@ -308,6 +308,34 @@ const statusIconColors = {
   'status-danger': 'var(--gl-status-danger-icon-color, var(--gl-color-red-500, #dd2b0e))',
   'status-brand': 'var(--gl-status-brand-icon-color, var(--gl-color-purple-500, #7b58cf))',
 };
+const feedbackBackgroundColors = {
+  'feedback-strong':
+    'var(--gl-feedback-strong-background-color, var(--gl-color-neutral-800, #3a383f))',
+  'feedback-neutral':
+    'var(--gl-feedback-neutral-background-color, var(--gl-color-neutral-50, #ececef))',
+  'feedback-info': 'var(--gl-feedback-info-background-color, var(--gl-color-blue-50, #e9f3fc))',
+  'feedback-success':
+    'var(--gl-feedback-success-background-color, var(--gl-color-green-50, #ecf4ee))',
+  'feedback-warning':
+    'var(--gl-feedback-warning-background-color, var(--gl-color-orange-50, #fdf1dd))',
+  'feedback-danger': 'var(--gl-feedback-danger-background-color, var(--gl-color-red-50, #fcf1ef))',
+};
+const feedbackTextColors = {
+  'feedback-strong': 'var(--gl-feedback-strong-text-color, var(--gl-color-neutral-0, #fff))',
+  'feedback-neutral': 'var(--gl-feedback-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))',
+  'feedback-info': 'var(--gl-feedback-info-text-color, var(--gl-color-blue-700, #0b5cad))',
+  'feedback-success': 'var(--gl-feedback-success-text-color, var(--gl-color-green-700, #24663b))',
+  'feedback-warning': 'var(--gl-feedback-warning-text-color, var(--gl-color-orange-700, #8f4700))',
+  'feedback-danger': 'var(--gl-feedback-danger-text-color, var(--gl-color-red-700, #ae1800))',
+};
+const feedbackIconColors = {
+  'feedback-strong': 'var(--gl-feedback-strong-icon-color, var(--gl-color-neutral-0, #fff))',
+  'feedback-neutral': 'var(--gl-feedback-neutral-icon-color, var(--gl-color-neutral-600, #626168))',
+  'feedback-info': 'var(--gl-feedback-info-icon-color, var(--gl-color-blue-600, #1068bf))',
+  'feedback-success': 'var(--gl-feedback-success-icon-color, var(--gl-color-green-600, #217645))',
+  'feedback-warning': 'var(--gl-feedback-warning-icon-color, var(--gl-color-orange-600, #9e5400))',
+  'feedback-danger': 'var(--gl-feedback-danger-icon-color, var(--gl-color-red-600, #c91c00))',
+};
 
 const colors = {
   inherit: 'inherit',
@@ -329,6 +357,7 @@ const backgroundColor = {
   ...colors,
   ...backgroundColors,
   ...statusBackgroundColors,
+  ...feedbackBackgroundColors,
   dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
 };
 
@@ -345,6 +374,7 @@ const outlineColor = {
 const fill = {
   ...colors,
   ...statusIconColors,
+  ...feedbackIconColors,
   icon: {
     ...iconColors,
   },
@@ -354,6 +384,7 @@ const textColor = {
   ...colors,
   ...textColors,
   ...statusTextColors,
+  ...feedbackTextColors,
   primary: 'var(--gl-text-primary, #28272d)',
   secondary: 'var(--gl-text-secondary, #737278)',
   tertiary: 'var(--gl-text-tertiary, #89888d)',

package/src/vendor/bootstrap-vue/src/mixins/form-radio-check.js

@@ -192,7 +192,6 @@ export const formRadioCheckMixin = extend({
 
     const $input = h('input', {
       class: ['custom-control-input', this.stateClass],
-      directives: [{ name: 'model', value: this.computedLocalChecked }],
       attrs: this.computedAttrs,
       domProps: {
         value: this.value,