Skip to content

feat: add monaco styles configuration #312

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bocembocem merged 1 commit into from
Jun 6, 2025
Merged

feat: add monaco styles configuration #312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions docs/styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,8 +241,11 @@ Variables for the Monaco Input component:
| Variable | Default Value | Description |
| :----------------------------------------------- | :-------------: | :-------------------------------------------------------- |
| `--df-monaco-input-width` | `550px` | Width of the Monaco editor input |
| `--df-monaco-input-height` | `354px` | Height of the Monaco editor input |
| `--df-monaco-header-height` | `52px` | Height of the Monaco editor header |
| `--df-monaco-header-padding` | `16px` | Padding inside the Monaco editor header |
| `--df-monaco-input-dialog-width` | `966px` | Width of the Monaco input dialog |
| `--df-monaco-input-dialog-height` | `804px` | Height of the Monaco input dialog |
| `--df-monaco-input-dialog-dialog-footer-padding` | `8px 32px 32px` | Padding for the Monaco dialog footer (top, sides, bottom) |
| `--df-monaco-dialog-header-caption-min-height` | `24px` | Minimum height for the Monaco dialog header caption |

Expand Down
1 change: 1 addition & 0 deletions src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@
padding: var(--df-monaco-header-padding, var(--g-spacing-4));
align-items: center;
background-color: var(--g-color-base-float-hover);
box-sizing: border-box;
}
9 changes: 8 additions & 1 deletion src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
@import '../../../styles/variables.scss';

.#{$ns}monaco-input {
// TODO: Remove this styles
width: var(--df-monaco-input-width, 550px);
height: var(--df-monaco-input-height, 354px);

&__container {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--g-color-line-generic);
}

&__editor {
flex: 1;
}
}
15 changes: 8 additions & 7 deletions src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,14 @@ export const MonacoInputBase: React.FC<MonacoInputBaseProps> = ({
<div className={b()}>
<div className={b('container')} data-qa={name}>
<MonacoHeader language={language} editButton={dialogButton} />
<MonacoEditor
language={language}
value={monacoValue}
height="300"
onChange={setMonacoValue}
options={options}
/>
<div className={b('editor')}>
<MonacoEditor
language={language}
value={monacoValue}
onChange={setMonacoValue}
options={options}
/>
</div>
</div>
<MonacoInputDialog
name={name}
Expand Down
10 changes: 10 additions & 0 deletions src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
@import '../../../styles/variables.scss';

.#{$ns}monaco-input-dialog {
width: var(--df-monaco-input-dialog-width, 966px);
height: var(--df-monaco-input-dialog-height, 804px);

.g-dialog-footer {
padding: var(
--df-monaco-input-dialog-dialog-footer-padding,
Expand All @@ -9,9 +12,16 @@
}

&__container {
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--g-color-line-generic);
}

&__editor {
flex: 1;
}

&__dialog-header {
.g-dialog-header__caption {
min-height: var(--df-monaco-dialog-header-caption-min-height, 24px);
Expand Down
16 changes: 8 additions & 8 deletions src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,14 @@ export const MonacoInputDialog: React.FC<MonacoInputDialogProps> = ({
<Dialog.Body>
<div className={b('container')} data-qa={`${name}-dialog`}>
<MonacoHeader language={language} />
<MonacoEditor
language={language}
height="600"
width="900"
value={value}
onChange={changeMonacoValue}
options={options}
/>
<div className={b('editor')}>
<MonacoEditor
language={language}
value={value}
onChange={changeMonacoValue}
options={options}
/>
</div>
</div>
</Dialog.Body>
<Dialog.Footer
Expand Down