@gitlab/ui 66.10.1 → 66.12.0

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 19 Sep 2023 15:15:08 GMT
+// Generated on Thu, 21 Sep 2023 06:33:18 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,7 +1,17 @@
 
 // Do not edit directly
-// Generated on Tue, 19 Sep 2023 15:15:08 GMT
+// Generated on Thu, 21 Sep 2023 06:33:18 GMT
 
+$gl-line-height-52: 3.25rem;
+$gl-line-height-44: 2.75rem;
+$gl-line-height-42: 2.625rem;
+$gl-line-height-36: 2.25rem;
+$gl-line-height-32: 2rem;
+$gl-line-height-28: 1.75rem;
+$gl-line-height-24: 1.5rem;
+$gl-line-height-20: 1.25rem;
+$gl-line-height-16: 1rem;
+$gl-line-height-12: 0.75rem;
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;
 $brand-gray-03: #74717a !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.10.1",
+  "version": "66.12.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -88,8 +88,8 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.22.19",
-    "@babel/preset-env": "^7.22.15",
+    "@babel/core": "^7.22.20",
+    "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",

package/src/components/base/avatar/avatar.scss

@@ -8,53 +8,48 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-border-gray-a-08;
   @include gl-overflow-hidden;
   @include gl-flex-shrink-0;
+  @include gl-line-height-ratio-1000;
 }
 
 @mixin gl-avatar-s16 {
   @include gl-w-5;
   @include gl-h-5;
-  @include gl-font-sm;
-  @include gl-line-height-normal;
+  font-size: map-get($gl-font-sizes, 100);
   @include gl-rounded-small;
 }
 
 @mixin gl-avatar-s24 {
   @include gl-w-6;
   @include gl-h-6;
-  @include gl-font-sm;
-  @include gl-line-height-normal;
+  font-size: map-get($gl-font-sizes, 400);
   @include gl-rounded-base;
 }
 
 @mixin gl-avatar-s32 {
   @include gl-w-7;
   @include gl-h-7;
-  @include gl-font-base;
-  @include gl-line-height-normal;
+  font-size: map-get($gl-font-sizes, 500);
   @include gl-rounded-base;
 }
 
 @mixin gl-avatar-s48 {
   @include gl-w-9;
   @include gl-h-9;
-  @include gl-font-size-h2;
-  @include gl-line-height-24;
+  font-size: map-get($gl-font-sizes, 600);
   @include gl-rounded-lg;
 }
 
 @mixin gl-avatar-s64 {
   @include gl-w-11;
   @include gl-h-11;
-  @include gl-font-size-h-display;
-  @include gl-line-height-32;
+  font-size: map-get($gl-font-sizes, 700);
   @include gl-rounded-lg;
 }
 
 @mixin gl-avatar-s96 {
   @include gl-w-13;
   @include gl-h-13;
-  @include gl-font-size-h-display-xl;
-  @include gl-line-height-52;
+  font-size: map-get($gl-font-sizes, 800);
   @include gl-rounded-lg;
 }
 

package/src/components/base/table/table.scss

@@ -27,9 +27,22 @@ table.gl-table {
       @include gl-focus;
       position: relative;
       z-index: 1;
+      background: $white;
+
+      &:hover {
+        background: $gray-50;
+      }
     }
   }
 
+  // Sticky header
+  &--sticky-header thead tr {
+    position: sticky;
+    top: -1px;
+    background: $white;
+    box-shadow: inset 0 -1px 0 $gray-100;
+  }
+
   .table-primary,
   .table-primary:hover {
     > td {

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

@@ -55,7 +55,17 @@ describe('GlTable', () => {
   it('adds gl-table class to tableClass prop', () => {
     factory({ props: { tableClass: 'test-class' } });
 
-    expect(findBTable().props().tableClass).toEqual(['gl-table', 'test-class']);
+    expect(findBTable().props().tableClass).toEqual(['gl-table', 'test-class', null]);
+  });
+
+  it('adds sticky header class to tableClass prop', () => {
+    factory({ props: { stickyHeader: true } });
+
+    expect(findBTable().props().tableClass).toEqual([
+      'gl-table',
+      undefined,
+      'gl-table--sticky-header',
+    ]);
   });
 
   it('adds gl-table fields to table prop', () => {

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

@@ -20,11 +20,13 @@ const tableItems = [
 ];
 
 const generateProps = ({
+  stickyHeader = false,
   fixed = false,
   footClone = false,
   stacked = false,
   caption = '',
 } = {}) => ({
+  stickyHeader,
   fixed,
   footClone,
   stacked,
@@ -36,6 +38,7 @@ export const Default = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   template: `
   <gl-table
+    :sticky-header="stickyHeader"
     :items="$options.items"
     :fields="$options.fields"
     :fixed="fixed"
@@ -84,6 +87,7 @@ export const WithFilter = (args, { argTypes }) => ({
       <gl-form-input v-model="filter" placeholder="Type to search" />
       <br />
       <gl-table
+              :sticky-header="stickyHeader"
               :items="$options.items"
               :fields="$options.fields"
               :filter=filter
@@ -104,6 +108,45 @@ export const WithFilter = (args, { argTypes }) => ({
 });
 WithFilter.args = generateProps();
 
+export const WithStickyHeader = (args, { argTypes }) => ({
+  components: { ...components, GlFormInput },
+  props: Object.keys(argTypes),
+  template: `<div class="gl-line-height-normal">
+      <gl-form-input v-model="filter" placeholder="Type to search" />
+      <br />
+      <gl-table
+              :sticky-header="stickyHeader"
+              :items="$options.items"
+              :fields="$options.fields"
+              :filter=filter
+              :fixed="fixed"
+              :stacked="stacked"
+              :foot-clone="footClone"
+              hover
+              selectable
+              selected-variant="primary"
+          />
+      </div>`,
+  items: [
+    ...tableItems,
+    ...tableItems,
+    ...tableItems,
+    ...tableItems,
+    ...tableItems,
+    ...tableItems,
+    ...tableItems,
+    ...tableItems,
+    ...tableItems,
+    ...tableItems,
+  ],
+  data() {
+    return {
+      filter: null,
+    };
+  },
+});
+WithStickyHeader.args = generateProps({ stickyHeader: true });
+
 export default {
   title: 'base/table/table',
   component: GlTable,
@@ -120,5 +163,9 @@ export default {
       options: ['sm', 'md', 'lg', 'xl', true, false],
       control: 'select',
     },
+    stickyHeader: {
+      options: [false, true],
+      control: 'boolean',
+    },
   },
 };

package/src/components/base/table/table.vue

@@ -26,10 +26,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];
     },
   },
   mounted() {

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

@@ -16,7 +16,17 @@ describe('GlTableLite', () => {
   it('adds gl-table class to tableClass prop', () => {
     factory({ tableClass: 'test-class' });
 
-    expect(findBTableLite().props().tableClass).toEqual(['gl-table', 'test-class']);
+    expect(findBTableLite().props().tableClass).toEqual(['gl-table', 'test-class', null]);
+  });
+
+  it('adds sticky header class to tableClass prop', () => {
+    factory({ stickyHeader: true });
+
+    expect(findBTableLite().props().tableClass).toEqual([
+      'gl-table',
+      undefined,
+      'gl-table--sticky-header',
+    ]);
   });
 
   it('adds gl-table fields to table prop', () => {

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];
     },
   },
 };