@instructure/ui-color-picker 8.32.2-snapshot-2 → 8.32.2-snapshot-4

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 (23) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/ColorPicker/index.js +1 -4
  3. package/es/ColorPicker/styles.js +5 -4
  4. package/es/ColorPicker/theme.js +2 -1
  5. package/es/ColorPreset/styles.js +4 -2
  6. package/es/ColorPreset/theme.js +4 -1
  7. package/lib/ColorPicker/index.js +1 -4
  8. package/lib/ColorPicker/styles.js +5 -4
  9. package/lib/ColorPicker/theme.js +2 -1
  10. package/lib/ColorPreset/styles.js +4 -2
  11. package/lib/ColorPreset/theme.js +4 -1
  12. package/package.json +25 -25
  13. package/src/ColorPicker/index.tsx +2 -2
  14. package/src/ColorPicker/styles.ts +5 -4
  15. package/src/ColorPicker/theme.ts +2 -1
  16. package/src/ColorPreset/styles.ts +4 -2
  17. package/src/ColorPreset/theme.ts +4 -1
  18. package/tsconfig.build.tsbuildinfo +1 -1
  19. package/types/ColorPicker/styles.d.ts.map +1 -1
  20. package/types/ColorPicker/theme.d.ts.map +1 -1
  21. package/types/ColorPreset/styles.d.ts +3 -1
  22. package/types/ColorPreset/styles.d.ts.map +1 -1
  23. package/types/ColorPreset/theme.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [8.32.2-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.32.1...v8.32.2-snapshot-2) (2023-01-02)
