@gitlab/ui 86.10.1 → 86.11.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [86.11.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.11.0...v86.11.1) (2024-07-16)
+
+
+### Bug Fixes
+
+* **GlBadge:** fix visual regressions ([3dae6e3](https://gitlab.com/gitlab-org/gitlab-ui/commit/3dae6e32dd24b7eefcc21bcfa2386d8abf9c7872))
+
+# [86.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.10.1...v86.11.0) (2024-07-16)
+
+
+### Features
+
+* **GlSparklineChart:** Add `connectNulls` prop ([61d8a7c](https://gitlab.com/gitlab-org/gitlab-ui/commit/61d8a7cb06f64a7f141ab3795a5e02c843a99a52))
+
 ## [86.10.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.10.0...v86.10.1) (2024-07-15)
 
 

package/README.md

@@ -10,39 +10,36 @@ See <https://gitlab-org.gitlab.io/gitlab-ui/> for documentation.
 
 ## Usage
 
-To use GitLab UI in your project, add it as a dependency:
+1. To use GitLab UI in your project, add it as a dependency:
 
-```sh
-yarn add @gitlab/ui
-```
-
-> **Note:** Make sure to also install GitLab UI's peer dependencies. Refer to the
-> [`package.json`](./package.json) for the list of peer dependencies and their expected versions.
+    ```sh
+    yarn add @gitlab/ui
+    ```
 
-In your main entrypoint **before** importing or using any component:
+    > **Note:** Make sure to also install GitLab UI's peer dependencies. Refer to the
+    > [`package.json`](./package.json) for the list of peer dependencies and their expected versions.
 
-```javascript
-import setConfigs from '@gitlab/ui/dist/config'
+1. In your main entrypoint **before** importing or using any component:
 
-setConfigs()
-```
-
-This will set the global configs used by GitLab UI.
+    ```javascript
+    import setConfigs from '@gitlab/ui/dist/config'
 
-Import the components as desired:
+    setConfigs()
+    ```
 
-```javascript
-import { GlButton } from '@gitlab/ui';
-```
+    This will set the global configs used by GitLab UI.
 
-GitLab UI is compatible with tree-shaking, you may enable this in your project to reduce bundle sizes.
+1. Include the required stylesheets in your app. Refer to the [CSS docs](/doc/css.md) for
+   installation options.
 
-### GitLab UI CSS
+1. Import the components as desired:
 
-GitLab UI provides component styles, a utility-class library, and SCSS utilities.
+    ```javascript
+    import { GlButton } from '@gitlab/ui';
+    ```
 
-- [How can I get started with GitLab UI CSS?](doc/css.md)
-- [How does GitLab UI interact with GitLab CSS?](doc/debugging-gitlab-ui-with-gitlab-css.md)
+    > **Note:** GitLab UI is compatible with tree-shaking, you may enable this in your project to
+    > reduce bundle sizes.
 
 ## Quick start - development
 
@@ -121,44 +118,6 @@ Components’ end to end tests live in the `cypress/e2e` folder. See our
 
 `yarn run cypress open` runs Cypress locally to run end to end tests.
 
-## Installation
-
-Install with Yarn:
-
-```sh
-yarn add @gitlab/ui
-```
-
-Install with npm:
-
-```sh
-npm install @gitlab/ui
-```
-
-### Styles
-
-GitLab UI requires its styles to be imported to display components properly. We currently have 2
-separate stylesheets that both need to be included in your project. The main stylesheet
-(`gitlab_ui.scss`) contains component-specific styles, while the other one (`utilities.scss`)
-contains the utility classes library on which some components rely. You might find the utility
-classes useful to layout components in your own project.
-
-You have two options to include those stylesheets:
-
-- If you have a SCSS preprocessor setup, include the SCSS files in your own stylesheet:
-
-```scss
-@import '@gitlab/ui/src/scss/gitlab_ui.scss';
-@import '@gitlab/ui/src/scss/utilities.scss';
-```
-
-- If you don't have a SCSS preprocessor setup, you can import the compiled CSS files directly:
-
-```css
-@import '@gitlab/ui/dist/index.css';
-@import '@gitlab/ui/dist/utility_classes.css';
-```
-
 ### Design tokens
 
 GitLab UI uses design tokens to maintain a single source of truth that, through automation,

package/dist/components/base/badge/badge.js

@@ -68,7 +68,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-badge',_vm._b({staticClass:"gl-badge",class:{ 'gl-px-2!': !_vm.$scopedSlots.default },attrs:{"variant":_vm.variant,"role":_vm.role,"aria-label":_vm.ariaLabel,"pill":""}},'b-badge',_vm.$attrs,false),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2 gl-ml-n2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-badge',_vm._b({staticClass:"gl-badge",class:{ 'gl-px-2!': !_vm.$scopedSlots.default },attrs:{"variant":_vm.variant,"role":_vm.role,"aria-label":_vm.ariaLabel,"pill":""}},'b-badge',_vm.$attrs,false),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2 gl-ml-n2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('span',{staticClass:"gl-badge-content"},[_vm._t("default")],2):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/sparkline/sparkline.js

@@ -78,6 +78,14 @@ var script = {
       required: false,
       default: 0,
       validator: x => x >= 0 && x <= 1
+    },
+    /**
+     * Whether to connect the line across null points.
+     */
+    connectNulls: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -131,7 +139,8 @@ var script = {
         data,
         smooth,
         itemStyle,
-        showLastYValue
+        showLastYValue,
+        connectNulls
       } = this;
       const markPoint = showLastYValue ? {
         symbol: 'circle',
@@ -156,7 +165,8 @@ var script = {
         itemStyle,
         lineStyle: {
           cap: 'round'
-        }
+        },
+        connectNulls
       };
     },
     itemStyle() {