From d021d9ee49dd862eece8a8f20469609d21929636 Mon Sep 17 00:00:00 2001 From: Don McKenzie Date: Thu, 21 Dec 2023 18:26:46 -0500 Subject: [PATCH] pass units --- packages/components/scss/BaseStyleSheet.scss | 29 ++++++++++--------- packages/components/src/popper/Popper.scss | 1 + .../components/src/theme/ThemeUtils.test.ts | 12 ++++++++ .../__snapshots__/ThemeProvider.test.tsx.snap | 14 ++++----- packages/console/src/ConsoleInput.scss | 1 + .../console/src/ConsoleStatusBar.test.tsx | 6 ++-- packages/iris-grid/src/IrisGridTheme.ts | 2 +- .../__snapshots__/IrisGridTheme.test.ts.snap | 1 + 8 files changed, 40 insertions(+), 26 deletions(-) diff --git a/packages/components/scss/BaseStyleSheet.scss b/packages/components/scss/BaseStyleSheet.scss index 33c87d9e93..e1ae369719 100644 --- a/packages/components/scss/BaseStyleSheet.scss +++ b/packages/components/scss/BaseStyleSheet.scss @@ -153,6 +153,7 @@ span.btn-disabled-wrapper { &:disabled { --dh-color-text-disabled: var(--dh-color-positive-contrast); --dh-color-disabled-bg: var(--dh-color-positive-bg); + opacity: 0.5; } } @@ -469,6 +470,20 @@ form label small { } //Select, Checkboxes and Radios +.custom-control-label { + user-select: none; //checkboxs are label pseudo elements, clicking can toggle text selection otherwise +} + +.custom-control-input:disabled ~ .custom-control-label::before { + cursor: not-allowed; +} + +.custom-checkbox + .custom-control-input:disabled + ~ .custom-control-label::before { + cursor: not-allowed; +} + .custom-radio { .custom-control-input:checked ~ .custom-control-label { &::after { @@ -506,20 +521,6 @@ form label small { } } -.custom-control-label { - user-select: none; //checkboxs are label pseudo elements, clicking can toggle text selection otherwise -} - -.custom-control-input:disabled ~ .custom-control-label::before { - cursor: not-allowed; -} - -.custom-checkbox - .custom-control-input:disabled - ~ .custom-control-label::before { - cursor: not-allowed; -} - .custom-select { $caret-size: 10px 6px; $error-size: 16px; diff --git a/packages/components/src/popper/Popper.scss b/packages/components/src/popper/Popper.scss index b8ac76f5f8..61f69e938e 100644 --- a/packages/components/src/popper/Popper.scss +++ b/packages/components/src/popper/Popper.scss @@ -15,6 +15,7 @@ $animation-offset: 10px; .popper { --background-color: var(--dh-color-popover-bg); + background: var(--background-color); color: var(--dh-color-tooltip-fg); border-radius: $border-radius; diff --git a/packages/components/src/theme/ThemeUtils.test.ts b/packages/components/src/theme/ThemeUtils.test.ts index b281511f03..c91c75e168 100644 --- a/packages/components/src/theme/ThemeUtils.test.ts +++ b/packages/components/src/theme/ThemeUtils.test.ts @@ -308,6 +308,18 @@ describe('getDefaultBaseThemes', () => { './theme-dark-components.css?raw', ].join('\n'), }, + { + name: 'Default Light', + themeKey: 'default-light', + styleContent: [ + './theme-light-palette.css?raw', + './theme-light-semantic.css?raw', + './theme-light-semantic-chart.css?raw', + './theme-light-semantic-editor.css?raw', + './theme-light-semantic-grid.css?raw', + './theme-light-components.css?raw', + ].join('\n'), + }, ]); }); }); diff --git a/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap b/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap index 4a8fbf0ea8..1046a36c38 100644 --- a/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap +++ b/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap @@ -4,14 +4,14 @@ exports[`ThemeProvider setSelectedThemeKey: [ [Object] ] should change selected
{ order: 10, }, ]); - const button = document.querySelector( - '.btn-overflow.btn-link-icon' - ) as TargetElement; + const button = screen.getByLabelText('More Actions...'); await user.click(button); let dropdown: HTMLElement | null = screen.getByText(title); expect(dropdown).toBeTruthy(); diff --git a/packages/iris-grid/src/IrisGridTheme.ts b/packages/iris-grid/src/IrisGridTheme.ts index 576b9eb8b7..967ba86022 100644 --- a/packages/iris-grid/src/IrisGridTheme.ts +++ b/packages/iris-grid/src/IrisGridTheme.ts @@ -131,7 +131,7 @@ export function createDefaultIrisGridTheme(): Partial { reverseHeaderBarHeight: 4, filterBarHorizontalPadding: 4, - shadowAlpha: parseFloat(IrisGridTheme['row-shadow-alpha']), + shadowAlpha: parseFloat(IrisGridTheme['row-shadow-alpha']) || 0.15, // Amount of blur to apply to the bottom of the scrim while animating in scrimBlurSize: 25, diff --git a/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap b/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap index 7a2e0cc4d5..d14066fdff 100644 --- a/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap +++ b/packages/iris-grid/src/__snapshots__/IrisGridTheme.test.ts.snap @@ -81,6 +81,7 @@ exports[`createDefaultIrisGridTheme should derive the default Iris grid theme 1` "selectionColor": "IrisGridTheme['selection-color']", "selectionOutlineCasingColor": "IrisGridTheme['selection-outline-casing-color']", "selectionOutlineColor": "IrisGridTheme['selection-outline-color']", + "shadowAlpha": 0.15, "sortHeaderBarHeight": 2, "textColor": "IrisGridTheme['text-color']", "treeLineColor": "IrisGridTheme['tree-line-color']",