Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

poc(Button): display svg icon path on button hover #364

Closed
wants to merge 2 commits into from
Closed

poc(Button): display svg icon path on button hover #364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5567d30
poc(Button): display svg icon path on button hover
miroslavstastny Oct 16, 2018
f3afeed
Merge remote-tracking branch 'origin/master' into poc/toolbar-button
miroslavstastny Nov 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions docs/src/examples/components/Button/Usage/ButtonExampleToolbarButton.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import * as React from 'react'
import { Button } from '@stardust-ui/react'

const ButtonExampleToolbarButton = () => (
<Button
icon={{
name: 'bold',
size: 'big',
}}
iconOnly
text
styles={{
'&:hover .ui-icon__filled': {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't you also need to hide the unfilled version?

display: 'block',
},
}}
variables={siteVariables => ({
textColor: siteVariables.gray02,
textColorHover: siteVariables.brand06, // or just brand?
})}
/>
)

export default ButtonExampleToolbarButton
5 changes: 5 additions & 0 deletions docs/src/examples/components/Button/Usage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ const Usage = () => (
description="A button used in cards is a &quot;tinted&quot; version of a default button."
examplePath="components/Button/Usage/ButtonUsageExample"
/>
<ComponentExample
title="Toolbar button"
description="Icon paths change on hover"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: just for the sake of consistency, there should be dot at the end ;)

examplePath="components/Button/Usage/ButtonExampleToolbarButton"
/>
</ExampleSection>
)

Expand Down
3 changes: 3 additions & 0 deletions src/themes/teams/components/Icon/iconStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,9 @@ const iconStyles: ComponentSlotStylesInput<IconProps, any> = {
path: getSvgStyle('path'),

secondaryPath: getSvgStyle('secondaryPath'),

unfilled: getSvgStyle('unfilled'),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am implementing this in my PR where we won't need to have these styles defined in each SVG. I also named them filled & outline. Do you think filled & unfilled works better?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think filled & outline are fine, unfilled was used in legacy client.

filled: getSvgStyle('filled'),
}

export default iconStyles
4 changes: 3 additions & 1 deletion src/themes/teams/components/Icon/iconVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { pxToRem } from '../../../../lib'

