@datarobot/design-system 28.5.0 → 28.6.0

package/package.json

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

package/styles/index.css

@@ -926,6 +926,8 @@
 /* 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 */
@@ -3627,13 +3629,15 @@ popout[data-popper-placement^='right']::after,
 .checkbox-tooltip-container {
   display: inline-block;
 }
+.checkbox-wrapper {
+  position: relative;
+  display: inline-block;
+}
 .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 */
@@ -3657,6 +3661,7 @@ popout[data-popper-placement^='right']::after,
   align-self: center;
   min-height: 1rem;
   min-width: 1rem;
+  max-width: 100%;
   padding-left: 1.5rem;
   vertical-align: middle;
   font-size: 0.875rem;
@@ -3789,15 +3794,26 @@ 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 ***!
   \******************************************************************************************************************************************************************************************************************************************************/
+/* stylelint-disable dr-custom/no-several-root-selectors */
+.radiobutton-wrapper {
+  position: relative;
+}
 .radiobutton {
+  /* Hide native radiobutton, but keep it focusable */
   position: absolute;
-  height: 0;
-  width: 0;
-  margin: 0;
+  top: 0;
+  left: 0;
+  height: 0.0625rem;
+  width: 0.0625rem;
+  /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
+  margin: -0.0625rem;
   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;
@@ -3906,6 +3922,7 @@ popout[data-popper-placement^='right']::after,
 .radiobutton + .radiobutton-label.lg + .radiobutton-helper-text {
   padding-left: 1.5rem;
 }
+/* stylelint-enable dr-custom/no-several-root-selectors */
 
 /*!*********************************************************************************************************************************************************************************************************************************************************************!*\
   !*** 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/dropdown-menu/dropdown-item-radio-button.less ***!
@@ -4262,6 +4279,12 @@ popout[data-popper-placement^='right']::after,
 .dropdown-content ul.dropdown-menu-footer div.drop-item .checkbox-item {
   position: relative;
 }
+.dropdown-content ul.dropdown-menu-list li.drop-item .checkbox-item .checkbox-wrapper,
+.dropdown-content ul.dropdown-menu-footer li.drop-item .checkbox-item .checkbox-wrapper,
+.dropdown-content ul.dropdown-menu-list div.drop-item .checkbox-item .checkbox-wrapper,
+.dropdown-content ul.dropdown-menu-footer div.drop-item .checkbox-item .checkbox-wrapper {
+  width: 100%;
+}
 .dropdown-content ul.dropdown-menu-list li.drop-item .checkbox-item .checkbox + label,
 .dropdown-content ul.dropdown-menu-footer li.drop-item .checkbox-item .checkbox + label,
 .dropdown-content ul.dropdown-menu-list div.drop-item .checkbox-item .checkbox + label,
@@ -4426,6 +4449,9 @@ popout[data-popper-placement^='right']::after,
 .dropdown-content ul.dropdown-menu-list.sectioned li.drop-item .checkbox-item {
   position: relative;
 }
+.dropdown-content ul.dropdown-menu-list.sectioned li.drop-item .checkbox-item .checkbox-wrapper {
+  width: 100%;
+}
 .dropdown-content ul.dropdown-menu-list.sectioned li.drop-item .checkbox-item .checkbox + label {
   width: 100%;
   padding: 0.25rem 2rem 0.25rem 3.25rem;
@@ -5766,6 +5792,7 @@ button.highlighted-badge.apple:active:not(:disabled),
   !*** 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/chart-legend/chart-legend-item.less ***!
   \***********************************************************************************************************************************************************************************************************************************************************/
 .chart-legend-item {
+  position: relative;
   display: flex;
   align-content: center;
   justify-content: center;
@@ -5798,13 +5825,19 @@ button.highlighted-badge.apple:active:not(:disabled),
 .chart-legend-item input.chart-legend-item-checkbox {
   /* Hide native checkbox, but keep it focusable */
   position: absolute;
-  height: 0;
-  width: 0;
-  margin: 0;
+  top: 0;
+  left: 0;
+  height: 0.0625rem;
+  width: 0.0625rem;
+  /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
+  margin: -0.0625rem;
   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;
@@ -10775,6 +10808,7 @@ button:hover.active.pill {
   !*** 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/tabs/tabs.less ***!
   \**************************************************************************************************************************************************************************************************************************************/
 .tabgroup {
+  position: relative;
   border: 0;
 }
 .tabgroup.tabgroup-container {
@@ -10797,13 +10831,19 @@ button:hover.active.pill {
 .tabgroup .tabgroup-tab {
   /* 1. hide native input */
   position: absolute;
-  height: 0;
-  width: 0;
-  margin: 0;
+  top: 0;
+  left: 0;
+  height: 0.0625rem;
+  width: 0.0625rem;
+  /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
+  margin: -0.0625rem;
   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;
@@ -12147,6 +12187,8 @@ 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 */
@@ -13170,13 +13212,19 @@ table.simple-table.sublevel tr td {
 .toggle {
   /* Hide native checkbox, but keep it focusable */
   position: absolute;
-  height: 0;
-  width: 0;
-  margin: 0;
+  top: 0;
+  left: 0;
+  height: 0.0625rem;
+  width: 0.0625rem;
+  /* stylelint-disable-next-line dr-custom/no-unexpected-spacing-definitions */
+  margin: -0.0625rem;
   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 */