@gitlab/ui 82.0.0 → 82.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/components/base/popover/popover.js +6 -3
  3. package/dist/index.css +1 -1
  4. package/dist/index.css.map +1 -1
  5. package/dist/tailwind.css +1 -1
  6. package/dist/tailwind.css.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/base/popover/popover.scss +7 -0
  9. package/src/components/base/popover/popover.vue +17 -3
package/dist/tailwind.css CHANGED
@@ -1,2 +1,2 @@
1
- .gl-fixed{position:fixed}.\!gl-absolute{position:absolute!important}.gl-absolute{position:absolute}.gl-relative{position:relative}.gl-bottom-0{bottom:0}.gl-bottom-2{bottom:.25rem}.gl-left-0{left:0}.gl-right-2{right:.25rem}.gl-fill-current{fill:currentColor}.gl-fill-gray-100{fill:var(--gray-100,#dcdcde)}.gl-fill-icon-danger{fill:var(--gl-icon-color-danger,var(--gl-color-red-600,#c91c00))}.gl-fill-icon-default{fill:var(--gl-icon-color-default,var(--gl-color-neutral-700,#535158))}.gl-fill-icon-disabled{fill:var(--gl-icon-color-disabled,var(--gl-color-neutral-300,#a4a3a8))}.gl-fill-icon-info{fill:var(--gl-icon-color-info,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-link{fill:var(--gl-icon-color-link,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-strong{fill:var(--gl-icon-color-strong,var(--gl-color-neutral-900,#333238))}.gl-fill-icon-subtle{fill:var(--gl-icon-color-subtle,var(--gl-color-neutral-500,#737278))}.gl-fill-icon-success{fill:var(--gl-icon-color-success,var(--gl-color-green-600,#217645))}.gl-fill-icon-warning{fill:var(--gl-icon-color-warning,var(--gl-color-orange-600,#9e5400))}.gl-text-blue-100{color:var(--blue-100,#cbe2f9)}.gl-text-blue-500{color:var(--blue-500,#1f75cb)}.gl-text-blue-900{color:var(--blue-900,#033464)}.gl-text-danger{color:var(--gl-text-color-danger,var(--gl-color-red-600,#c91c00))}.gl-text-gray-400{color:var(--gray-400,#89888d)}.gl-text-gray-500{color:var(--gray-500,#737278)}.gl-text-gray-600{color:var(--gray-600,#626168)}.gl-text-gray-700{color:var(--gray-700,#535158)}.gl-text-gray-900{color:var(--gray-900,#333238)}.gl-text-gray-950{color:var(--gray-950,#1f1e24)}.gl-text-green-500{color:var(--green-500,#108548)}.gl-text-green-600{color:var(--green-600,#217645)}.gl-text-orange-500{color:var(--orange-500,#ab6100)}.gl-text-red-300{color:var(--red-300,#f57f6c)}.gl-text-red-500{color:var(--red-500,#dd2b0e)}.gl-text-red-600{color:var(--red-600,#c91c00)}.gl-text-secondary{color:var(--gl-text-secondary,#737278)}.gl-text-strong{color:var(--gl-text-color-strong,var(--gl-color-neutral-950,#1f1e24))}.gl-text-subtle{color:var(--gl-text-color-subtle,var(--gl-color-neutral-600,#626168))}.gl-text-white{color:var(--white,#fff)}
1
+ .gl-fixed{position:fixed}.\!gl-absolute{position:absolute!important}.gl-absolute{position:absolute}.gl-relative{position:relative}.gl-bottom-0{bottom:0}.gl-bottom-2{bottom:.25rem}.gl-left-0{left:0}.gl-right-2{right:.25rem}.gl-float-right{float:right}.gl-fill-current{fill:currentColor}.gl-fill-gray-100{fill:var(--gray-100,#dcdcde)}.gl-fill-icon-danger{fill:var(--gl-icon-color-danger,var(--gl-color-red-600,#c91c00))}.gl-fill-icon-default{fill:var(--gl-icon-color-default,var(--gl-color-neutral-700,#535158))}.gl-fill-icon-disabled{fill:var(--gl-icon-color-disabled,var(--gl-color-neutral-300,#a4a3a8))}.gl-fill-icon-info{fill:var(--gl-icon-color-info,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-link{fill:var(--gl-icon-color-link,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-strong{fill:var(--gl-icon-color-strong,var(--gl-color-neutral-900,#333238))}.gl-fill-icon-subtle{fill:var(--gl-icon-color-subtle,var(--gl-color-neutral-500,#737278))}.gl-fill-icon-success{fill:var(--gl-icon-color-success,var(--gl-color-green-600,#217645))}.gl-fill-icon-warning{fill:var(--gl-icon-color-warning,var(--gl-color-orange-600,#9e5400))}.gl-text-blue-100{color:var(--blue-100,#cbe2f9)}.gl-text-blue-500{color:var(--blue-500,#1f75cb)}.gl-text-blue-900{color:var(--blue-900,#033464)}.gl-text-danger{color:var(--gl-text-color-danger,var(--gl-color-red-600,#c91c00))}.gl-text-gray-400{color:var(--gray-400,#89888d)}.gl-text-gray-500{color:var(--gray-500,#737278)}.gl-text-gray-600{color:var(--gray-600,#626168)}.gl-text-gray-700{color:var(--gray-700,#535158)}.gl-text-gray-900{color:var(--gray-900,#333238)}.gl-text-gray-950{color:var(--gray-950,#1f1e24)}.gl-text-green-500{color:var(--green-500,#108548)}.gl-text-green-600{color:var(--green-600,#217645)}.gl-text-orange-500{color:var(--orange-500,#ab6100)}.gl-text-red-300{color:var(--red-300,#f57f6c)}.gl-text-red-500{color:var(--red-500,#dd2b0e)}.gl-text-red-600{color:var(--red-600,#c91c00)}.gl-text-secondary{color:var(--gl-text-secondary,#737278)}.gl-text-strong{color:var(--gl-text-color-strong,var(--gl-color-neutral-950,#1f1e24))}.gl-text-subtle{color:var(--gl-text-color-subtle,var(--gl-color-neutral-600,#626168))}.gl-text-white{color:var(--white,#fff)}
2
2
  /*# sourceMappingURL=tailwind.css.map */
package/dist/tailwind.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["tailwind.css"],"names":[],"mappings":"AAAA,UAAA,cAAmB,CAAnB,eAAA,2BAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,QAAmB,CAAnB,aAAA,aAAmB,CAAnB,WAAA,MAAmB,CAAnB,YAAA,YAAmB,CAAnB,iBAAA,iBAAmB,CAAnB,kBAAA,4BAAmB,CAAnB,qBAAA,gEAAmB,CAAnB,sBAAA,qEAAmB,CAAnB,uBAAA,sEAAmB,CAAnB,mBAAA,+DAAmB,CAAnB,mBAAA,+DAAmB,CAAnB,qBAAA,oEAAmB,CAAnB,qBAAA,oEAAmB,CAAnB,sBAAA,mEAAmB,CAAnB,sBAAA,oEAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,gBAAA,iEAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,oBAAA,+BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,mBAAA,sCAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,eAAA,uBAAmB","file":"tailwind.css","sourcesContent":["@tailwind utilities;\n"]}
1
+ {"version":3,"sources":["tailwind.css"],"names":[],"mappings":"AAAA,UAAA,cAAmB,CAAnB,eAAA,2BAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,QAAmB,CAAnB,aAAA,aAAmB,CAAnB,WAAA,MAAmB,CAAnB,YAAA,YAAmB,CAAnB,gBAAA,WAAmB,CAAnB,iBAAA,iBAAmB,CAAnB,kBAAA,4BAAmB,CAAnB,qBAAA,gEAAmB,CAAnB,sBAAA,qEAAmB,CAAnB,uBAAA,sEAAmB,CAAnB,mBAAA,+DAAmB,CAAnB,mBAAA,+DAAmB,CAAnB,qBAAA,oEAAmB,CAAnB,qBAAA,oEAAmB,CAAnB,sBAAA,mEAAmB,CAAnB,sBAAA,oEAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,gBAAA,iEAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,oBAAA,+BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,mBAAA,sCAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,eAAA,uBAAmB","file":"tailwind.css","sourcesContent":["@tailwind utilities;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "82.0.0",
3
+ "version": "82.0.1",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
package/src/components/base/popover/popover.scss CHANGED
@@ -67,12 +67,19 @@ $gl-popover-max-width: $grid-size * 35;
67
67
  @include gl-bg-white;
68
68
  @include gl-border-bottom-0;
69
69
  @include gl-pb-0;
70
+ }
71
+
72
+ &.has-title .popover-header {
70
73
  @include gl-overflow-anywhere;
71
74
  display: flex;
72
75
  align-items: flex-start;
73
76
  justify-content: space-between;
74
77
  }
75
78
 
79
+ &.has-close-button:not(.has-title) .popover-header {
80
+ padding-top: $gl-spacing-scale-2;
81
+ }
82
+
76
83
  .popover-body {
77
84
  @include gl-py-3;
78
85
  @include gl-px-4;
package/src/components/base/popover/popover.vue CHANGED
@@ -53,11 +53,21 @@ export default {
53
53
  },
54
54
  },
55
55
  computed: {
56
+ hasTitle() {
57
+ return this.$scopedSlots.title || this.title;
58
+ },
56
59
  customClass() {
57
- return ['gl-popover', ...this.cssClasses].join(' ');
60
+ return [
61
+ 'gl-popover',
62
+ this.hasTitle && 'has-title',
63
+ this.showCloseButton && 'has-close-button',
64
+ ...this.cssClasses,
65
+ ]
66
+ .filter(Boolean)
67
+ .join(' ');
58
68
  },
59
69
  shouldShowTitle() {
60
- return this.$scopedSlots.title || this.title || this.showCloseButton;
70
+ return this.hasTitle || this.showCloseButton;
61
71
  },
62
72
  },
63
73
  methods: {
@@ -89,7 +99,11 @@ export default {
89
99
  {{ title }}
90
100
  </slot>
91
101
  <div v-if="showCloseButton" class="gl-mt-n2 gl-mr-n3 gl-ml-3 gl-h-0">
92
- <close-button data-testid="close-button" @click="close" />
102
+ <close-button
103
+ :class="{ 'gl-float-right gl-mt-2': !hasTitle }"
104
+ data-testid="close-button"
105
+ @click="close"
106
+ />
93
107
  </div>
94
108
  </template>
95
109
  <slot></slot>