improvement: Add Hint Option to all Widgets (#1429)
* Add hint to example admin config * Add hint and hint position boolean above/below widget * Style hint for both above and below widget * Add hint and hint_above options to docs * Remove hint above and make hint plaintext
This commit is contained in:
committed by
Benaiah Mischenko
parent
412d1e629f
commit
1fbe5b5957
@ -103,6 +103,15 @@ const ControlErrorsList = styled.ul`
|
||||
top: 20px;
|
||||
`;
|
||||
|
||||
export const ControlHint = styled.p`
|
||||
margin-bottom: 0;
|
||||
padding: 3px 0;
|
||||
font-size: 12px;
|
||||
color: ${({ active, error }) =>
|
||||
error ? colors.errorText : active ? colors.active : colors.controlLabel};
|
||||
transition: color ${transitions.main};
|
||||
`;
|
||||
|
||||
class EditorControl extends React.Component {
|
||||
state = {
|
||||
activeLabel: false,
|
||||
@ -130,6 +139,7 @@ class EditorControl extends React.Component {
|
||||
const widgetName = field.get('widget');
|
||||
const widget = resolveWidget(widgetName);
|
||||
const fieldName = field.get('name');
|
||||
const fieldHint = field.get('hint');
|
||||
const uniqueFieldId = uniqueId();
|
||||
const metadata = fieldsMetaData && fieldsMetaData.get(fieldName);
|
||||
const errors = fieldsErrors && fieldsErrors.get(fieldName);
|
||||
@ -189,6 +199,11 @@ class EditorControl extends React.Component {
|
||||
clearSearch={clearSearch}
|
||||
isFetching={isFetching}
|
||||
/>
|
||||
{fieldHint && (
|
||||
<ControlHint active={this.state.styleActive} error={!!errors}>
|
||||
{fieldHint}
|
||||
</ControlHint>
|
||||
)}
|
||||
</ControlContainer>
|
||||
);
|
||||
}
|
||||
|
@ -2,14 +2,14 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import styled from 'react-emotion';
|
||||
import EditorControl from './EditorControl';
|
||||
import EditorControl, { ControlHint } from './EditorControl';
|
||||
|
||||
const ControlPaneContainer = styled.div`
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 16px;
|
||||
|
||||
p {
|
||||
p:not(${ControlHint}) {
|
||||
font-size: 16px;
|
||||
}
|
||||
`;
|
||||
|
Reference in New Issue
Block a user