@octopusdeploy/design-system-components
Version:
The design systems component library.
48 lines (47 loc) • 2.27 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.codeEditorToolbarSelectStyles = void 0;
exports.CodeEditorSelect = CodeEditorSelect;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const material_1 = require("@mui/material");
const Select_1 = __importDefault(require("@mui/material/Select"));
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
function CodeEditorSelect(props) {
return ((0, jsx_runtime_1.jsx)(Select_1.default, { value: props.scriptingLanguage, className: (0, css_1.cx)(exports.codeEditorToolbarSelectStyles, selectRoot), onFocus: () => props.onFocus(),
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
onChange: (event) => props.onChange(event.target.value), onClose: () => props.onClose?.(), onOpen: () => props.onOpen?.(), variant: "standard", children: props.supportedLanguages.map((language) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: language, children: language }, language))) }));
}
exports.codeEditorToolbarSelectStyles = (0, css_1.css)({
margin: 0,
height: "34px",
"& > div": {
color: design_system_tokens_1.themeTokens.color.text.primary,
fontSize: design_system_tokens_1.fontSize["medium"],
borderRadius: design_system_tokens_1.borderRadius.small,
margin: 0,
cursor: "pointer",
},
});
const selectRoot = (0, css_1.css)({
border: `1px solid ${design_system_tokens_1.themeTokens.color.border.tertiary}`,
borderRadius: design_system_tokens_1.borderRadius.medium,
background: design_system_tokens_1.themeTokens.color.codeEditor.toolbar.background,
width: "180px",
".MuiSelect-select": {
paddingLeft: "8px",
paddingTop: "5px",
},
".MuiSelect-icon": {
color: design_system_tokens_1.themeTokens.color.icon.primary,
},
"&.MuiInput-underline::before, &.MuiInput-underline:hover:not(.Mui-disabled)::before": {
borderBottom: "none",
},
"&.MuiInput-underline::after": {
borderBottom: "none",
},
});