From 59c4adcd026217ae658c78ce474d55f50888b995 Mon Sep 17 00:00:00 2001
From: Malcolm Laing <malcolm.laing@commercetools.de>
Date: Thu, 4 Apr 2019 11:51:43 +0200
Subject: [PATCH 1/2] feat(password-input): support theming for password input
---
.../inputs/password-input/password-input.js | 2 +-
.../password-input.visualroute.js | 18 ++++++++++++++++++
2 files changed, 19 insertions(+), 1 deletion(-)
diff --git a/src/components/inputs/password-input/password-input.js b/src/components/inputs/password-input/password-input.js
index cc1118ca47..8188397ba1 100644
--- a/src/components/inputs/password-input/password-input.js
+++ b/src/components/inputs/password-input/password-input.js
@@ -18,7 +18,7 @@ const PasswordInput = props => (
disabled={props.isDisabled}
placeholder={props.placeholder}
autoComplete={props.autoComplete}
- css={getInputStyles(props)}
+ css={theme => getInputStyles(props, theme)}
readOnly={props.isReadOnly}
autoFocus={props.isAutofocussed}
{...filterDataAttributes(props)}
diff --git a/src/components/inputs/password-input/password-input.visualroute.js b/src/components/inputs/password-input/password-input.visualroute.js
index edd4f3e2ae..61f93461c4 100644
--- a/src/components/inputs/password-input/password-input.visualroute.js
+++ b/src/components/inputs/password-input/password-input.visualroute.js
@@ -1,4 +1,5 @@
import React from 'react';
+import { ThemeProvider } from 'emotion-theming';
import { PasswordInput } from 'ui-kit';
import { Suite, Spec } from '../../../../test/percy';
@@ -6,6 +7,14 @@ const value = 'hello world how are you?';
export const routePath = '/password-input';
+const darkTheme = {
+ colorSurface: 'black',
+ colorSolid: 'white',
+ colorNeutral60: 'rgba(255,255,255,0.60)',
+ colorNeutral: 'rgba(255,255,255,0.60)',
+ colorAccent98: 'rgba(0,0,0,0.98)',
+};
+
export const component = () => (
<Suite>
<Spec label="minimal">
@@ -73,5 +82,14 @@ export const component = () => (
hasWarning={true}
/>
</Spec>
+ <ThemeProvider theme={darkTheme}>
+ <Spec label="with custom (inverted) theme" inverted>
+ <PasswordInput
+ value={value}
+ onChange={() => {}}
+ horizontalConstraint="m"
+ />
+ </Spec>
+ </ThemeProvider>
</Suite>
);
From d2d10458c8aee7c1b3a2a309bcc6272605317a72 Mon Sep 17 00:00:00 2001
From: Malcolm Laing <malcolm.laing@commercetools.de>
Date: Thu, 4 Apr 2019 14:26:57 +0200
Subject: [PATCH 2/2] chore: use new provided component theme
---
.../password-input/password-input.visualroute.js | 14 +++-----------
1 file changed, 3 insertions(+), 11 deletions(-)
diff --git a/src/components/inputs/password-input/password-input.visualroute.js b/src/components/inputs/password-input/password-input.visualroute.js
index 61f93461c4..aa3c0d5f02 100644
--- a/src/components/inputs/password-input/password-input.visualroute.js
+++ b/src/components/inputs/password-input/password-input.visualroute.js
@@ -7,15 +7,7 @@ const value = 'hello world how are you?';
export const routePath = '/password-input';
-const darkTheme = {
- colorSurface: 'black',
- colorSolid: 'white',
- colorNeutral60: 'rgba(255,255,255,0.60)',
- colorNeutral: 'rgba(255,255,255,0.60)',
- colorAccent98: 'rgba(0,0,0,0.98)',
-};
-
-export const component = () => (
+export const component = ({ themes }) => (
<Suite>
<Spec label="minimal">
<PasswordInput
@@ -82,8 +74,8 @@ export const component = () => (
hasWarning={true}
/>
</Spec>
- <ThemeProvider theme={darkTheme}>
- <Spec label="with custom (inverted) theme" inverted>
+ <ThemeProvider theme={themes.darkTheme}>
+ <Spec label="with custom (inverted) theme">
<PasswordInput
value={value}
onChange={() => {}}