Skip to content

Update "Back To Samples" button #87

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
teckliew wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

Update "Back To Samples" button #87

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0a4c21d
update all samples back button
Jan 21, 2020
5172b24
use IconButton instead
Jan 21, 2020
039c02e
add prop validation to fix linting
Jan 21, 2020
2302e44
Moonstonify the back button
Jan 22, 2020
743c0be
clean up css
Jan 22, 2020
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
10 changes: 5 additions & 5 deletions enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Button from '@enact/moonstone/Button';
import IconButton from '@enact/moonstone/IconButton';
import {Link} from 'react-router-dom';
import React from 'react';

Expand All @@ -7,12 +7,12 @@ import css from './ButtonToSamples.module.less';
const ButtonToSamples = () => (
<div className={css.buttonContainer}>
<Link to="/" className={css.backLink}>
<Button
<IconButton
aria-label="Back To Samples"
className={css.backButton}
style={{zIndex: 1}}
>
Back To Samples
</Button>
arrowhookleft
</IconButton>
</Link>
</div>
);
Expand Down
17 changes: 6 additions & 11 deletions enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,17 @@
.backLink {
z-index: 1;
margin-right: 5%;
z-index: 2;
margin-right: 0;
margin-top: 24px;

.backButton {
z-index: 2;
transform: translate(0px, -100px);
background-color: black;
color: #ccc;

@Djspaceg Djspaceg Jan 21, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Is it really important to specify the colors here? Could we instead use one of the built-in features of the button to get a similar compatible effect?
I mention because I fear that we have or will have a skin or skinVariant changing sample, which would make this direct assignment look out of place, in addition to the next Theme library using a specific tone of gray for the background rather than black.

@teckliew teckliew Jan 22, 2020

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Added in MoonstoneDecorator to take care of styling. Also cleaned up the styles a little bit.

transition: all .5s ease-in-out;
}

&:hover {
.backButton {
transform: translate(0px, 0px);
}
}
}

.buttonContainer {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
}
5 changes: 5 additions & 0 deletions pattern-expandablelist-object/src/views/MainPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import ExpandableList from '@enact/moonstone/ExpandableList';
import {Header, Panel} from '@enact/moonstone/Panels';
import kind from '@enact/core/kind';
import PropTypes from 'prop-types';
import React from 'react';

const MainPanel = kind({
name: 'MainPanel',

propTypes: {
title: PropTypes.string
},

render: (props) => (
<Panel {...props}>
<Header title={props.title} />
Expand Down
3 changes: 2 additions & 1 deletion pattern-layout/src/views/MainPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ const GridItem = kind({
name: 'GridItem',
propTypes: {
index: PropTypes.number,
items: PropTypes.array
items: PropTypes.array,
onSelect: PropTypes.func
},
handlers: {
onSelect: (ev, {index, onSelect}) => onSelect({index})
Expand Down