@gitlab/ui 36.5.1 → 36.6.0

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 (11) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/index.css +2 -2
  3. package/dist/index.css.map +1 -1
  4. package/dist/utility_classes.css +1 -1
  5. package/dist/utility_classes.css.map +1 -1
  6. package/package.json +9 -9
  7. package/scss_to_js/scss_variables.js +1 -0
  8. package/scss_to_js/scss_variables.json +5 -0
  9. package/src/scss/utilities.scss +40 -0
  10. package/src/scss/utility-mixins/border.scss +21 -0
  11. package/src/scss/variables.scss +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "36.5.1",
3
+ "version": "36.6.0",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -88,15 +88,15 @@
88
88
  "@rollup/plugin-commonjs": "^11.1.0",
89
89
  "@rollup/plugin-node-resolve": "^7.1.3",
90
90
  "@rollup/plugin-replace": "^2.3.2",
91
- "@storybook/addon-a11y": "6.4.15",
92
- "@storybook/addon-docs": "6.4.15",
93
- "@storybook/addon-essentials": "6.4.15",
91
+ "@storybook/addon-a11y": "6.4.19",
92
+ "@storybook/addon-docs": "6.4.19",
93
+ "@storybook/addon-essentials": "6.4.19",
94
94
  "@storybook/addon-knobs": "6.4.0",
95
- "@storybook/addon-storyshots": "6.4.15",
96
- "@storybook/addon-storyshots-puppeteer": "6.4.15",
97
- "@storybook/addon-viewport": "6.4.15",
98
- "@storybook/theming": "6.4.15",
99
- "@storybook/vue": "6.4.15",
95
+ "@storybook/addon-storyshots": "6.4.19",
96
+ "@storybook/addon-storyshots-puppeteer": "6.4.19",
97
+ "@storybook/addon-viewport": "6.4.19",
98
+ "@storybook/theming": "6.4.19",
99
+ "@storybook/vue": "6.4.19",
100
100
  "@vue/test-utils": "1.3.0",
101
101
  "autoprefixer": "^9.7.6",
102
102
  "babel-jest": "^26.6.3",
package/scss_to_js/scss_variables.js CHANGED
@@ -276,6 +276,7 @@ export const glFontSizeMonospaceSm = '0.6875rem'
276
276
  export const glMonospaceFont = 'Menlo, DejaVu Sans Mono, Liberation Mono, Consolas, Ubuntu Mono, Courier New, andale mono, lucida console, monospace'
277
277
  export const glRegularFont = '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji'
278
278
  export const glFonts = '("monospace": "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace, "regular": -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")'
279
+ export const borderColor = '#dbdbdb'
279
280
  export const glBorderSize1 = '1px'
280
281
  export const glBorderSize2 = '2px'
281
282
  export const glBorderSize3 = '3px'
package/scss_to_js/scss_variables.json CHANGED
@@ -1441,6 +1441,11 @@
1441
1441
  ],
1442
1442
  "compiledValue": "(\"monospace\": \"Menlo\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Consolas\", \"Ubuntu Mono\", \"Courier New\", \"andale mono\", \"lucida console\", monospace, \"regular\": -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans\", Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\")"
1443
1443
  },
1444
+ {
1445
+ "name": "$border-color",
1446
+ "value": "$gray-100",
1447
+ "compiledValue": "#dbdbdb"
1448
+ },
1444
1449
  {
1445
1450
  "name": "$gl-border-size-1",
1446
1451
  "value": "1px",
package/src/scss/utilities.scss CHANGED
@@ -865,6 +865,46 @@
865
865
  .gl-bg-chevron-down\! {
866
866
  background-image: url($gl-icon-chevron-down) !important
867
867
  }
868
+ .gl-border {
869
+ border: solid $gl-border-size-1 $border-color;
870
+ }
871
+
872
+ .gl-border\! {
873
+ border: solid $gl-border-size-1 $border-color !important;
874
+ }
875
+
876
+ .gl-border-t {
877
+ border-top: solid $gl-border-size-1 $border-color;
878
+ }
879
+
880
+ .gl-border-t\! {
881
+ border-top: solid $gl-border-size-1 $border-color !important;
882
+ }
883
+
884
+ .gl-border-b {
885
+ border-bottom: solid $gl-border-size-1 $border-color;
886
+ }
887
+
888
+ .gl-border-b\! {
889
+ border-bottom: solid $gl-border-size-1 $border-color !important;
890
+ }
891
+
892
+ .gl-border-l {
893
+ border-left: solid $gl-border-size-1 $border-color;
894
+ }
895
+
896
+ .gl-border-l\! {
897
+ border-left: solid $gl-border-size-1 $border-color !important;
898
+ }
899
+
900
+ .gl-border-r {
901
+ border-right: solid $gl-border-size-1 $border-color;
902
+ }
903
+
904
+ .gl-border-r\! {
905
+ border-right: solid $gl-border-size-1 $border-color !important;
906
+ }
907
+
868
908
  .gl-border-none {
869
909
  border-style: none;
870
910
  }
package/src/scss/utility-mixins/border.scss CHANGED
@@ -3,6 +3,27 @@
3
3
  *
4
4
  * naming convention: gl-border-{position}-{style}
5
5
  */
6
+
7
+ @mixin gl-border {
8
+ border: solid $gl-border-size-1 $border-color;
9
+ }
10
+
11
+ @mixin gl-border-t {
12
+ border-top: solid $gl-border-size-1 $border-color;
13
+ }
14
+
15
+ @mixin gl-border-b {
16
+ border-bottom: solid $gl-border-size-1 $border-color;
17
+ }
18
+
19
+ @mixin gl-border-l {
20
+ border-left: solid $gl-border-size-1 $border-color;
21
+ }
22
+
23
+ @mixin gl-border-r {
24
+ border-right: solid $gl-border-size-1 $border-color;
25
+ }
26
+
6
27
  @mixin gl-border-none {
7
28
  border-style: none;
8
29
  }
package/src/scss/variables.scss CHANGED
@@ -391,6 +391,8 @@ $gl-fonts: (
391
391
  'regular': $gl-regular-font,
392
392
  );
393
393
 
394
+ $border-color: $gray-100 !default;
395
+
394
396
  // use px for borders rather than rem
395
397
  // we don't want borders to scale with font size
396
398
  // 1px can end up being rounded to 0 after