diff --git a/src/components/AddImages/AddImages.example.js b/src/components/AddImages/AddImages.example.js
index 690dc274..f83e840d 100644
--- a/src/components/AddImages/AddImages.example.js
+++ b/src/components/AddImages/AddImages.example.js
@@ -82,5 +82,5 @@ class AddImagesTest extends Component {
export const Empty = {
component: AddImagesTest,
- group: 'inputs',
+ group: 'custom inputs',
};
diff --git a/src/components/BirthdayInput/BirthdayInput.example.js b/src/components/BirthdayInput/BirthdayInput.example.js
index 0ac1acc1..f0486d00 100644
--- a/src/components/BirthdayInput/BirthdayInput.example.js
+++ b/src/components/BirthdayInput/BirthdayInput.example.js
@@ -33,5 +33,5 @@ export const Empty = {
console.log('birthday changed to:', birthday ? birthday.toUTCString() : birthday);
},
},
- group: 'inputs',
+ group: 'custom inputs',
};
diff --git a/src/components/Button/Button.example.js b/src/components/Button/Button.example.js
index bd7b8d09..3125f2b3 100644
--- a/src/components/Button/Button.example.js
+++ b/src/components/Button/Button.example.js
@@ -53,5 +53,5 @@ const ButtonsComponent = () => {
export const Buttons = {
component: ButtonsComponent,
- group: 'buttons',
+ group: 'inputs and buttons',
};
diff --git a/src/components/CurrencyInput/CurrencyInput.example.js b/src/components/CurrencyInput/CurrencyInput.example.js
index ba37dcdd..ed5508bf 100644
--- a/src/components/CurrencyInput/CurrencyInput.example.js
+++ b/src/components/CurrencyInput/CurrencyInput.example.js
@@ -39,7 +39,7 @@ export const EmptyWithEnUS = {
currencyConfig: defaultConfig,
locale: 'en-US',
},
- group: 'inputs',
+ group: 'custom inputs',
};
// Default value with fi-FI locale
@@ -50,5 +50,5 @@ export const defaultValueWithFiFI = {
locale: 'fi-FI',
defaultValue: 9999.99,
},
- group: 'inputs',
+ group: 'custom inputs',
};
diff --git a/src/components/CurrencyInput/CurrencyInput.js b/src/components/CurrencyInput/CurrencyInput.js
index 0c45d7cb..b6526679 100644
--- a/src/components/CurrencyInput/CurrencyInput.js
+++ b/src/components/CurrencyInput/CurrencyInput.js
@@ -14,7 +14,6 @@ import {
truncateToSubUnitPrecision,
} from '../../util/currency';
import * as propTypes from '../../util/propTypes';
-import { Input } from '../../components';
const allowedInputProps = allProps => {
// Strip away props that are not passed to input element (or are overwritten)
@@ -167,7 +166,7 @@ class CurrencyInput extends Component {
const { currencyConfig, defaultValue, placeholder, intl } = this.props;
const placeholderText = placeholder || intl.formatNumber(defaultValue, currencyConfig);
return (
- )}
diff --git a/src/containers/ChangeAccountPasswordForm/__snapshots__/ChangeAccountPasswordForm.test.js.snap b/src/containers/ChangeAccountPasswordForm/__snapshots__/ChangeAccountPasswordForm.test.js.snap
index ecfbfba0..4b071114 100644
--- a/src/containers/ChangeAccountPasswordForm/__snapshots__/ChangeAccountPasswordForm.test.js.snap
+++ b/src/containers/ChangeAccountPasswordForm/__snapshots__/ChangeAccountPasswordForm.test.js.snap
@@ -6,7 +6,6 @@ exports[`ChangeAccountPasswordForm matches snapshot 1`] = `
New password
{
const { handleSubmit, pristine, submitting } = props;
return (
);
diff --git a/src/containers/ChangePasswordForm/__snapshots__/ChangePasswordForm.test.js.snap b/src/containers/ChangePasswordForm/__snapshots__/ChangePasswordForm.test.js.snap
index d7606fb3..8c64f698 100644
--- a/src/containers/ChangePasswordForm/__snapshots__/ChangePasswordForm.test.js.snap
+++ b/src/containers/ChangePasswordForm/__snapshots__/ChangePasswordForm.test.js.snap
@@ -6,7 +6,6 @@ exports[`ChangePasswordForm matches snapshot 1`] = `
New password
{
return (
@@ -99,7 +99,7 @@ export class EditListingPhotosFormComponent extends Component {
const { input, type, meta } = props;
return (
-
+
);
diff --git a/src/containers/EditListingPricingForm/__snapshots__/EditListingPricingForm.test.js.snap b/src/containers/EditListingPricingForm/__snapshots__/EditListingPricingForm.test.js.snap
index 0fa6ca4c..e199427c 100644
--- a/src/containers/EditListingPricingForm/__snapshots__/EditListingPricingForm.test.js.snap
+++ b/src/containers/EditListingPricingForm/__snapshots__/EditListingPricingForm.test.js.snap
@@ -8,7 +8,6 @@ exports[`EditListingPricingForm matches snapshot 1`] = `
className="">
{
const { handleSubmit, pristine, submitting } = props;
return (
diff --git a/src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap b/src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap
index fd455265..abe77199 100644
--- a/src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap
+++ b/src/containers/PasswordForgottenForm/__snapshots__/PasswordForgottenForm.test.js.snap
@@ -6,7 +6,6 @@ exports[`PasswordForgottenForm matches snapshot 1`] = `
Email
{
const StyleguidePage = props => {
const { params, raw } = props;
- const group = params.group || ALL;
+ const group = params.group ? decodeURIComponent(params.group) : ALL;
const componentName = params.component || ALL;
const exampleName = params.example || ALL;
diff --git a/src/marketplace.css b/src/marketplace.css
index 526047e2..b342925b 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -336,6 +336,37 @@
border-color: var(--matterColorAnti);
}
}
+
+ /* Inputs */
+ --marketplaceInputStyles: {
+
+ /* Dimensions */
+ display: block;
+ width: 100%;
+ margin: 0;
+ padding: 13px 0;
+
+ /* Borders */
+ border: none;
+ border-bottom-width: 3px;
+ border-bottom-style: solid;
+ border-bottom-color: var(--marketplaceColor);
+ border-radius: 0;
+
+ &::placeholder {
+ color: var(--matterColorAnti);
+ }
+
+ /* Effects */
+
+ transition: border-bottom-color var(--transitionStyle);
+
+ &:hover,
+ &:focus {
+ border-bottom-color: var(--matterColor);
+ outline: none;
+ }
+ }
}
/* ================ Custom media queries ================ */
@@ -402,42 +433,12 @@ select {
border: none;
}
+input {
+ @apply --marketplaceInputStyles;
+}
+
textarea {
- width: 100%;
+ @apply --marketplaceInputStyles;
min-height: 48px;
padding: 0 0 5px 0;
-
- /* Borders */
- border: none;
- border-bottom-width: 3px;
- border-bottom-style: solid;
- border-bottom-color: var(--marketplaceColor);
- border-radius: 0;
-
- &:focus {
- outline: none;
- }
-}
-
-input {
- display: block;
- width: 100%;
- margin: 0;
- padding: 13px 0;
-
- border: none;
- border-bottom-width: 3px;
- border-bottom-style: solid;
- border-bottom-color: var(--marketplaceColor);
- border-radius: 0;
-
- transition: border-bottom-color var(--transitionStyle);
-
- &::placeholder {
- color: var(--matterColorAnti);
- }
-
- &:focus {
- outline: none;
- }
}
diff --git a/src/util/forms.js b/src/util/forms.js
index c8c7121c..d5da2c02 100644
--- a/src/util/forms.js
+++ b/src/util/forms.js
@@ -1,5 +1,5 @@
import React, { Component, PropTypes } from 'react';
-import { Input, ValidationError } from '../components';
+import { ValidationError } from '../components';
/**
* Hoc to convert a component used within a Field to one that renders
@@ -36,7 +36,7 @@ export const enhancedField = (Comp, options = {}) => {
} else if (Comp === 'textarea') {
component = ;
} else {
- component = ;
+ component = ;
}
const labelInfo = label
?