apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Cascader: Fix icon not showing (#107869)

Browse Source 
* fix image path for angle-right

* use proper icon utils
pull/107876/head
Ashley Harrison 2 weeks ago committed by GitHub
parent 07ca8ca3e7
commit 92121a1030
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 127 additions and 118 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 233
      packages/grafana-ui/src/components/Cascader/styles.ts
  2. 6
      packages/grafana-ui/src/components/Icon/Icon.tsx
  3. 6
      packages/grafana-ui/src/components/Icon/utils.ts

233
packages/grafana-ui/src/components/Cascader/styles.ts
Unescape View File

@ -2,6 +2,8 @@ import { css, keyframes } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { getIconPath } from '../Icon/utils';
const slideUpIn = keyframes({ const slideUpIn = keyframes({
'0%': { '0%': {
opacity: 0, opacity: 0,
@ -58,143 +60,146 @@ const slideDownOut = keyframes({
}, },
}); });
export const getCascaderStyles = (theme: GrafanaTheme2) => ({ export const getCascaderStyles = (theme: GrafanaTheme2) => {
dropdown: css({ const iconPath = getIconPath('angle-right');
'&.rc-cascader-dropdown': { return {
position: 'absolute', dropdown: css({
// Required, otherwise the portal that the popup is shown in will render under other components '&.rc-cascader-dropdown': {
zIndex: 9999, position: 'absolute',
// Required, otherwise the portal that the popup is shown in will render under other components
'&-hidden': { zIndex: 9999,
display: 'none',
}, '&-hidden': {
}, display: 'none',
'.rc-cascader': {
'&-menus': {
overflow: 'hidden',
background: theme.colors.background.elevated,
border: `none`,
borderRadius: theme.shape.radius.default,
boxShadow: theme.shadows.z3,
whiteSpace: 'nowrap',
'&.slide-up-enter, &.slide-up-appear': {
animationDuration: '0.3s',
animationFillMode: 'both',
transformOrigin: '0 0',
opacity: 0,
animationTimingFunction: 'cubic-bezier(0.08, 0.82, 0.17, 1)',
animationPlayState: 'paused',
}, },
},
'.rc-cascader': {
'&-menus': {
overflow: 'hidden',
background: theme.colors.background.elevated,
border: `none`,
borderRadius: theme.shape.radius.default,
boxShadow: theme.shadows.z3,
whiteSpace: 'nowrap',
'&.slide-up-enter.slide-up-enter-active.rc-cascader-menus-placement, &.slide-up-appear.slide-up-appear-active.rc-cascader-menus-placement': '&.slide-up-enter, &.slide-up-appear': {
{ animationDuration: '0.3s',
'&-bottomLeft': { animationFillMode: 'both',
animationName: slideUpIn, transformOrigin: '0 0',
animationPlayState: 'running', opacity: 0,
}, animationTimingFunction: 'cubic-bezier(0.08, 0.82, 0.17, 1)',
animationPlayState: 'paused',
'&-topLeft': {
animationName: slideDownIn,
animationPlayState: 'running',
},
}, },
'&.slide-up-leave': { '&.slide-up-enter.slide-up-enter-active.rc-cascader-menus-placement, &.slide-up-appear.slide-up-appear-active.rc-cascader-menus-placement':
animationDuration: '0.3s', {
animationFillMode: 'both', '&-bottomLeft': {
transformOrigin: '0 0', animationName: slideUpIn,
opacity: 1, animationPlayState: 'running',
animationTimingFunction: 'cubic-bezier(0.6, 0.04, 0.98, 0.34)', },
animationPlayState: 'paused',
'&-topLeft': {
'&.slide-up-leave-active.rc-cascader-menus-placement': { animationName: slideDownIn,
'&-bottomLeft': { animationPlayState: 'running',
animationName: slideUpOut, },
animationPlayState: 'running',
}, },
'&-topLeft': { '&.slide-up-leave': {
animationName: slideDownOut, animationDuration: '0.3s',
animationPlayState: 'running', animationFillMode: 'both',
transformOrigin: '0 0',
opacity: 1,
animationTimingFunction: 'cubic-bezier(0.6, 0.04, 0.98, 0.34)',
animationPlayState: 'paused',
'&.slide-up-leave-active.rc-cascader-menus-placement': {
'&-bottomLeft': {
animationName: slideUpOut,
animationPlayState: 'running',
},
'&-topLeft': {
animationName: slideDownOut,
animationPlayState: 'running',
},
}, },
}, },
}, },
},
'&-menu': { '&-menu': {
display: 'inline-block', display: 'inline-block',
maxWidth: '50vw', maxWidth: '50vw',
height: '192px', height: '192px',
listStyle: 'none', listStyle: 'none',
margin: 0, margin: 0,
padding: theme.spacing(0.5), padding: theme.spacing(0.5),
borderRight: `1px solid ${theme.colors.border.weak}`, borderRight: `1px solid ${theme.colors.border.weak}`,
overflow: 'auto', overflow: 'auto',
'&:last-child': { '&:last-child': {
borderRight: 0, borderRight: 0,
},
'&-item': {
height: theme.spacing(4),
lineHeight: theme.spacing(4),
padding: theme.spacing(0, 4, 0, 2),
borderRadius: theme.shape.radius.default,
cursor: 'pointer',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
transition: 'all 0.3s ease',
position: 'relative',
'&:hover': {
background: theme.colors.action.hover,
}, },
'&-disabled': { '&-item': {
cursor: 'not-allowed', height: theme.spacing(4),
color: theme.colors.text.disabled, lineHeight: theme.spacing(4),
padding: theme.spacing(0, 4, 0, 2),
borderRadius: theme.shape.radius.default,
cursor: 'pointer',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
transition: 'all 0.3s ease',
position: 'relative',
'&:hover': { '&:hover': {
background: 'transparent', background: theme.colors.action.hover,
}, },
'&:after': { '&-disabled': {
position: 'absolute', cursor: 'not-allowed',
right: '12px',
content: "'loading'",
color: theme.colors.text.disabled, color: theme.colors.text.disabled,
fontStyle: 'italic',
'&:hover': {
background: 'transparent',
},
'&:after': {
position: 'absolute',
right: '12px',
content: "'loading'",
color: theme.colors.text.disabled,
fontStyle: 'italic',
},
}, },
},
'&-active': { '&-active': {
color: theme.colors.text.maxContrast, color: theme.colors.text.maxContrast,
background: theme.colors.background.secondary, background: theme.colors.background.secondary,
'&:hover': { '&:hover': {
background: theme.colors.action.hover, background: theme.colors.action.hover,
},
}, },
},
'&-expand': { '&-expand': {
position: 'relative', position: 'relative',
'&:after': { '&:after': {
background: theme.colors.background.secondary, background: theme.colors.text.primary,
content: "''", content: "''",
height: theme.spacing(3), height: theme.spacing(3),
mask: 'url(../img/icons/unicons/angle-right.svg)', mask: `url(${iconPath})`,
maskType: 'luminance', maskType: 'luminance',
position: 'absolute', position: 'absolute',
right: 0, right: 0,
top: theme.spacing(0.5), top: theme.spacing(0.5),
width: theme.spacing(3), width: theme.spacing(3),
},
}, },
}, },
}, },
}, },
}, }),
}), };
}); };

6
packages/grafana-ui/src/components/Icon/Icon.tsx
Unescape View File

@ -8,7 +8,7 @@ import { useStyles2 } from '../../themes/ThemeContext';
import { IconName, IconType, IconSize } from '../../types/icon'; import { IconName, IconType, IconSize } from '../../types/icon';
import { spin } from '../../utils/keyframes'; import { spin } from '../../utils/keyframes';
import { getIconRoot, getIconSubDir, getSvgSize } from './utils'; import { getIconPath, getSvgSize } from './utils';
export interface IconProps extends Omit<React.SVGProps<SVGElement>, 'onLoad' | 'onError' | 'ref'> { export interface IconProps extends Omit<React.SVGProps<SVGElement>, 'onLoad' | 'onError' | 'ref'> {
name: IconName; name: IconName;
@ -53,12 +53,10 @@ export const Icon = React.forwardRef<SVGElement, IconProps>(
// handle the deprecated 'fa fa-spinner' // handle the deprecated 'fa fa-spinner'
const iconName: IconName = name === 'fa fa-spinner' ? 'spinner' : name; const iconName: IconName = name === 'fa fa-spinner' ? 'spinner' : name;
const iconRoot = getIconRoot();
const svgSize = getSvgSize(size); const svgSize = getSvgSize(size);
const svgHgt = svgSize; const svgHgt = svgSize;
const svgWid = name.startsWith('gf-bar-align') ? 16 : name.startsWith('gf-interp') ? 30 : svgSize; const svgWid = name.startsWith('gf-bar-align') ? 16 : name.startsWith('gf-interp') ? 30 : svgSize;
const subDir = getIconSubDir(iconName, type); const svgPath = getIconPath(iconName, type);
const svgPath = `${iconRoot}${subDir}/${iconName}.svg`;
const composedClassName = cx( const composedClassName = cx(
styles.icon, styles.icon,

6
packages/grafana-ui/src/components/Icon/utils.ts
Unescape View File

@ -60,3 +60,9 @@ export function getIconRoot(): string {
return iconRoot; return iconRoot;
} }
export function getIconPath(name: IconName, type: IconType = 'default'): string {
const iconRoot = getIconRoot();
const subDir = getIconSubDir(name, type);
return `${iconRoot}${subDir}/${name}.svg`;
}

Write Preview
Loading…
Cancel
Save