From 0a4c21d093ef067b027d76b386c7ba53a42d4707 Mon Sep 17 00:00:00 2001 From: Teck Liew Date: Tue, 21 Jan 2020 11:21:09 -0800 Subject: [PATCH 1/5] update all samples back button --- .../src/components/ButtonToSamples/ButtonToSamples.js | 1 - .../components/ButtonToSamples/ButtonToSamples.module.less | 6 ++++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.js b/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.js index 4632b940..739f89ff 100644 --- a/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.js +++ b/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.js @@ -9,7 +9,6 @@ const ButtonToSamples = () => ( diff --git a/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less b/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less index 8d28e37f..ea04febd 100644 --- a/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less +++ b/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less @@ -3,7 +3,9 @@ margin-right: 5%; .backButton { - z-index: 2; + background-color: black; + color: #ccc; + z-index: 1; transform: translate(0px, -100px); transition: all .5s ease-in-out; } @@ -19,4 +21,4 @@ display: flex; flex-direction: row; justify-content: flex-end; -} \ No newline at end of file +} From 5172b24faa6057fb01025290079b37f72dbdce06 Mon Sep 17 00:00:00 2001 From: Teck Liew Date: Tue, 21 Jan 2020 11:33:50 -0800 Subject: [PATCH 2/5] use IconButton instead --- .../components/ButtonToSamples/ButtonToSamples.js | 9 +++++---- .../ButtonToSamples/ButtonToSamples.module.less | 13 +++---------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.js b/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.js index 739f89ff..2f537fb8 100644 --- a/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.js +++ b/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.js @@ -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'; @@ -7,11 +7,12 @@ import css from './ButtonToSamples.module.less'; const ButtonToSamples = () => (
- + arrowhookleft +
); diff --git a/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less b/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less index ea04febd..13d6f703 100644 --- a/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less +++ b/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less @@ -1,20 +1,13 @@ .backLink { - z-index: 1; - margin-right: 5%; + z-index: 2; + margin-right: 0; + margin-top: 24px; .backButton { background-color: black; color: #ccc; - z-index: 1; - transform: translate(0px, -100px); transition: all .5s ease-in-out; } - - &:hover { - .backButton { - transform: translate(0px, 0px); - } - } } .buttonContainer { From 039c02e8857547a68c019ebb7fede3198afaebae Mon Sep 17 00:00:00 2001 From: Teck Liew Date: Tue, 21 Jan 2020 11:44:51 -0800 Subject: [PATCH 3/5] add prop validation to fix linting --- pattern-expandablelist-object/src/views/MainPanel.js | 5 +++++ pattern-layout/src/views/MainPanel.js | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/pattern-expandablelist-object/src/views/MainPanel.js b/pattern-expandablelist-object/src/views/MainPanel.js index cab654a4..073f39a8 100644 --- a/pattern-expandablelist-object/src/views/MainPanel.js +++ b/pattern-expandablelist-object/src/views/MainPanel.js @@ -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) => (
diff --git a/pattern-layout/src/views/MainPanel.js b/pattern-layout/src/views/MainPanel.js index 70fd1907..04016aad 100644 --- a/pattern-layout/src/views/MainPanel.js +++ b/pattern-layout/src/views/MainPanel.js @@ -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}) From 2302e447c10b4281913456655dd2710337d129b7 Mon Sep 17 00:00:00 2001 From: Teck Liew Date: Tue, 21 Jan 2020 16:01:58 -0800 Subject: [PATCH 4/5] Moonstonify the back button --- .../ButtonToSamples.module.less | 7 ++--- enact-all-samples/src/index.js | 26 +++++++++++++------ 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less b/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less index 13d6f703..63f8378d 100644 --- a/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less +++ b/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less @@ -1,12 +1,8 @@ .backLink { z-index: 2; - margin-right: 0; - margin-top: 24px; .backButton { - background-color: black; - color: #ccc; - transition: all .5s ease-in-out; + margin: 0; } } @@ -14,4 +10,5 @@ display: flex; flex-direction: row; justify-content: flex-end; + padding: 33px 15px; } diff --git a/enact-all-samples/src/index.js b/enact-all-samples/src/index.js index 0ef65573..3cbddf31 100644 --- a/enact-all-samples/src/index.js +++ b/enact-all-samples/src/index.js @@ -1,3 +1,5 @@ +import kind from '@enact/core/kind'; +import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator'; import {HashRouter as Router, Route} from 'react-router-dom'; import React from 'react'; import {render} from 'react-dom'; @@ -52,14 +54,22 @@ console.error = (...args) => { }; /* eslint-enable no-console */ -const appElement = ( - -
- - {routes.map((route, index) => )} -
- -); +const SampleRoutes = MoonstoneDecorator(kind({ + name: 'SampleRoutes', + + render: () => { + return ( + +
+ + {routes.map((route, index) => )} +
+ + ); + } +})); + +const appElement = ; // In a browser environment, render the app to the document. if (typeof window !== 'undefined') { From 743c0be268a663cb8e24e1df73504b2d4565cafe Mon Sep 17 00:00:00 2001 From: Teck Liew Date: Tue, 21 Jan 2020 16:04:27 -0800 Subject: [PATCH 5/5] clean up css --- .../src/components/ButtonToSamples/ButtonToSamples.js | 1 - .../components/ButtonToSamples/ButtonToSamples.module.less | 6 +----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.js b/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.js index 2f537fb8..dfd54cc0 100644 --- a/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.js +++ b/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.js @@ -9,7 +9,6 @@ const ButtonToSamples = () => ( arrowhookleft diff --git a/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less b/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less index 63f8378d..6de66cff 100644 --- a/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less +++ b/enact-all-samples/src/components/ButtonToSamples/ButtonToSamples.module.less @@ -1,14 +1,10 @@ .backLink { z-index: 2; - - .backButton { - margin: 0; - } } .buttonContainer { display: flex; flex-direction: row; justify-content: flex-end; - padding: 33px 15px; + padding: 33px 6px; }