export interface IconVariables {
[key: string]: string | number | undefined
[key: string]: string | number | boolean | undefined

color?: string
backgroundColor?: string
Expand All @@ -10,6 +10,7 @@ export interface IconVariables {
margin: string
secondaryColor: string
disabledColor: string
filled?: boolean
Copy link
Contributor

@kuzhelov kuzhelov Oct 16, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably, we should think about making this part of the Icon's interface

}

export default (siteVars): IconVariables => ({
Expand All @@ -20,4 +21,5 @@ export default (siteVars): IconVariables => ({
margin: '0 0.25em 0 0',
secondaryColor: siteVars.white,
disabledColor: siteVars.gray06,
filled: undefined,
})
43 changes: 43 additions & 0 deletions src/themes/teams/components/Icon/svg/icons/bold.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import * as React from 'react'
import * as cx from 'classnames'
import { TeamsSvgIconSpec } from '../types'

export default {
icon: ({ classes }) => (
<svg viewBox="0 0 32 32" role="presentation" className={classes.svg}>
<g className="icons-default-fill">
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if we need this class for anything.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need this for icons in Stardust. I am going to be importing all the icons without this class

<path
className={cx('ui-icon__unfilled', classes.unfilled)}
d="M11,23V9h5.1c1.6,0,2.8,0.3,3.6,0.9c0.8,0.6,1.3,1.4,1.3,2.4c0,0.8-0.3,1.4-0.8,2c-0.5,0.6-1.2,1-2,1.2v0
c1,0.1,1.8,0.5,2.4,1.1c0.6,0.6,0.9,1.4,0.9,2.2c0,1.3-0.5,2.3-1.4,3.1C19.2,22.6,18,23,16.4,23H11z M14,11.3v3.3h1.4
c0.7,0,1.2-0.2,1.5-0.5c0.4-0.3,0.6-0.8,0.6-1.3c0-1-0.8-1.5-2.3-1.5H14z M14,17v3.7h1.7c0.7,0,1.3-0.2,1.7-0.5
c0.4-0.3,0.6-0.8,0.6-1.4c0-0.6-0.2-1-0.6-1.3c-0.4-0.3-1-0.5-1.7-0.5H14z"
/>
<path
className={cx('ui-icon__filled', classes.filled)}
d="M16.4,23.5h-5.9v-15h5.6c1.7,0,3,0.3,3.9,1c1,0.7,1.5,1.7,1.5,2.8c0,0.8-0.3,1.6-0.9,2.3c-0.2,0.3-0.5,0.6-0.9,0.8
c0.5,0.2,0.9,0.5,1.2,0.9c0.7,0.7,1,1.6,1,2.6c0,1.4-0.5,2.5-1.6,3.5C19.4,23.1,18,23.5,16.4,23.5z M11.5,22.5h4.9
c1.4,0,2.5-0.3,3.4-1c0.8-0.7,1.2-1.6,1.2-2.7c0-0.7-0.3-1.4-0.8-1.8c-0.5-0.6-1.3-0.9-2.1-1l-2.9-0.3l2.8-0.7
c0.7-0.2,1.3-0.5,1.7-1c0.5-0.6,0.7-1.1,0.7-1.7c0-0.8-0.4-1.5-1.1-2c-0.7-0.5-1.8-0.8-3.3-0.8h-4.6V22.5z M15.7,21.2h-2.2v-4.7h2.2
c0.8,0,1.5,0.2,2,0.6c0.5,0.4,0.8,1,0.8,1.7c0,0.8-0.3,1.4-0.8,1.8C17.2,21,16.5,21.2,15.7,21.2z M14.5,20.2h1.2
c0.6,0,1.1-0.1,1.4-0.4c0.3-0.2,0.4-0.7,0.4-1c0-0.4-0.1-0.7-0.4-0.9c-0.3-0.3-0.9-0.4-1.4-0.4h-1.2V20.2z M15.4,15.1h-1.9v-4.3h1.7
c2.4,0,2.8,1.3,2.8,2c0,0.7-0.3,1.3-0.8,1.7C17,14.7,16.4,15.1,15.4,15.1z M14.5,14.1h0.9c0.5,0,0.9-0.1,1.1-0.4
c0.3-0.2,0.5-0.6,0.5-0.9c0-0.3,0-1-1.8-1h-0.7V14.1z
M16.4,23.5h-5.9v-15h5.6c1.7,0,3,0.3,3.9,1c1,0.7,1.5,1.7,1.5,2.8c0,0.8-0.3,1.6-0.9,2.3c-0.2,0.3-0.5,0.6-0.9,0.8
c0.5,0.2,0.9,0.5,1.2,0.9c0.7,0.7,1,1.6,1,2.6c0,1.4-0.5,2.5-1.6,3.5C19.4,23.1,18,23.5,16.4,23.5z M14.5,20.2h1.2
c0.6,0,1.1-0.1,1.4-0.4c0.3-0.2,0.4-0.7,0.4-1c0-0.4-0.1-0.7-0.4-0.9c-0.3-0.3-0.9-0.4-1.4-0.4h-1.2V20.2z M14.5,14.1h0.9
c0.5,0,0.9-0.1,1.1-0.4c0.3-0.2,0.5-0.6,0.5-0.9c0-0.3,0-1-1.8-1h-0.7V14.1z"
/>
</g>
</svg>
),
styles: {
svg: () => ({
color: 'inherit',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works better with button hover, see circular button example with this icon vs call icon

fill: 'currentColor',
}),
filled: ({ variables }) => ({
...(!variables.filled && { display: 'none' }),
}),
},
} as TeamsSvgIconSpec
2 changes: 2 additions & 0 deletions src/themes/teams/components/Icon/svg/icons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { TeamsSvgIconSpec } from '../types'

import bold from './bold'
import call from './call'
import callEnd from './callEnd'
import callVideo from './callIncomingVideo'
Expand All @@ -19,6 +20,7 @@ import fontSize from './fontSize'
import highlight from './highlight'

export default {
bold,
call,
'call-end': callEnd,
'call-video': callVideo,
Expand Down