Manage Students Table: UI for cog icon drop down in action header cell #21107
Conversation
Erin007
force-pushed
the
cog-click-quick-actions
branch
from
6fbb4b8
to
de3de57
Compare
|
Nit: Looks like some margin is added to the icon when the dialog is opened, so it looks like it moves. It'd be best it if stayed in place. |
|
🤔 @caleybrock The styling of the cog icon is the same whether the dialog is open or closed. Maybe you caught this before the latest commit? |
| @@ -7,8 +7,8 @@ export default storybook => { | |||
| .storiesOf('QuickActionsCell', module) | |||
| .addStoryTable([ | |||
| { | |||
| name: 'QuickActionsCell', | |||
| description: 'Shown with 2 QuickActions as children', | |||
| name: 'QuickActionsCell - default body', | |||
There was a problem hiding this comment.
Nice additions to storybook here.
| @@ -105,4 +140,4 @@ class QuickActionsCell extends Component { | |||
| } | |||
| } | |||
|
|
|||
| export default QuickActionsCell; | |||
| export default Radium(QuickActionsCell); | |||
There was a problem hiding this comment.
No need for Radium now right?
| }; | ||
|
|
||
| static defaultProps = { | ||
| type: 'body' |
There was a problem hiding this comment.
replace with QuickActionsCellType.body
| body: 'chevron-down' | ||
| }; | ||
|
|
||
| const styleByType = type === "header" ? |
There was a problem hiding this comment.
same as above. replace strings with QuickActionsCellType.type
| }, | ||
| [QuickActionsCellType.header]: { | ||
| fontSize: 20, | ||
| marginTop: -3, |
There was a problem hiding this comment.
Negative margins are not the end of the world, but can be kind of hard to be debug. Was this the only way to do this?
There was a problem hiding this comment.
It was the easiest way I could think of to do it. The icon has a bigger font size than the text and I wanted it to look more or less vertically aligned. Is there a better way?
|
Hmm yeah it doesn't look like it's moving now. |
| @@ -0,0 +1,29 @@ | |||
| import React, {Component} from 'react'; | |||
| import QuickActionsCell from "../tables/QuickActionsCell"; | |||
There was a problem hiding this comment.
If you change this line to:
import QuickActionsCell, {QuickActionsCellType} from "../tables/QuickActionsCell";
Then on line 12, you can use:
type={QuickActionsCellType.header}
|
Would also be good to add a test for what shows up in the dropdown, since the dialog will change in the future. Totally fine to make in a separate PR |
This is the initial UI work for the dropdown that appears when the cog icon in the header of the action cell in the Manage Students table is clicked.
QuickActionsCellsuch that it can be extended to use the cog iconQuickActionsCellin Radium so it can be styled conditionally based on typeManageStudentsActionsHeaderCellthat will be further customized to add the functionality for the actions in the dropdown in follow up PRs