Skip to content

TextField: Convert to JS Styling #5639

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JasonGore merged 21 commits into from
Jul 25, 2018
Merged

TextField: Convert to JS Styling #5639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
4f4176b
init
micahgodbolt Jun 6, 2018
db1b1e5
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
micahgodbolt Jun 7, 2018
5cbb1ad
Fix typing errors.
JasonGore Jun 11, 2018
0aa285a
Merge branch 'master' into textfieldStyles-jg
JasonGore Jun 11, 2018
02ba7c7
Fix typing errors.
JasonGore Jun 11, 2018
c4d2a81
Add more snapshot tests with results from master. Fix other unit tests.
JasonGore Jun 14, 2018
de36bc5
Cleanup. Temp work added for collaboration with mergeStyles changes.
JasonGore Jun 18, 2018
bdf4197
Revert files to master for clean merge.
JasonGore Jul 11, 2018
275d476
Merge branch 'master' into textfieldStyles-jg
JasonGore Jul 11, 2018
1d7cd5d
Merge branch 'master' into textfieldStyles-jg
JasonGore Jul 11, 2018
d2fffc5
Merge branch 'master' into textfieldStyles-jg
JasonGore Jul 18, 2018
8b9a4cc
Two-way audit between CSS and JS, typing improvements, styling fixes.
JasonGore Jul 19, 2018
bf03d88
Update tests and snapshots, cleanup.
JasonGore Jul 19, 2018
3909760
Revert unassociated files to master.
JasonGore Jul 19, 2018
93b7982
Revert unassociated files to master.
JasonGore Jul 19, 2018
ce9ac44
Final cleanup.
JasonGore Jul 19, 2018
83652e2
Change files.
JasonGore Jul 19, 2018
115dd4e
Comment out type error from unused test.
JasonGore Jul 19, 2018
75143d4
Change file.
JasonGore Jul 19, 2018
14f8901
Address PR feedback.
JasonGore Jul 25, 2018
aa7f1fe
Merge branch 'master' into textfieldStyles-jg
JasonGore Jul 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/@uifabric/experiments/textfieldStyles-jg_2018-07-19-23-30.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "@uifabric/experiments",
"comment": "Comment out unused test.",
"type": "none"
}
],
"packageName": "@uifabric/experiments",
"email": "[email protected]"
}
11 changes: 11 additions & 0 deletions common/changes/@uifabric/merge-styles/textfieldStyles-jg_2018-07-19-22-14.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "@uifabric/merge-styles",
"comment": "Add resize rule to IRawStyleBase.",
"type": "minor"
}
],
"packageName": "@uifabric/merge-styles",
"email": "[email protected]"
}
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/textfieldStyles-jg_2018-07-19-22-14.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "TextField: Convert to JS styling.",
"type": "minor"
}
],
"packageName": "office-ui-fabric-react",
"email": "[email protected]"
}
7 changes: 4 additions & 3 deletions packages/experiments/src/components/Form/inputs/textInput/FormTextInput.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { IFormProps } from '../../Form.types';
import { DEFAULT_DEBOUNCE } from '../../FormBaseInput';
import { FormTextInput } from './FormTextInput';
import { IFormTextInputProps } from './FormTextInput.types';
import { TextField } from 'office-ui-fabric-react/lib/TextField';

