@gitlab/ui 115.9.0 → 115.9.2

package/src/tokens/build/json/tokens.json

@@ -21052,7 +21052,7 @@
         "color": {
           "hover": {
             "key": "{table.row.background.color.hover}",
-            "$value": "#fbfafd",
+            "$value": "#e9f3fc",
             "$type": "color",
             "$description": "Used for the background of a table row in hover state.",
             "$extensions": {
@@ -21064,7 +21064,7 @@
             "filePath": "src/tokens/contextual/table.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{background.color.subtle}",
+              "$value": "{highlight.target.background.color}",
               "$type": "color",
               "$description": "Used for the background of a table row in hover state.",
               "$extensions": {

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

@@ -950,7 +950,7 @@ $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used fo
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
-$gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-toggle-switch-icon-color-unchecked-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
 $gl-toggle-switch-icon-color-unchecked-hover: $gl-action-strong-neutral-background-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.

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

@@ -950,7 +950,7 @@ $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used fo
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
-$gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-toggle-switch-icon-color-unchecked-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
 $gl-toggle-switch-icon-color-unchecked-hover: $gl-action-strong-neutral-background-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.

package/src/tokens/contextual/table.tokens.json

@@ -4,7 +4,7 @@
       "background": {
         "color": {
           "hover": {
-            "$value": "{background.color.subtle}",
+            "$value": "{highlight.target.background.color}",
             "$type": "color",
             "$description": "Used for the background of a table row in hover state.",
             "$extensions": {

package/src/components/base/accordion/accordion.md

@@ -1,3 +0,0 @@
-Accordions are used to group similar content and hide or show it depending on user needs or
-preferences. Accordions give users more granular control over the interface and help digest content
-in stages, rather than all at once.

package/src/components/base/accordion/accordion_item.md

@@ -1,3 +0,0 @@
-## Usage
-
-Use `GlAccordionItem` to place the accordion item within your accordion.

package/src/components/base/alert/alert.md

@@ -1,35 +0,0 @@
-Alerts allow the application to pass along relevant system information to the
-user without impeding their journey. Alerts are system generated and may or may
-not be derived by a user’s action.
-
-## Dismissible alerts
-
-Alerts don't handle their own visibility, so it's the parent component's
-responsbility to listen for the `dismiss` event and hide the alert in some way.
-For example:
-
-```html
-<script>
-  ...
-  computed: {
-    shouldShowAlert() {
-      return !this.isAlertDismissed && this.someOtherCondition();
-    },
-  },
-  ...
-</script>
-
-<template>
-  ...
-  <gl-alert v-if="shouldShowAlert" @dismiss="isAlertDismissed = true">
-    An important message
-  </gl-alert>
-  ...
-</template>
-```
-
-## Sticky alerts
-
-Any alert can use `position: sticky`, however it should be limited to critical alerts where keeping
-the alert visually in context is necessary or when alerts are injected into a page and might
-otherwise go unnoticed.

package/src/components/base/animated_icon/animated_icon.md

@@ -1,4 +0,0 @@
-## Usage
-
-The `GlAnimatedIcon` component can be used to render animated SVG
-with any other interactive Pajamas component that can switch `GlAnimatedIcon` state.

package/src/components/base/avatar/avatar.md

@@ -1 +0,0 @@
-Avatars are used to represent a unique entity, be it a person, a group, or a project.

package/src/components/base/avatar_labeled/avatar_labeled.md

@@ -1,20 +0,0 @@
-## Usage
-
-Avatars may also be adjacent to a text alternative, such as a user or project name. In these cases,
-a null `alt` text should be used so that they can be ignored by assistive technologies.
-
-Use the `avatar-labeled` component in those scenarios. It will set a null `alt` text by default.
-It allows to display a `label` and/or a `sub-label` next to the avatar image. It accepts the same
-properties as the avatar component to modify the avatar’s shape and size.
-
-## Using the component
-
-```js
-<gl-avatar-labeled
-  :shape="shape"
-  :size="size"
-  :src="src"
-  :label="label"
-  :sub-label="subLabel"
-/>
-```

package/src/components/base/avatar_link/avatar_link.md

@@ -1,33 +0,0 @@
-`<gl-avatar-link>` decorates `<gl-avatar>` with hyperlink functionality. It accepts the same
-properties as the `<gl-link>` component and it works in the same way too. The main purpose of this
-component is to apply visual enhancements that makes evident that the user can interact with the
-avatar.
-
-## Using the component
-
-When wrapping an `<gl-avatar>` component, `<gl-avatar-link>` darkens
-the border that surrounds the avatar image or fallback text when hovering over it.
-
-```vue
-<gl-avatar-link target="blank" href="https://gitlab.com/gitlab-org/gitlab">
-  <gl-avatar
-    :size="32"
-    :src="avatarUrl"
-  />
-</gl-avatar-link>
-```
-
-When wrapping an `<avatar-labeled>` component, `<avatar-link>` underlines
-the label and sub-label text when hovering over the avatar. It also applies the
-same effects described in the first example.
-
-```vue
-<gl-avatar-link target="blank" href="https://gitlab.com/gitlab-org/gitlab">
-  <gl-avatar-labeled
-    :size="32"
-    entity-name="GitLab"
-    label="GitLab User"
-    sub-label="@gitlab"
-  />
-</gl-avatar-link>
-```

package/src/components/base/avatars_inline/avatars_inline.md

@@ -1,38 +0,0 @@
-Use `<avatars-inline />` to display multiple avatars organized in a single row.
-
-### Basic usage
-
-The `avatars` property accepts an array of objects that contains the avatar properties. By default,
-`<avatars-inline />` expects each object contained in the array to have the same shape as the
-properties of the `<avatar />` component. You can customize the display of each avatar by
-overriding the default slot:
-
-```html
-<gl-avatars-inline :avatars="avatars">
-  <template #avatar="{ avatar }">
-    <gl-avatar-link v-gl-tooltip target="blank" :href="avatar.href" :title="avatar.tooltip">
-      <gl-avatar :src="avatar.src" :size="32" />
-    </gl-avatar-link>
-  </template>
-</gl-avatars-inline>
-```
-
-In the example above, the avatars displayed inside `<avatars-inline />` are links pointing to a URL
-stored in each avatar object. Each avatar also displays a tooltip. If you override
-`<inline-avatars />` default display, you can pass an array of objects with any desired shape to
-the `avatars` property.
-
-### Collapsing
-
-When the `collapse` property value is `true` and the `maxVisible` property value is a number less
-than the length of the `avatars` property array, `<avatars-inline>` will hide the overflown avatars
-and display a badge instead.
-
-### Badge description in screen readers
-
-The `badgeSrOnlyText` property provides a meaningful description of the badge that appears
-when avatars are collapsed for screen reader users.
-
-### Supported sizes
-
-`<avatars-inline>` supports avatars with `16`, `24`, or `32` size.

package/src/components/base/badge/badge.md

@@ -1,30 +0,0 @@
-Badges highlight metadata of objects, the kind of information that always needs
-some context and isn’t useful on its own. For example, they can be used to
-indicate an issue’s status, a member’s role, or if a branch is protected.
-
-## Usage
-
-```html
-<gl-badge>Hello, world!</gl-badge>
-```
-
-> Note: Native support for icons in badges will be added in a future version.
-
-### Using icon-only badges
-
-When a badge only has an icon and no slot content, be sure to set the `aria-label` attribute of the
-badge for best accessibility.
-
-```html
-<!-- bad -->
-<gl-badge icon="eye" />
-
-<!-- good -->
-<gl-badge icon="eye" aria-label="Mark as confidential" />
-```
-
-## Link badges
-
-Badges can be made actionable and turn into links by providing the `href` prop,
-which can be used in combination with the props `rel`, `target`, `active`, and `disabled`.
-The prop `tag` will be ignored and the `BLink` component will be used instead.

package/src/components/base/banner/banner.md

@@ -1,35 +0,0 @@
-## Dismiss
-
-Users are able to permanently dismiss banners by default.
-Banners may also be dismissed temporarily, depending on the use case.
-
-### Permanent dismissal
-
-The dismiss action is always represented by the `Close` icon and anchored
-to the top right of the banner.
-
-Banner dismissal should work as follows:
-
-* Banner dismissal must be associated with the user in the system database.
-  Dismissal must persist, even across version upgrades and clients.
-* Banners do not reappear by default. In rare circumstances, you may present the
-  banner again to a user after some time has passed.
-* Banners should only be shown to users who are logged in.
-
-**Implementation Notes:**
-
-* The dismissal of the banner is achieved using the `UserCallout` model on the backend and the
-  `PersistentUserCallout` JS file on the frontend. If both parameters are implemented correctly, the
-  banner will adhere to the dismissal guidelines above.
-
-### Temporary dismissal
-
-To introduce temporary dismissal, include a secondary or tertiary button placed alongside
-the primary action button. Follow the [button](https://design.gitlab.com/components/button#alignment)
-alignment and order guidelines.
-
-Temporary dismissals should work as follows:
-
-* Banners dismissed temporarily will reappear after **7 days**.
-* After a banner is dismissed temporarily, use a [toast](?path=/story/base-toast--default) message
-  to let the user know they will see the banner again in 7 days.

package/src/components/base/breadcrumb/breadcrumb.md

@@ -1,52 +0,0 @@
-## Usage
-
-The `GlBreadcrumb` component comes with a smart auto-resize feature. When there is not enough space
-to show all breadcrumb `items` in a single row, the component moves items into an ellipsis dropdown,
-starting with the first one. The last breadcrumb item (which represents the current page) stays
-always visible.
-
-### Auto-resize
-
-**Important:** For the auto-resize to function correctly it is necessary that the `GlBreadcrumb`
-component itself takes all the horizontal space it can get. How to do this depends on the
-CSS `display` mode (block, flex, grid) of its parent element.
-
-**Example:** In a flexbox layout, allow the component to `flex-grow`:
-
-```js
-<gl-breadcrumb class="gl-grow" :items="items" />
-```
-
-### `items` prop
-
-This component also allows for optional avatars on each item.
-
-`avatarPath` should passed along with `text` and `href` in `items`.
-Here is an example of how an item with an avatar should look:
-
-**note:** the component supports passing the property `to` in the list items to enable navigation
-through `vue-router`
-
-#### Example
-
-```js
-items = [
-  {
-    text: 'First item',
-    href: '#',
-    avatarPath: '/avatar.png',
-  },
-];
-
-<gl-breadcrumb :items="items" />
-```
-
-### `size` prop
-
-The size prop determines the size of the breadcrumb component. It accepts the following values:
-
-"sm" (default): Small size
-"md": Medium size
-
-Using the default 'sm' size for all page breadcrumbs is considered a best practice
-to ensure consistency across the application.

package/src/components/base/broadcast_message/broadcast_message.md

@@ -1,25 +0,0 @@
-Broadcast messages provide an efficient and prominent way to deliver critical messages at the
-instance level to all users. For example, a broadcast message can be used when an admin wants to
-announce that their platform will experience downtime during a specific period.
-
-In comparison with an alert, broadcast messages are created by an admin and not triggered by the
-system.
-
-Please refer to [Pajamas' documentation](https://design.gitlab.com/components/broadcast-message)
-for more information on when to use this component.
-
-## Dismiss a broadcast message
-
-The `GlBroadcastMessage` component deals with users dismissal the same way `GlAlert` does, meaning
-it does not handle its own visibility but emits a `dismiss` event that the parent component should
-listen to in order to hide the message. Example:
-
-```html
-<template>
-  ...
-  <gl-broadcast-message v-if="!dismissed" @dismiss="dismissed = true">
-    An important message
-  </gl-broadcast-message>
-  ...
-</template>
-```

package/src/components/base/button/button.md

@@ -1,119 +0,0 @@
-Buttons execute an action, either in the background or foreground of an experience. Different button
-categories help guide users through certain actions. Buttons express what action will occur when the
-user clicks or touches it either by text, icon, or both. Additional meaning can be derived from the
-button variant.
-
-## Button link
-
-A button link is a link that is styled to look like a button, semantically speaking it's a `<a>` tag
-with the necessary classes added to make it look like a button, it shares the same functionality as
-[<gl-link>](?path=/docs/base-link--docs)
-
-> Note: Setting a `target` attribute without a `href` attribute, will not create any side effects.
-> Without the presence of a `href` attribute, this component will render a `<button>`.
-
-## Icon-only button
-
-Icon-only buttons must have an accessible name.
-You can provide one with the `aria-label` attribute, which is read out by screen readers.
-
-```html
-<gl-button icon="close" aria-label="Close" />
-```
-
-## Type
-
-You can specify the button's type by setting the prop `type` to `button`, `submit` or `reset`.
-The default type is `button`.
-
-Note the `type` prop has no effect when either `href` or `to` props are set.
-
-## Sizing
-
-Specify `small` or `medium` via the `size` prop. Defaults to `medium`.
-
-```html
-<gl-button size="small">Small Button</gl-button>
-<gl-button>Default Button (medium)</gl-button>
-<gl-button size="medium">Medium Button</gl-button>
-```
-
-## Categories
-
-Use the `category` prop to set the button category to `primary`, `secondary`, or `tertiary`.
-Defaults to `primary`.
-
-## Variants
-
-Use the `variant` prop to set the button variant to `default`, `confirm`, `danger`, `dashed`, or `link`.
-Defaults to `default`.
-
-## Block level buttons
-
-Create block level buttons, those that span the full width of a parent, by setting the `block`
-prop.
-
-```html
-<gl-button block>Block Level Button</gl-button>
-```
-
-## Disabled state
-
-Set the `disabled` prop to disable button default functionality. `disabled` also works with buttons
-rendered as `<a>` elements and `<router-link>` (i.e. with the `href` or `to` prop set).
-
-```html
-<gl-button disabled>Disabled</gl-button>
-```
-
-## Router link support
-
-Refer to the [Router support](?path=/docs/base-link--docs#router-links) reference docs for
-the various supported `<router-link>` related props.
-
-## Accessibility
-
-When the `href` prop is set to `'#'`, `<gl-button>` will render a link (`<a>`) element with attribute
-`role="button"` set and appropriate keydown listeners (<kbd>Enter</kbd> and <kbd>Space</kbd>) so
-that the link acts like a native HTML `<button>` for screen reader and keyboard-only users. When
-disabled, the `aria-disabled="true"` attribute will be set on the `<a>` element.
-
-When the `href` is set to any other value (or the `to` prop is used), `role="button"` will not be
-added, nor will the keyboard event listeners be enabled.
-
-## Label button
-
-A label button renders a non-interactive `span` styled as a button. This can be especially useful
-when used in a button group to render text-only labels along with actionable buttons. To improve
-accessibility, and when applicable, consider using [`aria-describedby`] to establish a
-relationship between the label button and the associated button.
-
-[`aria-describedby`]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
-
-## Security
-
-This component implements a few security measures to make it as safe as possible by default.
-See [SafeLinkDirective docs] for more details.
-
-### Linking to an unsafe URL
-
-If you're trying to link to a location considered unsafe by the `SafeLink` directive (when rendering
-a download link with a [Data URL] for example), you'll need to bypass the `href` attribute's
-sanitization. This component exposes the `is-unsafe-link` prop for that purpose.
-
-> **Warning:** Only disable URL sanitization when absolutely necessary.
-
-```html
-<gl-button
-  is-unsafe-link
-  download="file.txt"
-  href="data:text/plain;charset=utf-8,GitLab%20is%20awesome">Download</gl-button>
-```
-
-[SafeLinkDirective docs]: https://design.gitlab.com/storybook?path=/docs/directives-safe-link-directive--default
-[Data URL]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
-
-## vue-bootstrap component
-
-This component uses [`BButton`](https://bootstrap-vue.org/docs/components/button) from vue-bootstrap
-internally. So please take a look also there at their extensive documentation.

package/src/components/base/button_group/button_group.md

@@ -1,44 +0,0 @@
-Button groups are an easy way to group a series of buttons together.
-
-```html
-<gl-button-group>
-  <gl-button>Download</b-button>
-  <gl-button>Browse</b-button>
-  <gl-button variant="danger">Delete</b-button>
-</gl-button-group>
-```
-
-## Split dropdowns
-
-Both `GlCollapsibleListbox` and `GlDisclosureDropdown` can be added as the last
-child of a button group to produce a "split" dropdown.
-
-For the correct styling, the dropdown component must render a caret _only_.
-This means no icon, and no visible text. For accessbility, ensure the
-dropdown's `toggle-text` _and_ `text-sr-only` props are set.
-
-```html
-<gl-button-group>
-  <gl-button>Split listbox</gl-button>
-
-  <gl-collapsible-listbox
-    v-model="foo"
-    :items="items"
-    toggle-text="Choose button action"
-    text-sr-only
-  />
-</gl-button-group>
-```
-
-## Vertical variation
-
-Make a set of buttons appear vertically stacked rather than horizontally by setting the `vertical` prop.
-Split button dropdowns are not supported here.
-
-```html
-<gl-button-group vertical>
-  <gl-button>Top</b-button>
-  <gl-button>Middle</b-button>
-  <gl-button>Bottom</b-button>
-</gl-button-group>
-```

package/src/components/base/card/card.md

@@ -1,4 +0,0 @@
-Cards are a flexible component used to display content and actions in a variety of contexts.
-They are generally restricted to a single topic and it should be easy for users to scan relevant and
-actionable information. Content, such as images and text, should be positioned within them in a
-manner that demonstrates their intended hierarchy.

package/src/components/base/collapse/collapse.md

@@ -1,64 +0,0 @@
-Collapse is used to keep pages focused on the overview of what the user can do. Details and
-additional actions are hidden in the fold, and can be opened if the user wants to interact with
-those elements.
-
-## `v-model` support
-
-The component's collapsed (visible) state can be set with `v-model` which binds internally to
-the `visible` prop.
-
-Note that when using `v-model` to control `<gl-collapse>`, the `aria-*` attributes are not
-automatically placed on the trigger button. Specifically, you should add `aria-expanded` to
-reflect the state of the target `<gl-collapse>` component, and `aria-controls` should be set
-to the ID(s) of the target `<gl-collapse>` component(s).
-
-```html
-<template>
-  <div>
-    <gl-button
-      :class="visible ? null : 'collapsed'"
-      :aria-expanded="visible ? 'true' : 'false'"
-      aria-controls="collapse-4"
-      @click="visible = !visible"
-    >
-      Toggle Collapse
-    </gl-button>
-    <gl-collapse id="collapse-4" v-model="visible">
-      <span>Surprise! But I am just a span</span>
-    </gl-collapse>
-  </div>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        visible: true
-      }
-    }
-  }
-</script>
-```
-
-## Troubleshooting
-
-When collapsing the container, padding on the collapse component causes
-complications with the height calculations.
-The result is a bit of jumpiness at the end of the collapse animation.
-
-The quick solution is to bring the padding into an inner container, which
-simplifies the height calculations and removes the jumpiness.
-
-```html
-<!-- bad -->
-<gl-collapse class="gl-p-3">
-    <!-- content -->
-</gl-collapse>
-
-<!-- good -->
- <gl-collapse>
-    <div class="gl-p-3">
-        <!-- content -->
-    </div>
-</gl-collapse>
-```

package/src/components/base/datepicker/datepicker.md

@@ -1,8 +0,0 @@
-Date picker allows users to choose and input a date by manually typing the date into the input field
-or by using a calendar-like dropdown.
-
-### Warning
-
-Be careful when binding a date value using `value` prop. `value` is a watched property and Date
-picker will emit `input` event on _initial load_. Alternatively, use `defaultDate` to set the
-initial date then receive updated date values through `input` events.

package/src/components/base/daterange_picker/daterange_picker.md

@@ -1,32 +0,0 @@
-## Usage
-
-Daterange picker allows users to choose a date range by manually typing the start/end date
-into the input fields or by using a calendar-like dropdown.
-
-A `maxDateRange` can be specified in order to limit the maximum number of days the component
-will allow to be selected i.e. if the start date is `2020-08-01` and `maxDateRange` is set to `10`,
-the highest selectable end date would be `2020-08-11`. This value will be offset by `1` if
-`sameDaySelection` is set to `true`. A `defaultMaxDate` will need to be
-provided when making use of the `maxDateRange`.
-
-By default, the component does not allow selection of the same start and end date.
-In a scenario where this is required, the `sameDaySelection` property can be configured.
-This is specifically useful when a single day selection is being defined as `2020-01-01 00:00:00`
-to `2020-01-01 23:59:59` instead of `2020-01-01 00:00:00` to `2020-01-02 00:00:00`.
-
-When `maxDateRange` is set it's a good idea to set the `tooltip` specifying the date range limit
-and to indicate the number of days currently selected using the default slot. For example:
-
-```vue
-<template #default="{ daysSelected }">
-  <span v-if="daysSelected > -1">{{ daysSelected }} days selected</span>
-  <span v-else>No days selected</span>
-</template>
-```
-
-The `daysSelected` slot prop is the effective date range, thus the value is increased by one when
-`sameDaySelection` is set to `true`. When no date range has been selected the value is `-1`.
-
-### Note
-
-If specifying a maxDateRange, it is good practice to include a date range indicator and toolip.

package/src/components/base/drawer/drawer.md

@@ -1,17 +0,0 @@
-The drawer is used to show more information about a certain resource in the UI and potentially
-handle actions on the information.
-
-### By default
-
-```html
-<gl-drawer :open="open" @close="close" @opened="opened">
-  <template #header>Your Title</template>
-  <template>
-   ...children
-  </template>
-</gl-drawer>
-```
-
-- `v-bind:open` will be a boolean you will pass to `gl-drawer` and `@close` is a listener that will
-be a function that will toggle open to `false`.
-- The component emits an `opened` event after the opening animation has finished.