@gitlab/ui 105.1.1 → 105.2.0

package/src/tokens/build/scss/_tokens.dark.scss

@@ -242,6 +242,38 @@ $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for ava
 $gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
+$gl-illustration-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail.
+$gl-illustration-stroke-width-default: 0.09375rem; // Default stroke width to define shape and provide essential detail.
+$gl-illustration-fill-color-default: #423f4f; // Default fill color for an element where specific meaning or emphasis is not required.
+$gl-illustration-status-fill-color-neutral: #6f6796; // Used as a fill to convey a concept which is neither positive or negative.
+$gl-illustration-status-fill-color-success: #3b8581; // Used as a fill to convey a success or active concept, has a positive connotation.
+$gl-illustration-status-fill-color-warning: #ab752f; // Used as a fill to convey a caution or warning concept, has a slightly negative connotation.
+$gl-illustration-status-fill-color-danger: #aa563a; // Used as a fill to convey a critical or danger concept, has a negative connotation.
+$gl-illustration-accent-stroke-color-orange: #e3865f; // Used for orange accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-stroke-color-teal: #6baea3; // Used for teal accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-stroke-color-strong: #aea5d6; // Used for dark accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-fill-color-subtle: #5c5371; // Used to add depth to a secondary element and supporting surface.
+$gl-illustration-accent-fill-color-strong: #6f6796; // Used for an element requiring visual emphasis without competing with primary content or status indicators.
+$gl-illustration-accent-fill-color-orange: #aa563a; // Used to add orange to a secondary element and supporting surface.
+$gl-illustration-accent-fill-color-teal: #3b8581; // Used to add teal to a secondary element and supporting surface.
+$gl-illustration-base-fill-color: #32303c; // Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion.
+$gl-illustration-isometric-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail in isometric illustration.
+$gl-illustration-isometric-stroke-width-default: 0.09375rem; // Default stroke width to define shape and provide essential detail in isometric illustration.
+$gl-illustration-isometric-glyph-top-fill-color: #5a566c; // Used for the top face of isometric text and number elements.
+$gl-illustration-isometric-glyph-front-fill-color: #423f4f; // Used for the front face of isometric text and number elements.
+$gl-illustration-isometric-glyph-side-fill-color: #373441; // Used for the side face of isometric text and number elements.
+$gl-illustration-isometric-glyph-shadow-fill-color: #292730; // Used for the shadow of isometric text and number elements.
+$gl-illustration-isometric-object-top-fill-color: #aa563a; // Used for the top face of an isometric object or symbol.
+$gl-illustration-isometric-object-front-fill-color: #a54623; // Used for the front face of an isometric object or symbol.
+$gl-illustration-isometric-object-side-fill-color: #8f4424; // Used for the side face of an isometric object or symbol.
+$gl-illustration-isometric-object-highlight-fill-color: #423f4f; // Used for the face of an isometric object or symbol that requires maximum distinction from other elements.
+$gl-illustration-isometric-object-shadow-fill-color: #3d2b2a; // Used for the shadow of an isometric object or symbol.
+$gl-illustration-isometric-accent-top-fill-color: #6d6972; // Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-accent-front-fill-color: #49474d; // Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-accent-side-fill-color: #212023; // Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-base-top-fill-color: #32303c; // Used for the top surface of an isometric base platform.
+$gl-illustration-isometric-base-front-fill-color: #2b2932; // Used for the front face of an isometric base platform.
+$gl-illustration-isometric-base-side-fill-color: #23222b; // Used for the side face of an isometric base platform.
 $theme-indigo-10: #14143d !default;
 $theme-indigo-50: #222261 !default;
 $theme-indigo-100: #303083 !default;

package/src/tokens/build/scss/_tokens.scss

@@ -242,6 +242,38 @@ $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for ava
 $gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