// Utilities
import { Validators } from '../../validators/Validators';
Expand Down Expand Up @@ -108,8 +107,10 @@ describe('FormTextInput Unit Tests', () => {
ReactTestUtils.Simulate.submit(form);

// Find the TextField component
const field = ReactTestUtils.findRenderedComponentWithType(renderedForm, TextField);
expect(field.state.errorMessage).toBeTruthy();
// TODO: this test is not working as intended as even nonsense state names pass.
// commented out for now since test isn't executing when named 'xit'
// const field = ReactTestUtils.findRenderedComponentWithType(renderedForm, TextField);
Copy link
Member

@dzearing dzearing Jul 24, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ive seen these tests in form tests randomly fail. We will need to evaluate what the right pattern is here once we gain traction.

// expect(field.state.errorMessage).toBeTruthy();
expect(result).toBeFalsy();
});
});
Expand Down
50 changes: 28 additions & 22 deletions packages/merge-styles/src/IRawStyleBase.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,18 +66,18 @@ export interface IRawFontStyle {
* See CSS 3 font-size property https://www.w3.org/TR/css-fonts-3/#propdef-font-size
*/
fontSize?:
| ICSSRule
| 'xx-small'
| 'x-small'
| 'small'
| 'medium'
| 'large'
| 'x-large'
| 'xx-large'
| 'larger'
| 'smaller'
| ICSSPixelUnitRule
| ICSSPercentageRule;
| ICSSRule
| 'xx-small'
| 'x-small'
| 'small'
| 'medium'
| 'large'
| 'x-large'
| 'xx-large'
| 'larger'
| 'smaller'
| ICSSPixelUnitRule
| ICSSPercentageRule;

/**
* The font-size-adjust property adjusts the font-size of the fallback fonts defined
Expand All @@ -95,16 +95,16 @@ export interface IRawFontStyle {
* https://drafts.csswg.org/css-fonts-3/#propdef-font-stretch
*/
fontStretch?:
| ICSSRule
| 'normal'
| 'ultra-condensed'
| 'extra-condensed'
| 'condensed'
| 'semi-condensed'
| 'semi-expanded'
| 'expanded'
| 'extra-expanded'
| 'ultra-expanded';
| ICSSRule
| 'normal'
| 'ultra-condensed'
| 'extra-condensed'
| 'condensed'
| 'semi-condensed'
| 'semi-expanded'
| 'expanded'
| 'extra-expanded'
| 'ultra-expanded';

/**
* The font-style property allows normal, italic, or oblique faces to be selected.
Expand Down Expand Up @@ -1338,6 +1338,12 @@ export interface IRawStyleBase extends IRawFontStyle {
*/
regionFragment?: ICSSRule | string;

/**
* The resize CSS sets whether an element is resizable, and if so, in which direction(s).
*/

resize?: ICSSRule | 'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline';

/**
* The rest-after property determines how long a speech media agent should pause after
* presenting an element's main content, before presenting that element's exit cue
Expand Down
34 changes: 17 additions & 17 deletions packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { BaseComponent, classNamesFunction } from '../../Utilities';
import { BaseComponent, classNamesFunction, createRef } from '../../Utilities';
import { IColorPickerProps, IColorPickerStyleProps, IColorPickerStyles } from './ColorPicker.types';
import { TextField } from '../../TextField';
import { ITextField, TextField } from '../../TextField';
import { ColorRectangle } from './ColorRectangle/ColorRectangle';
import { ColorSlider } from './ColorSlider/ColorSlider';
import {
Expand Down Expand Up @@ -30,11 +30,11 @@ export class ColorPickerBase extends BaseComponent<IColorPickerProps, IColorPick
alphaLabel: 'Alpha'
};

private hexText: TextField;
private rText: TextField;
private gText: TextField;
private bText: TextField;
private aText: TextField;
private _hexText = createRef<ITextField>();
private _rText = createRef<ITextField>();
private _gText = createRef<ITextField>();
private _bText = createRef<ITextField>();
private _aText = createRef<ITextField>();

constructor(props: IColorPickerProps) {
super(props);
Expand Down Expand Up @@ -97,7 +97,7 @@ export class ColorPickerBase extends BaseComponent<IColorPickerProps, IColorPick
<TextField
className={classNames.input}
value={color.hex}
ref={ref => (this.hexText = ref!)}
componentRef={this._hexText}
Copy link
Member

@dzearing dzearing Jul 25, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yay thank you!

onBlur={this._onHexChanged}
spellCheck={false}
ariaLabel={this.props.hexLabel}
Expand All @@ -108,7 +108,7 @@ export class ColorPickerBase extends BaseComponent<IColorPickerProps, IColorPick
className={classNames.input}
onBlur={this._onRGBAChanged}
value={String(color.r)}
ref={ref => (this.rText = ref!)}
componentRef={this._rText}
spellCheck={false}
ariaLabel={this.props.redLabel}
/>
Expand All @@ -118,7 +118,7 @@ export class ColorPickerBase extends BaseComponent<IColorPickerProps, IColorPick
className={classNames.input}
onBlur={this._onRGBAChanged}
value={String(color.g)}
ref={ref => (this.gText = ref!)}
componentRef={this._gText}
spellCheck={false}
ariaLabel={this.props.greenLabel}
/>
Expand All @@ -128,7 +128,7 @@ export class ColorPickerBase extends BaseComponent<IColorPickerProps, IColorPick
className={classNames.input}
onBlur={this._onRGBAChanged}
value={String(color.b)}
ref={ref => (this.bText = ref!)}
componentRef={this._bText}
spellCheck={false}
ariaLabel={this.props.blueLabel}
/>
Expand All @@ -139,7 +139,7 @@ export class ColorPickerBase extends BaseComponent<IColorPickerProps, IColorPick
className={classNames.input}
onBlur={this._onRGBAChanged}
value={String(color.a)}
ref={ref => (this.aText = ref!)}
componentRef={this._aText}
spellCheck={false}
ariaLabel={this.props.alphaLabel}
/>
Expand All @@ -166,16 +166,16 @@ export class ColorPickerBase extends BaseComponent<IColorPickerProps, IColorPick
};

private _onHexChanged = (): void => {
this._updateColor(getColorFromString('#' + this.hexText.value));
this._updateColor(getColorFromString('#' + this._hexText.value));
Copy link
Member

@dzearing dzearing Jul 25, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe value is deprecated. Use current.

(We REALLY need to enable the deprecations tslint rule.)

Copy link
Member Author

@JasonGore JasonGore Jul 25, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is all pre-existing code. The only reason this changed at all is because TextField is now in an HOC wrapper. I'd rather not make ref-related or deprecation changes to this PR as it's already pretty wide in scope.

};

private _onRGBAChanged = (): void => {
this._updateColor(
getColorFromRGBA({
r: Number(this.rText.value),
g: Number(this.gText.value),
b: Number(this.bText.value),
a: Number((this.aText && this.aText.value) || 100)
r: Number(this._rText.value),
g: Number(this._gText.value),
b: Number(this._bText.value),
a: Number((this._aText && this._aText.value) || 100)
})
);
};
Expand Down
Loading