Skip to content
This repository was archived by the owner on Nov 16, 2023. It is now read-only.

js styles for ActionLink #366

Merged
chrismohr merged 8 commits into from
Jun 11, 2018
Merged

js styles for ActionLink #366

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e7ea13e
convert styles to js for ActionLink
Jun 6, 2018
9ca5d90
standardize implementation
Jun 6, 2018
0f1c2c0
use css, since lighter weight
Jun 6, 2018
9a660aa
Merge branch 'master' into action_link_styles
chrismohr Jun 6, 2018
e975fca
these styles lose to the y-icon styles
Jun 6, 2018
5191957
Merge branch 'master' into action_link_styles
chrismohr Jun 7, 2018
8582946
Merge branch 'master' into action_link_styles
chrismohr Jun 11, 2018
776bd3d
Merge branch 'master' into action_link_styles
chrismohr Jun 11, 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
Binary file added config/styleguide-visual/reference/ActionLink_with_onclick_hover_desktop.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 0 additions & 11 deletions src/components/ActionLink/ActionLink.css
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/ActionLink/ActionLink.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Add here any notes on how to use the component, or delete this section.

With onClick (button implementation):

```js { "props": { "data-description": "with onClick" } }
```js { "props": { "data-description": "with onClick", "data-action-states": "[{\"action\":\"none\"},{\"action\":\"hover\",\"selector\":\".y-clickable\"}]" } }
const Icon = require('../Icon/icons/Download').default;

<div>
Expand Down
11 changes: 11 additions & 0 deletions src/components/ActionLink/ActionLink.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
import { mergeStyleSets } from '@uifabric/styling';
import { memoizeFunction } from '@uifabric/utilities';

export const getClassNames = memoizeFunction(() => {
return mergeStyleSets({
wrapper: {
padding: '0.2rem 0 0.6rem',
},
});
});
15 changes: 9 additions & 6 deletions src/components/ActionLink/ActionLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Clickable from '../Clickable';
import { FixedGridRow, FixedGridColumn, GutterSize } from '../FixedGrid';
import { BaseIcon, IconSize } from '../Icon';
import NavigationLink from '../NavigationLink';
import './ActionLink.css';
import { getClassNames } from './ActionLink.styles';

export interface BaseActionLinkProps extends BaseComponentProps {
/**
Expand Down Expand Up @@ -55,12 +55,15 @@ export type ActionLinkProps = NavigationActionLinkProps | ClickableActionLinkPro
export default class ActionLink extends React.Component<ActionLinkProps> {
public render() {
const { ariaLabel, className, icon: Icon, text } = this.props;
const classNames = join(['y-actionLink', className]);
const classNames = getClassNames();

// Remove Block around Icon when this is addressed: https://github.com/Microsoft/YamUI/issues/327
const content = (
<FixedGridRow gutterSize={GutterSize.SMALL} className="y-actionLink--wrapper">
<FixedGridRow gutterSize={GutterSize.SMALL} className={classNames.wrapper}>
<FixedGridColumn fixed={true}>
<Icon size={IconSize.MEDIUM} block={true} className="y-actionLink--icon" />
<Block push={2}>
<Icon size={IconSize.MEDIUM} block={true} />
</Block>
Copy link
Copy Markdown
Contributor Author

@chrismohr chrismohr Jun 6, 2018

Choose a reason for hiding this comment

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

I'm probably missing something here, I used a Block instead of

.y-actionLink--icon {	
  margin-top: 0.4rem;	

  /* Remove when this is addressed: https://github.com/Microsoft/YamUI/issues/327 */	
  position: static;	
  top: 0;	
}

Copy link
Copy Markdown
Contributor

@swese44 swese44 Jun 6, 2018

Choose a reason for hiding this comment

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

i think i left it as CSS because it was clear it needed to be updated when the issue was resolved, and lighter-weight solution. if you're going to move it to markup could you keep the comment with it?

Copy link
Copy Markdown
Contributor Author

@chrismohr chrismohr Jun 6, 2018

Choose a reason for hiding this comment

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

I tried css, but switched back again, because the style was losing out to the styles on .y-icon. I presume this is because the merge-styles are being loaded before the css styles. I've added the comment above the render function.

