From 128fb8fa7e506fb3656ef9d059cbdc0cc087781a Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Mon, 8 Apr 2019 09:48:15 +0200 Subject: [PATCH] Theme: Reworking button styling (#16362) * added new variables for height in theme, added height to gui button large, replaced add gicon with regular gicon, replaced + with gicon, changed button display to flex * set fixed height to large button, removed xlarge button and replaced with large button * removed button-mini and replaced with button-small, set fixed height to default button and button-small * fixed padding for default and large button, fixed height for navbar button, fixed snapshots * fixed padding and margin on navbar buttons * gave special height to login btn-primary * readded btn-mini class with same styling as btn-small and a deprecated notice * fixed add panel widget buttons --- .../src/components/Button/AbstractButton.tsx | 20 +++++------- .../src/components/Button/Button.story.tsx | 2 +- .../ThresholdsEditor.test.tsx.snap | 10 ++++++ .../src/themes/_variables.scss.tmpl.ts | 6 ++++ packages/grafana-ui/src/themes/default.ts | 5 +++ packages/grafana-ui/src/types/theme.ts | 5 +++ .../components/EmptyListCTA/EmptyListCTA.tsx | 6 ++-- public/app/core/components/org_switcher.ts | 4 +-- .../app/features/admin/partials/edit_org.html | 2 +- .../features/admin/partials/edit_user.html | 2 +- public/app/features/alerting/StateHistory.tsx | 2 +- .../alerting/partials/notifications_list.html | 2 +- .../features/annotations/partials/editor.html | 6 ++-- public/app/features/api-keys/ApiKeysPage.tsx | 2 +- .../__snapshots__/ApiKeysPage.test.tsx.snap | 2 +- .../AddPanelWidget/_AddPanelWidget.scss | 4 ++- .../components/DashLinks/editor.html | 6 ++-- .../datasources/DataSourcesListItem.tsx | 2 +- .../datasources/DataSourcesListPage.tsx | 2 +- .../explore/NoDataSourceCallToAction.tsx | 6 ++-- .../partials/snapshot_list.html | 4 +-- .../features/playlist/partials/playlist.html | 10 +++--- .../features/profile/partials/profile.html | 4 +-- public/app/features/teams/TeamGroupSync.tsx | 6 ++-- public/app/features/teams/TeamList.tsx | 26 +++++++-------- .../__snapshots__/TeamGroupSync.test.tsx.snap | 10 +++--- .../features/teams/partials/create_team.html | 4 +-- .../features/templating/partials/editor.html | 8 ++--- public/app/features/users/InviteeRow.tsx | 4 +-- public/app/features/users/UsersTable.tsx | 2 +- .../__snapshots__/UsersTable.test.tsx.snap | 12 +++---- public/sass/_variables.generated.scss | 6 ++++ public/sass/components/_buttons.scss | 32 ++++++++++--------- public/sass/components/_navbar.scss | 5 ++- public/sass/pages/_login.scss | 1 + 35 files changed, 130 insertions(+), 100 deletions(-) diff --git a/packages/grafana-ui/src/components/Button/AbstractButton.tsx b/packages/grafana-ui/src/components/Button/AbstractButton.tsx index 68dc303191b..38f225273ad 100644 --- a/packages/grafana-ui/src/components/Button/AbstractButton.tsx +++ b/packages/grafana-ui/src/components/Button/AbstractButton.tsx @@ -65,35 +65,28 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV background, fontSize, iconDistance, + height, fontWeight = theme.typography.weight.semibold; switch (size) { - case ButtonSize.ExtraSmall: - padding = `${theme.spacing.xs} ${theme.spacing.sm}`; - fontSize = theme.typography.size.xs; - iconDistance = theme.spacing.xs; - break; case ButtonSize.Small: padding = `${theme.spacing.xs} ${theme.spacing.sm}`; fontSize = theme.typography.size.sm; iconDistance = theme.spacing.xs; + height = theme.height.sm; break; case ButtonSize.Large: padding = `${theme.spacing.md} ${theme.spacing.lg}`; fontSize = theme.typography.size.lg; fontWeight = theme.typography.weight.regular; iconDistance = theme.spacing.sm; - break; - case ButtonSize.ExtraLarge: - padding = `${theme.spacing.md} ${theme.spacing.lg}`; - fontSize = theme.typography.size.lg; - fontWeight = theme.typography.weight.regular; - iconDistance = theme.spacing.sm; + height = theme.height.lg; break; default: padding = `${theme.spacing.sm} ${theme.spacing.md}`; iconDistance = theme.spacing.sm; fontSize = theme.typography.size.base; + height = theme.height.md; } switch (variant) { @@ -133,7 +126,8 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV return { button: css` label: button; - display: inline-block; + display: flex; + align-items: center; font-weight: ${fontWeight}; font-size: ${fontSize}; font-family: ${theme.typography.fontFamily.sansSerif}; @@ -143,6 +137,7 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV vertical-align: middle; cursor: pointer; border: none; + height: ${height}; border-radius: ${borderRadius}; ${background}; @@ -161,6 +156,7 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV icon: css` label: button-icon; margin-right: ${iconDistance}; + filter: brightness(100); `, }; }; diff --git a/packages/grafana-ui/src/components/Button/Button.story.tsx b/packages/grafana-ui/src/components/Button/Button.story.tsx index 5189db1e0ed..0938c618d5f 100644 --- a/packages/grafana-ui/src/components/Button/Button.story.tsx +++ b/packages/grafana-ui/src/components/Button/Button.story.tsx @@ -48,7 +48,7 @@ ButtonStories.add('with icon', () => { Plus: 'fa fa-plus', User: 'fa fa-user', Gear: 'fa fa-gear', - Annotation: 'gicon gicon-add-annotation', + Annotation: 'gicon gicon-annotation', }, 'fa fa-plus' ); diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap index c2feb5f35e7..3b7efcb6e7c 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap +++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap @@ -176,6 +176,11 @@ exports[`Render should render with base threshold 1`] = ` "white": "#ffffff", "yellow": "#ecbb13", }, + "height": Object { + "lg": "48px", + "md": "32px", + "sm": "24px", + }, "name": "Grafana Dark", "panelPadding": Object { "horizontal": 16, @@ -334,6 +339,11 @@ exports[`Render should render with base threshold 1`] = ` "white": "#ffffff", "yellow": "#ecbb13", }, + "height": Object { + "lg": "48px", + "md": "32px", + "sm": "24px", + }, "name": "Grafana Dark", "panelPadding": Object { "horizontal": 16, diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 97486cf3f4c..c46abb75850 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -87,6 +87,12 @@ $container-max-widths: ( $grid-columns: 12 !default; $grid-gutter-width: ${theme.spacing.gutter} !default; +// Component heights +// ------------------------- +$height-sm: ${theme.height.sm}; +$height-md: ${theme.height.md}; +$height-lg: ${theme.height.lg}; + // Typography // ------------------------- diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index 3cdb5f45c85..dadaa2769ef 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -67,6 +67,11 @@ const theme: GrafanaThemeCommons = { sm: '1px', }, }, + height: { + sm: '24px', + md: '32px', + lg: '48px', + }, panelPadding: { horizontal: 16, vertical: 8, diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts index 0510e45fcd5..2409a837ea9 100644 --- a/packages/grafana-ui/src/types/theme.ts +++ b/packages/grafana-ui/src/types/theme.ts @@ -72,6 +72,11 @@ export interface GrafanaThemeCommons { sm: string; }; }; + height: { + sm: string; + md: string; + lg: string; + }; panelPadding: { horizontal: number; vertical: number; diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx index d36eeaaf6ff..1a979bb08c8 100644 --- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx +++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { CallToActionCard, ExtraLargeLinkButton, ThemeContext } from '@grafana/ui'; +import { CallToActionCard, LargeLinkButton, ThemeContext } from '@grafana/ui'; import { css } from 'emotion'; export interface Props { model: any; @@ -37,9 +37,9 @@ const EmptyListCTA: React.FunctionComponent = props => { : ''; const ctaElement = ( - + {buttonTitle} - + ); return ; diff --git a/public/app/core/components/org_switcher.ts b/public/app/core/components/org_switcher.ts index f7b53fa3c81..dc8f00f0fdb 100644 --- a/public/app/core/components/org_switcher.ts +++ b/public/app/core/components/org_switcher.ts @@ -29,10 +29,10 @@ const template = ` {{org.name}} {{org.role}} - + Current - + Switch to diff --git a/public/app/features/admin/partials/edit_org.html b/public/app/features/admin/partials/edit_org.html index 911181ef999..0504cc29628 100644 --- a/public/app/features/admin/partials/edit_org.html +++ b/public/app/features/admin/partials/edit_org.html @@ -35,7 +35,7 @@ - + diff --git a/public/app/features/admin/partials/edit_user.html b/public/app/features/admin/partials/edit_user.html index 7e6457a8a76..1b6db6b2486 100644 --- a/public/app/features/admin/partials/edit_user.html +++ b/public/app/features/admin/partials/edit_user.html @@ -91,7 +91,7 @@ - + diff --git a/public/app/features/alerting/StateHistory.tsx b/public/app/features/alerting/StateHistory.tsx index be34552e50d..3d092e7435a 100644 --- a/public/app/features/alerting/StateHistory.tsx +++ b/public/app/features/alerting/StateHistory.tsx @@ -72,7 +72,7 @@ class StateHistory extends PureComponent { {stateHistoryItems.length > 0 && (
Last 50 state changes -
diff --git a/public/app/features/alerting/partials/notifications_list.html b/public/app/features/alerting/partials/notifications_list.html index 66afa2513fa..81810606123 100644 --- a/public/app/features/alerting/partials/notifications_list.html +++ b/public/app/features/alerting/partials/notifications_list.html @@ -47,7 +47,7 @@
- + @@ -48,8 +48,8 @@
There are no custom annotation queries added yet
- - + + Add Annotation Query
diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx index 62500fb98c8..9748a5727cf 100644 --- a/public/app/features/api-keys/ApiKeysPage.tsx +++ b/public/app/features/api-keys/ApiKeysPage.tsx @@ -113,7 +113,7 @@ export class ApiKeysPage extends PureComponent { There are no dashboard links added yet
- - + + Add Dashboard Link
@@ -61,7 +61,7 @@ - + diff --git a/public/app/features/datasources/DataSourcesListItem.tsx b/public/app/features/datasources/DataSourcesListItem.tsx index d0ff69a66ee..de3ac71f0b1 100644 --- a/public/app/features/datasources/DataSourcesListItem.tsx +++ b/public/app/features/datasources/DataSourcesListItem.tsx @@ -21,7 +21,7 @@ export class DataSourcesListItem extends PureComponent {
{dataSource.name} - {dataSource.isDefault && default} + {dataSource.isDefault && default}
{dataSource.url}
diff --git a/public/app/features/datasources/DataSourcesListPage.tsx b/public/app/features/datasources/DataSourcesListPage.tsx index 09442f5739c..9f881446aec 100644 --- a/public/app/features/datasources/DataSourcesListPage.tsx +++ b/public/app/features/datasources/DataSourcesListPage.tsx @@ -39,7 +39,7 @@ export interface Props { const emptyListModel = { title: 'There are no data sources defined yet', - buttonIcon: 'gicon gicon-add-datasources', + buttonIcon: 'gicon gicon-datasources', buttonLink: 'datasources/new', buttonTitle: 'Add data source', proTip: 'You can also define data sources through configuration files.', diff --git a/public/app/features/explore/NoDataSourceCallToAction.tsx b/public/app/features/explore/NoDataSourceCallToAction.tsx index 12733c3265a..ba1d7a488e1 100644 --- a/public/app/features/explore/NoDataSourceCallToAction.tsx +++ b/public/app/features/explore/NoDataSourceCallToAction.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { css } from 'emotion'; -import { ThemeContext, ExtraLargeLinkButton, CallToActionCard } from '@grafana/ui'; +import { ThemeContext, LargeLinkButton, CallToActionCard } from '@grafana/ui'; export const NoDataSourceCallToAction = () => { const theme = useContext(ThemeContext); @@ -22,9 +22,9 @@ export const NoDataSourceCallToAction = () => { ); const ctaElement = ( - + Add data source - + ); const cardClassName = css` diff --git a/public/app/features/manage-dashboards/partials/snapshot_list.html b/public/app/features/manage-dashboards/partials/snapshot_list.html index f646194088d..e7f88abf264 100644 --- a/public/app/features/manage-dashboards/partials/snapshot_list.html +++ b/public/app/features/manage-dashboards/partials/snapshot_list.html @@ -20,13 +20,13 @@ External - + View - + diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index f90c407ca4a..6f4125c5619 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -34,13 +34,13 @@ - - - @@ -64,7 +64,7 @@ - @@ -82,7 +82,7 @@ - diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index 195364c5577..1cb800db6a5 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -63,10 +63,10 @@ {{org.name}} {{org.role}} - + Current - + Select diff --git a/public/app/features/teams/TeamGroupSync.tsx b/public/app/features/teams/TeamGroupSync.tsx index ace8e9c8562..424d494c39c 100644 --- a/public/app/features/teams/TeamGroupSync.tsx +++ b/public/app/features/teams/TeamGroupSync.tsx @@ -63,7 +63,7 @@ export class TeamGroupSync extends PureComponent { {group.groupId} - this.onRemoveGroup(group)}> + this.onRemoveGroup(group)}> @@ -121,8 +121,8 @@ export class TeamGroupSync extends PureComponent { {groups.length === 0 && !isAdding && (
There are no external groups to sync with
-
diff --git a/public/app/features/teams/TeamList.tsx b/public/app/features/teams/TeamList.tsx index 5d3ef005c9e..60d71e56f49 100644 --- a/public/app/features/teams/TeamList.tsx +++ b/public/app/features/teams/TeamList.tsx @@ -73,20 +73,18 @@ export class TeamList extends PureComponent { renderEmptyList() { return ( -
- -
+ ); } diff --git a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap index 03130b638bc..5527479d1dc 100644 --- a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap +++ b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap @@ -81,11 +81,11 @@ exports[`Render should render component 1`] = ` There are no external groups to sync with
@@ -225,7 +225,7 @@ exports[`Render should render groups table 1`] = ` } >
-
diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index b34ef1f4807..b2f7312fe27 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -11,8 +11,8 @@
There are no variables added yet
- - + + Add variable
@@ -58,12 +58,12 @@ - + Duplicate - + diff --git a/public/app/features/users/InviteeRow.tsx b/public/app/features/users/InviteeRow.tsx index fd9ff32fbdd..1e3d5017b04 100644 --- a/public/app/features/users/InviteeRow.tsx +++ b/public/app/features/users/InviteeRow.tsx @@ -27,7 +27,7 @@ class InviteeRow extends PureComponent { {invitee.email} {invitee.name} -