@instructure/ui-modal 8.10.3-snapshot.19 → 8.10.3-snapshot.23

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 (36) hide show
  1. package/es/Modal/ModalBody/index.js +13 -11
  2. package/es/Modal/ModalBody/props.js +4 -0
  3. package/es/Modal/ModalHeader/index.js +2 -1
  4. package/es/Modal/ModalHeader/props.js +3 -2
  5. package/es/Modal/ModalHeader/styles.js +16 -10
  6. package/es/Modal/ModalHeader/theme.js +1 -0
  7. package/lib/Modal/ModalBody/index.js +13 -11
  8. package/lib/Modal/ModalBody/props.js +4 -0
  9. package/lib/Modal/ModalHeader/index.js +2 -1
  10. package/lib/Modal/ModalHeader/props.js +3 -2
  11. package/lib/Modal/ModalHeader/styles.js +16 -10
  12. package/lib/Modal/ModalHeader/theme.js +1 -0
  13. package/package.json +21 -21
  14. package/src/Modal/ModalBody/index.tsx +6 -1
  15. package/src/Modal/ModalBody/props.ts +7 -2
  16. package/src/Modal/ModalFooter/props.ts +4 -2
  17. package/src/Modal/ModalHeader/index.tsx +2 -1
  18. package/src/Modal/ModalHeader/props.ts +8 -4
  19. package/src/Modal/ModalHeader/styles.ts +20 -13
  20. package/src/Modal/ModalHeader/theme.ts +1 -0
  21. package/src/Modal/README.md +105 -1
  22. package/src/Modal/props.ts +5 -2
  23. package/types/Modal/ModalBody/index.d.ts +0 -12
  24. package/types/Modal/ModalBody/index.d.ts.map +1 -1
  25. package/types/Modal/ModalBody/props.d.ts +2 -2
  26. package/types/Modal/ModalBody/props.d.ts.map +1 -1
  27. package/types/Modal/ModalFooter/props.d.ts +2 -2
  28. package/types/Modal/ModalFooter/props.d.ts.map +1 -1
  29. package/types/Modal/ModalHeader/index.d.ts +3 -0
  30. package/types/Modal/ModalHeader/index.d.ts.map +1 -1
  31. package/types/Modal/ModalHeader/props.d.ts +3 -2
  32. package/types/Modal/ModalHeader/props.d.ts.map +1 -1
  33. package/types/Modal/ModalHeader/styles.d.ts.map +1 -1
  34. package/types/Modal/ModalHeader/theme.d.ts.map +1 -1
  35. package/types/Modal/props.d.ts +2 -2
  36. package/types/Modal/props.d.ts.map +1 -1
package/es/Modal/ModalBody/index.js CHANGED
@@ -49,10 +49,12 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
49
49
  this.ref = null;
50
50
 
51
51
  this.handleRef = el => {
52
- var _this$props$elementRe, _this$props;
53
-
52
+ const elementRef = this.props.elementRef;
54
53
  this.ref = el;
55
- (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
54
+
55
+ if (typeof elementRef === 'function') {
56
+ elementRef(el);
57
+ }
56
58
  };
57
59
  }
58
60
 
@@ -67,14 +69,14 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
67
69
  render() {
68
70
  var _this$props$styles;
69
71
 
70
- const _this$props2 = this.props,
71
- as = _this$props2.as,
72
- elementRef = _this$props2.elementRef,
73
- overflow = _this$props2.overflow,
74
- variant = _this$props2.variant,
75
- padding = _this$props2.padding,
76
- children = _this$props2.children,
77
- rest = _objectWithoutProperties(_this$props2, _excluded);
72
+ const _this$props = this.props,
73
+ as = _this$props.as,
74
+ elementRef = _this$props.elementRef,
75
+ overflow = _this$props.overflow,
76
+ variant = _this$props.variant,
77
+ padding = _this$props.padding,
78
+ children = _this$props.children,
79
+ rest = _objectWithoutProperties(_this$props, _excluded);
78
80
 
79
81
  const passthroughProps = View.omitViewProps(omitProps(rest, ModalBody.allowedProps), ModalBody);
80
82
  const isFit = overflow === 'fit';
package/es/Modal/ModalBody/props.js CHANGED
@@ -26,6 +26,10 @@ import { ThemeablePropTypes } from '@instructure/emotion';
26
26
  const propTypes = {
27
27
  children: PropTypes.node,
28
28
  padding: ThemeablePropTypes.spacing,
29
+
30
+ /**
31
+ * provides a reference to the underlying html root element
32
+ */
29
33
  elementRef: PropTypes.func,
30
34
  as: PropTypes.elementType,
31
35
  variant: PropTypes.oneOf(['default', 'inverse']),
package/es/Modal/ModalHeader/index.js CHANGED
@@ -92,7 +92,8 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
92
92
 
93
93
  }, _class2.displayName = "ModalHeader", _class2.componentId = 'Modal.Header', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
94
94
  children: null,
95
- variant: 'default'
95
+ variant: 'default',
96
+ spacing: 'default'
96
97
  }, _temp)) || _class) || _class);
97
98
  export default ModalHeader;
98
99
  export { ModalHeader };
package/es/Modal/ModalHeader/props.js CHANGED
@@ -24,7 +24,8 @@
24
24
  import PropTypes from 'prop-types';
25
25
  const propTypes = {
26
26
  children: PropTypes.node,
27
- variant: PropTypes.oneOf(['default', 'inverse'])
27
+ variant: PropTypes.oneOf(['default', 'inverse']),
28
+ spacing: PropTypes.oneOf(['default', 'compact'])
28
29
  };
29
- const allowedProps = ['children', 'variant'];
30
+ const allowedProps = ['children', 'variant', 'spacing'];
30
31
  export { propTypes, allowedProps };
package/es/Modal/ModalHeader/styles.js CHANGED
@@ -33,30 +33,36 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props, state) => {
36
- const variant = props.variant;
36
+ const variant = props.variant,
37
+ spacing = props.spacing;
37
38
  const withCloseButton = state.withCloseButton;
39
+ const sizeVariants = {
40
+ default: {
41
+ padding: componentTheme.padding,
42
+ paddingInlineStart: componentTheme.padding,
43
+ paddingInlineEnd: withCloseButton ? `calc(${componentTheme.padding} * 2 + 1em)` : componentTheme.padding
44
+ },
45
+ compact: {
46
+ padding: componentTheme.paddingCompact,
47
+ paddingInlineStart: componentTheme.paddingCompact,
48
+ paddingInlineEnd: withCloseButton ? `calc(${componentTheme.paddingCompact} * 2 + 1em)` : componentTheme.paddingCompact
49
+ }
50
+ };
38
51
  const inverseStyle = variant === 'inverse' ? {
39
52
  background: componentTheme.inverseBackground,
40
53
  borderBottomColor: componentTheme.inverseBorderColor
41
54
  } : {};
42
- const closeButtonStyle = withCloseButton ? {
43
- paddingInlineEnd: `calc(${componentTheme.padding} * 2 + 1em)`
44
- } : {
45
- paddingInlineEnd: componentTheme.padding
46
- };
47
55
  return {
48
56
  modalHeader: {
49
57
  label: 'modalHeader',
50
58
  boxSizing: 'border-box',
51
- padding: componentTheme.padding,
52
- paddingInlineStart: componentTheme.padding,
53
59
  flex: '0 0 auto',
54
60
  background: componentTheme.background,
55
61
  borderBottomWidth: '0.0625rem',
56
62
  borderBottomStyle: 'solid',
57
63
  borderBottomColor: componentTheme.borderColor,
58
- ...inverseStyle,
59
- ...closeButtonStyle
64
+ ...sizeVariants[spacing],
65
+ ...inverseStyle
60
66
  }
61
67
  };
62
68
  };
package/es/Modal/ModalHeader/theme.js CHANGED
@@ -34,6 +34,7 @@ const generateComponentTheme = theme => {
34
34
  background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
35
35
  borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
36
36
  padding: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
37
+ paddingCompact: spacing === null || spacing === void 0 ? void 0 : spacing.small,
37
38
  inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
38
39
  inverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest
39
40
  };
package/lib/Modal/ModalBody/index.js CHANGED
@@ -41,10 +41,12 @@ let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
41
41
  this.ref = null;
42
42
 
43
43
  this.handleRef = el => {
44
- var _this$props$elementRe, _this$props;
45
-
44
+ const elementRef = this.props.elementRef;
46
45
  this.ref = el;
47
- (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
46
+
47
+ if (typeof elementRef === 'function') {
48
+ elementRef(el);
49
+ }
48
50
  };
49
51
  }
50
52
 
@@ -59,14 +61,14 @@ let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
59
61
  render() {
60
62
  var _this$props$styles;
61
63
 
62
- const _this$props2 = this.props,
63
- as = _this$props2.as,
64
- elementRef = _this$props2.elementRef,
65
- overflow = _this$props2.overflow,
66
- variant = _this$props2.variant,
67
- padding = _this$props2.padding,
68
- children = _this$props2.children,
69
- rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
64
+ const _this$props = this.props,
65
+ as = _this$props.as,
66
+ elementRef = _this$props.elementRef,
67
+ overflow = _this$props.overflow,
68
+ variant = _this$props.variant,
69
+ padding = _this$props.padding,
70
+ children = _this$props.children,
71
+ rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
70
72
 
71
73
  const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(rest, ModalBody.allowedProps), ModalBody);
72
74
 
package/lib/Modal/ModalBody/props.js CHANGED
@@ -37,6 +37,10 @@ var _emotion = require("@instructure/emotion");
37
37
  const propTypes = {
38
38
  children: _propTypes.default.node,
39
39
  padding: _emotion.ThemeablePropTypes.spacing,
40
+
41
+ /**
42
+ * provides a reference to the underlying html root element
43
+ */
40
44
  elementRef: _propTypes.default.func,
41
45
  as: _propTypes.default.elementType,
42
46
  variant: _propTypes.default.oneOf(['default', 'inverse']),
package/lib/Modal/ModalHeader/index.js CHANGED
@@ -88,7 +88,8 @@ let ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
88
88
 
89
89
  }, _class2.displayName = "ModalHeader", _class2.componentId = 'Modal.Header', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
90
90
  children: null,
91
- variant: 'default'
91
+ variant: 'default',
92
+ spacing: 'default'
92
93
  }, _temp)) || _class) || _class);
93
94
  exports.ModalHeader = ModalHeader;
94
95
  var _default = ModalHeader;
package/lib/Modal/ModalHeader/props.js CHANGED
@@ -34,8 +34,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
34
34
  */
35
35
  const propTypes = {
36
36
  children: _propTypes.default.node,
37
- variant: _propTypes.default.oneOf(['default', 'inverse'])
37
+ variant: _propTypes.default.oneOf(['default', 'inverse']),
38
+ spacing: _propTypes.default.oneOf(['default', 'compact'])
38
39
  };
