From a59474cf13caf9b0ca39aacf37f57adffbe9fc2f Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Fri, 30 Aug 2024 13:04:31 +0100 Subject: [PATCH] Chore: Migrate `_forms` styles to emotion globals (#92690) migrate _forms styles to emotion globals --- .../src/themes/GlobalStyles/forms.ts | 65 ++++- public/sass/_angular.scss | 34 +++ public/sass/_grafana.scss | 1 - public/sass/base/_forms.scss | 252 ------------------ 4 files changed, 98 insertions(+), 254 deletions(-) delete mode 100644 public/sass/base/_forms.scss diff --git a/packages/grafana-ui/src/themes/GlobalStyles/forms.ts b/packages/grafana-ui/src/themes/GlobalStyles/forms.ts index 2cc1b03e94a..b072775d317 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/forms.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/forms.ts @@ -18,15 +18,75 @@ export function getFormElementStyles(theme: GrafanaTheme2) { boxShadow: 'none', }, - textarea: { + // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector + 'input, textarea': { + '&::placeholder': { + color: theme.colors.text.disabled, + }, + }, + + // not a big fan of number fields + 'input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button': { + WebkitAppearance: 'none', + margin: 0, + }, + 'input[type="number"]': { + MozAppearance: 'textfield', + }, + + // Set the height of select and file controls to match text inputs + 'select, input[type="file"]': { + height: + theme.components.height + .md /* In IE7, the height of the select element cannot be changed by height, only font-size */, + lineHeight: theme.components.height.md, + }, + + // Make select elements obey height by applying a border + select: { + width: '220px', // default input width + 10px of padding that doesn't get applied + border: `1px solid ${theme.components.input.borderColor}`, + backgroundColor: theme.components.input.background, // Chrome on Linux and Mobile Safari need background-color + }, + + 'select[multiple], select[size], textarea': { height: 'auto', }, + // Focus for select, file, radio, and checkbox + 'select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus': { + // WebKit + outline: '5px auto -webkit-focus-ring-color', + outlineOffset: '-2px', + }, + // Reset width of input images, buttons, radios, checkboxes "input[type='file'], input[type='image'], input[type='submit'], input[type='reset'], input[type='button'], input[type='radio'], input[type='checkbox']": { width: 'auto', // Override of generic input selector }, + + // Disabled and read-only inputs + 'input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly]': { + cursor: 'not-allowed', + backgroundColor: theme.colors.action.disabledBackground, + }, + + // Explicitly reset the colors here + 'input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly]': + { + cursor: 'not-allowed', + backgroundColor: 'transparent', + }, + + 'input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus': + { + WebkitBoxShadow: `0 0 0px 1000px ${theme.components.input.background} inset !important`, + WebkitTextFillColor: theme.components.input.text, + boxShadow: `0 0 0px 1000px ${theme.components.input.background} inset`, + border: `1px solid ${theme.components.input.background}`, + }, + '.gf-form': { display: 'flex', flexDirection: 'row', @@ -367,5 +427,8 @@ export function getFormElementStyles(theme: GrafanaTheme2) { marginBottom: theme.spacing(3), borderTop: `3px solid ${theme.colors.success.main}`, }, + '.input-small': { + width: '90px', + }, }); } diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss index 43f14cbba21..fce198b2516 100644 --- a/public/sass/_angular.scss +++ b/public/sass/_angular.scss @@ -2568,3 +2568,37 @@ button.close { color: $text-muted; min-width: 47px; } + +.input-mini { + width: 60px; +} + +.input-medium { + width: 150px; +} + +input[type='checkbox'].cr1 { + display: none; +} + +.editor-option label.cr1 { + display: inline-block; + margin: 5px 0 1px 0; +} + +label.cr1 { + display: inline-block; + height: 18px; + position: relative; + clear: none; + text-indent: 2px; + margin: 0 0 0px 0; + padding: 0 0 0 20px; + vertical-align: top; + background: url($checkboxImageUrl) left top no-repeat; + cursor: pointer; +} + +input[type='checkbox'].cr1:checked + label { + background: url($checkboxImageUrl) 0px -18px no-repeat; +} diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 755843375f3..e54884826f3 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -1,6 +1,5 @@ // BASE @import 'base/reboot'; -@import 'base/forms'; @import 'base/grid'; @import 'base/font_awesome'; diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss deleted file mode 100644 index c231563e6e0..00000000000 --- a/public/sass/base/_forms.scss +++ /dev/null @@ -1,252 +0,0 @@ -@use 'sass:color'; - -@mixin form-control-validation($color) { - // Color the label and help text - .text-help, - .form-control-label, - .radio, - .checkbox, - .radio-inline, - .checkbox-inline, - &.radio label, - &.checkbox label, - &.radio-inline label, - &.checkbox-inline label, - .custom-control { - color: $color; - } - - .form-control { - border-color: $color; - } - - // Set validation states also for addons - .input-group-addon { - color: $color; - border-color: $color; - background-color: color.adjust($color, $lightness: 40%); - } - // Optional feedback icon - .form-control-feedback { - color: $color; - } -} - -// -// Forms -// -------------------------------------------------- - -// GENERAL STYLES -// -------------- - -// Reset height since textareas have rows -// Set font for forms - -// Set the height of select and file controls to match text inputs -select, -input[type='file'] { - height: $input-height; /* In IE7, the height of the select element cannot be changed by height, only font-size */ - line-height: $input-height; -} - -// Make select elements obey height by applying a border -select { - width: 220px; // default input width + 10px of padding that doesn't get applied - border: 1px solid $input-border-color; - background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color -} - -// Make multiple select elements height not fixed -select[multiple], -select[size] { - height: auto; -} - -// Focus for select, file, radio, and checkbox -select:focus, -input[type='file']:focus, -input[type='radio']:focus, -input[type='checkbox']:focus { - // Default - outline: thin dotted; - // WebKit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -// not a big fan of number fields -input[type='number']::-webkit-outer-spin-button, -input[type='number']::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} -input[type='number'] { - -moz-appearance: textfield; -} -// Placeholder -// ------------------------- - -// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector -input, -textarea { - &::placeholder { - color: $input-color-placeholder; - } -} - -// INPUT SIZES -// ----------- - -// General classes for quick sizes -.input-mini { - width: 60px; -} -.input-small { - width: 90px; -} -.input-medium { - width: 150px; -} -.input-large { - width: 210px; -} -.input-xlarge { - width: 270px; -} -.input-xxlarge { - width: 530px; -} - -// GRID SIZING FOR INPUTS -// ---------------------- - -// DISABLED STATE -// -------------- - -// Disabled and read-only inputs -input[disabled], -select[disabled], -textarea[disabled], -input[readonly], -select[readonly], -textarea[readonly] { - cursor: $cursor-disabled; - background-color: $input-bg-disabled; -} - -// Explicitly reset the colors here -input[type='radio'][disabled], -input[type='checkbox'][disabled], -input[type='radio'][readonly], -input[type='checkbox'][readonly] { - cursor: $cursor-disabled; - background-color: transparent; -} - -input[type='text'].input-fluid { - width: 100%; - box-sizing: border-box; - padding: 10px; - font-size: 16px; - -moz-box-sizing: border-box; - height: 100%; -} - -input[type='checkbox'].cr1 { - display: none; -} - -.editor-option label.cr1 { - display: inline-block; - margin: 5px 0 1px 0; -} - -label.cr1 { - display: inline-block; - height: 18px; - position: relative; - clear: none; - text-indent: 2px; - margin: 0 0 0px 0; - padding: 0 0 0 20px; - vertical-align: top; - background: url($checkboxImageUrl) left top no-repeat; - cursor: pointer; -} - -input[type='checkbox'].cr1:checked + label { - background: url($checkboxImageUrl) 0px -18px no-repeat; -} - -.gf-fluid-input { - border: none; - display: block; - overflow: hidden; - padding-right: 10px; - input[type='text'] { - width: 100%; - padding: 5px 6px; - height: 100%; - box-sizing: border-box; - } - textarea { - width: 100%; - padding: 5px 6px; - height: 100%; - box-sizing: border-box; - } -} - -// Form control feedback states -// -// Apply contextual and semantic states to individual form controls. - -.form-control-success, -.form-control-warning, -.form-control-danger { - padding-right: $space-xl; - background-repeat: no-repeat; - background-position: center right calc($input-height / 4); - background-size: calc($input-height / 2) calc($input-height / 2); -} - -// Form validation states -.has-success { - @include form-control-validation($brand-success); - - .form-control-success { - background-image: $form-icon-success; - } -} - -.has-warning { - @include form-control-validation($brand-warning); - - .form-control-warning { - background-image: $form-icon-warning; - } -} - -.has-danger { - @include form-control-validation($brand-danger); - - .form-control-danger { - background-image: $form-icon-danger; - } -} - -input:-webkit-autofill, -input:-webkit-autofill:hover, -input:-webkit-autofill:focus, -input:-webkit-autofill, -textarea:-webkit-autofill, -textarea:-webkit-autofill:hover, -textarea:-webkit-autofill:focus, -select:-webkit-autofill, -select:-webkit-autofill:hover, -select:-webkit-autofill:focus { - -webkit-box-shadow: 0 0 0px 1000px $input-bg inset !important; - -webkit-text-fill-color: $input-color !important; - box-shadow: 0 0 0px 1000px $input-bg inset; - border: 1px solid $input-bg; -}