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

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

Merged
merged 3 commits into from Aug 3, 2017

Conversation

Projects
None yet
2 participants
@cjcenizal
Contributor

cjcenizal commented Aug 3, 2017

@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.

image

image

@cjcenizal cjcenizal added the :Design label Aug 3, 2017

@cjcenizal cjcenizal requested a review from snide Aug 3, 2017

Add KuiCallOut and KuiVerticalRhythm components.
- Add verticalRhythm prop to Typography components.
- Add kuiIcon--basic class.
@@ -80,7 +80,7 @@ export default () => (
<KuiButton
iconReverse
icon="arrowRight"
iconType="arrowRight"

This comment has been minimized.

@cjcenizal

cjcenizal Aug 3, 2017

Contributor

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

@cjcenizal

cjcenizal Aug 3, 2017

Contributor

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

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

This comment has been minimized.

@cjcenizal

cjcenizal Aug 3, 2017

Contributor

Weird mappings.

@cjcenizal

cjcenizal Aug 3, 2017

Contributor

Weird mappings.

This comment has been minimized.

@snide

snide Aug 3, 2017

Contributor

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

snide Aug 3, 2017

Contributor

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.

@cjcenizal cjcenizal referenced this pull request Aug 3, 2017

Closed

K7 KUI #12807

36 of 51 tasks complete
@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.

Show outdated Hide outdated ui_framework/src/components/call_out/_call_out.scss Outdated
@@ -87,3 +88,7 @@ KuiIcon.propTypes = {
size: PropTypes.oneOf(SIZES),
title: PropTypes.string,
};
KuiIcon.defaultProps = {
className: 'kuiIcon--basic',

This comment has been minimized.

@snide

snide Aug 3, 2017

Contributor

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.

@snide

snide Aug 3, 2017

Contributor

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.

This comment has been minimized.

@cjcenizal

cjcenizal Aug 3, 2017

Contributor

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.

@cjcenizal

cjcenizal Aug 3, 2017

Contributor

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.

This comment has been minimized.

@snide

snide Aug 3, 2017

Contributor

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

@snide

snide Aug 3, 2017

Contributor

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

This comment has been minimized.

@cjcenizal

cjcenizal Aug 3, 2017

Contributor

Cool thanks man!

@cjcenizal

cjcenizal Aug 3, 2017

Contributor

Cool thanks man!

Show outdated Hide outdated ui_framework/src/components/typography/_typography.scss Outdated
export const SIZES = Object.keys(sizeToClassNameMap);
const titleSizeToVerticalRhythmClassNameMap = {
small: 'kuiVerticalRhythm',
large: 'kuiVerticalRhythm--xLarge',

This comment has been minimized.

@snide

snide Aug 3, 2017

Contributor

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

snide Aug 3, 2017

Contributor

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.

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

This comment has been minimized.

@snide

snide Aug 3, 2017

Contributor

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

@snide

snide Aug 3, 2017

Contributor

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

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

This comment has been minimized.

@snide

snide Aug 3, 2017

Contributor

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.

@snide

snide Aug 3, 2017

Contributor

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.

This comment has been minimized.

@cjcenizal

cjcenizal Aug 3, 2017

Contributor

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

@cjcenizal

cjcenizal Aug 3, 2017

Contributor

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

@cjcenizal

This comment has been minimized.

Show comment
Hide comment
@cjcenizal

cjcenizal Aug 3, 2017

Contributor

@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:

image

image

Contributor

cjcenizal commented Aug 3, 2017

@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:

image

image

@snide

This comment has been minimized.

Show comment
Hide comment
@snide

snide Aug 3, 2017

Contributor

This looks great man!

Contributor

snide commented Aug 3, 2017

This looks great man!

@snide

snide approved these changes Aug 3, 2017

All good.

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

1 check passed

CLA Commit author has signed the CLA
Details

@cjcenizal cjcenizal deleted the cjcenizal:k7/call-out-component branch Aug 3, 2017

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

[UI Framework] [K7] Add KuiCallOut component. (elastic#13306)
* 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)
* 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)
* Add KuiCallOut component.
- Add verticalRhythm prop to Typography components.
- Add kuiIcon--basic class.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment