@octopusdeploy/design-system-components
Version:
The design systems component library.
124 lines (123 loc) • 6 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DeprecatedRadioButtonBase = DeprecatedRadioButtonBase;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
const Radio_1 = __importDefault(require("@mui/material/Radio"));
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const React = __importStar(require("react"));
const DeprecatedRadioButtonGroup_1 = require("./DeprecatedRadioButtonGroup");
/* @deprecated
* Deprecated: 18/08/2025
* Migration guidelines: This component is deprecated and will be removed in a future release.
* This is part of our ongoing improvements to forms and input components to enhance usability and accessibility.
*
* This component has no replacement.
*
* We recognize RadioButtonBase has different styling; if that prevents an immediate swap, you may continue using this
* component until all the new form components are in place.
*/
function DeprecatedRadioButtonBase({ className, value, label, isDefault, disabled, autoFocus, accessibleName, checked }) {
const buttonActions = React.useRef(null);
const labelElement = isDefault ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, " ", (0, jsx_runtime_1.jsx)("span", { className: formControlLabelDefaultStyles, children: "(default)" })] })) : (label);
const radioButtonGroup = React.useContext(DeprecatedRadioButtonGroup_1.RadioButtonGroupContext);
const shouldAutoFocus = autoFocus || (radioButtonGroup !== undefined && value === radioButtonGroup.value && radioButtonGroup.autoFocus);
return ((0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Radio_1.default, { action: buttonActions, className: (0, css_1.cx)(radioStyles, className), value: value, autoFocus: shouldAutoFocus, checked: checked, disableRipple: true, disableTouchRipple: true, disableFocusRipple: true }), label: labelElement, className: formControlLabelStyles, disabled: disabled, "aria-label": accessibleName }));
}
const formControlLabelClasses = {
root: "MuiFormControlLabel-root",
label: "MuiFormControlLabel-label",
};
const commonClasses = {
checked: "Mui-checked",
disabled: "Mui-disabled",
focusVisible: "Mui-focusVisible",
};
const radioClasses = {
root: "MuiRadio-root",
};
const formControlLabelStyles = (0, css_1.css)({
[`&.${formControlLabelClasses.root}`]: {
margin: 0,
// This marginBottom could potentially be moved to the radio group level using a `gap` property
// However there are usages of the group that insert arbitrary non-radio elements in such as <br /> and <Note />.
// A CSS gap would impact the spacing of these elements and would need to be evaluated per-usage.
marginBottom: design_system_tokens_1.space[4],
font: design_system_tokens_1.text.body.regular.large,
[`.${formControlLabelClasses.label}`]: {
color: design_system_tokens_1.themeTokens.color.text.primary,
},
[`.${formControlLabelClasses.label}.${commonClasses.disabled}`]: {
color: design_system_tokens_1.themeTokens.color.text.disabled,
},
},
[`&.${formControlLabelClasses.root}.${commonClasses.disabled}`]: {
cursor: "not-allowed",
},
});
// 'default' here refers to the "(default)" text appended to the label
const formControlLabelDefaultStyles = (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.secondary,
[`.${commonClasses.disabled} &`]: {
color: design_system_tokens_1.themeTokens.color.text.disabled,
},
});
const radioStyles = (0, css_1.css)({
[`&.${radioClasses.root}`]: {
padding: 0,
marginRight: design_system_tokens_1.space[8],
color: design_system_tokens_1.themeTokens.color.icon.primary,
":hover": {
backgroundColor: "unset",
},
},
[`&.${radioClasses.root}.${commonClasses.checked}`]: {
color: design_system_tokens_1.themeTokens.color.icon.selected,
":hover": {
backgroundColor: "unset",
},
},
[`&.${radioClasses.root}.${commonClasses.disabled}`]: {
color: design_system_tokens_1.themeTokens.color.icon.disabled,
},
[`&.${radioClasses.root}.${commonClasses.focusVisible}`]: {
boxShadow: design_system_tokens_1.themeTokens.shadow.focused,
},
});