@gitlab/ui 32.47.0 → 32.51.0

package/src/components/base/keyset_pagination/keyset_pagination.vue

@@ -16,47 +16,79 @@ export default {
     // GraphQL type, allowing the returned `pageInfo` object to
     // be bound directly to this component:
     // `<gl-keyset-pagination v-bind="pageInfo">`
+    /**
+     * Whether or not the "Prev" button should be enabled
+     */
     hasPreviousPage: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Whether or not the "Next" button should be enabled
+     */
     hasNextPage: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * A cursor that points to the first item in the current page.
+     * Will be passed as an event parameter when the "prev" event is fired.
+     */
     startCursor: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * A cursor that points to the last item in the current page.
+     * Will be passed as an event parameter when the "next" event is fired.
+     */
     endCursor: {
       type: String,
       required: false,
       default: null,
     },
-
+    /**
+     * The text that will be rendered inside the "Prev" button.
+     * It\'s important to provide this parameter since the default text is not translatable.
+     */
     prevText: {
       type: String,
       required: false,
       default: 'Prev',
     },
+    /**
+     * A link that will be used as the "Prev" button\'s "href" attribute.
+     * If provided, the "Prev" button renders as a link button; otherwise, it is rendered as a regular button.
+     */
     prevButtonLink: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * The text that will be rendered inside the "Next" button.
+     * It\'s important to provide this parameter since the default text is not translatable.
+     */
     nextText: {
       type: String,
       required: false,
       default: 'Next',
     },
+    /**
+     * A link that will be used as the "Next" button\'s "href" attribute.
+     * If provided, the "Next" button renders as a link button; otherwise, it is rendered as a regular button.
+     */
     nextButtonLink: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * Whether or not both buttons should be disabled (regardless of the "hasPreviousPage" and "hasNextPage" values).
+     */
     disabled: {
       type: Boolean,
       required: false,
@@ -74,6 +106,7 @@ export default {
       data-testid="prevButton"
       @click="$emit('prev', startCursor)"
     >
+      <!-- @slot Used to customize the appearance of the "Prev" button -->
       <slot name="previous-button-content">
         <div class="gl-display-flex gl-align-center">
           <gl-icon name="chevron-left" />
@@ -87,6 +120,7 @@ export default {
       data-testid="nextButton"
       @click="$emit('next', endCursor)"
     >
+      <!-- @slot Used to customize the appearance of the "Next" button -->
       <slot name="next-button-content">
         <div class="gl-display-flex gl-align-center">
           {{ nextText }}

package/src/components/base/modal/modal.documentation.js

@@ -1,48 +1,6 @@
-import examples from './examples';
 import description from './modal.md';
 
 export default {
-  bootstrapComponent: 'b-modal',
   followsDesignSystem: true,
   description,
-  examples,
-  slots: [
-    {
-      name: 'modal-header',
-      description:
-        'Entire modal header container contents (including the close button on the top right corner)',
-    },
-    {
-      name: 'modal-title',
-      description: 'Modal title. If modal-header slot is used, this slot will not be shown.',
-    },
-    {
-      name: 'modal-header-close',
-      description:
-        'Content of Modal header close button. If modal-header slot is used, this slot will not be shown.',
-    },
-    {
-      name: 'modal-footer',
-      description:
-        'Populated via props: modal-action-primary, modal-action-cancel and modal-action-secondary.',
-    },
-  ],
-  events: [
-    {
-      event: '@primary',
-      description: 'Emitted when clicked on modal-action-primary',
-    },
-    {
-      event: '@secondary',
-      description: 'Emitted when clicked on modal-action-secondary',
-    },
-    {
-      event: '@canceled',
-      description: 'Emitted when clicked on modal-action-cancel',
-    },
-    {
-      event: '@change',
-      description: 'Emitted when the modal visibility changes',
-    },
-  ],
 };

package/src/components/base/modal/modal.md

@@ -1,8 +1,3 @@
-# Modal
-
-<!-- STORY -->
-## Usage
-
 Modals are used to reveal critical information, show information without losing context, or when the
 system requires a user response. Modals can also fragment a complex workflow into simpler steps and
 should serve a single purpose dedicated to completing the user’s task.
@@ -22,7 +17,7 @@ The `modal-footer` slot should only be populated via props: `action-primary`, `a
 `action-cancel`. These props allow you to handle how a primary, secondary and cancel button will
 behave in the modals footer. The props receive an object as such:
 
-~~~js
+```js
 {
   text: 'Save Changes',
   attributes: [
@@ -32,4 +27,4 @@ behave in the modals footer. The props receive an object as such:
     ...
   ]
 }
-~~~
+```

package/src/components/base/modal/modal.stories.js

@@ -1,19 +1,8 @@
-import { withKnobs, select, number, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlModal, GlModalDirective, GlButton } from '../../../../index';
 import { variantOptionsWithNoDefault } from '../../../utils/constants';
 import readme from './modal.md';
 
-const components = {
-  GlModal,
-  GlButton,
-};
-
-const directives = {
-  GlModalDirective,
-};
-
-function generateTemplate({ props = {}, slots = {} } = {}) {
+const generateTemplate = ({ props = {}, slots = {} } = {}) => {
   const extraProps = Object.entries(props)
     .map(([key, value]) => `:${key}="${value}"`)
     .join('\n        ');
@@ -51,97 +40,130 @@ function generateTemplate({ props = {}, slots = {} } = {}) {
       </gl-modal>
     </div>
   `;
-}
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { GlModal, GlButton },
+  directives: { GlModalDirective },
+  props: Object.keys(argTypes),
+  template: generateTemplate(),
+});
 
-function generateProps({
+const generateProps = ({
   variant = variantOptionsWithNoDefault.default,
   contentPagraphs = 1,
   scrollable = false,
   visible = false,
-} = {}) {
-  return {
+} = {}) => ({
+  headerBgVariant: variant,
+  headerBorderVariant: variant,
+  headerTextVariant: variant,
+  bodyBgVariant: variant,
+  bodyTextVariant: variant,
+  footerBgVariant: variant,
+  footerBorderVariant: variant,
+  footerTextVariant: variant,
+  contentParagraphs: contentPagraphs,
+  scrollable,
+  visible,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const OpenedModal = Template.bind({});
+OpenedModal.args = generateProps({ visible: true });
+
+export const WithScrollingContent = Template.bind({});
+WithScrollingContent.args = generateProps({
+  contentPagraphs: 100,
+  scrollable: true,
+  visible: true,
+});
+
+export const WithAHeader = (args, { argTypes }) => ({
+  components: { GlModal, GlButton },
+  directives: { GlModalDirective },
+  props: Object.keys(argTypes),
+  template: generateTemplate({
+    slots: {
+      'modal-header': '<h4>A custom header</h4>',
+    },
+  }),
+});
+WithAHeader.args = generateProps({ visible: true });
+
+export const WithoutAFooter = (args, { argTypes }) => ({
+  components: { GlModal, GlButton },
+  directives: { GlModalDirective },
+  props: Object.keys(argTypes),
+  template: generateTemplate({
+    props: { 'hide-footer': true },
+  }),
+});
+WithoutAFooter.args = generateProps({ visible: true });
+
+export default {
+  title: 'base/modal',
+  components: { GlModal, GlButton },
+  directives: { GlModalDirective },
+  bootstrapComponent: 'b-modal',
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
     headerBgVariant: {
-      type: String,
-      default: select('header bg', variantOptionsWithNoDefault, variant),
+      control: {
+        type: 'select',
+        options: variantOptionsWithNoDefault,
+      },
     },
     headerBorderVariant: {
-      type: String,
-      default: select('header border', variantOptionsWithNoDefault, variant),
+      control: {
+        type: 'select',
+        options: variantOptionsWithNoDefault,
+      },
     },
     headerTextVariant: {
-      type: String,
-      default: select('header text', variantOptionsWithNoDefault, variant),
+      control: {
+        type: 'select',
+        options: variantOptionsWithNoDefault,
+      },
     },
     bodyBgVariant: {
-      type: String,
-      default: select('body bg', variantOptionsWithNoDefault, variant),
+      control: {
+        type: 'select',
+        options: variantOptionsWithNoDefault,
+      },
     },
     bodyTextVariant: {
-      type: String,
-      default: select('body text', variantOptionsWithNoDefault, variant),
+      control: {
+        type: 'select',
+        options: variantOptionsWithNoDefault,
+      },
     },
     footerBgVariant: {
-      type: String,
-      default: select('footer bg', variantOptionsWithNoDefault, variant),
+      control: {
+        type: 'select',
+        options: variantOptionsWithNoDefault,
+      },
     },
     footerBorderVariant: {
-      type: String,
-      default: select('footer border', variantOptionsWithNoDefault, variant),
+      control: {
+        type: 'select',
+        options: variantOptionsWithNoDefault,
+      },
     },
     footerTextVariant: {
-      type: String,
-      default: select('footer text', variantOptionsWithNoDefault, variant),
-    },
-    contentParagraphs: {
-      type: Number,
-      default: number('content paragraphs', contentPagraphs),
-    },
-    scrollable: {
-      type: Boolean,
-      default: boolean('scrollable', scrollable),
-    },
-    visible: {
-      type: Boolean,
-      default: visible,
-    },
-  };
-}
-
-documentedStoriesOf('base/modal', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    directives,
-    template: generateTemplate(),
-  }))
-  .add('opened modal', () => ({
-    props: generateProps({ visible: true }),
-    components,
-    directives,
-    template: generateTemplate(),
-  }))
-  .add('with scrolling content', () => ({
-    props: generateProps({ contentPagraphs: 100, scrollable: true, visible: true }),
-    components,
-    directives,
-    template: generateTemplate(),
-  }))
-  .add('with a header', () => ({
-    props: generateProps({ visible: true }),
-    components,
-    directives,
-    template: generateTemplate({
-      slots: {
-        'modal-header': '<h4>A custom header</h4>',
+      control: {
+        type: 'select',
+        options: variantOptionsWithNoDefault,
       },
-    }),
-  }))
-  .add('without a footer', () => ({
-    props: generateProps({ visible: true }),
-    components,
-    directives,
-    template: generateTemplate({
-      props: { 'hide-footer': true },
-    }),
-  }));
+    },
+  },
+};

package/src/components/base/modal/modal.vue

@@ -80,6 +80,22 @@ export default {
       default: false,
     },
   },
+  computed: {
+    shouldRenderModalOk() {
+      return Boolean(this.$slots['modal-ok']);
+    },
+    shouldRenderModalCancel() {
+      return Boolean(this.$slots['modal-cancel']);
+    },
+    shouldRenderModalFooter() {
+      return Boolean(
+        this.actionCancel ||
+          this.actionSecondary ||
+          this.actionPrimary ||
+          this.$slots['modal-footer']
+      );
+    },
+  },
   methods: {
     show() {
       this.$refs.modal.show();
@@ -139,6 +155,10 @@ export default {
 </script>
 
 <template>
+  <!-- 
+  Emitted when the modal visibility changes
+  @event change
+ -->
   <b-modal
     :id="modalId"
     ref="modal"
@@ -154,45 +174,66 @@ export default {
     @cancel="canceled"
     @change="$emit('change', $event)"
   >
-    <slot></slot>
+    <template #default>
+      <slot name="default"></slot>
+    </template>
     <template #modal-header>
+      <!-- @slot Entire modal header container contents (including the close button on the top right corner) -->
       <slot name="modal-header">
         <h4 class="modal-title">
+          <!-- @slot Modal title. If modal-header slot is used, this slot will not be shown. -->
           <slot name="modal-title">{{ title }}</slot>
         </h4>
       </slot>
+      <!-- @slot Content of Modal header close button. If modal-header slot is used, this slot will not be shown. -->
       <close-button ref="close-button" :label="dismissLabel" @click="close" />
     </template>
-    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-    <slot slot="modal-ok" name="modal-ok"></slot>
-    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-    <slot slot="modal-cancel" name="modal-cancel"></slot>
-    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-    <slot slot="modal-footer" name="modal-footer">
-      <gl-button
-        v-if="actionCancel"
-        class="js-modal-action-cancel"
-        v-bind="buttonBinding(actionCancel, 'actionCancel')"
-        @click="cancel"
-      >
-        {{ actionCancel.text }}
-      </gl-button>
-      <gl-button
-        v-if="actionSecondary"
-        class="js-modal-action-secondary"
-        v-bind="buttonBinding(actionSecondary, 'actionSecondary')"
-        @click="secondary"
-      >
-        {{ actionSecondary.text }}
-      </gl-button>
-      <gl-button
-        v-if="actionPrimary"
-        class="js-modal-action-primary"
-        v-bind="buttonBinding(actionPrimary, 'actionPrimary')"
-        @click="ok"
-      >
-        {{ actionPrimary.text }}
-      </gl-button>
-    </slot>
+    <template v-if="shouldRenderModalOk" #modal-ok>
+      <slot name="modal-ok"></slot>
+    </template>
+    <template v-if="shouldRenderModalCancel" #modal-cancel>
+      <slot name="modal-cancel"></slot>
+    </template>
+    <!-- @slot Populated via props: modal-action-primary, modal-action-cancel and modal-action-secondary. -->
+    <template v-if="shouldRenderModalFooter" #modal-footer>
+      <slot name="modal-footer">
+        <!--
+        Emitted when clicked on modal-action-cancel
+        @event canceled
+       -->
+        <gl-button
+          v-if="actionCancel"
+          class="js-modal-action-cancel"
+          v-bind="buttonBinding(actionCancel, 'actionCancel')"
+          @click="cancel"
+        >
+          {{ actionCancel.text }}
+        </gl-button>
+        <!--
+        Emitted when clicked on modal-action-secondary
+        @event secondary
+       -->
+        <gl-button
+          v-if="actionSecondary"
+          class="js-modal-action-secondary"
+          v-bind="buttonBinding(actionSecondary, 'actionSecondary')"
+          @click="secondary"
+        >
+          {{ actionSecondary.text }}
+        </gl-button>
+        <!--
+        Emitted when clicked on modal-action-primary
+        @event primary
+       -->
+        <gl-button
+          v-if="actionPrimary"
+          class="js-modal-action-primary"
+          v-bind="buttonBinding(actionPrimary, 'actionPrimary')"
+          @click="ok"
+        >
+          {{ actionPrimary.text }}
+        </gl-button>
+      </slot>
+    </template>
   </b-modal>
 </template>

package/src/components/charts/gauge/gauge.documentation.js

@@ -1,8 +1,5 @@
-import examples from './examples';
 import * as description from './gauge.md';
 
 export default {
   description,
-  examples,
-  propsInfo: {},
 };

package/src/components/charts/gauge/gauge.md

@@ -1,5 +1,3 @@
-### Gauge Chart
-
 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.