diff options
author | Francesco Agosti <francesco.agosti93@gmail.com> | 2018-11-09 08:29:34 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-11-09 08:29:34 +0800 |
commit | 3eac119399d3e2729ce65f748d9fb31207ac2540 (patch) | |
tree | 558aa4bb76eae3418cf411fcfba089ef8edf19ef /packages/instant/src/components/ui/icon.tsx | |
parent | 117e2f583ff44bdb63340a2134edea0f3ecb77b3 (diff) | |
parent | cd44470a29c48275e6a2a4bba42734d8f900d387 (diff) | |
download | dexon-0x-contracts-3eac119399d3e2729ce65f748d9fb31207ac2540.tar.gz dexon-0x-contracts-3eac119399d3e2729ce65f748d9fb31207ac2540.tar.zst dexon-0x-contracts-3eac119399d3e2729ce65f748d9fb31207ac2540.zip |
Merge pull request #1230 from 0xProject/feature/instant/dropdown-ui
[instant] Dropdown Component Skeleton
Diffstat (limited to 'packages/instant/src/components/ui/icon.tsx')
-rw-r--r-- | packages/instant/src/components/ui/icon.tsx | 9 |
1 files changed, 5 insertions, 4 deletions
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx index 2679dad1a..a88fa87dd 100644 --- a/packages/instant/src/components/ui/icon.tsx +++ b/packages/instant/src/components/ui/icon.tsx @@ -9,7 +9,6 @@ interface IconInfo { path: string; fillRule?: svgRule; clipRule?: svgRule; - stroke?: string; strokeOpacity?: number; strokeWidth?: number; strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit'; @@ -47,7 +46,6 @@ const ICONS: IconInfoMapping = { chevron: { viewBox: '0 0 12 7', path: 'M11 1L6 6L1 1', - stroke: 'white', strokeOpacity: 0.5, strokeWidth: 1.5, strokeLinecap: 'round', @@ -67,6 +65,7 @@ export interface IconProps { width: number; height?: number; color?: ColorOption; + stroke?: ColorOption; icon: keyof IconInfoMapping; onClick?: (event: React.MouseEvent<HTMLElement>) => void; padding?: string; @@ -75,6 +74,7 @@ export interface IconProps { const PlainIcon: React.StatelessComponent<IconProps> = props => { const iconInfo = ICONS[props.icon]; const colorValue = _.isUndefined(props.color) ? undefined : props.theme[props.color]; + const strokeValue = _.isUndefined(props.stroke) ? undefined : props.theme[props.stroke]; return ( <div onClick={props.onClick} className={props.className}> <svg @@ -89,7 +89,7 @@ const PlainIcon: React.StatelessComponent<IconProps> = props => { fill={colorValue} fillRule={iconInfo.fillRule || 'nonzero'} clipRule={iconInfo.clipRule || 'nonzero'} - stroke={iconInfo.stroke} + stroke={strokeValue} strokeOpacity={iconInfo.strokeOpacity} strokeWidth={iconInfo.strokeWidth} strokeLinecap={iconInfo.strokeLinecap} @@ -102,7 +102,8 @@ const PlainIcon: React.StatelessComponent<IconProps> = props => { export const Icon = withTheme(styled(PlainIcon)` && { - cursor: ${props => (!_.isUndefined(props.onClick) ? 'pointer' : 'default')}; + display: inline-block; + ${props => (!_.isUndefined(props.onClick) ? 'cursor: pointer' : '')}; transition: opacity 0.5s ease; padding: ${props => props.padding}; opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)}; |