39
40
  exports.propTypes = propTypes;
40
- const allowedProps = ['children', 'variant'];
41
+ const allowedProps = ['children', 'variant', 'spacing'];
41
42
  exports.allowedProps = allowedProps;
package/lib/Modal/ModalHeader/styles.js CHANGED
@@ -40,30 +40,36 @@ exports.default = void 0;
40
40
  * @return {Object} The final style object, which will be used in the component
41
41
  */
42
42
  const generateStyle = (componentTheme, props, state) => {
43
- const variant = props.variant;
43
+ const variant = props.variant,
44
+ spacing = props.spacing;
44
45
  const withCloseButton = state.withCloseButton;
46
+ const sizeVariants = {
47
+ default: {
48
+ padding: componentTheme.padding,
49
+ paddingInlineStart: componentTheme.padding,
50
+ paddingInlineEnd: withCloseButton ? `calc(${componentTheme.padding} * 2 + 1em)` : componentTheme.padding
51
+ },
52
+ compact: {
53
+ padding: componentTheme.paddingCompact,
54
+ paddingInlineStart: componentTheme.paddingCompact,
55
+ paddingInlineEnd: withCloseButton ? `calc(${componentTheme.paddingCompact} * 2 + 1em)` : componentTheme.paddingCompact
56
+ }
57
+ };
45
58
  const inverseStyle = variant === 'inverse' ? {
46
59
  background: componentTheme.inverseBackground,
47
60
  borderBottomColor: componentTheme.inverseBorderColor
48
61
  } : {};
49
- const closeButtonStyle = withCloseButton ? {
50
- paddingInlineEnd: `calc(${componentTheme.padding} * 2 + 1em)`
51
- } : {
52
- paddingInlineEnd: componentTheme.padding
53
- };
54
62
  return {
55
63
  modalHeader: {
56
64
  label: 'modalHeader',
57
65
  boxSizing: 'border-box',
58
- padding: componentTheme.padding,
59
- paddingInlineStart: componentTheme.padding,
60
66
  flex: '0 0 auto',
61
67
  background: componentTheme.background,
62
68
  borderBottomWidth: '0.0625rem',
63
69
  borderBottomStyle: 'solid',
64
70
  borderBottomColor: componentTheme.borderColor,
65
- ...inverseStyle,
66
- ...closeButtonStyle
71
+ ...sizeVariants[spacing],
72
+ ...inverseStyle
67
73
  }
68
74
  };
69
75
  };
package/lib/Modal/ModalHeader/theme.js CHANGED
@@ -41,6 +41,7 @@ const generateComponentTheme = theme => {
41
41
  background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
42
42
  borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
43
43
  padding: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
44
+ paddingCompact: spacing === null || spacing === void 0 ? void 0 : spacing.small,
44
45
  inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
45
46
  inverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest
46
47
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-modal",
3
- "version": "8.10.3-snapshot.19+ff8a37832",
3
+ "version": "8.10.3-snapshot.23+5aaa29662",
4
4
  "description": "A component for displaying content in a dialog overlay",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -25,35 +25,35 @@
25
25
  "license": "MIT",
26
26
  "dependencies": {
27
27
  "@babel/runtime": "^7.13.10",
28
- "@instructure/console": "8.10.3-snapshot.19+ff8a37832",
29
- "@instructure/emotion": "8.10.3-snapshot.19+ff8a37832",
30
- "@instructure/shared-types": "8.10.3-snapshot.19+ff8a37832",
31
- "@instructure/ui-buttons": "8.10.3-snapshot.19+ff8a37832",
32
- "@instructure/ui-dialog": "8.10.3-snapshot.19+ff8a37832",
33
- "@instructure/ui-motion": "8.10.3-snapshot.19+ff8a37832",
34
- "@instructure/ui-overlays": "8.10.3-snapshot.19+ff8a37832",
35
- "@instructure/ui-portal": "8.10.3-snapshot.19+ff8a37832",
36
- "@instructure/ui-prop-types": "8.10.3-snapshot.19+ff8a37832",
37
- "@instructure/ui-react-utils": "8.10.3-snapshot.19+ff8a37832",
38
- "@instructure/ui-testable": "8.10.3-snapshot.19+ff8a37832",
39
- "@instructure/ui-utils": "8.10.3-snapshot.19+ff8a37832",
40
- "@instructure/ui-view": "8.10.3-snapshot.19+ff8a37832",
28
+ "@instructure/console": "8.10.3-snapshot.23+5aaa29662",
29
+ "@instructure/emotion": "8.10.3-snapshot.23+5aaa29662",
30
+ "@instructure/shared-types": "8.10.3-snapshot.23+5aaa29662",
31
+ "@instructure/ui-buttons": "8.10.3-snapshot.23+5aaa29662",
32
+ "@instructure/ui-dialog": "8.10.3-snapshot.23+5aaa29662",
33
+ "@instructure/ui-motion": "8.10.3-snapshot.23+5aaa29662",
34
+ "@instructure/ui-overlays": "8.10.3-snapshot.23+5aaa29662",
35
+ "@instructure/ui-portal": "8.10.3-snapshot.23+5aaa29662",
36
+ "@instructure/ui-prop-types": "8.10.3-snapshot.23+5aaa29662",
37
+ "@instructure/ui-react-utils": "8.10.3-snapshot.23+5aaa29662",
38
+ "@instructure/ui-testable": "8.10.3-snapshot.23+5aaa29662",
39
+ "@instructure/ui-utils": "8.10.3-snapshot.23+5aaa29662",
40
+ "@instructure/ui-view": "8.10.3-snapshot.23+5aaa29662",
41
41
  "prop-types": "^15"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "react": ">=16.8 <=17"
45
45
  },
46
46
  "devDependencies": {
47
- "@instructure/ui-babel-preset": "8.10.3-snapshot.19+ff8a37832",
48
- "@instructure/ui-color-utils": "8.10.3-snapshot.19+ff8a37832",
49
- "@instructure/ui-position": "8.10.3-snapshot.19+ff8a37832",
50
- "@instructure/ui-test-locator": "8.10.3-snapshot.19+ff8a37832",
51
- "@instructure/ui-test-utils": "8.10.3-snapshot.19+ff8a37832",
52
- "@instructure/ui-themes": "8.10.3-snapshot.19+ff8a37832"
47
+ "@instructure/ui-babel-preset": "8.10.3-snapshot.23+5aaa29662",
48
+ "@instructure/ui-color-utils": "8.10.3-snapshot.23+5aaa29662",
49
+ "@instructure/ui-position": "8.10.3-snapshot.23+5aaa29662",
50
+ "@instructure/ui-test-locator": "8.10.3-snapshot.23+5aaa29662",
51
+ "@instructure/ui-test-utils": "8.10.3-snapshot.23+5aaa29662",
52
+ "@instructure/ui-themes": "8.10.3-snapshot.23+5aaa29662"
53
53
  },
54
54
  "publishConfig": {
55
55
  "access": "public"
56
56
  },
57
57
  "sideEffects": false,
58
- "gitHead": "ff8a37832bae778ea0507342d81a32c63cd5f023"
58
+ "gitHead": "5aaa296621d72faebe1a809a8895a8185587008d"
59
59
  }
