gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improvement: Add Hint Option to all Widgets (#1429)

Browse Source 
* 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:
Gil Greenberg
2018-08-16 16:51:29 -04:00
committed by Benaiah Mischenko
parent 412d1e629f
commit 1fbe5b5957
4 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
View File

@ -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>
);
}

4
packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js
View File

@ -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;
}
`;