@instructure/ui-modal 7.11.0 → 7.14.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 (10) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/es/Modal/ModalHeader/index.js +14 -9
  3. package/es/Modal/ModalHeader/theme.js +1 -0
  4. package/lib/Modal/ModalHeader/index.js +14 -9
  5. package/lib/Modal/ModalHeader/theme.js +1 -0
  6. package/package.json +17 -17
  7. package/src/Modal/ModalHeader/index.js +6 -3
  8. package/src/Modal/ModalHeader/styles.css +18 -5
  9. package/src/Modal/ModalHeader/theme.js +1 -0
  10. package/src/Modal/README.md +98 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
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
+ ## [7.14.1](https://github.com/instructure/instructure-ui/compare/v7.14.0...v7.14.1) (2021-12-06)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-modal
9
+
10
+ # [7.14.0](https://github.com/instructure/instructure-ui/compare/v7.13.0...v7.14.0) (2021-12-01)
11
+
12
+ **Note:** Version bump only for package @instructure/ui-modal
13
+
14
+ # [7.13.0](https://github.com/instructure/instructure-ui/compare/v7.12.0...v7.13.0) (2021-11-18)
15
+
16
+ **Note:** Version bump only for package @instructure/ui-modal
17
+
18
+ # [7.12.0](https://github.com/instructure/instructure-ui/compare/v7.11.0...v7.12.0) (2021-10-15)
19
+
20
+ ### Features
21
+
22
+ - **ui-modal:** add `spacing` prop to `Modal.Header` ([903c3bc](https://github.com/instructure/instructure-ui/commit/903c3bc)), backports [#740](https://github.com/instructure/instructure-ui/issues/740) from V8.11.0
23
+
6
24
  # [7.11.0](https://github.com/instructure/instructure-ui/compare/v7.10.0...v7.11.0) (2021-09-17)
7
25
 
8
26
  **Note:** Version bump only for package @instructure/ui-modal
package/es/Modal/ModalHeader/index.js CHANGED
@@ -38,13 +38,15 @@ import { CloseButton } from '@instructure/ui-buttons';
38
38
  import { themeable } from '@instructure/ui-themeable';
39
39
  import { testable } from '@instructure/ui-testable';
40
40
  var styles = {
41
- componentId: 'cDMBL',
41
+ componentId: 'eHzxc',
42
42
  template: function template(theme) {
43
- return "\n\n.cDMBL_bGBk{-webkit-padding-end:".concat(theme.padding || 'inherit', ";-webkit-padding-start:").concat(theme.padding || 'inherit', ";background:").concat(theme.background || 'inherit', ";border-bottom-color:").concat(theme.borderColor || 'inherit', ";border-bottom-style:solid;border-bottom-width:0.0625rem;box-sizing:border-box;flex:0 0 auto;padding:").concat(theme.padding || 'inherit', ";padding-inline-end:").concat(theme.padding || 'inherit', ";padding-inline-start:").concat(theme.padding || 'inherit', "}\n\n[dir=ltr] .cDMBL_bGBk{padding-left:").concat(theme.padding || 'inherit', ";padding-right:").concat(theme.padding || 'inherit', "}\n\n[dir=rtl] .cDMBL_bGBk{padding-left:").concat(theme.padding || 'inherit', ";padding-right:").concat(theme.padding || 'inherit', "}\n\n.cDMBL_enfx{background:").concat(theme.inverseBackground || 'inherit', ";border-bottom-color:").concat(theme.inverseBorderColor || 'inherit', "}\n\n.cDMBL_ssMr{-webkit-padding-end:calc(").concat(theme.padding || 'inherit', "*2 + 1em);padding-inline-end:calc(").concat(theme.padding || 'inherit', "*2 + 1em)}\n\n[dir=ltr] .cDMBL_ssMr{padding-right:calc(").concat(theme.padding || 'inherit', "*2 + 1em)}\n\n[dir=rtl] .cDMBL_ssMr{padding-left:calc(").concat(theme.padding || 'inherit', "*2 + 1em)}");
43
+ return "\n\n.eHzxc_bGBk{background:".concat(theme.background || 'inherit', ";border-bottom-color:").concat(theme.borderColor || 'inherit', ";border-bottom-style:solid;border-bottom-width:0.0625rem;box-sizing:border-box;flex:0 0 auto}\n\n.eHzxc_enfx{background:").concat(theme.inverseBackground || 'inherit', ";border-bottom-color:").concat(theme.inverseBorderColor || 'inherit', "}\n\n.eHzxc_bcOZ{-webkit-padding-end:").concat(theme.padding || 'inherit', ";-webkit-padding-start:").concat(theme.padding || 'inherit', ";padding:").concat(theme.padding || 'inherit', ";padding-inline-end:").concat(theme.padding || 'inherit', ";padding-inline-start:").concat(theme.padding || 'inherit', "}\n\n[dir=ltr] .eHzxc_bcOZ{padding-left:").concat(theme.padding || 'inherit', ";padding-right:").concat(theme.padding || 'inherit', "}\n\n[dir=rtl] .eHzxc_bcOZ{padding-left:").concat(theme.padding || 'inherit', ";padding-right:").concat(theme.padding || 'inherit', "}\n\n.eHzxc_bcOZ.eHzxc_ssMr{-webkit-padding-end:calc(").concat(theme.padding || 'inherit', "*2 + 1em);padding-inline-end:calc(").concat(theme.padding || 'inherit', "*2 + 1em)}\n\n[dir=ltr] .eHzxc_bcOZ.eHzxc_ssMr{padding-right:calc(").concat(theme.padding || 'inherit', "*2 + 1em)}\n\n[dir=rtl] .eHzxc_bcOZ.eHzxc_ssMr{padding-left:calc(").concat(theme.padding || 'inherit', "*2 + 1em)}\n\n.eHzxc_cieE{-webkit-padding-end:").concat(theme.paddingCompact || 'inherit', ";-webkit-padding-start:").concat(theme.paddingCompact || 'inherit', ";padding:").concat(theme.paddingCompact || 'inherit', ";padding-inline-end:").concat(theme.paddingCompact || 'inherit', ";padding-inline-start:").concat(theme.paddingCompact || 'inherit', "}\n\n[dir=ltr] .eHzxc_cieE{padding-left:").concat(theme.paddingCompact || 'inherit', ";padding-right:").concat(theme.paddingCompact || 'inherit', "}\n\n[dir=rtl] .eHzxc_cieE{padding-left:").concat(theme.paddingCompact || 'inherit', ";padding-right:").concat(theme.paddingCompact || 'inherit', "}\n\n.eHzxc_cieE.eHzxc_ssMr{-webkit-padding-end:calc(").concat(theme.paddingCompact || 'inherit', "*2 + 1em);padding-inline-end:calc(").concat(theme.paddingCompact || 'inherit', "*2 + 1em)}\n\n[dir=ltr] .eHzxc_cieE.eHzxc_ssMr{padding-right:calc(").concat(theme.paddingCompact || 'inherit', "*2 + 1em)}\n\n[dir=rtl] .eHzxc_cieE.eHzxc_ssMr{padding-left:calc(").concat(theme.paddingCompact || 'inherit', "*2 + 1em)}");
44
44
  },
45
- 'root': 'cDMBL_bGBk',
46
- 'inverse': 'cDMBL_enfx',
47
- 'withCloseButton': 'cDMBL_ssMr'
45
+ 'root': 'eHzxc_bGBk',
46
+ 'inverse': 'eHzxc_enfx',
47
+ 'defaultSpacing': 'eHzxc_bcOZ',
48
+ 'withCloseButton': 'eHzxc_ssMr',
49
+ 'compactSpacing': 'eHzxc_cieE'
48
50
  };
49
51
  import theme from "./theme.js";
50
52
  /**
@@ -73,7 +75,8 @@ var ModalHeader = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_cl
73
75
  var _this$props = this.props,
74
76
  children = _this$props.children,
75
77
  variant = _this$props.variant,
76
- rest = _objectWithoutProperties(_this$props, ["children", "variant"]);
78
+ spacing = _this$props.spacing,
79
+ rest = _objectWithoutProperties(_this$props, ["children", "variant", "spacing"]);
77
80
 
78
81
  var usesCloseButton = false;
79
82
  React.Children.forEach(children, function (child) {
@@ -81,7 +84,7 @@ var ModalHeader = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_cl
81
84
  usesCloseButton = true;
82
85
  }
83
86
  });
84
- var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles.inverse, variant === 'inverse'), _defineProperty(_classes, styles.withCloseButton, usesCloseButton === true), _classes);
87
+ var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles["".concat(spacing, "Spacing")], true), _defineProperty(_classes, styles.inverse, variant === 'inverse'), _defineProperty(_classes, styles.withCloseButton, usesCloseButton === true), _classes);
85
88
  return /*#__PURE__*/React.createElement("div", Object.assign({
86
89
  className: classnames(classes)
87
90
  }, passthroughProps(rest)), children);
@@ -92,10 +95,12 @@ var ModalHeader = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_cl
92
95
  return ModalHeader;
93
96
  }(Component), _class2.propTypes = {
94
97
  children: PropTypes.node,
95
- variant: PropTypes.oneOf(['default', 'inverse'])
98
+ variant: PropTypes.oneOf(['default', 'inverse']),
99
+ spacing: PropTypes.oneOf(['default', 'compact'])
96
100
  }, _class2.defaultProps = {
97
101
  children: null,
98
- variant: 'default'
102
+ variant: 'default',
103
+ spacing: 'default'
99
104
  }, _temp)) || _class) || _class);
