Skip to content

Commit

Permalink
Fix form unit class names [#153264393]
Browse files Browse the repository at this point in the history 
Signed-off-by: Jonathan Berney <jberney@pivotal.io>
  • Loading branch information
@reidmit
reidmit authored and pivotal committed Nov 29, 2017
1 parent 29185b6 commit e9b5aba
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 31 deletions.
36 changes: 18 additions & 18 deletions spec/pivotal-ui-react/form/form-unit_spec.js
View file
Expand Up @@ -14,7 +14,7 @@ describe('FormUnit', () => {
});

it('does not render a label row when no label is provided', () => {
expect('.form-unit .row-label').not.toExist();
expect('.form-unit .label-row').not.toExist();
});

describe('inline', () => {
Expand All @@ -34,7 +34,7 @@ describe('FormUnit', () => {
});

it('does not render the help row', () => {
expect('.form-unit .row-help').not.toExist();
expect('.form-unit .help-row').not.toExist();
});
});

Expand All @@ -46,7 +46,7 @@ describe('FormUnit', () => {
});

it('shows a label', () => {
expect('.form-unit .row-label').toContainText('Instance Name');
expect('.form-unit .label-row').toContainText('Instance Name');
});

it('shows the label before the field', () => {
Expand All @@ -62,7 +62,7 @@ describe('FormUnit', () => {
});

it('renders an empty label row', () => {
expect('.form-unit .row-label').toHaveText('');
expect('.form-unit .label-row').toHaveText('');
});
});

Expand All @@ -75,7 +75,7 @@ describe('FormUnit', () => {
});

it('puts the classname on the label', () => {
expect('.form-unit .row-label').toHaveClass('h4');
expect('.form-unit .label-row').toHaveClass('h4');
});
});

Expand All @@ -88,7 +88,7 @@ describe('FormUnit', () => {
});

it('sets the "for" on the label', () => {
expect('.form-unit .row-label').toHaveAttr('for', 'instance-name');
expect('.form-unit .label-row').toHaveAttr('for', 'instance-name');
});
});

Expand All @@ -114,8 +114,8 @@ describe('FormUnit', () => {
});

it('shows a tooltip', () => {
expect('.form-unit .row-label .tooltip .icon').toExist();
expect('.form-unit .row-label .tooltip .tooltip-content').toHaveText('This is a tooltip.');
expect('.form-unit .label-row .tooltip .icon').toExist();
expect('.form-unit .label-row .tooltip .tooltip-content').toHaveText('This is a tooltip.');
});

it('renders tooltip with default placement and default size', () => {
Expand Down Expand Up @@ -164,7 +164,7 @@ describe('FormUnit', () => {
});

it('renders the optional text', () => {
expect('.form-unit .row-label .optional-text').toContainText('(Optional)');
expect('.form-unit .label-row .optional-text').toContainText('(Optional)');
});
});

Expand All @@ -174,7 +174,7 @@ describe('FormUnit', () => {
});

it('renders the custom optional text when provided', () => {
expect('.form-unit .row-label .optional-text').toHaveText('(Optional - custom text)');
expect('.form-unit .label-row .optional-text').toHaveText('(Optional - custom text)');
});
});

Expand All @@ -184,12 +184,12 @@ describe('FormUnit', () => {
});

it('renders the custom optional text when provided', () => {
expect('.form-unit .row-label .optional-text').toHaveText('');
expect('.form-unit .label-row .optional-text').toHaveText('');
});
});

it('renders the field', () => {
expect('.form-unit .row-field div span').toContainText('hello');
expect('.form-unit .field-row div span').toContainText('hello');
});

describe('help', () => {
Expand All @@ -202,8 +202,8 @@ describe('FormUnit', () => {
});

it('renders the help block', () => {
expect('.form-unit .row-help div pre').toContainText('help');
expect('.form-unit .row-help').toHaveClass('type-dark-5');
expect('.form-unit .help-row div pre').toContainText('help');
expect('.form-unit .help-row').toHaveClass('type-dark-5');
});
});

Expand All @@ -224,8 +224,8 @@ describe('FormUnit', () => {
});

it('does not render a tooltip', () => {
expect('.form-unit .row-label').toContainText('Some label');
expect('.form-unit .row-label .tooltip').not.toExist();
expect('.form-unit .label-row').toContainText('Some label');
expect('.form-unit .label-row .tooltip').not.toExist();
});
});

