@gitlab/ui 114.5.0 → 114.6.0

package/README.md

@@ -6,7 +6,7 @@ design system. GitLab UI is written in [Vue.js](https://vuejs.org) and its objec
 - Create reusable UI components to accelerate frontend development.
 - Create UI consistency for all components within GitLab.
 
-See <https://gitlab-org.gitlab.io/gitlab-ui/> for documentation.
+See <https://design.gitlab.com/storybook> for documentation.
 
 ## Usage
 
@@ -53,7 +53,7 @@ or newer.
 
 ```sh
 # Clone the project
-git clone git@gitlab.com:gitlab-org/gitlab-ui.git
+git clone git@gitlab.com:gitlab-org/gitlab-services/design.gitlab.com.git
 
 # Navigate to the root of the project
 cd gitlab-ui

package/dist/components/base/sorting/sorting.js

@@ -1,3 +1,4 @@
+import uniqueId from 'lodash/uniqueId';
 import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlButton from '../button/button';
 import GlButtonGroup from '../button_group/button_group';
@@ -94,7 +95,15 @@ var script = {
       default: false
     }
   },
+  data() {
+    return {
+      sortingListboxId: uniqueId('sorting-listbox-')
+    };
+  },
   computed: {
+    sortingListboxLabel() {
+      return translate('GlSorting.sortByLabel', 'Sort by:');
+    },
     localSortDirection() {
       return this.isAscending ? 'sort-lowest' : 'sort-highest';
     },
@@ -136,7 +145,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',{staticClass:"gl-sorting"},[_c('gl-collapsible-listbox',{class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.dropdownToggleClass,"placement":"bottom-end","block":_vm.block},on:{"select":_vm.onSortByChanged}}),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText},on:{"click":_vm.toggleSortDirection}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',{staticClass:"gl-sorting"},[_c('gl-collapsible-listbox',{class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.dropdownToggleClass,"placement":"bottom-end","block":_vm.block,"toggle-aria-labelled-by":_vm.sortingListboxId},on:{"select":_vm.onSortByChanged}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only",attrs:{"id":_vm.sortingListboxId}},[_vm._v(_vm._s(_vm.sortingListboxLabel))]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText},on:{"click":_vm.toggleSortDirection}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/table/constants.js

@@ -1,5 +1,5 @@
 const tableFullSlots = ['bottom-row', 'empty', 'emptyfiltered', 'table-busy', 'thead-top', 'top-row'];
 const tableFullProps = ['api-url', 'busy', 'current-page', 'empty-filtered-html', 'empty-filtered-text', 'empty-html', 'empty-text', 'filter', 'filter-debounce', 'filter-function', 'filter-ignored-fields', 'filter-included-fields', 'label-sort-asc', 'label-sort-clear', 'label-sort-desc', 'no-footer-sorting', 'no-local-sorting', 'no-provider-filtering', 'no-provider-paging', 'no-provider-sorting', 'no-select-on-click', 'per-page', 'select-mode', 'selectable', 'selected-variant', 'show-empty', 'sort-by', 'sort-compare', 'sort-compare-locale', 'sort-compare-options', 'sort-desc', 'sort-direction', 'sort-icon-left', 'sort-null-last'];
-const glTableLiteWarning = 'This GlTable could be a GlTableLite component, please consider using GlTableLite instead of GlTable to reduce the page bundlesize more about this here: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-table-table-lite--default';
+const glTableLiteWarning = 'This GlTable could be a GlTableLite component, please consider using GlTableLite instead of GlTable to reduce the page bundlesize more about this here: https://design.gitlab.com/storybook?path=/docs/base-table-table-lite--default';
 
 export { glTableLiteWarning, tableFullProps, tableFullSlots };

package/dist/components/base/toast/toast.js

@@ -65,7 +65,7 @@ function showToast(message) {
  * Note: This is not a typical Vue component and needs to be registered before instantiating a Vue app.
  * Once registered, the toast will be globally available throughout your app.
  *
- * See https://gitlab-org.gitlab.io/gitlab-ui/ for detailed documentation.
+ * See https://design.gitlab.com/storybook for detailed documentation.
  */
 var toast = {
   install(Vue) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "114.5.0",
+  "version": "114.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -110,7 +110,7 @@ sanitization. This component exposes the `is-unsafe-link` prop for that purpose.
   href="data:text/plain;charset=utf-8,GitLab%20is%20awesome">Download</gl-button>
 ```
 
-[SafeLinkDirective docs]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/directives-safe-link-directive--default
+[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

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

@@ -1,7 +1,7 @@
 ## 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://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-form-form-textarea--with-character-count).
+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`.
 

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

@@ -46,7 +46,7 @@ The algorithm to match tokens with the input is very naive. If you need to use t
 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://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-type--default
-[`GlSearchBoxByClick`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-click--default
-[`GlTokenSelector`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-token-selector--default
-[`GlFilteredSearch`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-filtered-search--default
+[`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/link/link.md

@@ -150,5 +150,5 @@ sanitization. This component exposes the `is-unsafe-link` prop for that purpose.
 </gl-link>
 ```
 
-[SafeLinkDirective docs]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/directives-safe-link-directive--default
+[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

package/src/components/base/sorting/sorting.vue

@@ -1,4 +1,5 @@
 <script>
+import uniqueId from 'lodash/uniqueId';
 import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlButton from '../button/button.vue';
 import GlButtonGroup from '../button_group/button_group.vue';
@@ -94,7 +95,15 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      sortingListboxId: uniqueId('sorting-listbox-'),
+    };
+  },
   computed: {
+    sortingListboxLabel() {
+      return translate('GlSorting.sortByLabel', 'Sort by:');
+    },
     localSortDirection() {
       return this.isAscending ? 'sort-lowest' : 'sort-highest';
     },
@@ -146,8 +155,10 @@ export default {
       :class="dropdownClass"
       placement="bottom-end"
       :block="block"
+      :toggle-aria-labelled-by="sortingListboxId"
       @select="onSortByChanged"
     />
+    <span :id="sortingListboxId" class="gl-sr-only">{{ sortingListboxLabel }}</span>
     <gl-button
       v-gl-tooltip
       :title="sortDirectionText"

package/src/components/base/table/constants.js

@@ -45,4 +45,4 @@ export const tableFullProps = [
 ];
 
 export const glTableLiteWarning =
-  'This GlTable could be a GlTableLite component, please consider using GlTableLite instead of GlTable to reduce the page bundlesize more about this here: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-table-table-lite--default';
+  'This GlTable could be a GlTableLite component, please consider using GlTableLite instead of GlTable to reduce the page bundlesize more about this here: https://design.gitlab.com/storybook?path=/docs/base-table-table-lite--default';

package/src/components/base/toast/toast.js

@@ -79,7 +79,7 @@ function showToast(message, options = {}) {
  * Note: This is not a typical Vue component and needs to be registered before instantiating a Vue app.
  * Once registered, the toast will be globally available throughout your app.
  *
- * See https://gitlab-org.gitlab.io/gitlab-ui/ for detailed documentation.
+ * See https://design.gitlab.com/storybook for detailed documentation.
  */
 export default {
   install(Vue) {

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

@@ -2,6 +2,6 @@
 
 **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://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-area-chart--default)
+_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/translations.js

@@ -31,6 +31,7 @@ export default {
   'GlProgressBar.ariaLabel': 'Progress bar',
   'GlSearchBoxByType.clearButtonTitle': 'Clear',
   'GlSearchBoxByType.input.placeholder': 'Search',
+  'GlSorting.sortByLabel': 'Sort by:',
   'GlSorting.sortAscending': 'Sort direction: ascending',
   'GlSorting.sortDescending': 'Sort direction: descending',
   'GlToken.closeButtonTitle': 'Remove',