100
105
  export default ModalHeader;
101
106
  export { ModalHeader };
package/es/Modal/ModalHeader/theme.js CHANGED
@@ -28,6 +28,7 @@ export default function (_ref) {
28
28
  background: colors.backgroundLightest,
29
29
  borderColor: colors.borderMedium,
30
30
  padding: spacing.medium,
31
+ paddingCompact: spacing.small,
31
32
  inverseBackground: colors.backgroundDarkest,
32
33
  inverseBorderColor: colors.backgroundDarkest
33
34
  };
package/lib/Modal/ModalHeader/index.js CHANGED
@@ -42,13 +42,15 @@ var _theme = _interopRequireDefault(require("./theme.js"));
42
42
  var _dec, _dec2, _class, _class2, _temp;
43
43
 
44
44
  var styles = {
45
- componentId: 'cDMBL',
45
+ componentId: 'eHzxc',
46
46
  template: function template(theme) {
47
- return "\n\n.cDMBL_bGBk{-webkit-padding-end:".concat(theme.padding || 'inherit', ";-webkit-padding-start:").concat(theme.padding || 'inherit', ";background:").concat(theme.background || 'inherit', ";border-bottom-color:").concat(theme.borderColor || 'inherit', ";border-bottom-style:solid;border-bottom-width:0.0625rem;box-sizing:border-box;flex:0 0 auto;padding:").concat(theme.padding || 'inherit', ";padding-inline-end:").concat(theme.padding || 'inherit', ";padding-inline-start:").concat(theme.padding || 'inherit', "}\n\n[dir=ltr] .cDMBL_bGBk{padding-left:").concat(theme.padding || 'inherit', ";padding-right:").concat(theme.padding || 'inherit', "}\n\n[dir=rtl] .cDMBL_bGBk{padding-left:").concat(theme.padding || 'inherit', ";padding-right:").concat(theme.padding || 'inherit', "}\n\n.cDMBL_enfx{background:").concat(theme.inverseBackground || 'inherit', ";border-bottom-color:").concat(theme.inverseBorderColor || 'inherit', "}\n\n.cDMBL_ssMr{-webkit-padding-end:calc(").concat(theme.padding || 'inherit', "*2 + 1em);padding-inline-end:calc(").concat(theme.padding || 'inherit', "*2 + 1em)}\n\n[dir=ltr] .cDMBL_ssMr{padding-right:calc(").concat(theme.padding || 'inherit', "*2 + 1em)}\n\n[dir=rtl] .cDMBL_ssMr{padding-left:calc(").concat(theme.padding || 'inherit', "*2 + 1em)}");
47
+ return "\n\n.eHzxc_bGBk{background:".concat(theme.background || 'inherit', ";border-bottom-color:").concat(theme.borderColor || 'inherit', ";border-bottom-style:solid;border-bottom-width:0.0625rem;box-sizing:border-box;flex:0 0 auto}\n\n.eHzxc_enfx{background:").concat(theme.inverseBackground || 'inherit', ";border-bottom-color:").concat(theme.inverseBorderColor || 'inherit', "}\n\n.eHzxc_bcOZ{-webkit-padding-end:").concat(theme.padding || 'inherit', ";-webkit-padding-start:").concat(theme.padding || 'inherit', ";padding:").concat(theme.padding || 'inherit', ";padding-inline-end:").concat(theme.padding || 'inherit', ";padding-inline-start:").concat(theme.padding || 'inherit', "}\n\n[dir=ltr] .eHzxc_bcOZ{padding-left:").concat(theme.padding || 'inherit', ";padding-right:").concat(theme.padding || 'inherit', "}\n\n[dir=rtl] .eHzxc_bcOZ{padding-left:").concat(theme.padding || 'inherit', ";padding-right:").concat(theme.padding || 'inherit', "}\n\n.eHzxc_bcOZ.eHzxc_ssMr{-webkit-padding-end:calc(").concat(theme.padding || 'inherit', "*2 + 1em);padding-inline-end:calc(").concat(theme.padding || 'inherit', "*2 + 1em)}\n\n[dir=ltr] .eHzxc_bcOZ.eHzxc_ssMr{padding-right:calc(").concat(theme.padding || 'inherit', "*2 + 1em)}\n\n[dir=rtl] .eHzxc_bcOZ.eHzxc_ssMr{padding-left:calc(").concat(theme.padding || 'inherit', "*2 + 1em)}\n\n.eHzxc_cieE{-webkit-padding-end:").concat(theme.paddingCompact || 'inherit', ";-webkit-padding-start:").concat(theme.paddingCompact || 'inherit', ";padding:").concat(theme.paddingCompact || 'inherit', ";padding-inline-end:").concat(theme.paddingCompact || 'inherit', ";padding-inline-start:").concat(theme.paddingCompact || 'inherit', "}\n\n[dir=ltr] .eHzxc_cieE{padding-left:").concat(theme.paddingCompact || 'inherit', ";padding-right:").concat(theme.paddingCompact || 'inherit', "}\n\n[dir=rtl] .eHzxc_cieE{padding-left:").concat(theme.paddingCompact || 'inherit', ";padding-right:").concat(theme.paddingCompact || 'inherit', "}\n\n.eHzxc_cieE.eHzxc_ssMr{-webkit-padding-end:calc(").concat(theme.paddingCompact || 'inherit', "*2 + 1em);padding-inline-end:calc(").concat(theme.paddingCompact || 'inherit', "*2 + 1em)}\n\n[dir=ltr] .eHzxc_cieE.eHzxc_ssMr{padding-right:calc(").concat(theme.paddingCompact || 'inherit', "*2 + 1em)}\n\n[dir=rtl] .eHzxc_cieE.eHzxc_ssMr{padding-left:calc(").concat(theme.paddingCompact || 'inherit', "*2 + 1em)}");
48
48
  },
49
- 'root': 'cDMBL_bGBk',
50
- 'inverse': 'cDMBL_enfx',
51
- 'withCloseButton': 'cDMBL_ssMr'
49
+ 'root': 'eHzxc_bGBk',
50
+ 'inverse': 'eHzxc_enfx',
51
+ 'defaultSpacing': 'eHzxc_bcOZ',
52
+ 'withCloseButton': 'eHzxc_ssMr',
53
+ 'compactSpacing': 'eHzxc_cieE'
52
54
  };
