style: Fancier menus, more SIP-34-ish (apache#10423)

* style: shinier menus

* fixing mouseover glitch

* unused import

* rm emotion-reset

* restoring default config values

* lint fixes ✨

* a bit more pizzaz to the underlines (max's idea), fading active background

* simplifying navtitle -> label

* RBNavDropdown  -> ReactBootstrapNavDropdown

* nixing whitespace

* replacing !importants with better selector specificity

* moving Menu LESS into Emotion

* no more border!

* fixing border issue

* language picker, account dropdown now use new dropdown component

* nixing whitespace in comment

* nixing duplicate styling

* removing borders on FAB navbar

* explicit font coloring

* linting

superset-frontend/src/components/Icon/index.tsx

@@ -30,6 +30,7 @@ import { ReactComponent as CloseIcon } from 'images/icons/close.svg';
 import { ReactComponent as CompassIcon } from 'images/icons/compass.svg';
 import { ReactComponent as DatasetPhysicalIcon } from 'images/icons/dataset_physical.svg';
 import { ReactComponent as DatasetVirtualIcon } from 'images/icons/dataset_virtual.svg';
+import { ReactComponent as DropdownArrowIcon } from 'images/icons/dropdown-arrow.svg';
 import { ReactComponent as ErrorIcon } from 'images/icons/error.svg';
 import { ReactComponent as FavoriteSelectedIcon } from 'images/icons/favorite-selected.svg';
 import { ReactComponent as FavoriteUnselectedIcon } from 'images/icons/favorite-unselected.svg';
@@ -58,6 +59,7 @@ type IconName =
  | 'compass'
  | 'dataset-physical'
  | 'dataset-virtual'
+ | 'dropdown-arrow'
  | 'error'
  | 'favorite-selected'
  | 'favorite-unselected'
@@ -88,6 +90,7 @@ export const iconsRegistry: Record<
  'favorite-selected': FavoriteSelectedIcon,
  'favorite-unselected': FavoriteUnselectedIcon,
  'list-view': ListViewIcon,
+ 'dropdown-arrow': DropdownArrowIcon,
  'sort-asc': SortAscIcon,
  'sort-desc': SortDescIcon,
  certified: CertifiedIcon,

superset-frontend/src/components/Menu/LanguagePicker.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import { NavDropdown, MenuItem } from 'react-bootstrap';
+import { MenuItem } from 'react-bootstrap';
+import NavDropdown from 'src/components/NavDropdown';
 
 export interface Languages {
  [key: string]: {

superset-frontend/src/components/Menu/Menu.tsx

@@ -24,7 +24,6 @@ import MenuObject, { MenuObjectProps } from './MenuObject';
 import NewMenu from './NewMenu';
 import UserMenu from './UserMenu';
 import LanguagePicker, { Languages } from './LanguagePicker';
-import './Menu.less';
 
 interface BrandProps {
  path: string;
@@ -56,32 +55,65 @@ export interface MenuProps {
 }
 
 const StyledHeader = styled.header`
+ .caret {
+ display: none;
+ }
+
+ .navbar-inverse {
+ border: none;
+ }
+
+ .version-info {
+ padding: 5px 20px;
+ color: ${({ theme }) => theme.colors.grayscale.base};
+ font-size: ${({ theme }) => theme.typography.sizes.xs}px;
+
+ div {
+ white-space: nowrap;
+ }
+ }
+
  .navbar-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  }
 
+ .nav > li > a {
+ padding: ${({ theme }) => theme.gridUnit * 4}px;
+ }
+
  .navbar-nav > li > a {
+ color: ${({ theme }) => theme.colors.grayscale.dark1};
+ border-bottom: none;
+ &:focus {
+ border-bottom: none;
+ }
  &:after {
  content: '';
  position: absolute;
  bottom: -3px;
- left: 0;
- width: 100%;
+ left: 50%;
+ width: 0;
  height: 3px;
  background-color: ${({ theme }) => theme.colors.primary.base};
  opacity: 0;
- transition: opacity ${({ theme }) => theme.transitionTiming * 2}s;
+ transform: translateX(-50%);
+ transition: all ${({ theme }) => theme.transitionTiming}s;
  }
 
  &:hover {
+ color: ${({ theme }) => theme.colors.grayscale.dark1};
  border-bottom: none;
-
  &:after {
  opacity: 1;
+ width: 100%;
  }
  }
+ &:hover,
+ &:focus {
+ margin: 0;
+ }
  }
 `;
 

superset-frontend/src/components/Menu/MenuObject.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import { NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
+import { NavItem, MenuItem } from 'react-bootstrap';
+import NavDropdown from '../NavDropdown';
 
 interface MenuObjectChildProps {
  label: string;
@@ -44,23 +45,13 @@ export default function MenuObject({
  if (url) {
  return (
  <NavItem eventKey={index} href={url}>
- <i className={`fa ${icon}`} /> &nbsp; {label}
+ {label}
  </NavItem>
  );
  }
 
- const navTitle = (
- <>
- <i className={`fa ${icon}`} />
- &nbsp; {label}
- </>
- );
  return (
- <NavDropdown
- id={`menu-dropdown-${label}`}
- eventKey={index}
- title={navTitle}
- >
+ <NavDropdown id={`menu-dropdown-${label}`} eventKey={index} title={label}>
  {childs?.map((child: MenuObjectChildProps | string, index1: number) => {
  if (typeof child === 'string' && child === '-') {
  return <MenuItem key={`$${index1}`} divider />;
@@ -71,7 +62,6 @@ export default function MenuObject({
  href={child.url}
  eventKey={parseFloat(`${index}.${index1}`)}
  >
- <i className={`fa ${child.icon}`} />
  &nbsp; {child.label}
  </MenuItem>
  );

superset-frontend/src/components/Menu/UserMenu.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import { NavDropdown, MenuItem } from 'react-bootstrap';
+import { MenuItem } from 'react-bootstrap';
+import NavDropdown from 'src/components/NavDropdown';
 import { t } from '@superset-ui/translation';
 
 interface UserMenuProps {
@@ -42,14 +43,8 @@ export default function UserMenu({
  </>
  }
  >
- <MenuItem href={userInfoUrl}>
- <span className="fa fa-fw fa-user" />
- {t('Profile')}
- </MenuItem>
- <MenuItem href={userLogoutUrl}>
- <span className="fa fa-fw fa-sign-out" />
- {t('Logout')}
- </MenuItem>
+ <MenuItem href={userInfoUrl}>{t('Profile')}</MenuItem>
+ <MenuItem href={userLogoutUrl}>{t('Logout')}</MenuItem>
  {(versionString || versionSha) && (
  <li className="version-info">
  {versionString && <div>Version: {versionString}</div>}

superset-frontend/src/components/NavDropdown/index.tsx

@@ -0,0 +1,72 @@
+/**
+ * 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.
+ */
+
+import styled from '@superset-ui/style';
+import { NavDropdown as ReactBootstrapNavDropdown } from 'react-bootstrap';
+
+const NavDropdown = styled(ReactBootstrapNavDropdown)`
+ &.dropdown > a.dropdown-toggle {
+ padding-right: ${({ theme }) => theme.gridUnit * 6}px;
+ }
+ & > a {
+ transition: background-color ${({ theme }) => theme.transitionTiming}s;
+ }
+ &.dropdown.open > a.dropdown-toggle {
+ background: ${({ theme }) => theme.colors.primary.light4};
+ }
+
+ :after {
+ content: '';
+ height: ${({ theme }) => theme.gridUnit}px;
+ width: ${({ theme }) => theme.gridUnit * 2}px;
+ background: url('/static/assets/images/icons/dropdown-arrow.svg');
+ background-size: contain;
+ background-position: center center;
+ background-repeat: no-repeat;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ right: ${({ theme }) => theme.gridUnit * 2}px;
+ transition: opacity ${({ theme }) => theme.transitionTiming}s;
+ opacity: ${({ theme }) => theme.opacity.mediumLight};
+ pointer-events: none;
+ }
+ &:hover,
+ &.active {
+ &:after {
+ opacity: ${({ theme }) => theme.opacity.mediumHeavy};
+ }
+ }
+ .dropdown-menu {
+ padding: ${({ theme }) => theme.gridUnit}px 0;
+ top: 100%;
+ border: none;
+ & li a {
+ padding: ${({ theme }) => theme.gridUnit}px
+ ${({ theme }) => theme.gridUnit * 4}px;
+ transition: all ${({ theme }) => theme.transitionTiming}s;
+ &:hover {
+ background: ${({ theme }) => theme.colors.primary.light4};
+ color: ${({ theme }) => theme.colors.grayscale.dark1};
+ }
+ }
+ }
+`;
+
+export default NavDropdown;

superset-frontend/stylesheets/less/cosmo/bootswatch.less

@@ -43,7 +43,7 @@
 }
 
 .navbar-inverse {
- border: 3px solid @navbar-inverse-bg;
+ border: none;
 }
 
 .navbar-inverse .navbar-nav > li > a:hover,