@gitlab/ui 115.9.0 → 115.9.2

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>

package/src/scss/typescale/typescale.md

@@ -1,81 +0,0 @@
-GitLab UI typescale is an implementation of the Pajamas [typescale specification](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit---Beta?node-id=542%3A2).
-
-## Usage
-
-When you import GitLab UI SCSS, the typescale is not applied automatically. To apply the UI
-Typescale, include the `gl-typescale-ui` `@mixin` in your application SCSS code:
-
-```scss
-@import '@gitlab/ui/src/scss/gitlab_ui';
-
-@include gl-typescale-ui;
-```
-
-You can also include the Typescale and omit the rest of GitLab UI CSS. The following
-code demonstrates the minimal configuration required to use the UI Typescale in a project:
-
-```scss
-@import '@gitlab/ui/src/scss/variables';
-@import '@gitlab/ui/src/scss/mixins';
-@import '@gitlab/ui/src/scss/typescale/index';
-
-@include gl-typescale-ui;
-```
-
-## Implementation notes
-
-### Font stack
-
-The Typescale uses the following font stack:
-
-- Regular: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu,
-  Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-  'Noto Color Emoji'`
-- Monospace: `'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
-  'Courier New', 'andale mono', 'lucida console', monospace`
-
-### Font-size
-
-Text size is determined by the following parameters:
-
-- Content type:
-  - UI: default
-  - Markdown: `markdown`
-  - Compact Markdown: `compact-markdown`
-- Media breakpoints:
-  - `min-width: 0`: default
-  - `min-width: 768px`: `md`
-  - `min-width: 992px`: `lg`
-  - `min-width: 1200px`: `xl`
-- Font family:
-  - Regular: default
-  - Monospace: `monospace`
-- Element type:
-  - small paragraph / UI text: `sm`
-  - medium paragraph / UI text: default
-  - large paragraph / UI text: `lg`
-  - headers: `h1..h6`
-
-#### Variables
-
-Typescale variables are located in the `scss/variables.scss`. They follow the naming convention:
-`$gl-font-size-[content-type]-[font-family]-[element-type]-[breakpoint]`. Default typescale
-parameters are omitted from the variable name. For example:
-
-```sass
-// content-type: UI, font-family: regular, element-type: h1, media breakpoint: default
-$gl-font-size-h1: px-to-rem(23px);
-
-// content-type: markdown, font-family: regular, element-type: h1, media-breakpoint: min-width: 1200px
-$gl-font-size-markdown-h1-xl: px-to-rem(32px); 
-
-// content-type: compact markdown, font-family: regular, element-type: large paragraph / label
-$gl-font-size-compact-markdown-lg: px-to-rem(15px); 
-```
-
-### Line-height
-
-The minimum line-height in Pajamas’ typescale specification is `16px`/`1rem`. Label text, which is
-any text that is neither paragraph nor a header, uses this line-height. Paragraphs have a
-line-height of `20px`/`1.25rem`. You can see the line-height for other typescale’s elements in the
-[typescale sketch file](https://gitlab-org.gitlab.io/gitlab-design/hosted/pedro/%23168-responsive-type-spec-previews/).