package/src/Modal/ModalBody/index.tsx CHANGED
@@ -59,8 +59,13 @@ class ModalBody extends Component<ModalBodyProps> {
59
59
  ref: Element | null = null
60
60
 
61
61
  handleRef = (el: Element | null) => {
62
+ const { elementRef } = this.props
63
+
62
64
  this.ref = el
63
- this.props.elementRef?.(el)
65
+
66
+ if (typeof elementRef === 'function') {
67
+ elementRef(el)
68
+ }
64
69
  }
65
70
 
66
71
  componentDidMount() {
package/src/Modal/ModalBody/props.ts CHANGED
@@ -35,7 +35,8 @@ import type {
35
35
  import type {
36
36
  AsElementType,
37
37
  PropValidators,
38
- ModalBodyTheme
38
+ ModalBodyTheme,
39
+ OtherHTMLAttributes
39
40
  } from '@instructure/shared-types'
40
41
 
41
42
  type ModalBodyOwnProps = {
@@ -52,13 +53,17 @@ type PropKeys = keyof ModalBodyOwnProps
52
53
  type AllowedPropKeys = Readonly<Array<PropKeys>>
53
54
 
54
55
  type ModalBodyProps = ModalBodyOwnProps &
55
- WithStyleProps<ModalBodyTheme, ModalBodyStyle>
56
+ WithStyleProps<ModalBodyTheme, ModalBodyStyle> &
57
+ OtherHTMLAttributes<ModalBodyOwnProps>
56
58
 
57
59
  type ModalBodyStyle = ComponentStyle<'modalBody'>
58
60
 
59
61
  const propTypes: PropValidators<PropKeys> = {
60
62
  children: PropTypes.node,
61
63
  padding: ThemeablePropTypes.spacing,
64
+ /**
65
+ * provides a reference to the underlying html root element
66
+ */
62
67
  elementRef: PropTypes.func,
63
68
  as: PropTypes.elementType,
64
69
  variant: PropTypes.oneOf(['default', 'inverse']),
package/src/Modal/ModalFooter/props.ts CHANGED
@@ -27,7 +27,8 @@ import PropTypes from 'prop-types'
27
27
 
28
28
  import type {
29
29
  PropValidators,
30
- ModalFooterTheme
30
+ ModalFooterTheme,
31
+ OtherHTMLAttributes
31
32
  } from '@instructure/shared-types'
32
33
  import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
33
34
 
@@ -41,7 +42,8 @@ type PropKeys = keyof ModalFooterOwnProps
41
42
  type AllowedPropKeys = Readonly<Array<PropKeys>>
42
43
 
43
44
  type ModalFooterProps = ModalFooterOwnProps &
44
- WithStyleProps<ModalFooterTheme, ModalFooterStyle>
45
+ WithStyleProps<ModalFooterTheme, ModalFooterStyle> &
46
+ OtherHTMLAttributes<ModalFooterOwnProps>
45
47
 
46
48
  type ModalFooterStyle = ComponentStyle<'modalFooter'>
47
49
 
package/src/Modal/ModalHeader/index.tsx CHANGED
@@ -54,7 +54,8 @@ class ModalHeader extends Component<ModalHeaderProps> {
54
54
  static allowedProps = allowedProps
55
55
  static defaultProps = {
56
56
  children: null,
57
- variant: 'default'
57
+ variant: 'default',
58
+ spacing: 'default'
58
59
  }
59
60
 
60
61
  ref: Element | null = null
package/src/Modal/ModalHeader/props.ts CHANGED
@@ -27,13 +27,15 @@ import PropTypes from 'prop-types'
27
27
 
28
28
  import type {
29
29
  PropValidators,
30
- ModalHeaderTheme
30
+ ModalHeaderTheme,
31
+ OtherHTMLAttributes
31
32
  } from '@instructure/shared-types'
32
33
  import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
33
34
 
34
35
  type ModalHeaderOwnProps = {
35
36
  children?: React.ReactNode
36
37
  variant?: 'default' | 'inverse'
38
+ spacing?: 'default' | 'compact'
37
39
  }
38
40
 
39
41
  type ModalHeaderStyleProps = {
@@ -45,16 +47,18 @@ type PropKeys = keyof ModalHeaderOwnProps
45
47
  type AllowedPropKeys = Readonly<Array<PropKeys>>
46
48
 
47
49
  type ModalHeaderProps = ModalHeaderOwnProps &
48
- WithStyleProps<ModalHeaderTheme, ModalHeaderStyle>
50
+ WithStyleProps<ModalHeaderTheme, ModalHeaderStyle> &
51
+ OtherHTMLAttributes<ModalHeaderOwnProps>
49
52
 
50
53
  type ModalHeaderStyle = ComponentStyle<'modalHeader'>
51
54
 
52
55
  const propTypes: PropValidators<PropKeys> = {
53
56
  children: PropTypes.node,
54
- variant: PropTypes.oneOf(['default', 'inverse'])
57
+ variant: PropTypes.oneOf(['default', 'inverse']),
58
+ spacing: PropTypes.oneOf(['default', 'compact'])
55
59
  }
56
60
 
57
- const allowedProps: AllowedPropKeys = ['children', 'variant']
61
+ const allowedProps: AllowedPropKeys = ['children', 'variant', 'spacing']
58
62
 
59
63
  export type { ModalHeaderProps, ModalHeaderStyleProps, ModalHeaderStyle }
60
64
  export { propTypes, allowedProps }
package/src/Modal/ModalHeader/styles.ts CHANGED
@@ -44,9 +44,26 @@ const generateStyle = (
44
44
  props: ModalHeaderProps,
45
45
  state: ModalHeaderStyleProps
46
46
  ): ModalHeaderStyle => {
47
- const { variant } = props
47
+ const { variant, spacing } = props
48
48
  const { withCloseButton } = state
49
49
 
50
+ const sizeVariants = {
51
+ default: {
52
+ padding: componentTheme.padding,
53
+ paddingInlineStart: componentTheme.padding,
54
+ paddingInlineEnd: withCloseButton
55
+ ? `calc(${componentTheme.padding} * 2 + 1em)`
56
+ : componentTheme.padding
57
+ },
58
+ compact: {
59
+ padding: componentTheme.paddingCompact,
60
+ paddingInlineStart: componentTheme.paddingCompact,
61
+ paddingInlineEnd: withCloseButton
62
+ ? `calc(${componentTheme.paddingCompact} * 2 + 1em)`
63
+ : componentTheme.paddingCompact
64
+ }
65
+ }
66
+
50
67
  const inverseStyle =
51
68
  variant === 'inverse'
52
69
  ? {
@@ -55,27 +72,17 @@ const generateStyle = (
55
72
  }
56
73
  : {}
57
74
 
58
- const closeButtonStyle = withCloseButton
59
- ? {
60
- paddingInlineEnd: `calc(${componentTheme.padding} * 2 + 1em)`
61
- }
62
- : {
63
- paddingInlineEnd: componentTheme.padding
64
- }
65
-
66
75
  return {
67
76
  modalHeader: {
68
77
  label: 'modalHeader',
69
78
  boxSizing: 'border-box',
70
- padding: componentTheme.padding,
71
- paddingInlineStart: componentTheme.padding,
72
79
  flex: '0 0 auto',
73
80
  background: componentTheme.background,
74
81
  borderBottomWidth: '0.0625rem',
75
82
  borderBottomStyle: 'solid',
76
83
  borderBottomColor: componentTheme.borderColor,
77
- ...inverseStyle,
78
- ...closeButtonStyle
84
+ ...sizeVariants[spacing!],
85
+ ...inverseStyle
79
86
  }
80
87
  }
81
88
  }
package/src/Modal/ModalHeader/theme.ts CHANGED
@@ -37,6 +37,7 @@ const generateComponentTheme = (theme: Theme): ModalHeaderTheme => {
37
37
  background: colors?.backgroundLightest,
38
38
  borderColor: colors?.borderMedium,
39
39
  padding: spacing?.medium,
40
+ paddingCompact: spacing?.small,
40
41
 
41
42
  inverseBackground: colors?.backgroundDarkest,
42
43
  inverseBorderColor: colors?.backgroundDarkest
package/src/Modal/README.md CHANGED
@@ -198,9 +198,10 @@ class ModalAutoCompleteExample extends React.Component {
198
198
 
199
199
  render(<Example />)
200
200
  ```
201
+
201
202
  ### Media (images, etc.) inside Modals
202
203
 
203
- > Setting the `variant` prop to `"inverse"` will result in a dark version of Modal, useful for displaying media. *Note that the `inverse` Modal does not currently support text or form input content.*
204
+ > Setting the `variant` prop to `"inverse"` will result in a dark version of Modal, useful for displaying media. _Note that the `inverse` Modal does not currently support text or form input content._
204
205
 
205
206
  **If you are displaying small, relatively uniform images or videos inside Modal, the default settings should work well.** Modal.Body will expand to the height of the media you're displaying. If there is overflow, scrollbars will be available.
206
207
 
@@ -410,6 +411,109 @@ class Example extends React.Component {
410
411
  render(<Example />)
411
412
  ```
412
413
 
414
+ ### Small viewports
415
+
416
+ On smaller viewports (like mobile devices or scaled-up UI), we don't want to lose space because of padding and margins. In order to achieve that, use `size="fullscreen"` on the Modal and set the `spacing` property of Modal.Header to `compact`.
417
+
418
+ ```js
419
+ ---
420
+ render: false
421
+ example: true
422
+ ---
423
+ const fpo = lorem.paragraphs(1)
424
+ class Example extends React.Component {
425
+ constructor (props) {
426
+ super(props)
427
+
428
+ this.state = {
429
+ open: false,
430
+ smallViewport: true
431
+ }
432
+ }
433
+
434
+ toggleOpen = () => {
435
+ this.setState(function (state) {
436
+ return { open: !state.open }
437
+ })
438
+ }
439
+
440
+ toggleViewport = async () => {
441
+ await this.setState(function (state) {
442
+ return { smallViewport: !state.smallViewport }
443
+ })
444
+ }
445
+
446
+ renderCloseButton () {
447
+ return (
448
+ <CloseButton
449
+ placement="end"
450
+ offset="small"
451
+ onClick={this.toggleOpen}
452
+ screenReaderLabel="Close"
453
+ />
454
+ )
455
+ }
456
+
457
+ render () {
458
+ return (
459
+ <div>
460
+ <Button onClick={this.toggleOpen}>
461
+ {this.state.open ? 'Close' : 'Open'} the Modal
462
+ </Button>
463
+ <Button
464
+ onClick={this.toggleViewport}
465
+ margin='0 0 0 small'
466
+ id="toggleViewportButton"
467
+ >
468
+ Toggle viewport
469
+ </Button>
470
+ <Modal
471
+ open={this.state.open}
472
+ size={this.state.smallViewport ? 'fullscreen' : 'small'}
473
+ onDismiss={(event) => {
474
+ if (event.target.id !== 'toggleViewportButton') {
475
+ this.setState({ open: false })
476
+ }
477
+ }}
478
+ label="Modal Dialog: Hello World"
479
+ shouldCloseOnDocumentClick
480
+ mountNode={() => document.getElementById('viewportExample')}
481
+ constrain="parent"
482
+ >
483
+ <Modal.Header spacing={this.state.smallViewport ? 'compact' : 'default'}>
484
+ {this.renderCloseButton()}
485
+ {this.state.smallViewport
486
+ ? <Text size="large">This Modal is optimized for small viewport</Text>
487
+ : <Heading>This is a deafult size Modal</Heading>
488
+ }
489
+ </Modal.Header>
490
+ <Modal.Body>
491
+ <View as="p" margin="none none small"><Text>{fpo}</Text></View>
492
+ </Modal.Body>
493
+ <Modal.Footer>
494
+ <Button onClick={this.handleButtonClick} margin="0 x-small 0 0">Close</Button>
495
+ <Button onClick={this.handleButtonClick} color="primary" type="submit">Submit</Button>
496
+ </Modal.Footer>
497
+ </Modal>
498
+
499
+ <View
500
+ background="primary-inverse"
501
+ margin="medium auto none"
502
+ display="block"
503
+ width={this.state.smallViewport ? '20rem' : '50rem'}
504
+ height="37.5rem"
505
+ borderWidth="large"
506
+ id="viewportExample"
507
+ >
508
+ </View>
509
+ </div>
510
+ )
511
+ }
512
+ }
513
+
514
+ render(<Example />)
515
+ ```
516
+
413
517
  ### Guidelines
414
518
 
415
519
  ```js
package/src/Modal/props.ts CHANGED
@@ -37,7 +37,8 @@ import { ModalFooter } from './ModalFooter'
37
37
  import type {
38
38
  AsElementType,
39
39
  PropValidators,
40
- ModalTheme
40
+ ModalTheme,
41
+ OtherHTMLAttributes
41
42
  } from '@instructure/shared-types'
42
43
  import type { PortalNode } from '@instructure/ui-portal'
43
44
  import type { PositionMountNode } from '@instructure/ui-position'
@@ -79,7 +80,9 @@ type PropKeys = keyof ModalOwnProps
79
80
 
80
81
  type AllowedPropKeys = Readonly<Array<PropKeys>>
81
82
 
82
- type ModalProps = ModalOwnProps & WithStyleProps<ModalTheme, ModalStyle>
83
+ type ModalProps = ModalOwnProps &
84
+ WithStyleProps<ModalTheme, ModalStyle> &
85
+ OtherHTMLAttributes<ModalOwnProps>
83
86
 
84
87
  type ModalStyle = ComponentStyle<'modal' | 'constrainContext'>
85
88
 
package/types/Modal/ModalBody/index.d.ts CHANGED
@@ -14,12 +14,6 @@ declare class ModalBody extends Component<ModalBodyProps> {
14
14
  children?: import("react").ReactNode;
15
15
  padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
16
16
  elementRef?: ((element: Element | null) => void) | undefined;
17
- /**
18
- ---
19
- parent: Modal
20
- id: Modal.Body
21
- ---
22
- **/
23
17
  as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
24
18
  variant?: "default" | "inverse" | undefined;
25
19
  overflow?: "scroll" | "fit" | undefined;
@@ -28,12 +22,6 @@ declare class ModalBody extends Component<ModalBodyProps> {
28
22
  children?: import("react").ReactNode;
29
23
  padding?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
30
24
  elementRef?: ((element: Element | null) => void) | undefined;
31
- /**
32
- ---
33
- parent: Modal
34
- id: Modal.Body
35
- ---
36
- **/
37
25
  as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
38
26
  variant?: "default" | "inverse" | undefined;
39
27
  overflow?: "scroll" | "fit" | undefined;
package/types/Modal/ModalBody/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalBody/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;;GAKG;AACH,cAEM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,MAAM,CAAC,QAAQ,CAAC,WAAW,gBAAe;IAE1C,MAAM,CAAC,SAAS;;;;QAXlB;;;;;WAKG;;;;OAM2B;IAC5B,MAAM,CAAC,YAAY;;;;QAZrB;;;;;WAKG;;;;SAOiC;IAClC,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAG9B;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,MAAM;CAiCP;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalBody/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;;GAKG;AACH,cAEM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,MAAM,CAAC,QAAQ,CAAC,WAAW,gBAAe;IAE1C,MAAM,CAAC,SAAS;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,MAAM;CAiCP;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA"}
package/types/Modal/ModalBody/props.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
3
- import type { AsElementType, PropValidators, ModalBodyTheme } from '@instructure/shared-types';
3
+ import type { AsElementType, PropValidators, ModalBodyTheme, OtherHTMLAttributes } from '@instructure/shared-types';
4
4
  declare type ModalBodyOwnProps = {
5
5
  children?: React.ReactNode;
6
6
  padding?: Spacing;
@@ -11,7 +11,7 @@ declare type ModalBodyOwnProps = {
11
11
  };
12
12
  declare type PropKeys = keyof ModalBodyOwnProps;
13
13
  declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
14
- declare type ModalBodyProps = ModalBodyOwnProps & WithStyleProps<ModalBodyTheme, ModalBodyStyle>;
14
+ declare type ModalBodyProps = ModalBodyOwnProps & WithStyleProps<ModalBodyTheme, ModalBodyStyle> & OtherHTMLAttributes<ModalBodyOwnProps>;
15
15
  declare type ModalBodyStyle = ComponentStyle<'modalBody'>;
16
16
  declare const propTypes: PropValidators<PropKeys>;
17
17
  declare const allowedProps: AllowedPropKeys;
package/types/Modal/ModalBody/props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalBody/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,cAAc,EACf,MAAM,2BAA2B,CAAA;AAElC,aAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CAC5B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,iBAAiB,CAAA;AAEvC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,iBAAiB,GACrC,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAEjD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAOvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAOnB,CAAA;AAED,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalBody/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,cAAc,EACd,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAElC,aAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CAC5B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,iBAAiB,CAAA;AAEvC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,cAAc,GAAG,iBAAiB,GACrC,cAAc,CAAC,cAAc,EAAE,cAAc,CAAC,GAC9C,mBAAmB,CAAC,iBAAiB,CAAC,CAAA;AAExC,aAAK,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AAEjD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAUvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAOnB,CAAA;AAED,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
package/types/Modal/ModalFooter/props.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { PropValidators, ModalFooterTheme } from '@instructure/shared-types';
2
+ import type { PropValidators, ModalFooterTheme, OtherHTMLAttributes } from '@instructure/shared-types';
3
3
  import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
4
4
  declare type ModalFooterOwnProps = {
5
5
  children?: React.ReactNode;
@@ -7,7 +7,7 @@ declare type ModalFooterOwnProps = {
7
7
  };
8
8
  declare type PropKeys = keyof ModalFooterOwnProps;
9
9
  declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
10
- declare type ModalFooterProps = ModalFooterOwnProps & WithStyleProps<ModalFooterTheme, ModalFooterStyle>;
10
+ declare type ModalFooterProps = ModalFooterOwnProps & WithStyleProps<ModalFooterTheme, ModalFooterStyle> & OtherHTMLAttributes<ModalFooterOwnProps>;
11
11
  declare type ModalFooterStyle = ComponentStyle<'modalFooter'>;
12
12
  declare const propTypes: PropValidators<PropKeys>;
13
13
  declare const allowedProps: AllowedPropKeys;
package/types/Modal/ModalFooter/props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalFooter/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EACjB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,mBAAmB,CAAA;AAEzC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,gBAAgB,GAAG,mBAAmB,GACzC,cAAc,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAA;AAEpD,aAAK,gBAAgB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAErD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAGvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAAyC,CAAA;AAE7D,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalFooter/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,mBAAmB,CAAA;AAEzC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,gBAAgB,GAAG,mBAAmB,GACzC,cAAc,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAClD,mBAAmB,CAAC,mBAAmB,CAAC,CAAA;AAE1C,aAAK,gBAAgB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAErD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAGvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAAyC,CAAA;AAE7D,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
package/types/Modal/ModalHeader/index.d.ts CHANGED
@@ -13,14 +13,17 @@ declare class ModalHeader extends Component<ModalHeaderProps> {
13
13
  static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
14
14
  children?: React.ReactNode;
15
15
  variant?: "default" | "inverse" | undefined;
16
+ spacing?: "default" | "compact" | undefined;
16
17
  }>;
17
18
  static allowedProps: readonly (keyof {
18
19
  children?: React.ReactNode;
19
20
  variant?: "default" | "inverse" | undefined;
21
+ spacing?: "default" | "compact" | undefined;
20
22
  })[];
21
23
  static defaultProps: {
22
24
  children: null;
23
25
  variant: string;
26
+ spacing: string;
24
27
  };
25
28
  ref: Element | null;
26
29
  handleRef: (el: Element | null) => void;
package/types/Modal/ModalHeader/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalHeader/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQxC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEtE;;;;;GAKG;AACH,cAEM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,kBAAiB;IAE5C,MAAM,CAAC,SAAS;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;MAGlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,cAAc,QAAO,qBAAqB,CAIzC;IAED,IAAI,eAAe,YAQlB;IAED,MAAM;CAaP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalHeader/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQxC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEtE;;;;;GAKG;AACH,cAEM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,kBAAiB;IAE5C,MAAM,CAAC,SAAS;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;MAIlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,cAAc,QAAO,qBAAqB,CAIzC;IAED,IAAI,eAAe,YAQlB;IAED,MAAM;CAaP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}
package/types/Modal/ModalHeader/props.d.ts CHANGED
@@ -1,16 +1,17 @@
1
1
  import React from 'react';
2
- import type { PropValidators, ModalHeaderTheme } from '@instructure/shared-types';
2
+ import type { PropValidators, ModalHeaderTheme, OtherHTMLAttributes } from '@instructure/shared-types';
3
3
  import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
4
4
  declare type ModalHeaderOwnProps = {
5
5
  children?: React.ReactNode;
6
6
  variant?: 'default' | 'inverse';
7
+ spacing?: 'default' | 'compact';
7
8
  };
8
9
  declare type ModalHeaderStyleProps = {
9
10
  withCloseButton: boolean;
10
11
  };
11
12
  declare type PropKeys = keyof ModalHeaderOwnProps;
12
13
  declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
13
- declare type ModalHeaderProps = ModalHeaderOwnProps & WithStyleProps<ModalHeaderTheme, ModalHeaderStyle>;
14
+ declare type ModalHeaderProps = ModalHeaderOwnProps & WithStyleProps<ModalHeaderTheme, ModalHeaderStyle> & OtherHTMLAttributes<ModalHeaderOwnProps>;
14
15
  declare type ModalHeaderStyle = ComponentStyle<'modalHeader'>;
15
16
  declare const propTypes: PropValidators<PropKeys>;
16
17
  declare const allowedProps: AllowedPropKeys;
package/types/Modal/ModalHeader/props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalHeader/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EACjB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,aAAK,qBAAqB,GAAG;IAC3B,eAAe,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,mBAAmB,CAAA;AAEzC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,gBAAgB,GAAG,mBAAmB,GACzC,cAAc,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAA;AAEpD,aAAK,gBAAgB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAErD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAGvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAAyC,CAAA;AAE7D,YAAY,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,CAAA;AACzE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalHeader/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,aAAK,qBAAqB,GAAG;IAC3B,eAAe,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,mBAAmB,CAAA;AAEzC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,gBAAgB,GAAG,mBAAmB,GACzC,cAAc,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,GAClD,mBAAmB,CAAC,mBAAmB,CAAC,CAAA;AAE1C,aAAK,gBAAgB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAErD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAIvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAAoD,CAAA;AAExE,YAAY,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,CAAA;AACzE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
package/types/Modal/ModalHeader/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalHeader/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,KAAK,EACV,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EACjB,MAAM,SAAS,CAAA;AAEhB;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,gBAAgB,SACzB,gBAAgB,SAChB,qBAAqB,KAC3B,gBAmCF,CAAA;AAED,eAAe,aAAa,CAAA"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalHeader/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,KAAK,EACV,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EACjB,MAAM,SAAS,CAAA;AAEhB;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,gBAAgB,SACzB,gBAAgB,SAChB,qBAAqB,KAC3B,gBA0CF,CAAA;AAED,eAAe,aAAa,CAAA"}
package/types/Modal/ModalHeader/theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalHeader/theme.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D;;;;GAIG;AACH,QAAA,MAAM,sBAAsB,UAAW,KAAK,KAAG,gBAe9C,CAAA;AAED,eAAe,sBAAsB,CAAA"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/Modal/ModalHeader/theme.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D;;;;GAIG;AACH,QAAA,MAAM,sBAAsB,UAAW,KAAK,KAAG,gBAgB9C,CAAA;AAED,eAAe,sBAAsB,CAAA"}
package/types/Modal/props.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { AsElementType, PropValidators, ModalTheme } from '@instructure/shared-types';
2
+ import type { AsElementType, PropValidators, ModalTheme, OtherHTMLAttributes } from '@instructure/shared-types';
3
3
  import type { PortalNode } from '@instructure/ui-portal';
4
4
  import type { PositionMountNode } from '@instructure/ui-position';
5
5
  import type { TransitionType } from '@instructure/ui-motion';
@@ -33,7 +33,7 @@ declare type ModalOwnProps = {
33
33
  };
34
34
  declare type PropKeys = keyof ModalOwnProps;
35
35
  declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
36
- declare type ModalProps = ModalOwnProps & WithStyleProps<ModalTheme, ModalStyle>;
36
+ declare type ModalProps = ModalOwnProps & WithStyleProps<ModalTheme, ModalStyle> & OtherHTMLAttributes<ModalOwnProps>;
37
37
  declare type ModalStyle = ComponentStyle<'modal' | 'constrainContext'>;
38
38
  declare const propTypes: PropValidators<PropKeys>;
39
39
  declare const allowedProps: AllowedPropKeys;
package/types/Modal/props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Modal/props.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Modal/props.ts"],"names":[],"mappings":"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"}