style: filters p0 icon churn (#11215)

* new filters icon * icon styling * bigger icons in list views * better sizing of table actions and favStars * more icon sizing... * fixing more button size jankiness * linting
2024-09-18 11:39:49 -04:00 · 2020-10-10 09:56:18 -07:00 · 2020-10-10 09:56:18 -07:00 · c21f5b9880
commit c21f5b9880
parent f8538fc5bb
9 changed files with 68 additions and 28 deletions
--- a/superset-frontend/images/icons/filter.svg
+++ b/superset-frontend/images/icons/filter.svg
@ -17,5 +17,5 @@ specific language governing permissions and limitations
 under the License.
 -->
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 16C10.5 16.5523 10.9477 17 11.5 17H12.5C13.0523 17 13.5 16.5523 13.5 16C13.5 15.4477 13.0523 15 12.5 15H11.5C10.9477 15 10.5 15.4477 10.5 16ZM6.5 7C5.94772 7 5.5 7.44772 5.5 8C5.5 8.55228 5.94772 9 6.5 9H17.5C18.0523 9 18.5 8.55228 18.5 8C18.5 7.44772 18.0523 7 17.5 7H6.5ZM8.5 12C8.5 12.5523 8.94772 13 9.5 13H14.5C15.0523 13 15.5 12.5523 15.5 12C15.5 11.4477 15.0523 11 14.5 11H9.5C8.94772 11 8.5 11.4477 8.5 12Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.59961 18.4C9.59961 19.2837 10.316 20 11.1996 20H12.7996C13.6833 20 14.3996 19.2837 14.3996 18.4V18.4C14.3996 17.5163 13.6833 16.8 12.7996 16.8H11.1996C10.316 16.8 9.59961 17.5163 9.59961 18.4V18.4ZM3.19961 4C2.31596 4 1.59961 4.71634 1.59961 5.6V5.6C1.59961 6.48366 2.31595 7.2 3.19961 7.2H20.7996C21.6833 7.2 22.3996 6.48366 22.3996 5.6V5.6C22.3996 4.71634 21.6833 4 20.7996 4H3.19961ZM6.39961 12C6.39961 12.8837 7.11595 13.6 7.99961 13.6H15.9996C16.8833 13.6 17.5996 12.8837 17.5996 12V12C17.5996 11.1163 16.8833 10.4 15.9996 10.4H7.99961C7.11595 10.4 6.39961 11.1163 6.39961 12V12Z" fill="currentColor"/>
 </svg>
--- a/superset-frontend/images/icons/filter_small.svg
+++ b/superset-frontend/images/icons/filter_small.svg
@ -0,0 +1,21 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 16C10.5 16.5523 10.9477 17 11.5 17H12.5C13.0523 17 13.5 16.5523 13.5 16C13.5 15.4477 13.0523 15 12.5 15H11.5C10.9477 15 10.5 15.4477 10.5 16ZM6.5 7C5.94772 7 5.5 7.44772 5.5 8C5.5 8.55228 5.94772 9 6.5 9H17.5C18.0523 9 18.5 8.55228 18.5 8C18.5 7.44772 18.0523 7 17.5 7H6.5ZM8.5 12C8.5 12.5523 8.94772 13 9.5 13H14.5C15.0523 13 15.5 12.5523 15.5 12C15.5 11.4477 15.0523 11 14.5 11H9.5C8.94772 11 8.5 11.4477 8.5 12Z" fill="currentColor"/>
+</svg>
--- a/superset-frontend/src/components/FaveStar.tsx
+++ b/superset-frontend/src/components/FaveStar.tsx
@ -17,7 +17,7 @@
 * under the License.
 */
 import React from 'react';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import TooltipWrapper from './TooltipWrapper';
 import Icon from './Icon';

@ -31,6 +31,10 @@ interface FaveStarProps {
  showTooltip?: boolean;
 }

+const StyledLink = styled.a`
+  font-size: ${({ theme }) => theme.typography.sizes.xl}px;
+`;
+
 export default class FaveStar extends React.PureComponent<FaveStarProps> {
  componentDidMount() {
    this.props.fetchFaveStar(this.props.itemId);
@ -68,7 +72,7 @@ export default class FaveStar extends React.PureComponent<FaveStarProps> {
    }

    return (
-      <a
+      <StyledLink
        href="#"
        onClick={this.onClick.bind(this)}
        className="fave-unfave-icon"
@ -80,7 +84,7 @@ export default class FaveStar extends React.PureComponent<FaveStarProps> {
          width={this.props.width || 20}
          height={this.props.height || 'auto'}
        />
-      </a>
+      </StyledLink>
    );
  }
 }
--- a/superset-frontend/src/components/Icon/index.tsx
+++ b/superset-frontend/src/components/Icon/index.tsx
@ -17,6 +17,7 @@
 * under the License.
 */
 import React, { SVGProps } from 'react';
+import { styled } from '@superset-ui/core';

 import { ReactComponent as AlertSolidIcon } from 'images/icons/alert_solid.svg';
 import { ReactComponent as AlertIcon } from 'images/icons/alert.svg';
@ -77,6 +78,7 @@ import { ReactComponent as FieldNumIcon } from 'images/icons/field_num.svg';
 import { ReactComponent as FieldStructIcon } from 'images/icons/field_struct.svg';
 import { ReactComponent as FileIcon } from 'images/icons/file.svg';
 import { ReactComponent as FilterIcon } from 'images/icons/filter.svg';
+import { ReactComponent as FilterSmallIcon } from 'images/icons/filter_small.svg';
 import { ReactComponent as FolderIcon } from 'images/icons/folder.svg';
 import { ReactComponent as FullIcon } from 'images/icons/full.svg';
 import { ReactComponent as GearIcon } from 'images/icons/gear.svg';
@ -194,6 +196,7 @@ export type IconName =
  | 'field-struct'
  | 'file'
  | 'filter'
+  | 'filter-small'
  | 'folder'
  | 'full'
  | 'gear'
@ -314,6 +317,7 @@ export const iconsRegistry: Record<
  'field-struct': FieldStructIcon,
  file: FileIcon,
  filter: FilterIcon,
+  'filter-small': FilterSmallIcon,
  folder: FolderIcon,
  full: FullIcon,
  gear: GearIcon,
@ -376,6 +380,18 @@ interface IconProps extends SVGProps<SVGSVGElement> {
  name: IconName;
 }

+const IconWrapper = styled.span`
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  svg {
+    width: 100%;
+    height: 100%;
+    color: currentColor;
+    vertical-align: middle;
+  }
+`;
+
 const Icon = ({
  name,
  color = '#666666',
@ -385,7 +401,9 @@ const Icon = ({
  const Component = iconsRegistry[name];

  return (
-    <Component color={color} viewBox={viewBox} data-test={name} {...rest} />
+    <IconWrapper>
+      <Component color={color} viewBox={viewBox} data-test={name} {...rest} />
+    </IconWrapper>
  );
 };

--- a/superset-frontend/src/components/ListView/TableCollection.tsx
+++ b/superset-frontend/src/components/ListView/TableCollection.tsx
@ -145,6 +145,7 @@ const Table = styled.table`
  .table-row {
    .actions {
      opacity: 0;
+      font-size: ${({ theme }) => theme.typography.sizes.xl}px;
    }

    &:hover {
--- a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
@ -24,16 +24,19 @@ export const Pill = styled.div`
  color: ${({ theme }) => theme.colors.grayscale.light5};
  border-radius: 1em;
  vertical-align: text-top;
-  padding: 0 8px;
-  font-size: 14px;
+  padding: ${({ theme }) => `${theme.gridUnit}px ${theme.gridUnit * 2}px`};
+  font-size: ${({ theme }) => theme.typography.sizes.m}px;
  font-weight: normal;
  transition: ${({ theme }) => theme.transitionTiming}s all;
+  min-width: 1em;
+  min-height: 1em;
+  line-height: 1em;
+  vertical-align: middle;
+  white-space: nowrap;

  svg {
-    vertical-align: middle;
-    height: 1em;
-    width: 1em;
-    color: currentColor;
+    position: relative;
+    top: -1px;
  }

  &:hover {
@ -52,17 +55,8 @@ export const Pill = styled.div`
  &.filters-inactive {
    color: ${({ theme }) => theme.colors.grayscale.light5};
    background: ${({ theme }) => theme.colors.grayscale.light1};
-    min-width: 22px;
-    max-width: 22px;
-    min-height: 22px;
-    max-height: 22px;
-    padding: 0;
+    padding: ${({ theme }) => theme.gridUnit}px;
    text-align: center;
-    line-height: 22px;
-    font-size: 18px;
-    svg {
-      margin-bottom: 2px;
-    }
    &:hover {
      background: ${({ theme }) => theme.colors.grayscale.base};
    }
--- a/superset-frontend/src/dashboard/components/Header.jsx
+++ b/superset-frontend/src/dashboard/components/Header.jsx
@ -105,6 +105,14 @@ const StyledDashboardHeader = styled.div`
  .fave-unfave-icon {
    margin-left: ${({ theme }) => theme.gridUnit * 2}px;
  }
+  .button-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    .action-button {
+      font-size: ${({ theme }) => theme.typography.sizes.xl}px;
+    }
+  }
 `;

 class Header extends React.PureComponent {
--- a/superset-frontend/src/dashboard/components/HeaderActionsDropdown.jsx
+++ b/superset-frontend/src/dashboard/components/HeaderActionsDropdown.jsx
@ -149,7 +149,7 @@ class HeaderActionsDropdown extends React.PureComponent {
        title={<Icon name="more-horiz" />}
        noCaret
        id="save-dash-split-button"
-        bsSize="small"
+        bsSize="large"
        style={{ border: 'none', padding: 0, marginLeft: '4px' }}
        pullRight
      >
--- a/superset-frontend/src/dashboard/stylesheets/dashboard.less
+++ b/superset-frontend/src/dashboard/stylesheets/dashboard.less
@ -128,12 +128,6 @@ body {
      height: 100%;
    }
  }
-
-  .button-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-  }
 }

 .dashboard .chart-header,