[UI Framework] [K7] Add KuiCallOut and KuiVerticalRhythm components. #13306

cjcenizal · 2017-08-03T02:13:41Z

@snide The only thing I'm not completely happy with is the vertical rhythm system. The sizes map strangely to our typography. Maybe we should rename them to mirror our typographic terms, e.g. kuiVerticalRhythm--title. Or maybe we should convert them into typographic modifiers, e.g. kuiTitle--verticalRhythm.

- Add verticalRhythm prop to Typography components. - Add kuiIcon--basic class.

cjcenizal · 2017-08-03T02:18:30Z

ui_framework/doc_site/src/views/button/button_with_icon.js

@@ -80,7 +80,7 @@ export default () => (

    <KuiButton
      iconReverse
-      icon="arrowRight"
+      iconType="arrowRight"


Let's use this pattern of putting "type" in a prop name when we're passing in a string reference to a type.

cjcenizal · 2017-08-03T02:21:30Z

ui_framework/src/components/call_out/_call_out.scss

+.kuiCallOut {
+  padding: $kuiSizeM $kuiSizeL;
+  border-left: 4px solid $kuiColorPrimary;
+  background-color: rgba($kuiColorPrimary, 0.1); /* 1 */


I think we should change our approach here so that components with modifiers require a modifier to take on an appearance. In other words, we'd remove these default values and add an info definition to $callOutTypes, below (and do something similar with KuiButton and KuiIcon).

I kept running into cascade problems with KuiIcon because of its default fill, and this approach avoids that problem. It also makes it easier to scan the modifiers and know exactly what kind of use cases a component addresses.

Again, this is where I why I think modifiers should use &.. Modifiers modify something. Makes perfect sense to use CSS this way.

It also makes it easier to scan the modifiers and know exactly what kind of use cases a component addresses.

Nesting modifiers to introduce more specificity is definitely an option (which I'm not opposed to), but another benefit of my suggestion is improved maintainability.

cjcenizal · 2017-08-03T02:22:06Z

ui_framework/src/components/typography/typography.js

-export const SIZES = Object.keys(sizeToClassNameMap);
+const titleSizeToVerticalRhythmClassNameMap = {
+  small: 'kuiVerticalRhythm',
+  large: 'kuiVerticalRhythm--xLarge',


Weird mappings.

Agree. I don't have a solution, but think this is the best way to "solve" it. Basically that component sizing and CSS global sizing are somewhat distanced to make React components more usable.

snide

Minor changes on the callouts themselves. I can prolly clean it up in a separate PR. Little confused by the margin mixins and the react component. Let's chat it out over zoom.

snide · 2017-08-03T03:09:41Z

ui_framework/src/components/call_out/_call_out.scss

+  }
+
+  .kuiCallOutHeader__title {
+    font-weight: $kuiFontWeightMedium;


This isn't needed here. We use bolding as a last resort, and don't need it when the color and size (content text should be $fontSizeS // 14px) are different between the title and the content.

Oh, I actually thought the design had a heavier weight on it. Take a look at these screenshots with the regular weight:

It looks much lighter than the design to my eyes. To be honest, I think the heaver weight improves readability significantly since the text is the same color as the background, just darker.

I just checked the color contrast, and the colors do fail at both AA and AAA. I'll make the tint/shade change and take another look.

I like the unbolded fwiw. Doesn't feel like it's screaming at me, which alerts can sometimes feel.

snide · 2017-08-03T03:11:19Z

ui_framework/src/components/icon/icon.js

@@ -87,3 +88,7 @@ KuiIcon.propTypes = {
  size: PropTypes.oneOf(SIZES),
  title: PropTypes.string,
 };
+
+KuiIcon.defaultProps = {
+  className: 'kuiIcon--basic',


I'm ok with this in the React sense and it totally makes sense. I'm a little worried in the HTML/CSS sense where suddenly default settings of css components are "broken". For example, what's the version of this for .kuiButton? Does that component not usable on its own? Seems so easy to just solve with .kuiIcon.modifier.

Just something to think about.

Yeah, I was thinking that kuiButton by itself wouldn't be usable without a modifier. Bootstrap is kind of the same way, in that the default button just looks like a weird link.

If you think it's the right call I'll go with it! We should probably switch buttons then too.

Cool thanks man!

snide · 2017-08-03T03:15:25Z

ui_framework/src/components/typography/_typography.scss

+.kuiText--small {
+  @include kuiFontSizeS;
+  color: $kuiTextColor;
+  font-weight: $kuiFontWeightRegular;


Does font weight need to be on here?

Good catch!

snide · 2017-08-03T03:16:47Z

ui_framework/src/components/typography/typography.js

-export const SIZES = Object.keys(sizeToClassNameMap);
+const titleSizeToVerticalRhythmClassNameMap = {
+  small: 'kuiVerticalRhythm',
+  large: 'kuiVerticalRhythm--xLarge',


Agree. I don't have a solution, but think this is the best way to "solve" it. Basically that component sizing and CSS global sizing are somewhat distanced to make React components more usable.

snide · 2017-08-03T03:22:26Z

ui_framework/src/global_styling/variables/_typography.scss

+$kuiLineHeightS:    $kuiLineHeight * 0.75;
+$kuiLineHeightM:    $kuiLineHeight;
+$kuiLineHeightL:    $kuiLineHeight * 1.5;
+$kuiLineHeightXL:   $kuiLineHeight * 2;


I'll need to tweak this stuff separately. Some of it's too fat. I'll do it in another PR.

snide · 2017-08-03T03:59:23Z

ui_framework/src/components/vertical_rhythm/_vertical_rhythm.scss

@@ -0,0 +1,23 @@
+.kuiVerticalRhythm {


What do these mixins do that the variables themselves don't already provide? When would we ever swap the content inside of them, versus just changing the value of the variable?

As a react component when is it ever a good idea to use <KuiVerticalRhythm size="whatever"> versus just passing it onto the element?

If we did use something like this, it should be called BottomMargin I think? Vertical Rhythm is most often associated with a holistic system to space bodies of text. It's usually a mix of lots of different values, not just spacing, but size, line-height...etc.

OK, I'll remove the mixins and components for now, and rename the terminology to bottomMargin.

snide · 2017-08-03T14:50:51Z

ui_framework/src/components/call_out/_call_out.scss

+.kuiCallOut {
+  padding: $kuiSizeM $kuiSizeL;
+  border-left: 4px solid $kuiColorPrimary;
+  background-color: rgba($kuiColorPrimary, 0.1); /* 1 */


I'd prefer if we avoid opacity in places where we can use flat values (tintOrShade works perfectly fine here). I know opacity is easy for theming, but I'd like to avoid the render problems that opacity can aggravate. Anything that we can do to help the slowdowns that K6 suffers from (think of the slowness around resizing the discover page) I think we should try to do. tintOrShade also lets us be more specific and apply separate values.

Opacity is great for animations and shadows. If it's just defining a color, lets use a color.

cjcenizal · 2017-08-03T20:57:48Z

@snide Could you take another look? I'm going to make the change to remove the default component styles for Button and CallOut in a separate PR. I wasn't sure what to rename the vertical rhythm classes in a way that didn't create confusion with the utility classes we have (e.g. .kui--marginBottom and .kui--marginBottomLarge), so I left them in. Maybe you can take a whack at it after we merge?

I addressed your other feedback and created an additional function for helping us solve color contrast problems. The color contrast level is now AA compliant:

snide · 2017-08-03T21:20:42Z

This looks great man!

snide

All good.

* Add KuiCallOut component. - Add verticalRhythm prop to Typography components. - Add kuiIcon--basic class.

cjcenizal added the Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. label Aug 3, 2017

cjcenizal requested a review from snide August 3, 2017 02:13

Add KuiCallOut and KuiVerticalRhythm components.

d5508dd

- Add verticalRhythm prop to Typography components. - Add kuiIcon--basic class.

cjcenizal force-pushed the k7/call-out-component branch from 2914894 to d5508dd Compare August 3, 2017 02:17

cjcenizal commented Aug 3, 2017

View reviewed changes

cjcenizal mentioned this pull request Aug 3, 2017

K7 KUI #12807

Closed

51 tasks

snide suggested changes Aug 3, 2017

View reviewed changes

snide reviewed Aug 3, 2017

View reviewed changes

cjcenizal added 2 commits August 3, 2017 13:49

Fix color contrast issues.

396964a

Remove KuiVerticalRhythm component and mixins.

17116bc

snide approved these changes Aug 3, 2017

View reviewed changes

cjcenizal merged commit af2c8b0 into elastic:k7-ui-framework Aug 3, 2017

cjcenizal deleted the k7/call-out-component branch August 3, 2017 21:50

cjcenizal added a commit to cjcenizal/kibana that referenced this pull request Aug 16, 2017

[UI Framework] [K7] Add KuiCallOut component. (elastic#13306)

4db5961

* Add KuiCallOut component. - Add verticalRhythm prop to Typography components. - Add kuiIcon--basic class.

cjcenizal added a commit to cjcenizal/kibana that referenced this pull request Aug 26, 2017

[UI Framework] [K7] Add KuiCallOut component. (elastic#13306)

82eb3f1

* Add KuiCallOut component. - Add verticalRhythm prop to Typography components. - Add kuiIcon--basic class.

cjcenizal added a commit that referenced this pull request Sep 19, 2017

[UI Framework] [K7] Add KuiCallOut component. (#13306)

9f8fcb2

* Add KuiCallOut component. - Add verticalRhythm prop to Typography components. - Add kuiIcon--basic class.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UI Framework] [K7] Add KuiCallOut and KuiVerticalRhythm components. #13306

[UI Framework] [K7] Add KuiCallOut and KuiVerticalRhythm components. #13306

cjcenizal commented Aug 3, 2017 •

edited

Loading

cjcenizal Aug 3, 2017 •

edited

Loading

cjcenizal Aug 3, 2017

snide Aug 3, 2017

cjcenizal Aug 3, 2017

cjcenizal Aug 3, 2017

snide Aug 3, 2017

snide left a comment

snide Aug 3, 2017

cjcenizal Aug 3, 2017

cjcenizal Aug 3, 2017

snide Aug 3, 2017

snide Aug 3, 2017

cjcenizal Aug 3, 2017

snide Aug 3, 2017

cjcenizal Aug 3, 2017

snide Aug 3, 2017

cjcenizal Aug 3, 2017

snide Aug 3, 2017

snide Aug 3, 2017

snide Aug 3, 2017

cjcenizal Aug 3, 2017

snide Aug 3, 2017

cjcenizal commented Aug 3, 2017

snide commented Aug 3, 2017

snide left a comment

[UI Framework] [K7] Add KuiCallOut and KuiVerticalRhythm components. #13306

[UI Framework] [K7] Add KuiCallOut and KuiVerticalRhythm components. #13306

Conversation

cjcenizal commented Aug 3, 2017 • edited Loading

cjcenizal Aug 3, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snide left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cjcenizal commented Aug 3, 2017

snide commented Aug 3, 2017

snide left a comment

Choose a reason for hiding this comment

cjcenizal commented Aug 3, 2017 •

edited

Loading

cjcenizal Aug 3, 2017 •

edited

Loading