Skip to content
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.

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

TextField & SearchBox: Specified placeholder colors #3762

Merged
merged 8 commits into from
Jan 23, 2018

Conversation

lynamemi
Copy link
Collaborator

Pull request checklist

Description of changes

Allows us to be consistent across browsers

Focus areas to test

(optional)

Copy link
Member

@betrue-final-final betrue-final-final left a comment

Choose a reason for hiding this comment

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

Looks good here.

@@ -11,7 +11,7 @@ import { ISearchBoxProps, ISearchBoxStyleProps, ISearchBoxStyles } from './Searc

export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles {
const { theme, underlined, disabled, hasFocus, className, hasInput } = props;
const { palette, fonts } = theme;
const { palette, fonts, semanticColors } = theme;
Copy link
Contributor

Choose a reason for hiding this comment

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

shouldn't you get a compiler warning for adding semanticColors here but not use it?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

true! I just added the slot for inputPlaceholderText.

@@ -142,6 +142,16 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles {
selectors: {
'::-ms-clear': {
display: 'none'
},
'::placeholder': {
color: palette.neutralSecondary,
Copy link
Contributor

Choose a reason for hiding this comment

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

we should add an inputPlaceholderText slot

':-ms-input-placeholder': {
color: palette.neutralSecondary
},
'::-ms-input-placeholder': {
Copy link
Member

Choose a reason for hiding this comment

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

are both syntaxes necessary?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Apparently browser versioning and placeholder selectors get hairy, but it looks like using just the two will work on at at least all my browser versions.

Copy link
Member

@micahgodbolt micahgodbolt left a comment

Choose a reason for hiding this comment

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

Other than the duplicate syntax :ms and ::ms looks good to me

@lynamemi lynamemi merged commit b311324 into microsoft:master Jan 23, 2018
@lynamemi lynamemi deleted the placeholder-colors branch January 23, 2018 17:27
chrismohr pushed a commit to chrismohr/office-ui-fabric-react that referenced this pull request Apr 17, 2018
* Searchbox and textfield neutral secondary placeholder text

* Using the palette

* Added change file

* New slot for inputPlaceholderText

* Semantic slots in styles

* style change file

* Minor bump

* Searchbox snapshot update
@microsoft microsoft locked as resolved and limited conversation to collaborators Aug 31, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Search Box] The search box text appears dark black on IE 11 as compared to other browsers like chrome
4 participants