53
55
 
54
56
  /**
@@ -75,7 +77,8 @@ var ModalHeader = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.them
75
77
  var _this$props = this.props,
76
78
  children = _this$props.children,
77
79
  variant = _this$props.variant,
78
- rest = (0, _objectWithoutProperties2.default)(_this$props, ["children", "variant"]);
80
+ spacing = _this$props.spacing,
81
+ rest = (0, _objectWithoutProperties2.default)(_this$props, ["children", "variant", "spacing"]);
79
82
  var usesCloseButton = false;
80
83
 
81
84
  _react.default.Children.forEach(children, function (child) {
@@ -84,7 +87,7 @@ var ModalHeader = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.them
84
87
  }
85
88
  });
86
89
 
87
- var classes = (_classes = {}, (0, _defineProperty2.default)(_classes, styles.root, true), (0, _defineProperty2.default)(_classes, styles.inverse, variant === 'inverse'), (0, _defineProperty2.default)(_classes, styles.withCloseButton, usesCloseButton === true), _classes);
90
+ var classes = (_classes = {}, (0, _defineProperty2.default)(_classes, styles.root, true), (0, _defineProperty2.default)(_classes, styles["".concat(spacing, "Spacing")], true), (0, _defineProperty2.default)(_classes, styles.inverse, variant === 'inverse'), (0, _defineProperty2.default)(_classes, styles.withCloseButton, usesCloseButton === true), _classes);
88
91
  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
89
92
  className: (0, _classnames.default)(classes)
90
93
  }, (0, _passthroughProps.passthroughProps)(rest)), children);
@@ -94,10 +97,12 @@ var ModalHeader = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.them
94
97
  return ModalHeader;
95
98
  }(_react.Component), _class2.propTypes = {
96
99
  children: _propTypes.default.node,
97
- variant: _propTypes.default.oneOf(['default', 'inverse'])
100
+ variant: _propTypes.default.oneOf(['default', 'inverse']),
101
+ spacing: _propTypes.default.oneOf(['default', 'compact'])
98
102
  }, _class2.defaultProps = {
99
103
  children: null,
100
- variant: 'default'
104
+ variant: 'default',
105
+ spacing: 'default'
101
106
  }, _temp)) || _class) || _class);
102
107
  exports.ModalHeader = ModalHeader;
103
108
  var _default = ModalHeader;
package/lib/Modal/ModalHeader/theme.js CHANGED
@@ -35,6 +35,7 @@ function _default(_ref) {
35
35
  background: colors.backgroundLightest,
36
36
  borderColor: colors.borderMedium,
37
37
  padding: spacing.medium,
38
+ paddingCompact: spacing.small,
38
39
  inverseBackground: colors.backgroundDarkest,
39
40
  inverseBorderColor: colors.backgroundDarkest
40
41
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-modal",
3
- "version": "7.11.0",
3
+ "version": "7.14.1",
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",
@@ -23,18 +23,18 @@
23
23
  "license": "MIT",
24
24
  "dependencies": {
25
25
  "@babel/runtime": "^7.9.2",
26
- "@instructure/console": "^7.11.0",
27
- "@instructure/ui-buttons": "^7.11.0",
28
- "@instructure/ui-dialog": "^7.11.0",
29
- "@instructure/ui-motion": "^7.11.0",
30
- "@instructure/ui-overlays": "^7.11.0",
31
- "@instructure/ui-portal": "^7.11.0",
32
- "@instructure/ui-prop-types": "^7.11.0",
33
- "@instructure/ui-react-utils": "^7.11.0",
34
- "@instructure/ui-testable": "^7.11.0",
35
- "@instructure/ui-themeable": "^7.11.0",
36
- "@instructure/ui-utils": "^7.11.0",
37
- "@instructure/ui-view": "^7.11.0",
26
+ "@instructure/console": "^7.14.1",
27
+ "@instructure/ui-buttons": "^7.14.1",
28
+ "@instructure/ui-dialog": "^7.14.1",
29
+ "@instructure/ui-motion": "^7.14.1",
30
+ "@instructure/ui-overlays": "^7.14.1",
31
+ "@instructure/ui-portal": "^7.14.1",
32
+ "@instructure/ui-prop-types": "^7.14.1",
33
+ "@instructure/ui-react-utils": "^7.14.1",
34
+ "@instructure/ui-testable": "^7.14.1",
35
+ "@instructure/ui-themeable": "^7.14.1",
36
+ "@instructure/ui-utils": "^7.14.1",
37
+ "@instructure/ui-view": "^7.14.1",
38
38
  "classnames": "^2",
39
39
  "prop-types": "^15"
40
40
  },
@@ -42,10 +42,10 @@
42
42
  "react": "^16.8"
43
43
  },
44
44
  "devDependencies": {
45
- "@instructure/ui-babel-preset": "^7.11.0",
46
- "@instructure/ui-color-utils": "^7.11.0",
47
- "@instructure/ui-test-locator": "^7.11.0",
48
- "@instructure/ui-test-utils": "^7.11.0"
45
+ "@instructure/ui-babel-preset": "^7.14.1",
46
+ "@instructure/ui-color-utils": "^7.14.1",
47
+ "@instructure/ui-test-locator": "^7.14.1",
48
+ "@instructure/ui-test-utils": "^7.14.1"
49
49
  },
50
50
  "publishConfig": {
51
51
  "access": "public"
package/src/Modal/ModalHeader/index.js CHANGED
@@ -48,16 +48,18 @@ id: Modal.Header
48
48
  class ModalHeader extends Component {
49
49
  static propTypes = {
50
50
  children: PropTypes.node,
51
- variant: PropTypes.oneOf(['default', 'inverse'])
51
+ variant: PropTypes.oneOf(['default', 'inverse']),
52
+ spacing: PropTypes.oneOf(['default', 'compact'])
52
53
  }
53
54
 
54
55
  static defaultProps = {
55
56
  children: null,
56
- variant: 'default'
57
+ variant: 'default',
58
+ spacing: 'default'
57
59
  }
58
60
 
59
61
  render() {
60
- const { children, variant, ...rest } = this.props
62
+ const { children, variant, spacing, ...rest } = this.props
61
63
  let usesCloseButton = false
62
64
 
63
65
  React.Children.forEach(children, (child) => {
@@ -68,6 +70,7 @@ class ModalHeader extends Component {
68
70
 
69
71
  const classes = {
70
72
  [styles.root]: true,
73
+ [styles[`${spacing}Spacing`]]: true,
71
74
  [styles.inverse]: variant === 'inverse',
72
75
  [styles.withCloseButton]: usesCloseButton === true
73
76
  }
package/src/Modal/ModalHeader/styles.css CHANGED
@@ -1,8 +1,5 @@
1
1
  .root {
2
2
  box-sizing: border-box;
3
- padding: var(--padding);
4
- padding-inline-end: var(--padding);
5
- padding-inline-start: var(--padding);
6
3
  flex: 0 0 auto;
7
4
  background: var(--background);
8
5
  border-bottom-width: 0.0625rem;
@@ -15,6 +12,22 @@
15
12
  border-bottom-color: var(--inverseBorderColor);
16
13
  }
17
14
 
18
- .withCloseButton {
19
- padding-inline-end: calc(var(--padding) * 2 + 1em);
15
+ .defaultSpacing {
16
+ padding: var(--padding);
17
+ padding-inline-end: var(--padding);
18
+ padding-inline-start: var(--padding);
19
+
20
+ &.withCloseButton {
21
+ padding-inline-end: calc(var(--padding) * 2 + 1em);
22
+ }
23
+ }
24
+
25
+ .compactSpacing {
26
+ padding: var(--paddingCompact);
27
+ padding-inline-end: var(--paddingCompact);
28
+ padding-inline-start: var(--paddingCompact);
29
+
30
+ &.withCloseButton {
31
+ padding-inline-end: calc(var(--paddingCompact) * 2 + 1em);
32
+ }
20
33
  }
package/src/Modal/ModalHeader/theme.js CHANGED
@@ -27,6 +27,7 @@ export default function ({ colors, spacing }) {
27
27
  background: colors.backgroundLightest,
28
28
  borderColor: colors.borderMedium,
29
29
  padding: spacing.medium,
30
+ paddingCompact: spacing.small,
30
31
 
31
32
  inverseBackground: colors.backgroundDarkest,
32
33
  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,102 @@ 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
+ this.state = {
428
+ open: false,
429
+ smallViewport: true
430
+ }
431
+ }
432
+ toggleOpen = () => {
433
+ this.setState(function (state) {
434
+ return { open: !state.open }
435
+ })
436
+ }
437
+ toggleViewport = async () => {
438
+ await this.setState(function (state) {
439
+ return { smallViewport: !state.smallViewport }
440
+ })
441
+ }
442
+ renderCloseButton () {
443
+ return (
444
+ <CloseButton
445
+ placement="end"
446
+ offset="small"
447
+ onClick={this.toggleOpen}
448
+ screenReaderLabel="Close"
449
+ />
450
+ )
451
+ }
452
+ render () {
453
+ return (
454
+ <div>
455
+ <Button onClick={this.toggleOpen}>
456
+ {this.state.open ? 'Close' : 'Open'} the Modal
457
+ </Button>
458
+ <Button
459
+ onClick={this.toggleViewport}
460
+ margin='0 0 0 small'
461
+ id="toggleViewportButton"
462
+ >
463
+ Toggle viewport
464
+ </Button>
465
+ <Modal
466
+ open={this.state.open}
467
+ size={this.state.smallViewport ? 'fullscreen' : 'small'}
468
+ onDismiss={(event) => {
469
+ if (event.target.id !== 'toggleViewportButton') {
470
+ this.setState({ open: false })
471
+ }
472
+ }}
473
+ label="Modal Dialog: Hello World"
474
+ shouldCloseOnDocumentClick
475
+ mountNode={() => document.getElementById('viewportExample')}
476
+ constrain="parent"
477
+ >
478
+ <Modal.Header spacing={this.state.smallViewport ? 'compact' : 'default'}>
479
+ {this.renderCloseButton()}
480
+ {this.state.smallViewport
481
+ ? <Heading as="h2" level="h3" theme={{ h3FontWeight: 400 }}>This Modal is optimized for small viewport</Heading>
482
+ : <Heading as="h2">This is a deafult size Modal</Heading>
483
+ }
484
+ </Modal.Header>
485
+ <Modal.Body>
486
+ <View as="p" margin="none none small"><Text>{fpo}</Text></View>
487
+ </Modal.Body>
488
+ <Modal.Footer>
489
+ <Button onClick={this.handleButtonClick} margin="0 x-small 0 0">Close</Button>
490
+ <Button onClick={this.handleButtonClick} color="primary" type="submit">Submit</Button>
491
+ </Modal.Footer>
492
+ </Modal>
493
+ <View
494
+ background="primary-inverse"
495
+ margin="medium auto none"
496
+ display="block"
497
+ width={this.state.smallViewport ? '20rem' : '50rem'}
498
+ height="37.5rem"
499
+ borderWidth="large"
500
+ id="viewportExample"
501
+ >
502
+ </View>
503
+ </div>
504
+ )
505
+ }
506
+ }
507
+ render(<Example />)
508
+ ```
509
+
413
510
  ### Guidelines
414
511
 
415
512
  ```js