+$gl-illustration-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail.
+$gl-illustration-stroke-width-default: 0.125rem; // Default stroke width to define shape and provide essential detail.
+$gl-illustration-fill-color-default: #fff; // Default fill color for an element where specific meaning or emphasis is not required.
+$gl-illustration-status-fill-color-neutral: #aea5d6; // Used as a fill to convey a concept which is neither positive or negative.
+$gl-illustration-status-fill-color-success: #6fdac9; // Used as a fill to convey a success or active concept, has a positive connotation.
+$gl-illustration-status-fill-color-warning: #fca326; // Used as a fill to convey a caution or warning concept, has a slightly negative connotation.
+$gl-illustration-status-fill-color-danger: #ff9d73; // Used as a fill to convey a critical or danger concept, has a negative connotation.
+$gl-illustration-accent-stroke-color-orange: #ff9d73; // Used for orange accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-stroke-color-teal: #6fdac9; // Used for teal accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-stroke-color-strong: #aea5d6; // Used for dark accent stroke detail on an object or attention-drawing element.
+$gl-illustration-accent-fill-color-subtle: #d0c5e2; // Used to add depth to a secondary element and supporting surface.
+$gl-illustration-accent-fill-color-strong: #aea5d6; // Used for an element requiring visual emphasis without competing with primary content or status indicators.
+$gl-illustration-accent-fill-color-orange: #ff9d73; // Used to add orange to a secondary element and supporting surface.
+$gl-illustration-accent-fill-color-teal: #6fdac9; // Used to add teal to a secondary element and supporting surface.
+$gl-illustration-base-fill-color: #e7e4f2; // Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion.
+$gl-illustration-isometric-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail in isometric illustration.
+$gl-illustration-isometric-stroke-width-default: 0.125rem; // Default stroke width to define shape and provide essential detail in isometric illustration.
+$gl-illustration-isometric-glyph-top-fill-color: #c5f4ec; // Used for the top face of isometric text and number elements.
+$gl-illustration-isometric-glyph-front-fill-color: #fff; // Used for the front face of isometric text and number elements.
+$gl-illustration-isometric-glyph-side-fill-color: #6fdac9; // Used for the side face of isometric text and number elements.
+$gl-illustration-isometric-glyph-shadow-fill-color: #10b1b1; // Used for the shadow of isometric text and number elements.
+$gl-illustration-isometric-object-top-fill-color: #ff9d73; // Used for the top face of an isometric object or symbol.
+$gl-illustration-isometric-object-front-fill-color: #ffc2a8; // Used for the front face of an isometric object or symbol.
+$gl-illustration-isometric-object-side-fill-color: #ff7b42; // Used for the side face of an isometric object or symbol.
+$gl-illustration-isometric-object-highlight-fill-color: #fff; // Used for the face of an isometric object or symbol that requires maximum distinction from other elements.
+$gl-illustration-isometric-object-shadow-fill-color: #e24329; // Used for the shadow of an isometric object or symbol.
+$gl-illustration-isometric-accent-top-fill-color: #45424d; // Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-accent-front-fill-color: #74717a; // Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-accent-side-fill-color: #2b2838; // Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
+$gl-illustration-isometric-base-top-fill-color: #e7e4f2; // Used for the top surface of an isometric base platform.
+$gl-illustration-isometric-base-front-fill-color: #d5d0e8; // Used for the front face of an isometric base platform.
+$gl-illustration-isometric-base-side-fill-color: #aea5d6; // Used for the side face of an isometric base platform.
 $theme-indigo-10: #f8f8ff !default;
 $theme-indigo-50: #f1f1ff !default;
 $theme-indigo-100: #dbdbf8 !default;

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -651,6 +651,38 @@ $gl-filtered-search-token-data-background-color-default: var(--gl-filtered-searc
 $gl-filtered-search-token-data-background-color-hover: var(--gl-filtered-search-token-data-background-color-hover);
 $gl-filtered-search-token-operator-background-color-default: var(--gl-filtered-search-token-operator-background-color-default);
 $gl-filtered-search-token-operator-background-color-hover: var(--gl-filtered-search-token-operator-background-color-hover);
+$gl-illustration-stroke-color-default: var(--gl-illustration-stroke-color-default);
+$gl-illustration-stroke-width-default: var(--gl-illustration-stroke-width-default);
+$gl-illustration-fill-color-default: var(--gl-illustration-fill-color-default);
+$gl-illustration-status-fill-color-neutral: var(--gl-illustration-status-fill-color-neutral);
+$gl-illustration-status-fill-color-success: var(--gl-illustration-status-fill-color-success);
+$gl-illustration-status-fill-color-warning: var(--gl-illustration-status-fill-color-warning);
+$gl-illustration-status-fill-color-danger: var(--gl-illustration-status-fill-color-danger);
+$gl-illustration-accent-stroke-color-orange: var(--gl-illustration-accent-stroke-color-orange);
+$gl-illustration-accent-stroke-color-teal: var(--gl-illustration-accent-stroke-color-teal);
+$gl-illustration-accent-stroke-color-strong: var(--gl-illustration-accent-stroke-color-strong);
+$gl-illustration-accent-fill-color-subtle: var(--gl-illustration-accent-fill-color-subtle);
+$gl-illustration-accent-fill-color-strong: var(--gl-illustration-accent-fill-color-strong);
+$gl-illustration-accent-fill-color-orange: var(--gl-illustration-accent-fill-color-orange);
+$gl-illustration-accent-fill-color-teal: var(--gl-illustration-accent-fill-color-teal);
+$gl-illustration-base-fill-color: var(--gl-illustration-base-fill-color);
+$gl-illustration-isometric-stroke-color-default: var(--gl-illustration-isometric-stroke-color-default);
+$gl-illustration-isometric-stroke-width-default: var(--gl-illustration-isometric-stroke-width-default);
+$gl-illustration-isometric-glyph-top-fill-color: var(--gl-illustration-isometric-glyph-top-fill-color);
+$gl-illustration-isometric-glyph-front-fill-color: var(--gl-illustration-isometric-glyph-front-fill-color);
+$gl-illustration-isometric-glyph-side-fill-color: var(--gl-illustration-isometric-glyph-side-fill-color);
+$gl-illustration-isometric-glyph-shadow-fill-color: var(--gl-illustration-isometric-glyph-shadow-fill-color);
+$gl-illustration-isometric-object-top-fill-color: var(--gl-illustration-isometric-object-top-fill-color);
+$gl-illustration-isometric-object-front-fill-color: var(--gl-illustration-isometric-object-front-fill-color);
+$gl-illustration-isometric-object-side-fill-color: var(--gl-illustration-isometric-object-side-fill-color);
+$gl-illustration-isometric-object-highlight-fill-color: var(--gl-illustration-isometric-object-highlight-fill-color);
+$gl-illustration-isometric-object-shadow-fill-color: var(--gl-illustration-isometric-object-shadow-fill-color);
+$gl-illustration-isometric-accent-top-fill-color: var(--gl-illustration-isometric-accent-top-fill-color);
+$gl-illustration-isometric-accent-front-fill-color: var(--gl-illustration-isometric-accent-front-fill-color);
+$gl-illustration-isometric-accent-side-fill-color: var(--gl-illustration-isometric-accent-side-fill-color);
+$gl-illustration-isometric-base-top-fill-color: var(--gl-illustration-isometric-base-top-fill-color);
+$gl-illustration-isometric-base-front-fill-color: var(--gl-illustration-isometric-base-front-fill-color);
+$gl-illustration-isometric-base-side-fill-color: var(--gl-illustration-isometric-base-side-fill-color);
 $gl-label-light-text-color: var(--gl-label-light-text-color);
 $gl-label-light-button-background-color-default: var(--gl-label-light-button-background-color-default);
 $gl-label-light-button-background-color-hover: var(--gl-label-light-button-background-color-hover);

package/src/tokens/contextual/illustration.tokens.json

@@ -0,0 +1,366 @@
+{
+  "illustration": {
+    "stroke": {
+      "color": {
+        "default": {
+          "$value": {
+            "default": "#171321",
+            "dark": "#e3e3e8"
+          },
+          "$type": "color",
+          "$description": "Default stroke color to define shape and provide essential detail."
+        }
+      },
+      "width" : {
+        "default": {
+          "$value": {
+            "default": "2px",
+            "dark": "1.5px"
+          },
+          "$type": "dimension",
+          "$description": "Default stroke width to define shape and provide essential detail."
+        }
+      }
+    },
+    "fill": {
+      "color": {
+        "default": {
+          "$value": {
+            "default": "#fff",
+            "dark": "#423f4f"
+          },
+          "$type": "color",
+          "$description": "Default fill color for an element where specific meaning or emphasis is not required."
+        }
+      }
+    },
+    "status": {
+      "fill": {
+        "color": {
+          "neutral": {
+            "$value": {
+              "default": "#aea5d6",
+              "dark": "#6f6796"
+            },
+            "$type": "color",
+            "$description": "Used as a fill to convey a concept which is neither positive or negative."
+          },
+          "success": {
+            "$value": {
+              "default": "#6fdac9",
+              "dark": "#3b8581"
+            },
+            "$type": "color",
+            "$description": "Used as a fill to convey a success or active concept, has a positive connotation."
+          },
+          "warning": {
+            "$value": {
+              "default": "#fca326",
+              "dark": "#ab752f"
+            },
+            "$type": "color",
+            "$description": "Used as a fill to convey a caution or warning concept, has a slightly negative connotation."
+          },
+          "danger": {
+            "$value": {
+              "default": "#ff9d73",
+              "dark": "#aa563a"
+            },
+            "$type": "color",
+            "$description": "Used as a fill to convey a critical or danger concept, has a negative connotation."
+          }
+        }
+      }
+    },
+    "accent": {
+      "stroke": {
+        "color": {
+          "orange": {
+            "$value": {
+              "default": "#ff9d73",
+              "dark": "#e3865f"
+            },
+            "$type": "color",
+            "$description": "Used for orange accent stroke detail on an object or attention-drawing element."
+          },
+          "teal": {
+            "$value": {
+              "default": "#6fdac9",
+              "dark": "#6baea3"
+            },
+            "$type": "color",
+            "$description": "Used for teal accent stroke detail on an object or attention-drawing element."
+          },
+          "strong": {
+            "$value": {
+              "default": "#aea5d6",
+              "dark": "#aea5d6"
+            },
+            "$type": "color",
+            "$description": "Used for dark accent stroke detail on an object or attention-drawing element."
+          }
+        }
+      },
+      "fill": {
+        "color": {
+          "subtle": {
+            "$value": {
+              "default": "#d0c5e2",
+              "dark": "#5c5371"
+            },
+            "$type": "color",
+            "$description": "Used to add depth to a secondary element and supporting surface."
+          },
+          "strong": {
+            "$value": {
+              "default": "#aea5d6",
+              "dark": "#6f6796"
+            },
+            "$type": "color",
+            "$description": "Used for an element requiring visual emphasis without competing with primary content or status indicators."
+          },
+          "orange": {
+            "$value": {
+              "default": "#ff9d73",
+              "dark": "#aa563a"
+            },
+            "$type": "color",
+            "$description": "Used to add orange to a secondary element and supporting surface."
+          },
+          "teal": {
+            "$value": {
+              "default": "#6fdac9",
+              "dark": "#3b8581"
+            },
+            "$type": "color",
+            "$description": "Used to add teal to a secondary element and supporting surface."
+          }
+        }
+      }
+    },
+    "base": {
+      "fill": {
+        "color": {
+          "$value": {
+            "default": "#e7e4f2",
+            "dark": "#32303c"
+          },
+          "$type": "color",
+          "$description": "Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion."
+        }
+      }
+    },
+    "isometric": {
+      "stroke": {
+        "color": {
+          "default": {
+            "$value": {
+              "default": "#171321",
+              "dark": "#e3e3e8"
+            },
+            "$type": "color",
+            "$description": "Default stroke color to define shape and provide essential detail in isometric illustration."
+          }
+        },
+        "width": {
+          "default": {
+            "$value": {
+              "default": "2px",
+              "dark": "1.5px"
+            },
+            "$type": "dimension",
+            "$description": "Default stroke width to define shape and provide essential detail in isometric illustration."
+          }
+        }
+      },
+      "glyph": {
+        "top": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#c5f4ec",
+                "dark": "#5a566c"
+              },
+              "$type": "color",
+              "$description": "Used for the top face of isometric text and number elements."
+            }
+          }
+        },
+        "front": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#fff",
+                "dark": "#423f4f"
+              },
+              "$type": "color",
+              "$description": "Used for the front face of isometric text and number elements."
+            }
+          }
+        },
+        "side": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#6fdac9",
+                "dark": "#373441"
+              },
+              "$type": "color",
+              "$description": "Used for the side face of isometric text and number elements."
+            }
+          }
+        },
+        "shadow": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#10b1b1",
+                "dark": "#292730"
+              },
+              "$type": "color",
+              "$description": "Used for the shadow of isometric text and number elements."
+            }
+          }
+        }
+      },
+      "object": {
+        "top": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#ff9d73",
+                "dark": "#aa563a"
+              },
+              "$type": "color",
+              "$description": "Used for the top face of an isometric object or symbol."
+            }
+          }
+        },
+        "front": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#ffc2a8",
+                "dark": "#a54623"
+              },
+              "$type": "color",
+              "$description": "Used for the front face of an isometric object or symbol."
+            }
+          }
+        },
+        "side": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#ff7b42",
+                "dark": "#8f4424"
+              },
+              "$type": "color",
+              "$description": "Used for the side face of an isometric object or symbol."
+            }
+          }
+        },
+        "highlight": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#fff",
+                "dark": "#423f4f"
+              },
+              "$type": "color",
+              "$description": "Used for the face of an isometric object or symbol that requires maximum distinction from other elements."
+            }
+          }
+        },
+        "shadow": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#e24329",
+                "dark": "#3d2b2a"
+              },
+              "$type": "color",
+              "$description": "Used for the shadow of an isometric object or symbol."
+            }
+          }
+        }
+      },
+      "accent": {
+        "top": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#45424d",
+                "dark": "#6d6972"
+              },
+              "$type": "color",
+              "$description": "Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content."
+            }
+          }
+        },
+        "front": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#74717a",
+                "dark": "#49474d"
+              },
+              "$type": "color",
+              "$description": "Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content."
+            }
+          }
+        },
+        "side": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#2b2838",
+                "dark": "#212023"
+              },
+              "$type": "color",
+              "$description": "Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content."
+            }
+          }
+        }
+      },
+      "base": {
+        "top": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#e7e4f2",
+                "dark": "#32303c"
+              },
+              "$type": "color",
+              "$description": "Used for the top surface of an isometric base platform."
+            }
+          }
+        },
+        "front": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#d5d0e8",
+                "dark": "#2b2932"
+              },
+              "$type": "color",
+              "$description": "Used for the front face of an isometric base platform."
+            }
+          }
+        },
+        "side": {
+          "fill": {
+            "color": {
+              "$value": {
+                "default": "#aea5d6",
+                "dark": "#23222b"
+              },
+              "$type": "color",
+              "$description": "Used for the side face of an isometric base platform."
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/tokens/tokens_table.vue

@@ -114,7 +114,7 @@ export default {
         value: token.$value,
         valueLabel: this.getValueLabel(token),
         deprecated: token.deprecated,
-        description: token.comment,
+        description: token.$description,
       };
     },
     transformTokensToTableRows(tokens) {

package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown.js

@@ -70,7 +70,7 @@ export const BDropdown = /*#__PURE__*/ extend({
           // It needs also to be applied when `block` is disabled to allow multiple
           // dropdowns to be aligned one line
           'btn-group': split || !block,
-          // When `block` is enabled and we are in `split` mode the 'd-flex' class
+          // When `block` is enabled and we are in `split` mode the 'gl-flex' class
           // needs to be applied to allow the buttons to stretch to full width
           'gl-flex': block && split
         }

package/src/vendor/bootstrap-vue/src/components/form/form-invalid-feedback.js

@@ -34,7 +34,7 @@ export const BFormInvalidFeedback = /*#__PURE__*/ extend({
       props.tag,
       mergeData(data, {
         class: {
-          'd-block': show,
+          '!gl-block': show,
           'invalid-feedback': !tooltip,
           'invalid-tooltip': tooltip
         },

package/src/vendor/bootstrap-vue/src/components/form/form-invalid-feedback.spec.js

@@ -18,10 +18,10 @@ describe('form-invalid-feedback', () => {
     wrapper.destroy()
   })
 
-  it('default should not have class d-block', async () => {
+  it('default should not have class !gl-block', async () => {
     const wrapper = mount(BFormInvalidFeedback)
 
-    expect(wrapper.classes()).not.toContain('d-block')
+    expect(wrapper.classes()).not.toContain('!gl-block')
 
     wrapper.destroy()
   })
@@ -70,7 +70,7 @@ describe('form-invalid-feedback', () => {
     wrapper.destroy()
   })
 
-  it('should contain class d-block when force-show is set', async () => {
+  it('should contain class !gl-block when force-show is set', async () => {
     const wrapper = mount(BFormInvalidFeedback, {
       context: {
         props: {
@@ -79,12 +79,12 @@ describe('form-invalid-feedback', () => {
       }
     })
 
-    expect(wrapper.classes()).toContain('d-block')
+    expect(wrapper.classes()).toContain('!gl-block')
 
     wrapper.destroy()
   })
 
-  it('should contain class d-block when state is false', async () => {
+  it('should contain class !gl-block when state is false', async () => {
     const wrapper = mount(BFormInvalidFeedback, {
       context: {
         props: {
@@ -93,12 +93,12 @@ describe('form-invalid-feedback', () => {
       }
     })
 
-    expect(wrapper.classes()).toContain('d-block')
+    expect(wrapper.classes()).toContain('!gl-block')
 
     wrapper.destroy()
   })
 
-  it('should not contain class d-block when state is true', async () => {
+  it('should not contain class !gl-block when state is true', async () => {
     const wrapper = mount(BFormInvalidFeedback, {
       context: {
         props: {
@@ -107,12 +107,12 @@ describe('form-invalid-feedback', () => {
       }
     })
 
-    expect(wrapper.classes()).not.toContain('d-block')
+    expect(wrapper.classes()).not.toContain('!gl-block')
 
     wrapper.destroy()
   })
 
-  it('should contain class d-block when force-show is true and state is true', async () => {
+  it('should contain class !gl-block when force-show is true and state is true', async () => {
     const wrapper = mount(BFormInvalidFeedback, {
       context: {
         props: {
@@ -122,7 +122,7 @@ describe('form-invalid-feedback', () => {
       }
     })
 
-    expect(wrapper.classes()).toContain('d-block')
+    expect(wrapper.classes()).toContain('!gl-block')
 
     wrapper.destroy()
   })

package/src/vendor/bootstrap-vue/src/components/form/form-valid-feedback.js

@@ -34,7 +34,7 @@ export const BFormValidFeedback = /*#__PURE__*/ extend({
       props.tag,
       mergeData(data, {
         class: {
-          'd-block': show,
+          '!gl-block': show,
           'valid-feedback': !tooltip,
           'valid-tooltip': tooltip
         },