Skip to content

TextField: Adds borderless option. #1739

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
micahgodbolt merged 10 commits into from
May 8, 2017
Merged

TextField: Adds borderless option. #1739

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e6d963a
Adds borderless option for TextField component.
martellaj May 6, 2017
3091773
Adds change file.
martellaj May 6, 2017
0a2b37f
Adds borderless option for DatePicker component.
martellaj May 6, 2017
00ad701
Update joem-textfield-borderless_2017-05-06-22-56.json
dzearing May 8, 2017
e62b774
Update joem-textfield-borderless_2017-05-06-22-56.json
dzearing May 8, 2017
c31e662
Update joem-textfield-borderless_2017-05-06-22-56.json
dzearing May 8, 2017
7528824
Merge branch 'master' into joem/textfield-borderless
micahgodbolt May 8, 2017
b40770b
Implements code review feedback.
martellaj May 8, 2017
f654083
Update TextField.scss
dzearing May 8, 2017
4f3cb1a
Update TextField.Basic.Example.tsx
dzearing May 8, 2017
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
10 changes: 10 additions & 0 deletions common/changes/joem-textfield-borderless_2017-05-06-22-56.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "TextField: `borderless` flag added for suppressing the border style.",
"type": "minor"
}
],
"email": "martellaj@live.com"
}
6 changes: 6 additions & 0 deletions packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.Props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,12 @@ export interface IDatePickerProps extends React.Props<DatePicker> {
* Localized strings to use in the DatePicker
*/
strings?: IDatePickerStrings;

/**
* Determines if DatePicker has a border.
* @defaultvalue false
*/
borderless?: boolean;
}

export interface IDatePickerStrings {
Expand Down
6 changes: 4 additions & 2 deletions packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,8 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
firstDayOfWeek: DayOfWeek.Sunday,
isRequired: false,
isMonthPickerVisible: true,
strings: DEFAULT_STRINGS
strings: DEFAULT_STRINGS,
borderless: false
};

public refs: {
Expand Down Expand Up @@ -160,7 +161,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
}

public render() {
let { firstDayOfWeek, strings, label, isRequired, ariaLabel, placeholder, allowTextInput } = this.props;
let { firstDayOfWeek, strings, label, isRequired, ariaLabel, placeholder, allowTextInput, borderless } = this.props;
let { isDatePickerShown, formattedDate, selectedDate, errorMessage } = this.state;

return (
Expand All @@ -179,6 +180,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
errorMessage={ errorMessage }
label={ label }
placeholder={ placeholder }
borderless={ borderless }
iconClass={ css(
'ms-Icon ms-Icon--Calendar',
label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label',
Expand Down
6 changes: 6 additions & 0 deletions packages/office-ui-fabric-react/src/components/TextField/TextField.Props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,12 @@ export interface ITextFieldProps extends React.HTMLProps<HTMLInputElement | HTML
*/
underlined?: boolean;

/**
* Whether or not the textfield is borderless.
* @default false
*/
borderless?: boolean;

/**
* Label for the textfield.
*/
Expand Down
5 changes: 5 additions & 0 deletions packages/office-ui-fabric-react/src/components/TextField/TextField.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,11 @@
font-size: $ms-font-size-xs;
}

.root.rootIsBorderless {

@dzearing dzearing May 8, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

probably doesn't need the .root prefix here.

.rootIsBorderless .fieldGroup {

@micahgodbolt micahgodbolt May 8, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

We should probably be changing the color to transparent rather than nixing the border width. Removing the border might affect alignment and/or high contrast borders.

@dzearing dzearing May 8, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

yeah agree.

@martellaj martellaj May 8, 2017

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Both were fixed in the newest commit.

.fieldGroup {
border: 0px;
}
}

//== Modifier: Single line (default), underlined
//
Expand Down
5 changes: 4 additions & 1 deletion packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
resizable: true,
autoAdjustHeight: false,
underlined: false,
borderless: false,
onChanged: () => { /* noop */ },
onBeforeChange: () => { /* noop */ },
onNotifyValidationResult: () => { /* noop */ },
Expand Down Expand Up @@ -129,6 +130,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
multiline,
required,
underlined,
borderless,
addonString,
onRenderAddon = this._onRenderAddon
} = this.props;
Expand All @@ -141,7 +143,8 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
['is-disabled ' + styles.rootIsDisabled]: disabled,
['is-active ' + styles.rootIsActive]: isFocused,
['ms-TextField--multiline ' + styles.rootIsMultiline]: multiline,
['ms-TextField--underlined ' + styles.rootIsUnderlined]: underlined
['ms-TextField--underlined ' + styles.rootIsUnderlined]: underlined,
['ms-TextField--borderless ' + styles.rootIsBorderless]: borderless
});

return (
Expand Down
2 changes: 2 additions & 0 deletions ...ages/office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export class TextFieldBasicExample extends React.Component<any, any> {
<TextField label='Multiline TextField Unresizable' multiline resizable={ false } />
<TextField label='Multiline TextField with auto adjust height' multiline autoAdjustHeight />
<TextField label='Underlined TextField' underlined />
<TextField label='Borderless TextField' borderless placeholder='No borders here, folks.' />
<TextField label='Multiline Borderless TextField' multiline rows={ 4 } borderless placeholder='No borders here, folks.' />
</div>
);
}
Expand Down