From 5fd798afb78ceb669e8485426d08fd7e04e6304a Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Fri, 30 Jul 2021 16:02:40 -0700 Subject: [PATCH] chore: change dropdown icons from horizontal to vertical (#15958) * change icons * add size * fix storybook * fix favstar, add new icons, and others * fix lint --- superset-frontend/images/icons/more_vert.svg | 21 +++++++++++++++++++ .../src/components/FaveStar/index.tsx | 6 +++++- .../src/components/Icons/Icons.stories.tsx | 2 +- .../src/components/Icons/index.tsx | 1 + .../src/components/ListViewCard/index.tsx | 4 ++++ .../controls/DatasourceControl/index.jsx | 4 ++-- .../src/views/CRUD/chart/ChartCard.tsx | 2 +- .../views/CRUD/dashboard/DashboardCard.tsx | 5 +++-- .../src/views/CRUD/welcome/SavedQueries.tsx | 2 +- .../src/views/CRUD/welcome/Welcome.tsx | 3 +++ 10 files changed, 42 insertions(+), 8 deletions(-) create mode 100644 superset-frontend/images/icons/more_vert.svg diff --git a/superset-frontend/images/icons/more_vert.svg b/superset-frontend/images/icons/more_vert.svg new file mode 100644 index 0000000000..2fbe6287d8 --- /dev/null +++ b/superset-frontend/images/icons/more_vert.svg @@ -0,0 +1,21 @@ + + + + diff --git a/superset-frontend/src/components/FaveStar/index.tsx b/superset-frontend/src/components/FaveStar/index.tsx index f6f8c9ec5e..1f7a74b1ac 100644 --- a/superset-frontend/src/components/FaveStar/index.tsx +++ b/superset-frontend/src/components/FaveStar/index.tsx @@ -66,7 +66,11 @@ const FaveStar = ({ data-test="fave-unfave-icon" role="button" > - {isStarred ? : } + {isStarred ? ( + + ) : ( + + )} ); diff --git a/superset-frontend/src/components/Icons/Icons.stories.tsx b/superset-frontend/src/components/Icons/Icons.stories.tsx index c40dbad295..e2a3944eb4 100644 --- a/superset-frontend/src/components/Icons/Icons.stories.tsx +++ b/superset-frontend/src/components/Icons/Icons.stories.tsx @@ -72,7 +72,7 @@ InteractiveIcons.argTypes = { }, iconSize: { defaultValue: 'xl', - control: { type: 'inline-radio' }, + control: { type: 'inline-radio', options: ['s', 'l', 'm', 'xl', 'xxl'] }, }, iconColor: { defaultValue: null, diff --git a/superset-frontend/src/components/Icons/index.tsx b/superset-frontend/src/components/Icons/index.tsx index f2b19445f7..f281e90182 100644 --- a/superset-frontend/src/components/Icons/index.tsx +++ b/superset-frontend/src/components/Icons/index.tsx @@ -111,6 +111,7 @@ const IconFileNames = [ 'minus', 'minus_solid', 'more_horiz', + 'more_vert', 'move', 'nav_charts', 'nav_dashboard', diff --git a/superset-frontend/src/components/ListViewCard/index.tsx b/superset-frontend/src/components/ListViewCard/index.tsx index 015b0021f0..bfd6d6a82d 100644 --- a/superset-frontend/src/components/ListViewCard/index.tsx +++ b/superset-frontend/src/components/ListViewCard/index.tsx @@ -93,6 +93,10 @@ const TitleContainer = styled.div` margin-left: auto; align-self: flex-end; padding-left: ${({ theme }) => theme.gridUnit}px; + span[role='img'] { + display: flex; + align-items: center; + } } `; diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx index 7484ae717f..9278c29e79 100644 --- a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx @@ -97,7 +97,7 @@ const Styles = styled.div` span[aria-label='dataset-physical'] { color: ${({ theme }) => theme.colors.grayscale.base}; } - span[aria-label='more-horiz'] { + span[aria-label='more-vert'] { color: ${({ theme }) => theme.colors.primary.base}; } `; @@ -238,7 +238,7 @@ class DatasourceControl extends React.PureComponent { data-test="datasource-menu" > - diff --git a/superset-frontend/src/views/CRUD/chart/ChartCard.tsx b/superset-frontend/src/views/CRUD/chart/ChartCard.tsx index d6bde9441f..96a384e5e7 100644 --- a/superset-frontend/src/views/CRUD/chart/ChartCard.tsx +++ b/superset-frontend/src/views/CRUD/chart/ChartCard.tsx @@ -168,7 +168,7 @@ export default function ChartCard({ isStarred={favoriteStatus} /> - + } diff --git a/superset-frontend/src/views/CRUD/dashboard/DashboardCard.tsx b/superset-frontend/src/views/CRUD/dashboard/DashboardCard.tsx index 017a1346e3..5f84e41a41 100644 --- a/superset-frontend/src/views/CRUD/dashboard/DashboardCard.tsx +++ b/superset-frontend/src/views/CRUD/dashboard/DashboardCard.tsx @@ -18,7 +18,7 @@ */ import React from 'react'; import { Link, useHistory } from 'react-router-dom'; -import { t } from '@superset-ui/core'; +import { t, useTheme } from '@superset-ui/core'; import { handleDashboardDelete, CardStyles } from 'src/views/CRUD/utils'; import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags'; import { Dropdown, Menu } from 'src/common/components'; @@ -68,6 +68,7 @@ function DashboardCard({ const canDelete = hasPerm('can_write'); const canExport = hasPerm('can_read'); + const theme = useTheme(); const menu = ( {canEdit && openDashboardEditModal && ( @@ -173,7 +174,7 @@ function DashboardCard({ isStarred={favoriteStatus} /> - + } diff --git a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx index 05a3c82bad..039473972f 100644 --- a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx +++ b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx @@ -352,7 +352,7 @@ const SavedQueries = ({ }} > - diff --git a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx index 76554d2664..540b63576d 100644 --- a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx +++ b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx @@ -80,6 +80,9 @@ const WelcomeContainer = styled.div` padding: 3px 21px; } } + .ant-card-meta-description { + margin-top: ${({ theme }) => theme.gridUnit}px; + } .ant-card.ant-card-bordered { border: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; }