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/FormControl] dense implementation #7364

Merged
merged 5 commits into from
Jul 7, 2017

Conversation

rosskevin
Copy link
Member

@rosskevin rosskevin commented Jul 6, 2017

Closes #7358

The previous approach was using marginForm to implement what the spec called normal spacing, whereas the default was to omit the margins. dense by spec is more than our default none, but less than spec normal.

Breaking change removes marginForm and replaces it with margin: 'none' | 'dense' | 'normal', where the default of none is unchanged.

Also:

  • converted more to flow
  • regenerated api docs
  • during implementation of demo, found a few renames needed for clarity
  • added regression test

  • PR has tests / docs demo, and is linted.
  • Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
  • Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

@rosskevin rosskevin added component: text field This is the name of the generic UI component, not the React module! design: material This is about Material Design, please involve a visual or UX designer in the process new feature New feature or request breaking change v1-alpha labels Jul 6, 2017
@rosskevin rosskevin merged commit 7963842 into mui:v1-alpha Jul 7, 2017
@rosskevin rosskevin deleted the textfield-dense branch July 7, 2017 14:14
@@ -104,6 +104,9 @@ export const styleSheet = createStyleSheet('MuiInput', theme => {
'&:focus::-ms-input-placeholder': placeholderFormFocus, // Edge
},
},
inputDense: {
paddingTop: `${theme.spacing.unit / 2}px 0`,
Copy link
Member

Choose a reason for hiding this comment

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

Looks incorrect.

Copy link
Member

Choose a reason for hiding this comment

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

padding maybe?

Copy link
Member Author

Choose a reason for hiding this comment

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

It's the bug I referred to, just paddingTop adjustment.

import React from 'react';
import TextField from 'material-ui/TextField';

export default function TextFieldMargin() {
Copy link
Member

Choose a reason for hiding this comment

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

I don't think that we need that regression test as we are also taking into account the demo of the documentation.

Copy link
Member

Choose a reason for hiding this comment

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

Also, that seems incorrect, there is no visual variations between the 3 inputs:

Copy link
Member

Choose a reason for hiding this comment

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

What about removing it?

Copy link
Member Author

Choose a reason for hiding this comment

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

awesome, forgot about those accounting for regressions!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change component: text field This is the name of the generic UI component, not the React module! design: material This is about Material Design, please involve a visual or UX designer in the process new feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants