@gitlab/ui 66.11.0 → 66.13.0

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

@@ -31,7 +31,12 @@ const tableItemsMock = [
   },
 ];
 
-const generateProps = ({ items = tableItemsMock, fields = fieldsMock } = {}) => ({
+const generateProps = ({
+  stickyHeader = false,
+  items = tableItemsMock,
+  fields = fieldsMock,
+} = {}) => ({
+  stickyHeader,
   items,
   fields,
 });
@@ -40,7 +45,8 @@ const Template = (args, { argTypes }) => ({
   components: { GlTableLite },
   props: Object.keys(argTypes),
   template: `
-    <gl-table-lite  
+    <gl-table-lite
+    :sticky-header="stickyHeader"
     :items="items"
     :fields="fields" />
   `,
@@ -59,5 +65,10 @@ export default {
       },
     },
   },
-  argTypes: {},
+  argTypes: {
+    stickyHeader: {
+      options: [false, true],
+      control: 'boolean',
+    },
+  },
 };

package/src/components/base/table_lite/table_lite.vue

@@ -16,10 +16,18 @@ export default {
       required: false,
       default: null,
     },
+    stickyHeader: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
+    stickyHeaderClass() {
+      return this.stickyHeader ? 'gl-table--sticky-header' : null;
+    },
     localTableClass() {
-      return ['gl-table', this.tableClass];
+      return ['gl-table', this.tableClass, this.stickyHeaderClass];
     },
   },
 };

package/src/utils/constants.js

@@ -151,6 +151,13 @@ export const datepickerSizeOptionsMap = {
   medium: 'md',
 };
 
+export const datepickerWidthOptionsMap = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl',
+};
+
 // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
 export const iconSizeOptions = glIconSizesVariable.split(' ').map(Number);