Hi @bhaveshraja, I'm tightening up the toolbar (the formatting bar with the bold/italic/align buttons) in our kit and want to get the defaults right from you.
For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent), or whether it should be adjustable depending on where it's used?
-
The bar itself. It can either draw its own little card (border plus a soft shadow with rounded corners) or sit flat with no surface so it blends into a bar that's already there. Are those two the right set, and which should be the everyday default?
-
The two tightnesses. There's a "compact" packing where the buttons are 24px and a "comfortable" one where they're 28px. Should those be the full set, and which is the default?
-
The button look. Each button is see-through with a muted icon, fills lightly on hover, and when it's on it gets a soft selected background with the icon turning to our accent colour. Should that look and those colours always be the same for every toolbar button?
-
The divider lines. The groups of buttons are separated by thin vertical divider lines. Should those always be there between groups, in that same soft line, or is the grouping something each team arranges themselves?
-
The spacing. There's a small, even gap between every control and a bit of padding around the inside of the bar. Should that spacing always be the same?
-
The "Text" dropdown opener. One control opens as a little labelled button with a chevron. When it's open it gets a soft selected background. Should that opener always look that way?
Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!
Hi @bhaveshraja, I'm tightening up the toolbar (the formatting bar with the bold/italic/align buttons) in our kit and want to get the defaults right from you.
For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent), or whether it should be adjustable depending on where it's used?
The bar itself. It can either draw its own little card (border plus a soft shadow with rounded corners) or sit flat with no surface so it blends into a bar that's already there. Are those two the right set, and which should be the everyday default?
The two tightnesses. There's a "compact" packing where the buttons are 24px and a "comfortable" one where they're 28px. Should those be the full set, and which is the default?
The button look. Each button is see-through with a muted icon, fills lightly on hover, and when it's on it gets a soft selected background with the icon turning to our accent colour. Should that look and those colours always be the same for every toolbar button?
The divider lines. The groups of buttons are separated by thin vertical divider lines. Should those always be there between groups, in that same soft line, or is the grouping something each team arranges themselves?
The spacing. There's a small, even gap between every control and a bit of padding around the inside of the bar. Should that spacing always be the same?
The "Text" dropdown opener. One control opens as a little labelled button with a chevron. When it's open it gets a soft selected background. Should that opener always look that way?
Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!