@atlaskit/react-select 1.4.2 → 1.5.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 (5) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/components/containers.js +13 -8
  3. package/dist/es2019/components/containers.js +7 -2
  4. package/dist/esm/components/containers.js +13 -8
  5. package/package.json +5 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/react-select
2
2
 
3
+ ## 1.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#173737](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/173737)
8
+ [`667640085e5c7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/667640085e5c7) -
9
+ Update the font size for the textarea and select components at the `xs` breakpoint. The font size
10
+ will be increased to 16px to prevent IOS Safari from zooming in on the text field when it is
11
+ focused. Styles for larger breakpoints will remain unchanged.
12
+
13
+ Apply a fix to the textfield component to ensure monospace is correctly applied to the input at
14
+ the `media.above.xs` breakpoint.
15
+
16
+ These changes are currently behind a feature gate and will be evaluated for effectiveness. If
17
+ successful, they will be included in a future release.
18
+
3
19
  ## 1.4.2
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/components/containers.js CHANGED
@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.valueContainerCSS = exports.indicatorsContainerCSS = exports.containerCSS = exports.ValueContainer = exports.SelectContainer = exports.IndicatorsContainer = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
10
  var _react = require("@emotion/react");
11
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
+ var _primitives = require("@atlaskit/primitives");
10
13
  var _utils = require("../utils");
11
14
  /**
12
15
  * @jsxRuntime classic
@@ -20,14 +23,16 @@ var _utils = require("../utils");
20
23
  var containerCSS = exports.containerCSS = function containerCSS(_ref) {
21
24
  var isDisabled = _ref.isDisabled,
22
25
  isRtl = _ref.isRtl;
23
- return {
26
+ return (0, _defineProperty2.default)({
24
27
  label: 'container',
25
28
  direction: isRtl ? 'rtl' : undefined,
26
29
  position: 'relative',
27
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
30
+ font: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
28
31
  pointerEvents: 'all',
29
32
  cursor: isDisabled ? 'not-allowed' : undefined
30
- };
33
+ }, "".concat(_primitives.media.above.xs), {
34
+ font: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : undefined
35
+ });
31
36
  };
32
37
 
33
38
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -46,11 +51,11 @@ var SelectContainer = exports.SelectContainer = function SelectContainer(props)
46
51
  // Value Container
47
52
  // ==============================
48
53
 
49
- var valueContainerCSS = exports.valueContainerCSS = function valueContainerCSS(_ref2) {
50
- var isMulti = _ref2.isMulti,
51
- hasValue = _ref2.hasValue,
52
- isCompact = _ref2.isCompact,
53
- controlShouldRenderValue = _ref2.selectProps.controlShouldRenderValue;
54
+ var valueContainerCSS = exports.valueContainerCSS = function valueContainerCSS(_ref3) {
55
+ var isMulti = _ref3.isMulti,
56
+ hasValue = _ref3.hasValue,
57
+ isCompact = _ref3.isCompact,
58
+ controlShouldRenderValue = _ref3.selectProps.controlShouldRenderValue;
54
59
  return {
55
60
  alignItems: 'center',
56
61
  display: isMulti && hasValue && controlShouldRenderValue ? 'flex' : 'grid',
package/dist/es2019/components/containers.js CHANGED
@@ -5,6 +5,8 @@ import _extends from "@babel/runtime/helpers/extends";
5
5
  */
6
6
 
7
7
  import { jsx } from '@emotion/react';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
9
+ import { media } from '@atlaskit/primitives';
8
10
  import { getStyleProps } from '../utils';
9
11
 
10
12
  // ==============================
@@ -18,9 +20,12 @@ export const containerCSS = ({
18
20
  label: 'container',
19
21
  direction: isRtl ? 'rtl' : undefined,
20
22
  position: 'relative',
21
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
23
+ font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
22
24
  pointerEvents: 'all',
23
- cursor: isDisabled ? 'not-allowed' : undefined
25
+ cursor: isDisabled ? 'not-allowed' : undefined,
26
+ [`${media.above.xs}`]: {
27
+ font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : undefined
28
+ }
24
29
  });
25
30
 
26
31
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
package/dist/esm/components/containers.js CHANGED
@@ -1,10 +1,13 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
3
  /**
3
4
  * @jsxRuntime classic
4
5
  * @jsx jsx
5
6
  */
6
7
 
7
8
  import { jsx } from '@emotion/react';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
10
+ import { media } from '@atlaskit/primitives';
8
11
  import { getStyleProps } from '../utils';
9
12
 
10
13
  // ==============================
@@ -14,14 +17,16 @@ import { getStyleProps } from '../utils';
14
17
  export var containerCSS = function containerCSS(_ref) {
15
18
  var isDisabled = _ref.isDisabled,
16
19
  isRtl = _ref.isRtl;
17
- return {
20
+ return _defineProperty({
18
21
  label: 'container',
19
22
  direction: isRtl ? 'rtl' : undefined,
20
23
  position: 'relative',
21
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
24
+ font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
22
25
  pointerEvents: 'all',
23
26
  cursor: isDisabled ? 'not-allowed' : undefined
24
- };
27
+ }, "".concat(media.above.xs), {
28
+ font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : undefined
29
+ });
25
30
  };
26
31
 
27
32
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -40,11 +45,11 @@ export var SelectContainer = function SelectContainer(props) {
40
45
  // Value Container
41
46
  // ==============================
42
47
 
43
- export var valueContainerCSS = function valueContainerCSS(_ref2) {
44
- var isMulti = _ref2.isMulti,
45
- hasValue = _ref2.hasValue,
46
- isCompact = _ref2.isCompact,
47
- controlShouldRenderValue = _ref2.selectProps.controlShouldRenderValue;
48
+ export var valueContainerCSS = function valueContainerCSS(_ref3) {
49
+ var isMulti = _ref3.isMulti,
50
+ hasValue = _ref3.hasValue,
51
+ isCompact = _ref3.isCompact,
52
+ controlShouldRenderValue = _ref3.selectProps.controlShouldRenderValue;
48
53
  return {
49
54
  alignItems: 'center',
50
55
  display: isMulti && hasValue && controlShouldRenderValue ? 'flex' : 'grid',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/react-select",
3
- "version": "1.4.2",
3
+ "version": "1.5.0",
4
4
  "description": "A forked version of react-select to only be used in atlaskit/select",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -30,6 +30,7 @@
30
30
  "dependencies": {
31
31
  "@atlaskit/ds-lib": "^3.3.0",
32
32
  "@atlaskit/platform-feature-flags": "^0.3.0",
33
+ "@atlaskit/primitives": "^13.3.0",
33
34
  "@atlaskit/tokens": "^2.4.0",
34
35
  "@babel/runtime": "^7.0.0",
35
36
  "@emotion/react": "^11.7.1",
@@ -59,6 +60,9 @@
59
60
  },
60
61
  "platform-component-visual-refresh": {
61
62
  "type": "boolean"
63
+ },
64
+ "platform_design_system_team_safari_input_fix": {
65
+ "type": "boolean"
62
66
  }
63
67
  },
64
68
  "techstack": {