6
+ ## [8.32.2-snapshot-4](https://github.com/instructure/instructure-ui/compare/v8.32.1...v8.32.2-snapshot-4) (2023-01-03)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-color-picker
8
+
9
+ ### Bug Fixes
10
+
11
+ * **shared-types,ui-color-picker:** colorPicker css problem ([82ce9e3](https://github.com/instructure/instructure-ui/commit/82ce9e3cc43d566686a15838d95b5e6a81e86239))
9
12
 
10
13
 
11
14
 
package/es/ColorPicker/index.js CHANGED
@@ -112,12 +112,9 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
112
112
 
113
113
  this.renderCustomPopoverContent = () => {
114
114
  const _this$props = this.props,
115
- styles = _this$props.styles,
116
115
  children = _this$props.children,
117
116
  onChange = _this$props.onChange;
118
- return jsx("div", {
119
- css: styles === null || styles === void 0 ? void 0 : styles.popoverContent
120
- }, typeof children === 'function' && children(`#${this.mixedColorWithStrippedAlpha}`, newColor => {
117
+ return jsx("div", null, typeof children === 'function' && children(`#${this.mixedColorWithStrippedAlpha}`, newColor => {
121
118
  this.setState({
122
119
  mixedColor: colorToHex8(newColor).slice(1)
123
120
  });
package/es/ColorPicker/styles.js CHANGED
@@ -88,7 +88,8 @@ const generateStyle = (componentTheme, props, state) => {
88
88
  borderWidth: componentTheme.popoverContentBlockBorderWidth,
89
89
  borderColor: componentTheme.popoverSeparatorColor,
90
90
  marginTop: componentTheme.popoverContentBlockTopMargin,
91
- marginBottom: componentTheme.popoverContentBlockBottomMargin
91
+ marginBottom: componentTheme.popoverContentBlockBottomMargin,
92
+ paddingTop: componentTheme.popoverContentBlockTopPadding
92
93
  },
93
94
  popoverFooter: {
94
95
  label: 'colorPicker__popoverFooter',
@@ -107,11 +108,11 @@ const generateStyle = (componentTheme, props, state) => {
107
108
  popoverContentContainer: {
108
109
  label: 'colorPicker__popoverContentContainer',
109
110
  maxHeight: popoverMaxHeight || '100vh',
110
- overflow: 'scroll'
111
+ overflow: 'auto'
111
112
  },
112
113
  colorMixerButtonWrapper: {
113
- position: 'absolute',
114
- top: '2.69rem'
114
+ label: 'colorPicker__colorMixerButtonWrapper',
115
+ position: 'static'
115
116
  }
116
117
  };
117
118
  };
package/es/ColorPicker/theme.js CHANGED
@@ -63,8 +63,9 @@ const generateComponentTheme = theme => {
63
63
  labelRightMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
64
64
  popoverContentPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
65
65
  popoverContentBlockBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
66
- popoverContentBlockTopMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
66
+ popoverContentBlockTopMargin: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
67
67
  popoverContentBlockBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
68
+ popoverContentBlockTopPadding: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
68
69
  popoverFooterPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
69
70
  popoverFooterTopBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
70
71
  colorMixerButtonContainerLeftMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall
package/es/ColorPreset/styles.js CHANGED
@@ -68,7 +68,7 @@ const generateStyle = (componentTheme, props) => {
68
68
  label: 'colorPreset__popoverContent',
69
69
  padding: componentTheme.smallSpacing,
70
70
  maxHeight: (colorMixerSettings === null || colorMixerSettings === void 0 ? void 0 : colorMixerSettings.maxHeight) || '100vh',
71
- overflow: 'scroll'
71
+ overflow: 'auto'
72
72
  },
73
73
  popoverDivider: {
74
74
  label: 'colorPreset__popoverDivider',
@@ -82,7 +82,9 @@ const generateStyle = (componentTheme, props) => {
82
82
  borderTop: 'solid',
83
83
  borderWidth: componentTheme.smallBorder,
84
84
  borderColor: componentTheme.popoverDividerColor,
85
- margin: `${componentTheme.smallSpacing} 0 ${componentTheme.smallSpacing} 0`
85
+ marginTop: componentTheme.popoverContentBlockTopMargin,
86
+ marginBottom: componentTheme.popoverContentBlockBottomMargin,
87
+ paddingTop: componentTheme.popoverContentBlockTopPadding
86
88
  },
87
89
  popoverFooter: {
88
90
  label: 'colorPreset__popoverFooter',
package/es/ColorPreset/theme.js CHANGED
@@ -44,7 +44,10 @@ const generateComponentTheme = theme => {
44
44
  linear-gradient(45deg, transparent 75%, ${colors.tiara} 75%),
45
45
  linear-gradient(-45deg, transparent 75%, ${colors.tiara} 75%)`,
46
46
  checkerboardBackgroundSize: '.5rem .5rem',
47
- checkerboardBackgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px'
47
+ checkerboardBackgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
48
+ popoverContentBlockTopMargin: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
49
+ popoverContentBlockBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
50
+ popoverContentBlockTopPadding: spacing === null || spacing === void 0 ? void 0 : spacing.medium
48
51
  };
49
52
  return { ...componentVariables
50
53
  };
package/lib/ColorPicker/index.js CHANGED
@@ -124,12 +124,9 @@ let ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
124
124
 
125
125
  this.renderCustomPopoverContent = () => {
126
126
  const _this$props = this.props,
127
- styles = _this$props.styles,
128
127
  children = _this$props.children,
129
128
  onChange = _this$props.onChange;
130
- return (0, _emotion.jsx)("div", {
131
- css: styles === null || styles === void 0 ? void 0 : styles.popoverContent
132
- }, typeof children === 'function' && children(`#${this.mixedColorWithStrippedAlpha}`, newColor => {
129
+ return (0, _emotion.jsx)("div", null, typeof children === 'function' && children(`#${this.mixedColorWithStrippedAlpha}`, newColor => {
133
130
  this.setState({
134
131
  mixedColor: colorToHex8(newColor).slice(1)
135
132
  });
package/lib/ColorPicker/styles.js CHANGED
@@ -95,7 +95,8 @@ const generateStyle = (componentTheme, props, state) => {
95
95
  borderWidth: componentTheme.popoverContentBlockBorderWidth,
96
96
  borderColor: componentTheme.popoverSeparatorColor,
97
97
  marginTop: componentTheme.popoverContentBlockTopMargin,
98
- marginBottom: componentTheme.popoverContentBlockBottomMargin
98
+ marginBottom: componentTheme.popoverContentBlockBottomMargin,
99
+ paddingTop: componentTheme.popoverContentBlockTopPadding
99
100
  },
100
101
  popoverFooter: {
101
102
  label: 'colorPicker__popoverFooter',
@@ -114,11 +115,11 @@ const generateStyle = (componentTheme, props, state) => {
114
115
  popoverContentContainer: {
115
116
  label: 'colorPicker__popoverContentContainer',
116
117
  maxHeight: popoverMaxHeight || '100vh',
117
- overflow: 'scroll'
118
+ overflow: 'auto'
118
119
  },
119
120
  colorMixerButtonWrapper: {
120
- position: 'absolute',
121
- top: '2.69rem'
121
+ label: 'colorPicker__colorMixerButtonWrapper',
122
+ position: 'static'
122
123
  }
123
124
  };
124
125
  };
package/lib/ColorPicker/theme.js CHANGED
@@ -71,8 +71,9 @@ const generateComponentTheme = theme => {
71
71
  labelRightMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
72
72
  popoverContentPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
73
73
  popoverContentBlockBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
74
- popoverContentBlockTopMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
74
+ popoverContentBlockTopMargin: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
75
75
  popoverContentBlockBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
76
+ popoverContentBlockTopPadding: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
76
77
  popoverFooterPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
77
78
  popoverFooterTopBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
78
79
  colorMixerButtonContainerLeftMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall
package/lib/ColorPreset/styles.js CHANGED
@@ -75,7 +75,7 @@ const generateStyle = (componentTheme, props) => {
75
75
  label: 'colorPreset__popoverContent',
76
76
  padding: componentTheme.smallSpacing,
77
77
  maxHeight: (colorMixerSettings === null || colorMixerSettings === void 0 ? void 0 : colorMixerSettings.maxHeight) || '100vh',
78
- overflow: 'scroll'
78
+ overflow: 'auto'
79
79
  },
80
80
  popoverDivider: {
81
81
  label: 'colorPreset__popoverDivider',
@@ -89,7 +89,9 @@ const generateStyle = (componentTheme, props) => {
89
89
  borderTop: 'solid',
90
90
  borderWidth: componentTheme.smallBorder,
91
91
  borderColor: componentTheme.popoverDividerColor,
92
- margin: `${componentTheme.smallSpacing} 0 ${componentTheme.smallSpacing} 0`
92
+ marginTop: componentTheme.popoverContentBlockTopMargin,
93
+ marginBottom: componentTheme.popoverContentBlockBottomMargin,
94
+ paddingTop: componentTheme.popoverContentBlockTopPadding
93
95
  },
94
96
  popoverFooter: {
95
97
  label: 'colorPreset__popoverFooter',
package/lib/ColorPreset/theme.js CHANGED
@@ -51,7 +51,10 @@ const generateComponentTheme = theme => {
51
51
  linear-gradient(45deg, transparent 75%, ${colors.tiara} 75%),
52
52
  linear-gradient(-45deg, transparent 75%, ${colors.tiara} 75%)`,
53
53
  checkerboardBackgroundSize: '.5rem .5rem',
54
- checkerboardBackgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px'
54
+ checkerboardBackgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
55
+ popoverContentBlockTopMargin: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
56
+ popoverContentBlockBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
57
+ popoverContentBlockTopPadding: spacing === null || spacing === void 0 ? void 0 : spacing.medium
55
58
  };
56
59
  return { ...componentVariables
57
60
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-color-picker",
3
- "version": "8.32.2-snapshot-2",
3
+ "version": "8.32.2-snapshot-4",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,33 +24,33 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.13.10",
27
- "@instructure/console": "8.32.2-snapshot-2",
28
- "@instructure/emotion": "8.32.2-snapshot-2",
29
- "@instructure/shared-types": "8.32.2-snapshot-2",
30
- "@instructure/ui-a11y-content": "8.32.2-snapshot-2",
31
- "@instructure/ui-buttons": "8.32.2-snapshot-2",
32
- "@instructure/ui-color-utils": "8.32.2-snapshot-2",
33
- "@instructure/ui-dom-utils": "8.32.2-snapshot-2",
34
- "@instructure/ui-drilldown": "8.32.2-snapshot-2",
35
- "@instructure/ui-form-field": "8.32.2-snapshot-2",
36
- "@instructure/ui-icons": "8.32.2-snapshot-2",
37
- "@instructure/ui-pill": "8.32.2-snapshot-2",
38
- "@instructure/ui-popover": "8.32.2-snapshot-2",
39
- "@instructure/ui-react-utils": "8.32.2-snapshot-2",
40
- "@instructure/ui-testable": "8.32.2-snapshot-2",
41
- "@instructure/ui-text": "8.32.2-snapshot-2",
42
- "@instructure/ui-text-input": "8.32.2-snapshot-2",
43
- "@instructure/ui-themes": "8.32.2-snapshot-2",
44
- "@instructure/ui-tooltip": "8.32.2-snapshot-2",
45
- "@instructure/ui-utils": "8.32.2-snapshot-2",
46
- "@instructure/ui-view": "8.32.2-snapshot-2",
27
+ "@instructure/console": "8.32.2-snapshot-4",
28
+ "@instructure/emotion": "8.32.2-snapshot-4",
29
+ "@instructure/shared-types": "8.32.2-snapshot-4",
30
+ "@instructure/ui-a11y-content": "8.32.2-snapshot-4",
31
+ "@instructure/ui-buttons": "8.32.2-snapshot-4",
32
+ "@instructure/ui-color-utils": "8.32.2-snapshot-4",
33
+ "@instructure/ui-dom-utils": "8.32.2-snapshot-4",
34
+ "@instructure/ui-drilldown": "8.32.2-snapshot-4",
35
+ "@instructure/ui-form-field": "8.32.2-snapshot-4",
36
+ "@instructure/ui-icons": "8.32.2-snapshot-4",
37
+ "@instructure/ui-pill": "8.32.2-snapshot-4",
38
+ "@instructure/ui-popover": "8.32.2-snapshot-4",
39
+ "@instructure/ui-react-utils": "8.32.2-snapshot-4",
40
+ "@instructure/ui-testable": "8.32.2-snapshot-4",
41
+ "@instructure/ui-text": "8.32.2-snapshot-4",
42
+ "@instructure/ui-text-input": "8.32.2-snapshot-4",
43
+ "@instructure/ui-themes": "8.32.2-snapshot-4",
44
+ "@instructure/ui-tooltip": "8.32.2-snapshot-4",
45
+ "@instructure/ui-utils": "8.32.2-snapshot-4",
46
+ "@instructure/ui-view": "8.32.2-snapshot-4",
47
47
  "prop-types": "^15"
48
48
  },
49
49
  "devDependencies": {
50
- "@instructure/ui-babel-preset": "8.32.2-snapshot-2",
51
- "@instructure/ui-test-locator": "8.32.2-snapshot-2",
52
- "@instructure/ui-test-queries": "8.32.2-snapshot-2",
53
- "@instructure/ui-test-utils": "8.32.2-snapshot-2"
50
+ "@instructure/ui-babel-preset": "8.32.2-snapshot-4",
51
+ "@instructure/ui-test-locator": "8.32.2-snapshot-4",
52
+ "@instructure/ui-test-queries": "8.32.2-snapshot-4",
53
+ "@instructure/ui-test-utils": "8.32.2-snapshot-4"
54
54
  },
55
55
  "peerDependencies": {
56
56
  "react": ">=16.8 <=18"
package/src/ColorPicker/index.tsx CHANGED
@@ -419,10 +419,10 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
419
419
  )
420
420
 
421
421
  renderCustomPopoverContent = () => {
422
- const { styles, children, onChange } = this.props
422
+ const { children, onChange } = this.props
423
423
 
424
424
  return (
425
- <div css={styles?.popoverContent}>
425
+ <div>
426
426
  {typeof children === 'function' &&
427
427
  children(
428
428
  `#${this.mixedColorWithStrippedAlpha}`,
package/src/ColorPicker/styles.ts CHANGED
@@ -100,7 +100,8 @@ const generateStyle = (
100
100
  borderWidth: componentTheme.popoverContentBlockBorderWidth,
101
101
  borderColor: componentTheme.popoverSeparatorColor,
102
102
  marginTop: componentTheme.popoverContentBlockTopMargin,
103
- marginBottom: componentTheme.popoverContentBlockBottomMargin
103
+ marginBottom: componentTheme.popoverContentBlockBottomMargin,
104
+ paddingTop: componentTheme.popoverContentBlockTopPadding
104
105
  },
105
106
  popoverFooter: {
106
107
  label: 'colorPicker__popoverFooter',
@@ -119,11 +120,11 @@ const generateStyle = (
119
120
  popoverContentContainer: {
120
121
  label: 'colorPicker__popoverContentContainer',
121
122
  maxHeight: popoverMaxHeight || '100vh',
122
- overflow: 'scroll'
123
+ overflow: 'auto'
123
124
  },
124
125
  colorMixerButtonWrapper: {
125
- position: 'absolute',
126
- top: '2.69rem'
126
+ label: 'colorPicker__colorMixerButtonWrapper',
127
+ position: 'static'
127
128
  }
128
129
  }
129
130
  }
package/src/ColorPicker/theme.ts CHANGED
@@ -65,8 +65,9 @@ const generateComponentTheme = (theme: Theme): ColorPickerTheme => {
65
65
  labelRightMargin: spacing?.xxSmall,
66
66
  popoverContentPadding: spacing?.small,
67
67
  popoverContentBlockBorderWidth: borders?.widthSmall,
68
- popoverContentBlockTopMargin: spacing?.small,
68
+ popoverContentBlockTopMargin: spacing?.medium,
69
69
  popoverContentBlockBottomMargin: spacing?.small,
70
+ popoverContentBlockTopPadding: spacing?.medium,
70
71
  popoverFooterPadding: spacing?.xSmall,
71
72
  popoverFooterTopBorderWidth: borders?.widthSmall,
72
73
  colorMixerButtonContainerLeftMargin: spacing?.xSmall
package/src/ColorPreset/styles.ts CHANGED
@@ -73,7 +73,7 @@ const generateStyle = (
73
73
  label: 'colorPreset__popoverContent',
74
74
  padding: componentTheme.smallSpacing,
75
75
  maxHeight: colorMixerSettings?.maxHeight || '100vh',
76
- overflow: 'scroll'
76
+ overflow: 'auto'
77
77
  },
78
78
  popoverDivider: {
79
79
  label: 'colorPreset__popoverDivider',
@@ -87,7 +87,9 @@ const generateStyle = (
87
87
  borderTop: 'solid',
88
88
  borderWidth: componentTheme.smallBorder,
89
89
  borderColor: componentTheme.popoverDividerColor,
90
- margin: `${componentTheme.smallSpacing} 0 ${componentTheme.smallSpacing} 0`
90
+ marginTop: componentTheme.popoverContentBlockTopMargin,
91
+ marginBottom: componentTheme.popoverContentBlockBottomMargin,
92
+ paddingTop: componentTheme.popoverContentBlockTopPadding
91
93
  },
92
94
  popoverFooter: {
93
95
  label: 'colorPreset__popoverFooter',
package/src/ColorPreset/theme.ts CHANGED
@@ -47,7 +47,10 @@ const generateComponentTheme = (theme: Theme): ColorPresetTheme => {
47
47
  linear-gradient(-45deg, transparent 75%, ${colors.tiara} 75%)`,
48
48
  checkerboardBackgroundSize: '.5rem .5rem',
49
49
  checkerboardBackgroundPosition:
50
- '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px'
50
+ '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
51
+ popoverContentBlockTopMargin: spacing?.medium,
52
+ popoverContentBlockBottomMargin: spacing?.small,
53
+ popoverContentBlockTopPadding: spacing?.medium
51
54
  }
52
55
 
53
56
  return {