Default Styles #196
Default Styles #196
Conversation
Marc-Andre-Rivet
commented
Nov 1, 2018
•
Marc-Andre-Rivet
commented
- readonly cells cursor
- filter fields placeholder & styling
- style_table default nested props
- clean up styling files
- filter cell placeholder & styling
…t-styles # Conflicts: # CHANGELOG.md # dash_table/bundle.js # dash_table/demo.js
| @@ -67,6 +69,7 @@ export default class IsolatedInput extends PureComponent<IProps, IState> { | |||
| type='text' | |||
| value={this.state.value || ''} | |||
| onChange={this.handleChange} | |||
| placeholder={placeholder} | |||
There was a problem hiding this comment.
Adding placeholder prop... wondering if we couldn't just compose off the dash-core-components input to get all the base prop types since the component works standalone. Might be an overkill, just thinking out loud here.
There was a problem hiding this comment.
Yeah that's not a bad idea. How would that work though? Maybe if we were to redo core-components so that it's built more as a JS library, that both dash-renderer and other repo's like dash-table could use?
There was a problem hiding this comment.
We can't really do that because components can't be properties right now in Dash. In the future, they could be. Otherwise, we'll need to copy over the properties one-by-one
There was a problem hiding this comment.
Since this is purely internal, I was thinking that just importing the component would work
| @@ -10,7 +10,6 @@ interface IColumnFilterProps { | |||
| classes: string; | |||
| columnId: ColumnId; | |||
| isValid: boolean; | |||
| property: ColumnId; | |||
| setFilter: SetFilter; | |||
There was a problem hiding this comment.
property was redundant with columnId and unused
| input::placeholder { | ||
| color: transparent; | ||
| } | ||
| } |
There was a problem hiding this comment.
Only display the placeholder if (1) the filter is the first (not selected by & + .dash-filter), otherwise only show if hovered or focused
| .cell--uneditable input { | ||
| cursor: not-allowed; | ||
| } | ||
|
|
There was a problem hiding this comment.
Remove the cursor style on readonly cells
| columnStaticStyle: any, | ||
| data: Data | ||
| data: Data, | ||
| selectedCells: SelectedCells |
There was a problem hiding this comment.
typing error here that went unnoticed because of the 'any'
| @@ -36,7 +34,6 @@ function getter( | |||
| 'dash-cell' + | |||
| ` column-${columnIndex}` + | |||
| (active ? ' focused' : '') + | |||
| (!isEditable(editable, column.editable) ? ' cell--uneditable' : '') + | |||
There was a problem hiding this comment.
cell-uneditable is now useless -- removing it.. the cell can be customized through the style_cell prop, there's no need for this css selector
| .add('with multiple columns', () => (<DataTable | ||
| {...props} | ||
| columns={['a', 'b', 'c'].map(id => ({ id: id, name: id.toUpperCase() }))} | ||
| />)); |
There was a problem hiding this comment.
Two basic visual tests that make sure the first filter displays the placeholder and that the others do not.
| @@ -67,6 +69,7 @@ export default class IsolatedInput extends PureComponent<IProps, IState> { | |||
| type='text' | |||
| value={this.state.value || ''} | |||
| onChange={this.handleChange} | |||
| placeholder={placeholder} | |||
There was a problem hiding this comment.
Yeah that's not a bad idea. How would that work though? Maybe if we were to redo core-components so that it's built more as a JS library, that both dash-renderer and other repo's like dash-table could use?
|
Sorry to be annoying, but can we go back to just |
|
@chriddyp Ok. Reverting the monospace changes and the corresponding changelog entry. |
