@gitlab/ui 115.10.0 → 116.0.0

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.

package/src/components/utilities/friendly_wrap/friendly_wrap.md

@@ -1,66 +0,0 @@
-The friendly-wrap component lets you wrap text in a predictable way by appending [`<wbr>`] elements
-to specific break-symbols.
-
-[`<wbr>`]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
-
-## Internet Explorer 11
-
-IE11 doesn't support the `<wbr>` element: <https://caniuse.com/#search=wbr>
-To use this component on IE11, you'll need some CSS to preserve its behaviour:
-
-```css
-wbr {
-  display: inline-block;
-}
-```
-
-## Usage
-
-### Default
-
-By default, `GlFriendlyWrap` wraps text with slashes (`/`) as the break-symbol, which is especially
-useful when displaying paths or URLs:
-
-```html
-<gl-friendly-wrap text="/some/file/path" />
-```
-
-The code above renders to the following HTML:
-
-```html
-<span class="text-break">/<wbr>some/<wbr>file/<wbr>path</span>
-```
-
-### Custom symbols
-
-Multiple custom break-symbols can be defined via the `GlFriendlyWrap` prop:
-
-```html
-<gl-friendly-wrap
-  :symbols="[';', '-', '.']"
-  text="some;text-that.needs;to-be.wrapped"
-/>
-```
-
-Which renders to:
-
-```html
-<span class="text-break">some;<wbr>text-<wbr>that.<wbr>needs;<wbr>to-<wbr>be.<wbr>wrapped</span>
-```
-
-### Break words
-
-Symbols can be words too:
-
-```html
-<gl-friendly-wrap
-  :symbols="['and']"
-  text="it goes on and on and on and on"
-/>
-```
-
-Which renders to:
-
-```html
-<span class="text-break">it goes on and<wbr> on and<wbr> on and<wbr> on</span>
-```

package/src/components/utilities/intersection_observer/intersection_observer.md

@@ -1,16 +0,0 @@
-This intersection observer component is an invisible watcher that emits events when it appears and
-dissapears from view.
-
-It acts a a vue-friendly wrapper around the [intersection observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
-
-Because of it's simplicity you can use it for a lot of different things.
-It's especially helpful for the lazy loading of images, and infinite scrolling of lists.
-
-Anything slotted inside this component will become the element that is being observed.
-
-This slot can also be used as a fallback for the browsers that don't support the intersection
-observer, or in the case that the observer fails to work.
-For example, adding a "Fetch more posts" button inside an observer that should fetch more posts
-automatically when visible. If the observer fails to work for any reason, the button will still be
-clickable, and the experience preserved. Please use a fallback wherever possible as
-**the intersection observer API is not supported in IE11**.

package/src/components/utilities/intersperse/intersperse.md

@@ -1,90 +0,0 @@
-The intersperse component separates a list of elements
-by a given character (the default is `, `).
-
-It takes all direct descendants of its default slot and inserts
-the given separator between each item:
-
-`item 1, item 2, item 3`
-
-Optionally the character used for separating each item and the last separator can be set
-independently:
-
-* `separator="/"`  renders `item 1/item 2/item 3`
-* `lastSeparator=" and "` will render `item 1, item 2, and item 3`
-* `lastSeparator=" and "` and given two items will render `item 1 and item 2`
-
-**Note**:
-
-The component provides an inline context since the result is wrapped in a `span`.
-
-Also, whitespace elements that are direct children of the default-slot get removed to ensure
-consistent formatting.
-
-## Usage
-
-### Default
-
-```html
-<gl-intersperse>
-    <span>Item 1</span>
-    <span>Item 2</span>
-    <span>Item 3</span>
-</gl-intersperse>
-```
-
-This renders to the following HTML:
-
-```html
-<span><span>Item 1</span>, <span>Item 2</span>, <span>Item 3</span></span>
-```
-
-### Custom Separator
-
-A custom separator can be defined via the `separator` prop:
-
-```html
-<gl-intersperse separator="/">
-    <span>Item 1</span>
-    <span>Item 2</span>
-    <span>Item 3</span>
-</gl-intersperse>
-```
-
-This renders to the following HTML:
-
-```html
-<span><span>Item 1</span>/<span>Item 2</span>/<span>Item 3</span></span>
-```
-
-### Custom Last Separator
-
-A custom last separator can be defined via the `lastSeparator` prop:
-
-```html
-<gl-intersperse last-separator=" and ">
-    <span>Item 1</span>
-    <span>Item 2</span>
-    <span>Item 3</span>
-</gl-intersperse>
-```
-
-This renders to the following HTML:
-
-```html
-<span><span>Item 1</span>, <span>Item 2</span>, and <span>Item 3</span></span>
-```
-
-A custom last separator used on two items will only place `lastSeparator` between them:
-
-```html
-<gl-intersperse last-separator=" and ">
-    <span>Item 1</span>
-    <span>Item 2</span>
-</gl-intersperse>
-```
-
-This renders to the following HTML:
-
-```html
-<span><span>Item 1</span> and <span>Item 2</span></span>
-```