@instructure/ui-tabs 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 (9) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/es/Tabs/Tab/index.js +9 -7
  3. package/es/Tabs/index.js +4 -6
  4. package/lib/Tabs/Tab/index.js +9 -7
  5. package/lib/Tabs/index.js +4 -6
  6. package/package.json +18 -18
  7. package/src/Tabs/Tab/index.js +2 -0
  8. package/src/Tabs/Tab/styles.css +14 -3
  9. package/src/Tabs/index.js +1 -2
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-tabs
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-tabs
13
+
14
+ # [7.13.0](https://github.com/instructure/instructure-ui/compare/v7.12.0...v7.13.0) (2021-11-18)
15
+
16
+ ### Features
17
+
18
+ - **ui-tabs:** update Tabs focus styles to inset focus ring ([d5abac4](https://github.com/instructure/instructure-ui/commit/d5abac4)), backports [#782](https://github.com/instructure/instructure-ui/issues/782)
19
+
20
+ # [7.12.0](https://github.com/instructure/instructure-ui/compare/v7.11.0...v7.12.0) (2021-10-15)
21
+
22
+ **Note:** Version bump only for package @instructure/ui-tabs
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-tabs
package/es/Tabs/Tab/index.js CHANGED
@@ -37,14 +37,14 @@ import { themeable } from '@instructure/ui-themeable';
37
37
  import { passthroughProps, callRenderProp, deprecated } from '@instructure/ui-react-utils';
38
38
  import { View } from '@instructure/ui-view';
39
39
  var styles = {
40
- componentId: 'ofhgV',
40
+ componentId: 'XOwIb',
41
41
  template: function template(theme) {
42
- return "\n\n.ofhgV_bGBk{-ms-user-select:none;-webkit-user-select:none;cursor:pointer;font-family:".concat(theme.fontFamily || 'inherit', ";font-size:").concat(theme.fontSize || 'inherit', ";font-weight:").concat(theme.fontWeight || 'inherit', ";line-height:").concat(theme.lineHeight || 'inherit', ";user-select:none}\n\n.ofhgV_bGBk[aria-disabled],.ofhgV_bGBk[aria-selected]{cursor:default}\n\n.ofhgV_bGBk[aria-disabled]{opacity:0.5}\n\n.ofhgV_bGBk:focus{outline:none}\n\n.ofhgV_ddES,.ofhgV_eLeB{white-space:nowrap}\n\n.ofhgV_eLeB{-webkit-margin-end:0.2em;border:0.0625rem solid transparent;border-top-left-radius:0.1875rem;border-top-right-radius:0.1875rem;color:").concat(theme.secondaryColor || 'inherit', ";margin-bottom:-0.0625rem;margin-inline-end:0.2em;padding:0.75rem 1rem;position:relative}\n\n[dir=ltr] .ofhgV_eLeB{margin-right:0.2em}\n\n[dir=rtl] .ofhgV_eLeB{margin-left:0.2em}\n\n.ofhgV_eLeB:first-of-type{-webkit-margin-start:0;margin-inline-start:0}\n\n[dir=ltr] .ofhgV_eLeB:first-of-type{margin-left:0}\n\n[dir=rtl] .ofhgV_eLeB:first-of-type{margin-right:0}\n\n.ofhgV_eLeB:not([aria-selected]):not([aria-disabled]):hover,.ofhgV_eLeB[aria-selected]{background:").concat(theme.secondarySelectedBackground || 'inherit', ";border-color:").concat(theme.secondarySelectedBorderColor || 'inherit', "}\n\n.ofhgV_eLeB:hover,.ofhgV_eLeB[aria-disabled],.ofhgV_eLeB[aria-selected]{color:").concat(theme.secondarySelectedColor || 'inherit', "}\n\n.ofhgV_eLeB[aria-selected]{border-bottom-color:").concat(theme.secondarySelectedBackground || 'inherit', ";z-index:").concat(theme.zIndex || 'inherit', "}\n\n@keyframes ofhgV_epeh{to{opacity:1;transform:translateZ(0) scaleX(1)}}\n\n.ofhgV_ddES{color:").concat(theme.defaultColor || 'inherit', ";line-height:1;padding:1rem 1.25rem;position:relative;z-index:").concat(theme.zIndex || 'inherit', "}\n\n.ofhgV_ddES:after{bottom:0;content:\"\";height:0.25rem;inset-inline-start:0;opacity:0;position:absolute;transform:translateZ(0) scaleX(0.01);width:100%}\n\n[dir=ltr] .ofhgV_ddES:after{left:0}\n\n[dir=rtl] .ofhgV_ddES:after{right:0}\n\n.ofhgV_ddES[aria-disabled]{font-weight:400}\n\n.ofhgV_ddES:not([aria-selected]):not([aria-disabled]):hover{border-bottom-color:").concat(theme.defaultHoverBorderColor || 'inherit', "}\n\n.ofhgV_ddES[aria-selected]:after{animation-duration:0.2s;animation-fill-mode:forwards;animation-name:ofhgV_epeh;animation-timing-function:ease-out;background-color:").concat(theme.defaultSelectedBorderColor || 'inherit', "}");
42
+ return "\n\n.XOwIb_bGBk{-ms-user-select:none;-webkit-user-select:none;cursor:pointer;font-family:".concat(theme.fontFamily || 'inherit', ";font-size:").concat(theme.fontSize || 'inherit', ";font-weight:").concat(theme.fontWeight || 'inherit', ";line-height:").concat(theme.lineHeight || 'inherit', ";user-select:none}\n\n.XOwIb_bGBk[aria-disabled],.XOwIb_bGBk[aria-selected]{cursor:default}\n\n.XOwIb_bGBk[aria-disabled]{opacity:0.5}\n\n.XOwIb_bGBk:before{border-radius:0.25rem!important;inset:0.5rem!important}\n\n.XOwIb_bGBk:focus:before{inset:0.375rem!important}\n\n.XOwIb_ddES,.XOwIb_eLeB{white-space:nowrap}\n\n.XOwIb_eLeB{-webkit-margin-end:0.2em;border:0.0625rem solid transparent;border-top-left-radius:0.1875rem;border-top-right-radius:0.1875rem;color:").concat(theme.secondaryColor || 'inherit', ";margin-bottom:-0.0625rem;margin-inline-end:0.2em;padding:0.75rem 1rem;position:relative}\n\n[dir=ltr] .XOwIb_eLeB{margin-right:0.2em}\n\n[dir=rtl] .XOwIb_eLeB{margin-left:0.2em}\n\n.XOwIb_eLeB:first-of-type{-webkit-margin-start:0;margin-inline-start:0}\n\n[dir=ltr] .XOwIb_eLeB:first-of-type{margin-left:0}\n\n[dir=rtl] .XOwIb_eLeB:first-of-type{margin-right:0}\n\n.XOwIb_eLeB:not([aria-selected]):not([aria-disabled]):hover,.XOwIb_eLeB[aria-selected]{background:").concat(theme.secondarySelectedBackground || 'inherit', ";border-color:").concat(theme.secondarySelectedBorderColor || 'inherit', "}\n\n.XOwIb_eLeB:hover,.XOwIb_eLeB[aria-disabled],.XOwIb_eLeB[aria-selected]{color:").concat(theme.secondarySelectedColor || 'inherit', "}\n\n.XOwIb_eLeB[aria-selected]{border-bottom-color:").concat(theme.secondarySelectedBackground || 'inherit', ";z-index:").concat(theme.zIndex || 'inherit', "}\n\n@keyframes XOwIb_epeh{to{opacity:1;transform:translateZ(0) scaleX(1)}}\n\n.XOwIb_ddES{color:").concat(theme.defaultColor || 'inherit', ";line-height:1;padding:1rem 1.25rem;position:relative;z-index:").concat(theme.zIndex || 'inherit', "}\n\n.XOwIb_ddES:after{bottom:0;content:\"\";height:0.25rem;inset-inline-start:0;opacity:0;position:absolute;transform:translateZ(0) scaleX(0.01);width:100%}\n\n[dir=ltr] .XOwIb_ddES:after{left:0}\n\n[dir=rtl] .XOwIb_ddES:after{right:0}\n\n.XOwIb_ddES[aria-disabled]{font-weight:400}\n\n.XOwIb_ddES:not([aria-selected]):not([aria-disabled]):hover{border-bottom-color:").concat(theme.defaultHoverBorderColor || 'inherit', "}\n\n.XOwIb_ddES[aria-selected]:after{animation-duration:0.2s;animation-fill-mode:forwards;animation-name:XOwIb_epeh;animation-timing-function:ease-out;background-color:").concat(theme.defaultSelectedBorderColor || 'inherit', "}");
43
43
  },
44
- 'root': 'ofhgV_bGBk',
45
- 'default': 'ofhgV_ddES',
46
- 'secondary': 'ofhgV_eLeB',
47
- 'selectedTab': 'ofhgV_epeh'
44
+ 'root': 'XOwIb_bGBk',
45
+ 'default': 'XOwIb_ddES',
46
+ 'secondary': 'XOwIb_eLeB',
47
+ 'selectedTab': 'XOwIb_epeh'
48
48
  };
49
49
  import theme from "./theme.js";
50
50
  /**
@@ -138,7 +138,9 @@ var Tab = (_dec = deprecated('8.0.0', {
138
138
  "aria-selected": isSelected ? 'true' : null,
139
139
  "aria-disabled": isDisabled ? 'true' : null,
140
140
  "aria-controls": controls,
141
- tabIndex: isSelected && !isDisabled ? '0' : null
141
+ tabIndex: isSelected && !isDisabled ? '0' : null,
142
+ position: "relative",
143
+ focusPosition: "inset"
142
144
  }), callRenderProp(children));
143
145
  }
144
146
  }]);
package/es/Tabs/index.js CHANGED
@@ -400,15 +400,13 @@ var Tabs = (_dec = deprecated('8.0.0', {
400
400
  className: classnames(_defineProperty({}, styles[variant], true))
401
401
  }), /*#__PURE__*/React.createElement(Focusable, {
402
402
  ref: this.handleFocusableRef
403
- }, function (_ref4) {
403
+ }, function () {
404
404
  var _classnames2;
405
405
 
406
- var focusVisible = _ref4.focusVisible;
407
406
  return /*#__PURE__*/React.createElement(View, {
408
407
  as: "div",
409
408
  position: "relative",
410
409
  borderRadius: "medium",
411
- withFocusOutline: focusVisible,
412
410
  shouldAnimateFocus: false,
413
411
  className: styles.tabs
414
412
  }, /*#__PURE__*/React.createElement(View, {
@@ -496,9 +494,9 @@ var Tabs = (_dec = deprecated('8.0.0', {
496
494
  maxHeight: void 0,
497
495
  minHeight: void 0,
498
496
  onChange: void 0,
499
- onRequestTabChange: function onRequestTabChange(event, _ref5) {
500
- var index = _ref5.index,
501
- id = _ref5.id;
497
+ onRequestTabChange: function onRequestTabChange(event, _ref4) {
498
+ var index = _ref4.index,
499
+ id = _ref4.id;
502
500
  },
503
501
  margin: void 0,
504
502
  children: null,
package/lib/Tabs/Tab/index.js CHANGED
@@ -42,14 +42,14 @@ var _theme = _interopRequireDefault(require("./theme.js"));
42
42
  var _dec, _dec2, _class, _class2, _temp;
43
43
 
44
44
  var styles = {
45
- componentId: 'ofhgV',
45
+ componentId: 'XOwIb',
46
46
  template: function template(theme) {
47
- return "\n\n.ofhgV_bGBk{-ms-user-select:none;-webkit-user-select:none;cursor:pointer;font-family:".concat(theme.fontFamily || 'inherit', ";font-size:").concat(theme.fontSize || 'inherit', ";font-weight:").concat(theme.fontWeight || 'inherit', ";line-height:").concat(theme.lineHeight || 'inherit', ";user-select:none}\n\n.ofhgV_bGBk[aria-disabled],.ofhgV_bGBk[aria-selected]{cursor:default}\n\n.ofhgV_bGBk[aria-disabled]{opacity:0.5}\n\n.ofhgV_bGBk:focus{outline:none}\n\n.ofhgV_ddES,.ofhgV_eLeB{white-space:nowrap}\n\n.ofhgV_eLeB{-webkit-margin-end:0.2em;border:0.0625rem solid transparent;border-top-left-radius:0.1875rem;border-top-right-radius:0.1875rem;color:").concat(theme.secondaryColor || 'inherit', ";margin-bottom:-0.0625rem;margin-inline-end:0.2em;padding:0.75rem 1rem;position:relative}\n\n[dir=ltr] .ofhgV_eLeB{margin-right:0.2em}\n\n[dir=rtl] .ofhgV_eLeB{margin-left:0.2em}\n\n.ofhgV_eLeB:first-of-type{-webkit-margin-start:0;margin-inline-start:0}\n\n[dir=ltr] .ofhgV_eLeB:first-of-type{margin-left:0}\n\n[dir=rtl] .ofhgV_eLeB:first-of-type{margin-right:0}\n\n.ofhgV_eLeB:not([aria-selected]):not([aria-disabled]):hover,.ofhgV_eLeB[aria-selected]{background:").concat(theme.secondarySelectedBackground || 'inherit', ";border-color:").concat(theme.secondarySelectedBorderColor || 'inherit', "}\n\n.ofhgV_eLeB:hover,.ofhgV_eLeB[aria-disabled],.ofhgV_eLeB[aria-selected]{color:").concat(theme.secondarySelectedColor || 'inherit', "}\n\n.ofhgV_eLeB[aria-selected]{border-bottom-color:").concat(theme.secondarySelectedBackground || 'inherit', ";z-index:").concat(theme.zIndex || 'inherit', "}\n\n@keyframes ofhgV_epeh{to{opacity:1;transform:translateZ(0) scaleX(1)}}\n\n.ofhgV_ddES{color:").concat(theme.defaultColor || 'inherit', ";line-height:1;padding:1rem 1.25rem;position:relative;z-index:").concat(theme.zIndex || 'inherit', "}\n\n.ofhgV_ddES:after{bottom:0;content:\"\";height:0.25rem;inset-inline-start:0;opacity:0;position:absolute;transform:translateZ(0) scaleX(0.01);width:100%}\n\n[dir=ltr] .ofhgV_ddES:after{left:0}\n\n[dir=rtl] .ofhgV_ddES:after{right:0}\n\n.ofhgV_ddES[aria-disabled]{font-weight:400}\n\n.ofhgV_ddES:not([aria-selected]):not([aria-disabled]):hover{border-bottom-color:").concat(theme.defaultHoverBorderColor || 'inherit', "}\n\n.ofhgV_ddES[aria-selected]:after{animation-duration:0.2s;animation-fill-mode:forwards;animation-name:ofhgV_epeh;animation-timing-function:ease-out;background-color:").concat(theme.defaultSelectedBorderColor || 'inherit', "}");
47
+ return "\n\n.XOwIb_bGBk{-ms-user-select:none;-webkit-user-select:none;cursor:pointer;font-family:".concat(theme.fontFamily || 'inherit', ";font-size:").concat(theme.fontSize || 'inherit', ";font-weight:").concat(theme.fontWeight || 'inherit', ";line-height:").concat(theme.lineHeight || 'inherit', ";user-select:none}\n\n.XOwIb_bGBk[aria-disabled],.XOwIb_bGBk[aria-selected]{cursor:default}\n\n.XOwIb_bGBk[aria-disabled]{opacity:0.5}\n\n.XOwIb_bGBk:before{border-radius:0.25rem!important;inset:0.5rem!important}\n\n.XOwIb_bGBk:focus:before{inset:0.375rem!important}\n\n.XOwIb_ddES,.XOwIb_eLeB{white-space:nowrap}\n\n.XOwIb_eLeB{-webkit-margin-end:0.2em;border:0.0625rem solid transparent;border-top-left-radius:0.1875rem;border-top-right-radius:0.1875rem;color:").concat(theme.secondaryColor || 'inherit', ";margin-bottom:-0.0625rem;margin-inline-end:0.2em;padding:0.75rem 1rem;position:relative}\n\n[dir=ltr] .XOwIb_eLeB{margin-right:0.2em}\n\n[dir=rtl] .XOwIb_eLeB{margin-left:0.2em}\n\n.XOwIb_eLeB:first-of-type{-webkit-margin-start:0;margin-inline-start:0}\n\n[dir=ltr] .XOwIb_eLeB:first-of-type{margin-left:0}\n\n[dir=rtl] .XOwIb_eLeB:first-of-type{margin-right:0}\n\n.XOwIb_eLeB:not([aria-selected]):not([aria-disabled]):hover,.XOwIb_eLeB[aria-selected]{background:").concat(theme.secondarySelectedBackground || 'inherit', ";border-color:").concat(theme.secondarySelectedBorderColor || 'inherit', "}\n\n.XOwIb_eLeB:hover,.XOwIb_eLeB[aria-disabled],.XOwIb_eLeB[aria-selected]{color:").concat(theme.secondarySelectedColor || 'inherit', "}\n\n.XOwIb_eLeB[aria-selected]{border-bottom-color:").concat(theme.secondarySelectedBackground || 'inherit', ";z-index:").concat(theme.zIndex || 'inherit', "}\n\n@keyframes XOwIb_epeh{to{opacity:1;transform:translateZ(0) scaleX(1)}}\n\n.XOwIb_ddES{color:").concat(theme.defaultColor || 'inherit', ";line-height:1;padding:1rem 1.25rem;position:relative;z-index:").concat(theme.zIndex || 'inherit', "}\n\n.XOwIb_ddES:after{bottom:0;content:\"\";height:0.25rem;inset-inline-start:0;opacity:0;position:absolute;transform:translateZ(0) scaleX(0.01);width:100%}\n\n[dir=ltr] .XOwIb_ddES:after{left:0}\n\n[dir=rtl] .XOwIb_ddES:after{right:0}\n\n.XOwIb_ddES[aria-disabled]{font-weight:400}\n\n.XOwIb_ddES:not([aria-selected]):not([aria-disabled]):hover{border-bottom-color:").concat(theme.defaultHoverBorderColor || 'inherit', "}\n\n.XOwIb_ddES[aria-selected]:after{animation-duration:0.2s;animation-fill-mode:forwards;animation-name:XOwIb_epeh;animation-timing-function:ease-out;background-color:").concat(theme.defaultSelectedBorderColor || 'inherit', "}");
48
48
  },
49
- 'root': 'ofhgV_bGBk',
50
- 'default': 'ofhgV_ddES',
51
- 'secondary': 'ofhgV_eLeB',
52
- 'selectedTab': 'ofhgV_epeh'
49
+ 'root': 'XOwIb_bGBk',
50
+ 'default': 'XOwIb_ddES',
51
+ 'secondary': 'XOwIb_eLeB',
52
+ 'selectedTab': 'XOwIb_epeh'
53
53
  };
54
54
 
55
55
  /**
@@ -141,7 +141,9 @@ var Tab = (_dec = (0, _deprecated.deprecated)('8.0.0', {
141
141
  "aria-selected": isSelected ? 'true' : null,
142
142
  "aria-disabled": isDisabled ? 'true' : null,
143
143
  "aria-controls": controls,
144
- tabIndex: isSelected && !isDisabled ? '0' : null
144
+ tabIndex: isSelected && !isDisabled ? '0' : null,
145
+ position: "relative",
146
+ focusPosition: "inset"
145
147
  }), (0, _callRenderProp.callRenderProp)(children));
146
148
  }
147
149
  }]);
package/lib/Tabs/index.js CHANGED
@@ -424,15 +424,13 @@ var Tabs = (_dec = (0, _deprecated.deprecated)('8.0.0', {
424
424
  className: (0, _classnames3.default)((0, _defineProperty2.default)({}, styles[variant], true))
425
425
  }), /*#__PURE__*/_react.default.createElement(_Focusable.Focusable, {
426
426
  ref: this.handleFocusableRef
427
- }, function (_ref4) {
427
+ }, function () {
428
428
  var _classnames2;
429
429
 
430
- var focusVisible = _ref4.focusVisible;
431
430
  return /*#__PURE__*/_react.default.createElement(_View.View, {
432
431
  as: "div",
433
432
  position: "relative",
434
433
  borderRadius: "medium",
435
- withFocusOutline: focusVisible,
436
434
  shouldAnimateFocus: false,
437
435
  className: styles.tabs
438
436
  }, /*#__PURE__*/_react.default.createElement(_View.View, {
@@ -519,9 +517,9 @@ var Tabs = (_dec = (0, _deprecated.deprecated)('8.0.0', {
519
517
  maxHeight: void 0,
520
518
  minHeight: void 0,
521
519
  onChange: void 0,
522
- onRequestTabChange: function onRequestTabChange(event, _ref5) {
523
- var index = _ref5.index,
524
- id = _ref5.id;
520
+ onRequestTabChange: function onRequestTabChange(event, _ref4) {
521
+ var index = _ref4.index,
522
+ id = _ref4.id;
525
523
  },
526
524
  margin: void 0,
527
525
  children: null,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-tabs",
3
- "version": "7.11.0",
3
+ "version": "7.14.1",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -23,26 +23,26 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "^7.11.0",
27
- "@instructure/ui-color-utils": "^7.11.0",
28
- "@instructure/ui-test-locator": "^7.11.0",
29
- "@instructure/ui-test-utils": "^7.11.0"
26
+ "@instructure/ui-babel-preset": "^7.14.1",
27
+ "@instructure/ui-color-utils": "^7.14.1",
28
+ "@instructure/ui-test-locator": "^7.14.1",
29
+ "@instructure/ui-test-utils": "^7.14.1"
30
30
  },
31
31
  "dependencies": {
32
32
  "@babel/runtime": "^7.9.2",
33
- "@instructure/console": "^7.11.0",
34
- "@instructure/debounce": "^7.11.0",
35
- "@instructure/ui-dom-utils": "^7.11.0",
36
- "@instructure/ui-focusable": "^7.11.0",
37
- "@instructure/ui-i18n": "^7.11.0",
38
- "@instructure/ui-motion": "^7.11.0",
39
- "@instructure/ui-prop-types": "^7.11.0",
40
- "@instructure/ui-react-utils": "^7.11.0",
41
- "@instructure/ui-testable": "^7.11.0",
42
- "@instructure/ui-themeable": "^7.11.0",
43
- "@instructure/ui-utils": "^7.11.0",
44
- "@instructure/ui-view": "^7.11.0",
45
- "@instructure/uid": "^7.11.0",
33
+ "@instructure/console": "^7.14.1",
34
+ "@instructure/debounce": "^7.14.1",
35
+ "@instructure/ui-dom-utils": "^7.14.1",
36
+ "@instructure/ui-focusable": "^7.14.1",
37
+ "@instructure/ui-i18n": "^7.14.1",
38
+ "@instructure/ui-motion": "^7.14.1",
39
+ "@instructure/ui-prop-types": "^7.14.1",
40
+ "@instructure/ui-react-utils": "^7.14.1",
41
+ "@instructure/ui-testable": "^7.14.1",
42
+ "@instructure/ui-themeable": "^7.14.1",
43
+ "@instructure/ui-utils": "^7.14.1",
44
+ "@instructure/ui-view": "^7.14.1",
45
+ "@instructure/uid": "^7.14.1",
46
46
  "classnames": "^2",
47
47
  "keycode": "^2",
48
48
  "prop-types": "^15"
package/src/Tabs/Tab/index.js CHANGED
@@ -130,6 +130,8 @@ class Tab extends Component {
130
130
  aria-disabled={isDisabled ? 'true' : null}
131
131
  aria-controls={controls}
132
132
  tabIndex={isSelected && !isDisabled ? '0' : null}
133
+ position="relative"
134
+ focusPosition="inset"
133
135
  >
134
136
  {callRenderProp(children)}
135
137
  </View>
package/src/Tabs/Tab/styles.css CHANGED
@@ -1,4 +1,4 @@
1
- /* stylelint-disable no-descending-specificity */
1
+ /* stylelint-disable no-descending-specificity, declaration-no-important, comment-empty-line-before */
2
2
 
3
3
  .root {
4
4
  font-family: var(--fontFamily);
@@ -17,9 +17,20 @@
17
17
  opacity: 0.5;
18
18
  }
19
19
 
20
+ /* START hacky override for focus state
21
+ * backporting INSTUI-3317, it is done correctly in V8
22
+ */
23
+ &::before {
24
+ inset: 0.5rem !important;
25
+ border-radius: 0.25rem !important;
26
+ }
27
+
20
28
  &:focus {
21
- outline: none;
29
+ &::before {
30
+ inset: 0.375rem !important;
31
+ }
22
32
  }
33
+ /* END hacky override for focus state */
23
34
  }
24
35
 
25
36
  .default,
@@ -113,4 +124,4 @@
113
124
  }
114
125
  }
115
126
 
116
- /* stylelint-enable no-descending-specificity */
127
+ /* stylelint-enable no-descending-specificity, declaration-no-important, comment-empty-line-before */
package/src/Tabs/index.js CHANGED
@@ -479,12 +479,11 @@ class Tabs extends Component {
479
479
  })}
480
480
  >
481
481
  <Focusable ref={this.handleFocusableRef}>
482
- {({ focusVisible }) => (
482
+ {() => (
483
483
  <View
484
484
  as="div"
485
485
  position="relative"
486
486
  borderRadius="medium"
487
- withFocusOutline={focusVisible}
488
487
  shouldAnimateFocus={false}
489
488
  className={styles.tabs}
490
489
  >