@gitlab/ui 115.9.0 → 115.9.1

package/src/components/base/progress_bar/progress_bar.md

@@ -1,25 +0,0 @@
-The progress bar component can be used to show an amount of progress.
-It comes in 4 variants and supports setting a custom maximum and height.
-
-## Value
-
-The `value` prop can be a Number or String. If not given, it will default to `0`.
-
-## Variants
-
-The following variants are available:
-
-1. 'primary' (default)
-2. 'success'
-3. 'warning'
-4. 'danger'
-
-## Maximum
-
-A custom maximum can be set with the `max` prop. If not given, it will default to `100`.
-
-## Width and Height
-
-The `GlProgressBar` will always expand to the maximum width of its parent container.
-The height can be controlled with the `height` prop. The value should be a standard
-CSS dimension (`px`, `rem`, `em`, etc.) and given as a String, e.g. `'20px'`.

package/src/components/base/search_box_by_click/search_box_by_click.md

@@ -1 +0,0 @@
-Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).

package/src/components/base/search_box_by_type/search_box_by_type.md

@@ -1 +0,0 @@
-Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).

package/src/components/base/segmented_control/segmented_control.md

@@ -1,26 +0,0 @@
-A customizable button group that displays a set of equal options, where only one
-option can be active at a time. This component includes the ability to disable
-specific options and dynamically modify button content using slots.
-
-## Features
-
-- Displays a group of selectable buttons.
-- Allows only one active selection at a time.
-- Supports content customization through the button-content slot.
-- Options can be disabled individually.
-
-## Props Validation
-
-The `options` prop is validated against a specific structure to ensure consistent
-data. Each option must include:
-
-- `value`: A `string`, `number`, or `boolean` to identify the option.
-- `disabled`: A `boolean` (or `undefined`) indicating whether the option is disabled.
-
-Optionally it can include:
-
-- `text`: A `string` which gets displayed in the slot content.
-
-## Notes
-
-- Ensure each value is unique within the options array for consistent behavior.

package/src/components/base/skeleton_loader/skeleton_loader.md