Expand All @@ -235,7 +235,7 @@ describe('FormUnit', () => {
});

it('renders an empty div', () => {
expect('.form-unit div.row-help').toHaveText('');
expect('.form-unit div.help-row').toHaveText('');
});
});

Expand All @@ -249,7 +249,7 @@ describe('FormUnit', () => {
});

it('removes the type-dark-5 class from the help block', () => {
expect('.form-unit .row-help').not.toHaveClass('type-dark-5');
expect('.form-unit .help-row').not.toHaveClass('type-dark-5');
});
});

Expand Down
8 changes: 4 additions & 4 deletions spec/pivotal-ui-react/form/form_spec.js
View file
Expand Up @@ -326,7 +326,7 @@ describe('Form', () => {

it('renders the error text', () => {
expect('.grid:eq(0) .col:eq(0) .form-unit').toHaveClass('has-error');
expect('.grid:eq(0) .col:eq(0) .row-help').toHaveText('some-error');
expect('.grid:eq(0) .col:eq(0) .help-row').toHaveText('some-error');
});

it('disables the submit button', () => {
Expand All @@ -345,7 +345,7 @@ describe('Form', () => {

it('removes the error text', () => {
expect('.grid:eq(0) .col:eq(0) .form-unit').not.toHaveClass('has-error');
expect('.grid:eq(0) .col:eq(0) .row-help').toHaveText('');
expect('.grid:eq(0) .col:eq(0) .help-row').toHaveText('');
});

it('enables the submit button', () => {
Expand All @@ -365,7 +365,7 @@ describe('Form', () => {

it('does not render error text', () => {
expect('.grid:eq(0) .col:eq(0) .form-unit').not.toHaveClass('has-error');
expect('.grid:eq(0) .col:eq(0) .row-help').toHaveText('');
expect('.grid:eq(0) .col:eq(0) .help-row').toHaveText('');
});
});
});
Expand Down Expand Up @@ -453,7 +453,7 @@ describe('Form', () => {
});

it('renders an optional text for the input', () => {
expect('.grid:eq(0) .col:eq(0) .row-label').toHaveText('Some label(Optional)');
expect('.grid:eq(0) .col:eq(0) .label-row').toHaveText('Some label(Optional)');
});

it('renders disabled buttons in a col-fixed col', () => {
Expand Down
12 changes: 6 additions & 6 deletions src/css/forms/forms.scss
View file
Expand Up @@ -448,23 +448,23 @@ textarea.valid {
.grid-inline {
align-items: center;

& > .col:first-child > .row-label {
& > .col:first-child > .label-row {
margin-right: $base-unit;
}

& > .col:last-child > .row-label {
& > .col:last-child > .label-row {
margin-left: $base-unit;
}
}

.row-label {
.label-row {
display: block;
line-height: 4 * $base-unit;
font-weight: 600;
font-size: 14px;
}

.row-help {
.help-row {
line-height: 2 * $base-unit;
min-height: 2 * $base-unit;
font-weight: 400;
Expand All @@ -480,12 +480,12 @@ textarea.valid {
}
}

.row-label {
.label-row {
min-height: 4 * $base-unit;
}

&.has-error {
.row-help {
.help-row {
color: $input-invalid-text;
}

Expand Down
6 changes: 3 additions & 3 deletions src/react/forms/form-unit.js
View file
Expand Up @@ -43,15 +43,15 @@ export class FormUnit extends React.Component {
</TooltipTrigger>;

const labelRow = (label || retainLabelHeight) && (
<label {...{className: classnames('row-label', labelClassName), key: 'label-row', htmlFor: labelFor}}>
<label {...{className: classnames('label-row', labelClassName), key: 'label-row', htmlFor: labelFor}}>
{label}
{tooltipIcon}
{label && optional && <span className="optional-text type-neutral-4">{optionalText || optionalText === '' ? optionalText : '(Optional)'}</span>}
</label>
);

const fieldRow = <div className="row-field" key="field-row">{field}</div>;
const helpRow = hideHelpRow || <div className={classnames('row-help', {'type-dark-5': !hasError})}>{help}</div>;
const fieldRow = <div className="field-row" key="field-row">{field}</div>;
const helpRow = hideHelpRow || <div className={classnames('help-row', {'type-dark-5': !hasError})}>{help}</div>;

const sections = labelPosition === 'after' ? [fieldRow, labelRow] : [labelRow, fieldRow];

Expand Down

0 comments on commit e9b5aba

Please sign in to comment.