@gitlab/ui 115.11.0 → 116.0.0

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -21,62 +21,104 @@ export default {
     GlTruncate,
   },
   props: {
+    /**
+     * CSS classes to apply to the panel container.
+     */
     containerClass: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Additional CSS classes to apply to the `#body` slot container.
+     */
     bodyContentClass: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Used to set the color of the panel border.
+     */
     borderColorClass: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * The string to render as the panel title.
+     */
     title: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * The name of the icon to render next to the panel title.
+     */
     titleIcon: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * The CSS classes to apply to the title icon.
+     */
     titleIconClass: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Configuration object for the title popover. Expected structure:
+     *
+     * - `description`: The popover text content with interpolation placeholders.
+     *   Uses `%{linkStart}` and `%{linkEnd}` as markers for where a link should be inserted.
+     *
+     * - `descriptionLink`: The optional URL that will be used for the link portion
+     *   of the description text between the linkStart and linkEnd markers.
+     */
     titlePopover: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * Set to `true` to show the loading state.
+     */
     loading: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Set to `true` for long-running operations.
+     */
     loadingDelayed: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * The string to render while loading is delayed.
+     */
     loadingDelayedText: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Array of `GlDisclosureDropdown` items to display in the dropdown.
+     */
     actions: {
       type: Array,
       required: false,
       default: () => [],
       validator: (actions) => actions.every((a) => isObject(a)),
     },
+    /**
+     * The toggle text for the `GlDisclosureDropdown` dropdown.
+     */
     actionsToggleText: {
       type: String,
       required: false,
@@ -130,7 +172,7 @@ export default {
 <template>
   <div
     :id="panelId"
-    class="gl-border gl-h-full !gl-overflow-visible gl-rounded-base gl-bg-white gl-p-4"
+    class="gl-border gl-h-full !gl-overflow-visible gl-rounded-lg gl-bg-white gl-p-5"
     :class="containerClasses"
   >
     <div class="gl-flex gl-h-full gl-flex-col">
@@ -138,7 +180,7 @@ export default {
         <div class="gl-flex gl-items-center gl-overflow-hidden gl-pb-3">
           <gl-icon
             v-if="hasTitleIcon"
-            class="gl-mr-1"
+            class="gl-mr-2"
             :class="titleIconClass"
             :name="titleIcon"
             data-testid="panel-title-icon"
@@ -195,11 +237,12 @@ export default {
             toggle-class="gl-ml-1"
             category="tertiary"
             positioning-strategy="fixed"
+            size="small"
             @shown="$emit('dropdownOpen')"
             @hidden="$emit('dropdownClosed')"
           >
             <template #list-item="{ item }">
-              <span> <gl-icon :name="item.icon" /> {{ item.text }}</span>
+              <span>{{ item.text }}</span>
             </template>
           </gl-disclosure-dropdown>
 

package/src/components/index.js

@@ -9,7 +9,6 @@ export { default as GlNav } from './base/nav/nav.vue';
 export { default as GlNavItem } from './base/nav/nav_item.vue';
 export { default as GlFormCheckboxTree } from './base/form/form_checkbox_tree/form_checkbox_tree.vue';
 export { default as GlMarkdown } from './base/markdown/markdown.vue';
-export { default as GlIntersectionObserver } from './utilities/intersection_observer/intersection_observer.vue';
 export { default as GlLink, default as GlDeprecatedLink } from './base/link/link.vue';
 export { default as GlIcon } from './base/icon/icon.vue';
 export { default as GlAnimatedChevronRightDownIcon } from './base/animated_icon/animated_chevron_right_down_icon.vue';
@@ -108,6 +107,7 @@ export { default as GlExperimentBadge } from './experimental/experiment_badge/ex
 // Utilities
 export { default as GlAnimatedNumber } from './utilities/animated_number/animated_number.vue';
 export { default as GlFriendlyWrap } from './utilities/friendly_wrap/friendly_wrap.vue';
+export { default as GlIntersectionObserver } from './utilities/intersection_observer/intersection_observer.vue';
 export { default as GlIntersperse } from './utilities/intersperse/intersperse.vue';
 export { default as GlSprintf } from './utilities/sprintf/sprintf.vue';
 export { default as GlTruncate } from './utilities/truncate/truncate.vue';

package/src/tokens/common_story_options.js

@@ -1,11 +1,6 @@
-import { WHITE, GRAY_950 } from './build/js/tokens';
 import TokensStory from './tokens_story.vue';
 
-export const createDesignTokenStory = ({
-  tokens = {},
-  isBackgroundColorStory = true,
-  containerClass = '',
-} = {}) => {
+export const createDesignTokenStory = ({ tokens = {}, containerClass = '' } = {}) => {
   const Story = (args, { argTypes }) => ({
     props: Object.keys(argTypes),
     components: {
@@ -13,9 +8,6 @@ export const createDesignTokenStory = ({
     },
     provide: {
       containerClass,
-      isBackgroundColorStory,
-      lightBackground: WHITE,
-      darkBackground: GRAY_950,
     },
     template: `<tokens-story v-bind="$props" />`,
   });

package/src/tokens/tokens_story.vue

@@ -2,18 +2,16 @@
 import { colorFromBackground } from '../utils/utils';
 import { GlTooltipDirective } from '../directives/tooltip/tooltip';
 import GlBadge from '../components/base/badge/badge.vue';
-import GlColorContrast from '../internal/color_contrast/color_contrast.vue';
 
 export default {
   name: 'TokensStory',
   components: {
     GlBadge,
-    GlColorContrast,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  inject: ['isBackgroundColorStory', 'lightBackground', 'darkBackground', 'containerClass'],
+  inject: ['containerClass'],
   props: {
     tokens: {
       type: Object,
@@ -30,7 +28,6 @@ export default {
     },
     getClasses(value) {
       if (!this.isHex(value)) return '';
-      if (!this.isBackgroundColorStory) return '';
 
       const textColorVariant = colorFromBackground(value, 4.5);
       return {
@@ -38,13 +35,6 @@ export default {
         'gl-text-neutral-0': textColorVariant === 'light',
       };
     },
-    getStyle(value) {
-      if (this.isBackgroundColorStory) {
-        return { backgroundColor: value };
-      }
-
-      return { color: value };
-    },
   },
 };
 </script>
@@ -57,7 +47,7 @@ export default {
         :key="token.name"
         class="gl-flex gl-flex-wrap gl-items-center gl-justify-between gl-gap-3 gl-p-3"
         :class="getClasses(token.$value)"
-        :style="getStyle(token.$value)"
+        :style="{ backgroundColor: token.$value }"
       >
         <code v-gl-tooltip :title="token.comment" class="gl-text-inherit">
           {{ getTokenName(token) }}
@@ -67,16 +57,6 @@ export default {
             Deprecated
           </gl-badge>
           <code class="gl-text-inherit">{{ token.$value }}</code>
-          <gl-color-contrast
-            v-if="isHex(token.$value)"
-            :foreground="token.$value"
-            :background="darkBackground"
-          />
-          <gl-color-contrast
-            v-if="isHex(token.$value)"
-            :foreground="token.$value"
-            :background="lightBackground"
-          />
         </div>
       </li>
     </ul>

package/src/components/base/form/form.md

@@ -1,2 +0,0 @@
-A wrapper element for `gl-form-*` input elements. Supports `@submit` and `@reset` events.
-To disable native HTML validation pass the `novalidate` attribute.

package/src/components/base/form/form_character_count/form_character_count.md

@@ -1,53 +0,0 @@
-## Usage
-
-`GlFormCharacterCount` can be used to add a character count to an input.
-If you are using `GlFormTextarea` on its own see [with character count example](https://design.gitlab.com/storybook?path=/story/base-form-form-textarea--with-character-count).
-If you are wrapping your input, such as in a markdown component, and need the character
-count separate from the input, use `GlFormCharacterCount`.
-
-## Example
-
-```html
-<script>
-  import { GlFormCharacterCount, GlFormInput, GlFormGroup } from '@gitlab/ui'
-
-  export default {
-    inputId: 'form-input-with-character-count',
-    countTextId: 'character-count-text',
-    limit: 100,
-    components: { GlFormCharacterCount, GlFormInput, GlFormGroup },
-    data() {
-      return {
-        value: '',
-      }
-    },
-    methods: {
-      remainingCountText(count) {
-        return  n__('%d character remaining.', '%d characters remaining.', count)
-      },
-      overLimitText(count) {
-        return n__('%d character over limit.', '%d characters over limit.', count);
-      },
-    },
-  }
-<script>
-
-<template>
-  <gl-form-group label="Form input with character count" :label-for="$options.inputId">
-    <gl-form-input
-      v-model="value"
-      :id="$options.inputId"
-      :value="value"
-      :aria-describedby="$options.countTextId"
-    />
-    <gl-form-character-count
-      :value="value"
-      :limit="$options.limit"
-      :count-text-id="$options.countTextId"
-    >
-      <template #remaining-count-text="{ count }">{{ remainingCountText(count) }}</template>
-      <template #over-limit-text="{ count }">{{ overLimitText(count) }}</template>
-    </gl-form-character-count>
-  </gl-form-group>
-<template>
-```

package/src/components/base/form/form_combobox/form_combobox.md

@@ -1,52 +0,0 @@
-Use this component to add a [`FormInput`](/?path=/story/base-form-form-input--default) component
-with synchronous autocomplete dropdown. It behaves as follows:
-
-- Typing matches tokens; dropdown disappears when there is no match  
-- Up and down arrows navigate the dropdown  
-- Enter selects keyboard-highlighted item; clicking overrides this  
-- Esc closes dropdown when it is open, clears field when it is not  
-- Browser/native autocomplete dropdown hidden when ours is open, shows when it is not  
-- Tab selects current entered text and moves to next field  
-
-This behavior based on
-[this w3c pattern](https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html)
-and [this accessible combobox example](https://alligator.io/vuejs/vue-a11y-autocomplete/).
-
-## Usage
-
-The combobox accepts an array of string tokens, a `v-model`, and label text. Internally, it generates
-unique element IDs so multiple can be used on one page without clashing.
-
-On selection it sets the input value to the selected string and emits a `value-selected` event for
-consumption by parent components.
-
-```html
-<gl-form-combobox
-  v-model="inputVal"
-  :token-list="tokens"
-  label-text="Combobox Label"
-/>
-```
-
-It does not have a loading state nor does it accept tokens other than strings. It allows for one
-selected value.
-
-### What if I need to load the options asynchronously?
-
-You may want to look at [`GlSearchBoxByType`] or [`GlSearchBoxByClick`].
-
-### What if I need multiple options?
-
-The [`GlTokenSelector`] may be what you need. Alternately, [`GlFilteredSearch`] will let you search
-and include tokens.
-
-## Edge cases
-
-The algorithm to match tokens with the input is very naive. If you need to use the component with a
-very large list of matches, you may want to update the implementation or use one of the search
-inputs, like [`GlSearchBoxByType`], [`GlSearchBoxByClick`], or [`GlFilteredSearch`].
-
-[`GlSearchBoxByType`]: https://design.gitlab.com/storybook?path=/story/base-search-box-by-type--default
-[`GlSearchBoxByClick`]: https://design.gitlab.com/storybook?path=/story/base-search-box-by-click--default
-[`GlTokenSelector`]: https://design.gitlab.com/storybook?path=/story/base-token-selector--default
-[`GlFilteredSearch`]: https://design.gitlab.com/storybook?path=/story/base-filtered-search--default

package/src/components/base/form/form_date/form_date.md

@@ -1,26 +0,0 @@
-`GlFormDate` allows users to choose and input a date using a keyboard by by using
-browser implemented calendar controls, where available.
-
-`GlFormDate` extends `<input type="date">` with an `<output>` for audible announcement
-of selected date, in full format, by screen-readers.
-
-## Usage
-
-On `change` the value is emitted in `YYYY-MM-DD` format.
-
-## Accessibility
-
-`GlFormDate` is a form `<input>` and should have an accessible name using a `<label>`.
-
-`GlFormGroup` can be used to label `GlFormDate`.
-
-```html
-<gl-form-group
-  label="Enter date"
-  label-for="input-id"
->
-  <gl-form-date
-    id="input-id"
-  />
-</gl-form-group>
-```

package/src/components/base/form/form_fields/form_fields.md

@@ -1,41 +0,0 @@
-## Usage
-
-`GlFormFields` provides form builder functionality for ease of building simple
-forms out of other GitLab UI form components.
-
-For a code example, look at the story. It covers usage of `mapValue`, `validators`,
-custom form elements, and `inputAttrs`.
-
-## Fields type
-
-Each value of `fields` prop is expected to be a `FieldDefinition`. See below for the shape of this type:
-
-```ts
-interface FieldDefinition<TValue> {
-  // Label text to show for this field.
-  label: string;
-
-  // Collection of validator functions
-  validators?: Array<(value: TValue) => string | undefined>;
-
-  // Function that maps the inputted string value to the field's actual value
-  // (e.g. a Number).
-  mapValue?: (input: string) => TValue;
-
-  // Properties that are passed to the actual input for this field.
-  inputAttrs?: {};
-
-  // Properties that are passed to the group wrapping this field.
-  groupAttrs?: {};
-}
-```
-
-## Slots
-
-| Name | Description |
-| ------ | ------ |
-| `input(<fieldName>)` | Used to render components other than `GlFormInput`. |
-| `group(<fieldName>)-label` | Used for `label` slot on `GlFormGroup` of a specific field. |
-| `group(<fieldName>)-description` | Used for `description` slot on `GlFormGroup` of a specific field. |
-| `group(<fieldName>)-label-description` | Used for `label-description` slot on `GlFormGroup` of a specific field. |
-| `after(<fieldName>)` | Used to render content after `GlFormGroup` of a specific field. |

package/src/components/base/form/form_group/form_group.md

@@ -1 +0,0 @@
-Form group adds structure to forms.

package/src/components/base/form/form_input_group/form_input_group.md

@@ -1,67 +0,0 @@
-The `GlFormInputGroup` component allows one to build more advanced text
-input fields than generic `GlFormInput` when one needs that flexibility.
-Basic usage of the component:
-
-```html
-<div>
-  <gl-form-input-group>
-    <template #prepend>
-      <!-- Content to prepend your text input field -->
-    </template>
-    <template #append>
-      <!-- Content to append your text input field -->
-    </template>
-  </gl-form-input-group>
-</div>
-```
-
-One can use any other component (custom or `<gl-*>`) in both slots or
-not to use the slots at all. In the latter, the component will fallback
-to simple `GlFormInput`.
-
-## Predefined options
-
-Sometimes custom text input from the user isn't desired. Instead, the
-user should pick one of the predefined options that will automatically
-populate the input field. Typically, such cases will also include an
-actionable button (like **Copy**) put into the `append` slot.
-
-To achieve this effect, the `GlFormInputGroup` component accepts an
-array of options in the form of `predefinedOptions` param. For example:
-
-```javascript
-const optionValues = [
-  { name: 'Option #1', value: 'Option #1 is selected!' },
-  { name: 'Option #2', value: 'Option #2 is selected!' },
-];
-...
-<gl-form-input-group :predefined-options="optionValues" />
-```
-
-This will tell `GlFormInputGroup` to render a dropdown in the `prepend`
-slot with all of the supplied options' `name`s. When one of the options
-is selected, the input field is automatically populated with the
-option's `value`. Check the "Examples" section below for "With
-predefined options" example.
-
-### Pro tips
-
-Read some useful tips below about specific usage of the component.
-
-### Readonly input
-
-Often you want to make sure user doesn't mess up the predefined content
-pasted into the input field. In this case, you can set `readonly`
-param to `true`. You can play with `Readonly` knob on the right.
-
-### Preselect the text to copy
-
-If you set the `readonly` param on the `GlFormInputGroup` component,
-users will still be able to manually select the text and copy it.
-However, it's more user-friendly to preselect the text for the users if
-they click anywhere in the input field. This can be achieved by setting
-the `select-on-click` param to `true`. You can play with
-`Select text on click` knob on the right. Even better, try enabling
-`Readonly`, `Select text on click`, and `Switch to predefined input`
-altogether. And, probably, remove `Prepend text`. Or leave it. It's your
-call. :)

package/src/components/base/form/input_group_text/input_group_text.md

@@ -1 +0,0 @@
-GlInputGroupText components are used to add text to an input group.

package/src/components/charts/bar/bar.md

@@ -1,3 +0,0 @@
-A bar chart is similar to a column chart where the the length of bars represents the data value.
-Although alike, they are cannot be interchangeably used. Bar charts are good for displaying large
-number of categories on the y-axis.

package/src/components/charts/chart/chart.md

@@ -1,19 +0,0 @@
-### ECharts Wrapper
-
-The chart component is a Vue component wrapper around [Apache ECharts](https://echarts.apache.org/en/api.html#echarts).
-The chart component accepts width and height props in order to allow the user to make it responsive.
-
-> Note: When implementing a chart type that does not already have a GitLab UI component, you can use
-> this component alonside the [ECharts options](https://echarts.apache.org/en/api.html#echarts) to
-> build your chart. Each type of chart should still follow the general guidelines in the
-> [pajamas documentation](https://design.gitlab.com/data-visualization/charts).
-
-### EChart Lifecycle
-
-This component emits the following events during the ECharts lifecycle:
-
-- `created`: emitted after calling `echarts.init`
-- `updated`: emitted after calling `echarts.setOption`
-
-In all cases, the event payload is the
-[echart instance](https://echarts.apache.org/en/api.html#echartsInstance).

package/src/components/charts/gauge/gauge.md

@@ -1,8 +0,0 @@
-Some layout problems can be encountered with this component. Specifically, when the gauge chart's
-axis labels or detail text have larger widths, they can overlap with the chart elements.
-
-Also, when the containing element of the gauge chart has either of a small calculated `width` and
-`height`, its axis width could become bulkier in relation to other chart elements. This is because
-at this time [eCharts only allows for setting the axis line width in absolute units](https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.width).
-
-This issue is to be addressed by [https://gitlab.com/gitlab-org/gitlab-ui/-/issues/916](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/916).

package/src/components/charts/heatmap/heatmap.md

@@ -1,7 +0,0 @@
-## Heatmaps
-
-**Note** This component uses `<gl-legend>`, which should allow a user to click on any data point(s)
-in the legend and make the corresponding data point(s) on the chart rendered disappear.
-_See [area chart](https://design.gitlab.com/storybook?path=/story/charts-area-chart--default)
-for an example_ For this particular chart, there is a [known issue](https://gitlab.com/gitlab-org/gitlab-ui/issues/352)
-with the functionality of the legend, where clicking on it does nothing.

package/src/components/charts/legend/legend.md

@@ -1,16 +0,0 @@
-## Disabling Legends
-
-By default, to prevent the chart from disappearing, all legends can't be toggled off – the last
-active legend will be disabled. To manually disable a legend, pass it the
-`disabled` property in `seriesInfo`:
-
-```js
-seriesInfo = [
-  {
-    name: 'Example Legend',
-    color: 'blue',
-    disabled: true,
-    type: 'line'
-  }
-]
-```

package/src/components/charts/line/line.md

@@ -1,7 +0,0 @@
-This is a basic line chart.
-
-### Implementation Details
-
-This component wraps the GitLab UI `chart` component, which in turn wraps the ECharts component.
-
-See the [chart](./?path=/story/charts-chart--default) component for more info.

package/src/components/charts/series_label/series_label.md

@@ -1 +0,0 @@
-Displays chart data series name as a label for chart legend, tooltip, etc.

package/src/components/charts/shared/tooltip/tooltip.md

@@ -1,3 +0,0 @@
-### ECharts custom tooltip
-
-Uses GitLab UI's `popover` component in lieu of echart's tooltip.

package/src/components/charts/single_stat/single_stat.md

@@ -1,8 +0,0 @@
-The single stat component is used to show a single value. The color of the meta icon / badge is
-determined by the **variant** prop, which can be one of "success", "warning", "danger", "info",
-"neutral" or "muted" (default).
-
-#### Hover state
-
-You can make the component focusable by adding a `tabindex=0` attribute to it. This will also apply
-a hover state to the component.

package/src/components/charts/sparkline/sparkline.md

@@ -1,8 +0,0 @@
-
-This is a basic sparkline chart.
-
-### Implementation Details
-
-This component wraps the GitLab UI `chart` component, which in turn wraps the ECharts component.
-
-See the [chart](./?path=/story/charts-chart--default) component for more info.

package/src/components/charts/stacked_column/stacked_column.md

@@ -1,10 +0,0 @@
-The `presentation` property allows you to change between a stacked and tiled presentation style. It
-is only setup to accept `stacked` or `tiled` as values, the default value is `stacked`.
-
-The `stacked` presentation allows to view multiple series of the same stack as a single column,
-while `tiled` presents the information in multiple columns for each series of a stack.
-
-`groupBy` is a property that defines how the data is going to be grouped by for each of the series
-that the `data` property provides. For example if the `data` property has a total of 3 series, with
-7 elements each, `groupBy` could use a 7 element array to show 7 stacked bars or 7 groups of bars
-depending on the preference set by the `presentation` property.

package/src/components/regions/empty_state/empty_state.md

@@ -1,4 +0,0 @@
-### Buttons
-
-You can either have a primary button, a secondary button, or both.
-Buttons require both text a link in order for the button to render.

package/src/components/utilities/animated_number/animated_number.md

@@ -1,6 +0,0 @@
-Animated numbers provide a signifier that values are being changed.
-
-## Usage
-
-The animated number component can be used with or without decimal places. Decimal places will
-not be rounded if chosen to be omitted.