@@ -1,70 +0,0 @@
-Skeleton loaders are to be used when pages or sections can be progressively populated with content,
-such as text and images, as they become available. Generally speaking the first batch of content
-will be the lightest to load and is followed by secondary and tertiary content batches. Each loading
-step will add in more detail to the page until no skeleton loaders are present anymore. Content
-should replace skeleton objects immediately when the data is available.
-
-The skeleton loader component accepts shapes which in return will create a skeleton state with a
-loading animation. Any skeleton state components should be created with
-`<gl-skeleton-loader></gl-skeleton-loader>`. If no shape is passed via the slot the default skeleton
-will be used. See "Default" and "Default With Custom Props" examples.
-
-## The `.gl-animate-skeleton-loader` class
-
-Skeleton loaders can also be composed with a `.gl-animate-skeleton-loader`
-CSS class. This CSS-based approach is easier to make responsive and match mocked elements.
-Feel free to use this approach if it suits your use case and please leave your
-feedback in this [Feedback for css-based skeleton loading
-indicator](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2319) issue.
-To improve developer experience and simplify matching Pajamas styles we're considering
-several improvements in the future, including adding more CSS util classes for
-this animation, or creating a dedicated component.  Here is an example of how
-you could replicate the default `<gl-skeleton-loader />` behavior with the
-CSS-based approach:
-
-```html
-<div>
-  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 !gl-max-w-20"></div>
-  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 !gl-max-w-30"></div>
-  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 !gl-max-w-26"></div>
-</div>
-```
-
-**USAGE NOTES:** if you're using `gl-max-w-xx` you'll need to add
-important (e.g. `!gl-max-w-20`). This is because `.gl-animate-skeleton-loader` already
-has a `max-width` statement, and we need to override it. You can override it
-only with lower numbers. Width rules (`gl-w-xx`) don't need an override, you
-can use them as-is. If you want to "synchronize" two elements next to each
-other, try adding `animation-delay` to offset elements.
-
-More complex example (with different shapes and an animation delay for offset elements):
-
-```html
-<div class="gl-display-flex gl-flex-direction-column gl-gap-2 gl-w-30">
-  <div class="gl-animate-skeleton-loader gl-h-8 gl-rounded-base gl-mb-4"></div>
-  <div class="gl-display-flex gl-flex-direction-row gl-gap-2">
-    <div class="gl-animate-skeleton-loader gl-h-8 gl-w-8 gl-rounded-full"></div>
-    <div class="gl-flex-grow-1" style="animation-delay: 100ms">
-      <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-2"></div>
-      <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-2"></div>
-      <div class="gl-animate-skeleton-loader gl-display-inline-block gl-h-4 gl-w-10 gl-rounded-base gl-my-2"></div>
-      <div
-        class="gl-animate-skeleton-loader gl-display-inline-block gl-h-4 gl-w-10 gl-rounded-base gl-my-2"
-        style="animation-delay: 250ms"></div>
-    </div>
-  </div>
-</div>
-```
-
-## Progressive Loading
-
-Determine if progressive loading is available, if it is break apart the skeleton to load data as it
-becomes readily available. If progessive loading is not available, replace the entire skeleton when
-the data is available.
-
-## Under the hood
-
-Skeleton Loader is a port of [vue-content-loader](https://github.com/egoist/vue-content-loader).
-Some changes have been made to the code to better suit our codebase, such as removing props and
-refactoring into a SFC. Please take a look at their documentation and a useful [UI tool](http://danilowoz.com/create-vue-content-loader/)
-for seeing the code output for `svg` shapes.

package/src/components/base/sorting/sorting.md

@@ -1,80 +0,0 @@
-The sorting component allows the user to select the field on which they would like to sort a list
-and whether to sort in ascending or descending order.
-
-Provide a list of sort options via the `sortOptions` prop with this structure:
-
-```typescript
-type sortOptionsProp = Array<{
-  value: string
-  text: string
-}>
-```
-
-The `value` should be a unique primitive value, and `text` is the user-facing
-string for that option.
-
-Set the currently selected sort option by passing a value to the `sortBy` prop.
-This should equal one of the `sortOptions` values. The selected sort option is
-rendered with a check mark next to it in the dropdown menu.
-
-When the user changes the selected sort option, a `sortByChange` event is
-emitted, with the `value` of the option as the only payload.
-
-The text of the dropdown trigger button is the `text` of the selected sort
-option. Pass a string to the `text` prop to override this behavior.
-
-When the user clicks on the sort direction button, a `sortDirectionChange`
-event is emitted, with a boolean value as its only payload. If the payload is
-`true`, the new order is ascending; otherwise it's descending.
-
-A complete implementation example might look like:
-
-```html
-<template>
-  <gl-sorting
-    :sort-options="sortOptions"
-    :sort-by="sortBy"
-    :is-ascending="isAscending"
-    @sortByChange="onSortByChange"
-    @sortDirectionChange="onDirectionChange"
-  />
-</template>
-
-<script>
-import { GlSorting } from '@gitlab/ui';
-
-export default {
-  components: {
-    GlSorting,
-  },
-  data() {
-    const sortOptions = [{
-      value: 'name',
-      text: 'Name',
-    }, {
-      value: 'date',
-      text: 'Date',
-    }];
-
-    return {
-      isAscending: false,
-      sortBy: sortOptions[0].value,
-      sortOptions,
-    }
-  },
-  methods: {
-    onSortByChange(value) {
-      this.sortBy = value;
-      this.sortMyData(this.sortBy, this.isAscending);
-    },
-    onDirectionChange(isAscending) {
-      this.isAscending = isAscending;
-      this.sortMyData(this.sortBy, this.isAscending);
-    },
-    sortMyData(sortBy, isAscending) {
-      // Use sortBy and direction to sort your data
-    },
-  }
-}
-</script>
-```

package/src/components/base/table/table.md

@@ -1,71 +0,0 @@
-## Usage
-
-The `gl-table` component wraps BootstrapVue `b-table` component. `b-table` provides a variety of
-slots for custom data rendering. You can learn more about them in the
-[component documentation](https://bootstrap-vue.org/docs/components/table).
-When using the component, pass in the `fields` prop as part of the `$options`, and give each table
-data and table head its own styles if necessary.
-
-## Internationalization
-
-To ensure we internationalize field labels, always pass an array of objects for the `fields` prop,
-like mentioned in the implementation example.
-
-[Learn more about the `field` prop](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/2e88af62966265cb725ca3f65f4b175e2494734b/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/table/README.md#L137).
-
-## Header text alignment
-
-To align a given `TH` element's text to the right, set the `thAlignRight` property to `true` in
-the fields definition. This will ensure that proper styling is applied, including when the column
-is sortable.
-
-```js
-const fields = [
-  {
-    key: "column_one",
-    label: __("First column"),
-    sortable: true,
-    thAlignRight: true,
-  },
-];
-```
-
-## Use `GlTableLite` when possible
-
-If you don't need all the features of `GlTable`, like filtering, sorting, or
-pagination, use `GlTableLite` which offers a subset of `GlTable` features.
-
-## Implementation Example
-
-```html
-<script>
-  export default {
-    fields: [
-      {
-        key: 'column_one',
-        label: __('First column'),
-        thClass: 'w-60p',
-        tdClass: 'table-col d-flex'
-      },
-      {
-        key: 'col_2',
-        label: __('Second column'),
-        thClass: 'w-15p',
-        tdClass: 'table-col d-flex'
-      },
-    ];
-  }
-</script>
-<template>
-  <gl-table :items="items" :fields="$options.fields">
-    <template #head(column_one)>
-      <div>First column</div>
-      <!-- This is the column head for the first object in `fields` -->
-    </template>
-
-    <template #cell(column_one)>
-      This is the template for column data belonging to the first object
-    </template>
-  </gl-table>
-</template>
-```

package/src/components/base/table_lite/table_lite.md

@@ -1,68 +0,0 @@
-## Usage
-
-The `GlTableLite` component wraps BootstrapVue `BTableLite` component.
-`BTableLite` provides a variety of slots for custom data rendering. You can learn
-more about them in the
-[component documentation](https://bootstrap-vue.org/docs/components/table#light-weight-tables).
-
-## `GlTable` vs. `GlTableLite`
-
-`GlTableLite` adds less payload to the pagebundle than `GlTable`.
-When possible `GlTableLite` should be preferred over `GlTable`.
-
-The `GlTableLite` component provides all of the styling and formatting features of
-`GlTable` (including row details and stacked support), while excluding the following features:
-
-- Filtering
-- Sorting
-- Pagination
-- Items provider support
-- Selectable rows
-- Busy table state and styling
-- Fixed top and bottom rows
-- Empty row support
-
-## Internationalization
-
-To ensure we internationalize field labels, always pass an array of objects for the `fields` prop,
-like mentioned in the implementation example.
-
-[Learn more about the `field` prop](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/2e88af62966265cb725ca3f65f4b175e2494734b/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/table/README.md#L137).
-
-## Implementation example
-
-```html
-<script>
-export default {
-  fields: [
-    {
-      key: 'column_one',
-      label: __('First column'),
-      thClass: 'w-60p',
-      tdClass: 'table-col d-flex'
-    },
-    {
-      key: 'col_2',
-      label: __('Second column'),
-      thClass: 'w-15p',
-      tdClass: 'table-col d-flex'
-    },
-  ];
-}
-</script>
-<template>
-  <gl-table-lite
-    :items="items"
-    :fields="$options.fields"
-  >
-    <template #head(column_one)>
-      <div>First column</div><!-- This is the column head for the first object in `fields` -->
-    </template>
-
-    <template #cell(column_one)>
-      This is the template for column data belonging to the first object
-    </template>
-
-  </gl-table-lite>
-</template>
-```

package/src/components/base/tabs/tabs/tabs.md

@@ -1,80 +0,0 @@
-Tabs are used to divide content into meaningful, related sections. Tabs allow users to focus on one
-specific view at a time while maintaining sight of all the relevant content options available. Each
-tab, when active, will reveal it’s own unique content.
-
-## Using the component Vue
-
-~~~html
-<gl-tabs>
-  <gl-tab title="Tab 1">
-    Tab panel 1
-  </gl-tab>
-  <gl-tab title="Tab 2">
-    Tab panel 2
-  </gl-tab>
-</gl-tabs>
-~~~
-
-## Using the component HTML
-
-~~~html
-<div class="tabs gl-tabs">
-  <ul role="tablist" class="nav gl-tabs-nav">
-    <li role="presentation" class="nav-item">
-      <a
-        role="tab"
-        target="_self"
-        href="#"
-        class="nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo"
-      >Tab 1</a>
-    </li>
-    <li role="presentation" class="nav-item">
-      <a role="tab" target="_self" href="#" class="nav-link gl-tab-nav-item">Tab 2</a>
-    </li>
-  </ul>
-  <div class="tab-content gl-tab-content">
-    <div role="tabpanel" class="tab-pane gl-tab-content active">Tab panel 1</div>
-    <div role="tabpanel" class="tab-pane gl-tab-content">Tab panel 2</div>
-  </div>
-</div>
-~~~
-
-## Adding Action Buttons to the Tabs
-
-Action buttons are rendered in separate toolbar slots (`#toolbar-start` & `#toolbar-end`) and can
-be populated via props: `action-primary`, `action-secondary` and
-`action-tertiary`. These props allow you to handle how a primary, secondary and tertiary button will
-behave and look. The props receive an object as such:
-
-~~~js
-{
-  text: 'Save Changes',
-  attributes: {
-    variant: 'info',
-    disabled: this.someState,
-    class: 'some-class',
-    ...
-  }
-}
-~~~
-
-## Scrollable tab buttons
-
-By default, `GlTab` will wrap tab buttons when they overflow the container. To
-enable horizontally scrolling for the tab buttons, use the `GlScrollableTabs`
-component. This is a separate Vue component because of some limitations:
-
-- The action props (e.g., `action-primary`) are not respected in `GlScrollableTabs`. At the
-  moment, BootstrapVue does not provide a reliable way for us to achieve this desired combination.
-
-`GlScrollableTabs` composes `GlTabs` and passes through every listener, slot, or prop (with the above
-exceptions).
-
-~~~html
-<gl-scrollable-tabs
-  scroll-left-label="Custom scroll left text"
-  scroll-right-label="Custom scroll right text"
->
-  <gl-tab v-for="tab in tabs" :key="tab.key" :title="tab.title"> {{ tab.content }} </gl-tab>
-</gl-scrollable-tabs>
-~~~

package/src/components/base/toast/toast.md

@@ -1,48 +0,0 @@
-
-Toasts are used to display system messages. The messages are short and straightforward. It may
-contain a dismiss button, and an action button depending on the situation.
-
-## Using the plugin
-
-In order to use the plugin, it needs to be included in your application with `Vue.use`.
-
-```js
-// myApp.js
-
-import { GlToast } from '@gitlab/ui';
-
-// Note, this has to be done before `Vue.new()`
-Vue.use(GlToast);
-```
-
-Once included in your application, the toast plugin is globally available.
-
-```js
-// myComponent.vue
-
-this.$toast.show('Hello GitLab!');
-```
-
-Below is an example with options
-
-```js
-// myComponent.vue
-
-this.$toast.show('This is a toast with an option.', {
-  action: {
-    text: 'Undo',
-    onClick: () => { ... },
-  },
-});
-```
-
-### Options
-
-Below are the options you can pass to create a toast
-
-| **Option**    | **Type**      | **Default** | **Description**                          |
-| ------------- | ------------- | ----------- | ---------------------------------------- |
-| autoHideDelay | Number        | 5000        | Display time of the toast in millisecond |
-| action        | Object        | close       | Add single actions to toast              |
-| toastClass    | String, Array | 'gl-toast'  | Custom css class name of the toast       |
-| onComplete    | Function      | null        | Trigger when toast is completed          |

package/src/components/base/toggle/toggle.md

@@ -1,4 +0,0 @@
-## Usage
-
-The toggle component must have a `label` prop to give the toggle button an accessible name.
-To visually hide the label, provide it with `label-position="hidden"`.

package/src/components/base/token/token.md

@@ -1,12 +0,0 @@
-## Usage
-
-Tokens are an object that has been created after a user action, like selecting an autocompleted item
-while searching. They have a close action in the form of an 'x'.
-
-## Using the component
-
-~~~html
-<gl-token>
-  Token
-</gl-token>
-~~~

package/src/components/base/tooltip/tooltip.md

@@ -1,52 +0,0 @@
-Using the tooltip component is recommended if you have HTML content.
-It is also currently required if the tooltip content needs to change while it's visible
-(see [this upstream issue][this upstream issue]). In all other cases, please use the directive.
-
-[this upstream issue]: https://github.com/bootstrap-vue/bootstrap-vue/issues/2142
-
-## Using the component
-
-~~~html
-<gl-button ref="someButton">
-  ...
-</gl-button>
-
-<gl-tooltip :target="() => $refs.someButton">
-  some <em>tooltip<em/> text
-</gl-tooltip>
-~~~
-
-## Using the directive
-
-You will need to import and register `GlTooltipDirective` before you can use it.
-
-~~~html
-<script>
-import { GlTooltipDirective } from '@gitlab/ui';
-
-export default {
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-};
-</script>
-
-<element
-  v-gl-tooltip.${modifier}
-  title="some tooltip text"
->
-  ...
-</element>
-~~~
-
-## Directive attributes
-
-`v-gl-tooltip` directive uses the same attributes as [`v-b-tooltip`][`v-b-tooltip`].
-
-## Under the hood
-
-Tooltip uses [`<b-tooltip>`][`<b-tooltip>`] and [`v-b-tooltip`][`v-b-tooltip`] internally.
-
-[`<b-tooltip>`]: https://bootstrap-vue.org/docs/components/tooltip
-
-[`v-b-tooltip`]: https://bootstrap-vue.org/docs/directives/tooltip

package/src/scss/typescale/typeface_demo.html

@@ -1,70 +0,0 @@
-<table>
-  <thead>
-    <tr>
-      <th class="gl-pb-5 gl-pr-10">
-        <h4>Primary typeface</h4>
-        <h1>GitLab Sans</h1>
-      </th>
-      <th class="gl-pb-5 monospace">
-        <h4>Monospaced typeface</h4>
-        <h1>GitLab Mono</h1>
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td class="gl-pb-5 gl-pr-10">
-        <p class="sm">
-          UI Small Paragraph • 0.75rem (12px)<br />
-          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-          abcdefghijklmnopqrstuvwxyz<br />
-          1234567890
-        </p>
-      </td>
-      <td class="gl-pb-5">
-        <p class="monospace sm">
-          UI Small Monospace • 0.75rem (12px)<br />
-          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-          abcdefghijklmnopqrstuvwxyz<br />
-          1234567890
-        </p>
-      </td>
-    </tr>
-    <tr>
-      <td class="gl-pb-5 gl-pr-10">
-        <p>
-          UI Paragraph • 0.875rem (14px)<br />
-          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-          abcdefghijklmnopqrstuvwxyz<br />
-          1234567890
-        </p>
-      </td>
-      <td class="gl-pb-5">
-        <p class="monospace">
-          UI Monospace • 0.875rem (14px)<br />
-          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-          abcdefghijklmnopqrstuvwxyz<br />
-          1234567890
-        </p>
-      </td>
-    </tr>
-    <tr>
-      <td class="gl-pb-5 gl-pr-10">
-        <p class="lg">
-          UI Large Paragraph • 1rem (16px)<br />
-          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-          abcdefghijklmnopqrstuvwxyz<br />
-          1234567890
-        </p>
-      </td>
-      <td class="gl-pb-5">
-        <p class="monospace lg">
-          UI Large Monospace • 1rem (16px)<br />
-          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
-          abcdefghijklmnopqrstuvwxyz<br />
-          1234567890
-        </p>
-      </td>
-    </tr>
-  </tbody>
-</table>