Commit Graph
66 Commits
Author SHA1 Message Date
Torkel ÖdegaardandAshley Harrison 9f5e691994 Theme: Inter font (behind feature toggle) (#56441)
* Theme: Inter font change with new line-height

* Add it behind feature toggle

* make buildVariant easier to read + enforce integer multiples of 2 (#56486)

* Minor update

* Update

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
2022-10-15 16:22:33 +02:00
Torkel Ödegaard 0958d9ba55 Theme: Change body line-height to fix alignment issue (#56442)
* Theme: Change body line-height to fix alignment issue

* Updates
2022-10-06 12:59:43 +02:00
kay delaney 1772bd4238 Chore: Reduce usage of v1 theme (#53245) 2022-08-08 16:37:06 +01:00
Jack Westbrook d87bf30e9e Build: Introduce ESM and Treeshaking to NPM package builds (#51517)
* Revert "Chore: Bump terser to fix security vulnerability (#53052)"

This reverts commit 7ae74d2a18.

* feat: use tsc and rollup directly with esbuild and publishConfig, files props

* refactor(grafana-data): fix isolatedModules re-export type error

* refactor(grafana-data): import paths from src not package name

* refactor(rollup): fix dts output.file

* chore(grafana-schema): delete dashboard_experimental.gen.ts - cannot work with isolatedModules

* refactor(grafana-e2e-selectors): fix export types isolatedModules error

* refactor(grafana-runtime): fix isolatedModules re-export type error

* refactor(grafana-ui): fix isolatedModules re-export type error

* feat(grafana-ui): use named imports for treeshaking

* refactor(grafana-ui): use named imports for treeshaking

* feat: react and react-dom as peerDeps for packages

* feat(grafana-ui): emotion packages as peerDeps

* feat(grafana-e2e): use tsc, rollup, esbuild for bundling

* chore(packages): clean up redundant dependencies

* chore(toolkit): deprecate unused package:build task

* chore(schema): put back dashboard_experimental and exclude to prevent isolatedModules error

* docs(packages): update readme

* chore(storybook): disable isolatedModules for builds

* chore: relax peerDeps for emotion and react

* revert(grafana-ui): put @emotion dependencies back

* refactor: replace relative package imports with package name

* build(packages): set emitDeclaration false for typecheck scripts to work

* test(publicdashboarddatasource): move test next to implementation. try to appease the betterer gods

* chore(storybook): override ts-node config for storybook compilation

* refactor(grafana-data): use ternary so babel doesnt complain about expecting flow types

* chore(toolkit): prefer files and publishConfig package.json props over copying

* build(npm): remove --contents dist arg from publishing commands

* chore(packages): introduce sideEffects prop to package.json to hint package can be treeshaken

* chore(packages): remove redundant index.js files

* feat(packages): set publishConfig.access to public

* feat(packages): use yarn berry and npm for packaging and publishing

* refactor(packages): simplify rollup configs

* chore(schema): add comment explaining need to exclude dashboard_experimental

* revert(toolkit): put back clean to prevent cli failures

* ci(packages): run packages:pack before a canary publish

* chore(gitignore): add npm-artifacts directory to ignore list

* test(publicdashboarddatasource): fix module mocking

* chore(packages): delete package.tgz when running clean

* chore(grafana-data): move dependencies from devDeps to prevent build resolution errors
2022-08-03 15:47:09 +02:00
Alex Khomenko ba543343c4 Grafana/UI: Add ColorPickerInput component (#52222)
* ColorPickerInput: Setup componnet

* ColorPickerInput: Add onChange callback

* ColorPickerInput: Conver ColorInput to functional component

* ColorPickerInput: Extend Input props

* ColorPickerInput: Upate value prop

* ColorPickerInput: Allow customising color format for onChange

* ColorPickerInput: Add docs

* ColorPickerInput: Update docs

* ColorPickerInput: Memoize debounced callback

* ColorPickerInput: Add tests and use theme for spacing

* Apply styles from SpectrumPalette

* Cleanup
2022-07-19 01:09:09 -04:00
Torkel Ödegaard 7947629f82 TopNav: Make dashboard toolbar actions work in new top nav (#51950)
* Initial work on new toolbar button

* Minor step

* Small progress

* Minor progress

* Minor fix

* removed console.log

* Removing stuff we don't need yet
2022-07-14 20:34:00 +02:00
Torkel Ödegaard c1d405a200 Search: Fixes margins and paddings and left position (#50570) 2022-06-10 11:30:52 +02:00
Peter Holmberg 7bcc151ae6 Alerting: Add notification policy flow chart (#49405)
* setup component add images

* add name to theme

* add root route info box

* remove unsused

* styling
2022-05-24 10:57:26 +02:00
Torkel Ödegaard c29e6fcb3a Prometheus/Loki: Improve metric search highlight contrast (#49384)
* Prometheus/Loki: Improve metric search highlight contrast

* Update other places, and add reusable variables
2022-05-23 15:53:45 +02:00
Josh Hunt 1a633812a7 DashboardSettings: Update active tab to use new brand gradient (#48755)
* DashboardSettings: Update active tab to use new brand gradient

* Remove colons from gradients
2022-05-05 17:10:06 +01:00
Josh Hunt af57804513 Tooltip: Make tooltip use secondary background color for legible links (#48748) 2022-05-05 14:28:45 +01:00
Kristina b30d9f2732 Explore: Fix height on horizontal drawer and query inspector (#47832)
* Move tab height and horizontal drawer height to themable variables so they can be referred to. Add a default height to tabbed container so it can set an explicit height. Add overflow: scroll to inspector content

* Use height variable that changes on resize

* Use css to set height
2022-04-25 07:48:55 -05:00
Josh Hunt 3c6e0e8ef8 Chore: ESlint import order (#44959)
* Add and configure eslint-plugin-import

* Fix the lint:ts npm command

* Autofix + prettier all the files

* Manually fix remaining files

* Move jquery code in jest-setup to external file to safely reorder imports

* Resolve issue caused by circular dependencies within Prometheus

* Update .betterer.results

* Fix missing // @ts-ignore

* ignore iconBundle.ts

* Fix missing // @ts-ignore
2022-04-22 14:33:13 +01:00
CommanderRoot d29b8e8858 Chore: Replace deprecated String.prototype.substr() (#46763)
.substr() is deprecated so we replace it with .slice() which works similarily but isn't deprecated
Signed-off-by: Tobias Speicher <rootcommander@gmail.com>
2022-04-04 11:08:06 +02:00
Torkel Ödegaard 72b6f64df9 Theme: Increase contrast for overlays and drawers (#46630) 2022-03-23 14:47:33 +01:00
Torkel Ödegaard 374681b546 Popovers: Improve contrast by darkening shadow and changing border to medium (#45136)
* Popovers: Improve contrast by darkening shadow and changing border to medium

* Updated sass theme

* Revert back to weak border
2022-02-10 13:52:23 +01:00
Torkel Ödegaard 7c0b453e19 Tooltips: Make tooltips non interactive by default (#45053)
* Tooltips: Make tooltips non interactive by default

* More updates and cleanup

* Update

* Make time range picker tooltip interactive

* Fix issue

* Trying to make Receivers test faster

* Make JSONCell tooltip interactive
2022-02-08 22:58:20 +01:00
Connor Lindsey 70c0a9d117 A11y: Fix Fastpass issues for tracing query editors and config pages (#42759)
* Add aria-labels to Jaeger config page

* Fix fastpass issues for Tempo config page

* Fix fastpass issues for other tracing query types like search
2021-12-17 11:49:21 -07:00
Gábor Farkas 1569529808 theme: fixed colors to be monaco-compatible (#43153) 2021-12-15 14:52:31 +01:00
kay delaney 124c3f537f A11y: Fix misc. fastpass issues (#41088) 2021-11-01 14:45:23 +00:00
Josh Hunt 419c465edf Grafana-UI: Editor UI components (#41136)
* Grafana-UI: Update theme.spacing to support string value when called with just one arugment

This allows theme.spacing("auto") to be valid

* Grafana-UI: Support width="auto" for Select component

This allows for inline Selects that are sized based on their content,
rather than occupying block-width

* Add toOption for creating Select options to @grafana/data

* Add test util
2021-11-01 12:06:28 +01:00
Ashley Harrison a3783a4eb7 Navigation: Increase navigation width + make icons a consistent size (#39959)
* Navigation: Increase navigation width + make icons a consistent size

* Navigation: Move style to only apply to headers
2021-10-04 16:18:17 +01:00
Ashley Harrison 4350f4931d NavBar: Styling tweaks to tidy up appearance (#39871)
* NavBar: Styling tweaks to tidy up appearance

* NavBar: Add external link icon to external links

* NavBar: Dim the external link icon

* bump drone

* NavBar: Rename variable to better describe what it's doing
2021-10-01 15:53:56 +01:00
kay delaney 75a55379f1 A11y: Fixes some fastpass errors for /datasources/* routes (#39577)
* A11y: Fixes some fastpass errors for /datasources/* routes
See #39429
2021-09-29 16:16:30 +01:00
Leon Sorokin 3c72f1678f Colors: fix by-value/hex3 & Single color schemes in Gradient mode (#38656) 2021-08-27 15:06:28 -05:00
Patrick O'CarrollandTorkel Ödegaard 2e772d41a7 Themes: align hover and focus opacity (#38498)
* new warning and success color in light theme, slight tweak to primary text

* changed hover opacity to the same as focues opacity

* Updated generated files

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2021-08-25 15:34:19 +02:00
Patrick O'Carroll 84de946daa changed opacity on disabled, secondary and secondary shade in both themes (#38453) 2021-08-25 09:47:46 +02:00
Patrick O'CarrollandTorkel Ödegaard 8fb4882a01 Light theme palette update (#38487)
* new warning and success color in light theme, slight tweak to primary text

* Update generated light theme scss

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2021-08-24 13:23:01 +02:00
6a77cd43ae GraphNG: refactor by-value color schemes (#37670)
* GraphNG: account for top canvas padding in gradient gen for color scheme/thresholds-by-value

* Updated test dashboard

* Added fix for issue when scaleMin was same as threshold

* fixed firefox issue

* revert docs changes

* update gdev dash for easier comparisons & regression spotting

* refactor

* optimize gradient re-gen/re-use and color more tinycolor.setAlpha() -> alpha(). update uPlot to dev build.

* fix percentage steps

* implement % threshold region rendering

* crisp threshold line rendering

* simplify

* WIP: hoverpoint dynamic color interpolation

* fix hover point color interp

* re-use gradient gen to draw threshold areas

* re-implement by-value color scales

* tweak comment

* mimic tinycolor behavior in colorManipulator.alpha() for empty colors

* explicitly disable hover points for BarChart and Histogram

* reduce test failures and required changes to tests

* fix barchart tests

* uPlot 1.6.15

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
2021-08-13 09:38:04 -05:00
3e35021f7e ColorPicker: return values as hex strings and update theme (#37173)
* Color: fix alpha calculation < 16/255 and State-timeline threshold alpha

* SpectrumPalette: Update to getColorByName

* ColorValueEditor: Update to theme2

* SpectrumPalette: Update to theme2

* ColorPickerPopover: Format hex color

* SpectrumPalette: Format hex color

* SpectrumPalette: Refactor hex color alpha helper

* SpectrumPalette: Fix import and update helper

* ColorPickerPopover: Fix test to not make lowercase

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
2021-07-26 11:11:53 -07:00
Leon Sorokin f78452be30 Color: fix alpha calculation < 16/255 and State-timeline threshold alpha (#35911) 2021-07-23 20:50:47 -05:00
Ashley Harrison 54f8996acf Select: Portal select menu to document.body (#36398)
* ValueMappings: Force overflowing modal content to scroll

* ValueMappings: Update unit tests

* Select: Portal Select to document.body, close menu on scroll

* Select: Fix tests + apply updates from https://github.com/grafana/grafana/pull/32833

* ValueMappingsEditorModal: Revert to using selectEvent in the tests

* Select: Fix remaining unit tests

* Portal: Rewrite Portal as a functional component so we can use useTheme2

* Modal: Remove modal styles from this PR

* Update E2E tests

* More unit test fixes

* Select: Fix remaining E2E tests

* Select: Create util method to select an option in tests
2021-07-14 14:04:23 +01:00
Torkel Ödegaard f884381a68 Theme: Change white base in dark theme (#35564)
* Theme: Change white base in dark theme

* Updated

* Updated snapshots
2021-06-11 17:33:56 +02:00
Leon Sorokin 878474a808 Color utils: optimize colorManipulator/alpha() for common cases (#34948) 2021-06-01 12:52:58 -05:00
Torkel Ödegaard d6a9a9b975 Themes: Add border to sidemenu, and reduce border in dark theme a tiny bit (#34737)
* Themes: Add border to sidemenu, and reduce border in dark theme a tiny bit

* Updated
2021-05-29 07:08:05 +02:00
Torkel Ödegaard 8ecfad6995 Contrast: Improve automatic contrast text logic to include opacity and background (#34190) 2021-05-18 12:32:27 +02:00
Torkel Ödegaard 953aadd6e4 Timeline: Adds opacity & line width option (#34118)
* Timeline: Adds opacity & line width option

* Updated devenv dashboards, added back original timeline modes
2021-05-14 17:24:40 +02:00
Torkel Ödegaard 917a9ace57 Timeline: Use theme getContrastText to calculate value color based on background color (#34072)
* Timeline: Use theme getContrastText to calculate value color based on background color

* Changed back to using the old functions fill, and stroke
2021-05-13 21:41:40 +02:00
Torkel Ödegaard 567bbdf6e6 Theme: New visualization colors model (#33973)
* Initial design for new viz colors

* added unit tests

* Progress

* Updated selected color

* Use old named color names and colors to begin with

* Updates

* Fixing tests

* Progress

* Updates

* updating

* fixing tests

* Using some named colors

* renames && fixes

* remove plural

* fixed tests
2021-05-13 07:32:13 +02:00
Uchechukwu Obasi 9315152d4f FieldValidationMessage: updates component with the new theme model (#33647)
* FieldValidationMessage: updates component with the new theme model

* used correct theme value
2021-05-04 17:43:47 +02:00
Torkel Ödegaard a62bfba63b Alerting: Updates the new alerting rule table to use new theme (#33684) 2021-05-04 13:38:01 +02:00
Torkel Ödegaard 578283078b PanelEdit: Improves viz picker ux, auto close on click (#33633)
* PanelEdit: Improves viz picker ux, auto close on click

* Fixing strict ts error

* Updated e2e
2021-05-03 16:49:09 +02:00
Torkel Ödegaard 7ee994f843 Theme: Renames new theme model from GrafanaThemeV2 to just GrafanaTheme (#33619) 2021-05-03 09:45:54 +02:00
Torkel Ödegaard c0d28d9ed7 PageLayout: Fixes max-width breakpoint so that it triggers only when there is room for margin+ (#33558) 2021-04-30 12:08:02 +02:00
Torkel Ödegaard 33cfc3d9c2 Theme: Fixing storybook theme (#33541) 2021-04-29 21:12:50 +02:00
Jack Westbrook 249004ebef Pages: update react components to use v2 theme (#33413)
* chore: expose theme types / functions

* fix(grafana-ui): withTheme2 extends themeable2

* feat: migrate page components to use new theme

* refactor(pages): replace legacy form components with latest form components

* refactor(dashboardimport): update page component to use theme spacing

* refactor(alerting-ng): update page component to use v2 theme

* test(dashboardpage): update test for v2 theme

* test(apikeyspage): update test to select InlineSwitch component

* test(createteam): update snapshot

* refactor(playlist): update page components to use v2 theme

* refactor(page): put back classes on page-container and background colors
2021-04-28 16:05:00 +02:00
Torkel Ödegaard 5d855dbf33 Theme: Fixes to time picker calendar & variable dropdowns & more (#33407)
* More theme fixes

* more updates

* Fixed alerts in explore
2021-04-27 15:13:08 +02:00
Jack WestbrookandTorkel Ödegaard 45fa5fdf48 Buttons: introduce buttonStyle prop (#33384)
* Wip

* Updates to colors to make secondary outline work

* refactor: prefer buttonStyle="text" over variant="link" for text buttons

* revert(button): put back mdx story page

* fix(button): variant link disabled as text disabled

* docs(button): remove link variant from stories

* feat(grafana-ui): introduce basic deprecation notice for button and linkbutton components

* docs(button): update usage of href with button and buttonlink

* feat(button): add grafana/ui to deprecation warning

* refactor(buttons): use a more descriptive name for prop warning function

* test(buttonrow): update snapshots

* refactor(buttons): change prop name from buttonStyle to fill

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2021-04-27 12:03:06 +02:00
Torkel Ödegaard 4643bfa539 Modals: design update (#33368)
* Modals: Style update draft

* Modal.ButtonRow to control spacing better in a centralised way

* Remove header border if no tabs

* Added border and made buttons right aligned and changed order of buttons

* Updating the overlay

* Tweaks to paddings

* Updated share modals
2021-04-26 18:26:56 +02:00
Torkel Ödegaard e6a9654d0e Checkbox: Updates to look and feel and using new theme (#33310)
* Checkbox: Updates to look and feel and using new theme

* A few more theme fixes

* Removed comments

* Updated snapshot
2021-04-23 14:40:06 +02:00