@datarobot/design-system 28.3.3 → 28.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarobot/design-system",
-  "version": "28.3.3",
+  "version": "28.4.0",
   "description": "DataRobot react components library",
   "scripts": {
     "build": "node ../../tools/build-lib.js",

package/styles/index.css

@@ -926,8 +926,6 @@
 /* REACT COMPONENT MIXINS */
 .sr-only {
   position: absolute;
-  top: 0;
-  left: 0;
   height: 0.0625rem;
   width: 0.0625rem;
   /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
@@ -3631,9 +3629,11 @@ popout[data-popper-placement^='right']::after,
 }
 .checkbox {
   /* Hide native checkbox, but keep it focusable */
+  height: 0;
+  width: 0;
+  margin: 0;
+  clip: rect(0 0 0 0);
   position: absolute;
-  top: 0;
-  left: 0;
   height: 0.0625rem;
   width: 0.0625rem;
   /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
@@ -3790,21 +3790,14 @@ popout[data-popper-placement^='right']::after,
   !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/components/radio-button/radio-button.less ***!
   \******************************************************************************************************************************************************************************************************************************************************/
 .radiobutton {
-  /* Hide native radiobutton, but keep it focusable */
   position: absolute;
-  top: 0;
-  left: 0;
-  height: 0.0625rem;
-  width: 0.0625rem;
-  /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
-  margin: -0.0625rem;
+  height: 0;
+  width: 0;
+  margin: 0;
   padding: 0;
-  white-space: nowrap;
   border: 0;
-  clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
   overflow: hidden;
+  clip: rect(0 0 0 0);
 }
 .radiobutton + label {
   position: relative;
@@ -5805,19 +5798,13 @@ button.highlighted-badge.apple:active:not(:disabled),
 .chart-legend-item input.chart-legend-item-checkbox {
   /* Hide native checkbox, but keep it focusable */
   position: absolute;
-  top: 0;
-  left: 0;
-  height: 0.0625rem;
-  width: 0.0625rem;
-  /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
-  margin: -0.0625rem;
+  height: 0;
+  width: 0;
+  margin: 0;
   padding: 0;
-  white-space: nowrap;
   border: 0;
-  clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
   overflow: hidden;
+  clip: rect(0 0 0 0);
 }
 .chart-legend-item input.chart-legend-item-checkbox + label {
   cursor: pointer;
@@ -10810,19 +10797,13 @@ button:hover.active.pill {
 .tabgroup .tabgroup-tab {
   /* 1. hide native input */
   position: absolute;
-  top: 0;
-  left: 0;
-  height: 0.0625rem;
-  width: 0.0625rem;
-  /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
-  margin: -0.0625rem;
+  height: 0;
+  width: 0;
+  margin: 0;
   padding: 0;
-  white-space: nowrap;
   border: 0;
-  clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
   overflow: hidden;
+  clip: rect(0 0 0 0);
 }
 .tabgroup .tabgroup-tab:focus-visible + label {
   outline: var(--focus-outline-color) solid 0.0625rem;
@@ -11598,6 +11579,12 @@ table.simple-table.sublevel tr td {
   color: var(--sub-header-item-disabled-color);
   cursor: default;
 }
+.sub-nav-group a.sub-nav-item {
+  display: inline-block;
+}
+.sub-nav-group a.sub-nav-item.disabled {
+  pointer-events: none;
+}
 .sub-nav-group.tab {
   gap: 1rem;
 }
@@ -12160,8 +12147,6 @@ table.simple-table.sublevel tr td {
   fill: var(--react-table-header-text-color);
   border-left: 0.0625rem solid var(--react-table-header-border);
   position: absolute;
-  top: 0;
-  left: 0;
   height: 0.0625rem;
   width: 0.0625rem;
   /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
@@ -13175,19 +13160,13 @@ table.simple-table.sublevel tr td {
 .toggle {
   /* Hide native checkbox, but keep it focusable */
   position: absolute;
-  top: 0;
-  left: 0;
-  height: 0.0625rem;
-  width: 0.0625rem;
-  /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
-  margin: -0.0625rem;
+  height: 0;
+  width: 0;
+  margin: 0;
   padding: 0;
-  white-space: nowrap;
   border: 0;
-  clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
   overflow: hidden;
+  clip: rect(0 0 0 0);
   /* Represents the only visible element of toggle */
   /* Represents knob area */
   /* Represents actual knob that changes position when checked/unchecked */