</FixedGridColumn>
<FixedGridColumn>
<Block textSize={TextSize.MEDIUM_SUB}>{text}</Block>
Expand All @@ -74,7 +77,7 @@ export default class ActionLink extends React.Component<ActionLinkProps> {
href={(this.props as NavigationActionLinkProps).href}
newWindow={(this.props as NavigationActionLinkProps).newWindow}
ariaLabel={ariaLabel}
className={classNames}
className={join(['y-actionLink', className])}
block={true}
>
{content}
Expand All @@ -85,7 +88,7 @@ export default class ActionLink extends React.Component<ActionLinkProps> {
<Clickable
onClick={(this.props as ClickableActionLinkProps).onClick}
ariaLabel={ariaLabel}
className={classNames}
className={join(['y-actionLink', className])}
block={true}
>
{content}
Expand Down
110 changes: 80 additions & 30 deletions src/components/ActionLink/__snapshots__/ActionLink.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,27 @@ exports[`<ActionLink /> with additional className matches its snapshot 1`] = `
href="https://yammer.com"
>
<FixedGridRow
className="y-actionLink--wrapper"
className=

{
padding-bottom: 0.6rem;
padding-left: 0;
padding-right: 0;
padding-top: 0.2rem;
}
gutterSize="small"
>
<FixedGridColumn
fixed={true}
>
<Down
block={true}
className="y-actionLink--icon"
size="16"
/>
<Block
push={2}
>
<Down
block={true}
size="16"
/>
</Block>
</FixedGridColumn>
<FixedGridColumn>
<Block
Expand All @@ -40,17 +50,27 @@ exports[`<ActionLink /> with href and ariaLabel matches its snapshot 1`] = `
newWindow={true}
>
<FixedGridRow
className="y-actionLink--wrapper"
className=

{
padding-bottom: 0.6rem;
padding-left: 0;
padding-right: 0;
padding-top: 0.2rem;
}
gutterSize="small"
>
<FixedGridColumn
fixed={true}
>
<Down
block={true}
className="y-actionLink--icon"
size="16"
/>
<Block
push={2}
>
<Down
block={true}
size="16"
/>
</Block>
</FixedGridColumn>
<FixedGridColumn>
<Block
Expand All @@ -71,17 +91,27 @@ exports[`<ActionLink /> with href matches its snapshot 1`] = `
newWindow={true}
>
<FixedGridRow
className="y-actionLink--wrapper"
className=

{
padding-bottom: 0.6rem;
padding-left: 0;
padding-right: 0;
padding-top: 0.2rem;
}
gutterSize="small"
>
<FixedGridColumn
fixed={true}
>
<Down
block={true}
className="y-actionLink--icon"
size="16"
/>
<Block
push={2}
>
<Down
block={true}
size="16"
/>
</Block>
</FixedGridColumn>
<FixedGridColumn>
<Block
Expand All @@ -102,17 +132,27 @@ exports[`<ActionLink /> with onClick and ariaLabel matches its snapshot 1`] = `
onClick={[MockFunction]}
>
<FixedGridRow
className="y-actionLink--wrapper"
className=

{
padding-bottom: 0.6rem;
padding-left: 0;
padding-right: 0;
padding-top: 0.2rem;
}
gutterSize="small"
>
<FixedGridColumn
fixed={true}
>
<Down
block={true}
className="y-actionLink--icon"
size="16"
/>
<Block
push={2}
>
<Down
block={true}
size="16"
/>
</Block>
</FixedGridColumn>
<FixedGridColumn>
<Block
Expand All @@ -132,17 +172,27 @@ exports[`<ActionLink /> with onClick matches its snapshot 1`] = `
onClick={[MockFunction]}
>
<FixedGridRow
className="y-actionLink--wrapper"
className=

{
padding-bottom: 0.6rem;
padding-left: 0;
padding-right: 0;
padding-top: 0.2rem;
}
gutterSize="small"
>
<FixedGridColumn
fixed={true}
>
<Down
block={true}
className="y-actionLink--icon"
size="16"
/>
<Block
push={2}
>
<Down
block={true}
size="16"
/>
</Block>
</FixedGridColumn>
<FixedGridColumn>
<Block
Expand Down