From 7bc0c486d9a07520a5b02c5ca18bfa8693ec5819 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Tue, 1 Aug 2017 19:39:49 -0700 Subject: [PATCH 01/12] set side nav --- ui_framework/dist/ui_framework.css | 7 +++++ .../doc_site/src/views/kibana/kibana.js | 8 +++++- ui_framework/src/components/index.js | 6 +++++ ui_framework/src/components/index.scss | 1 + .../src/components/side_nav/_index.scss | 3 +++ .../src/components/side_nav/_side_nav.scss | 3 +++ .../components/side_nav/_side_nav_item.scss | 3 +++ .../components/side_nav/_side_nav_title.scss | 5 ++++ ui_framework/src/components/side_nav/index.js | 3 +++ .../src/components/side_nav/side_nav.js | 20 ++++++++++++++ .../src/components/side_nav/side_nav.test.js | 16 ++++++++++++ .../src/components/side_nav/side_nav_item.js | 20 ++++++++++++++ .../components/side_nav/side_nav_item.test.js | 16 ++++++++++++ .../src/components/side_nav/side_nav_title.js | 26 +++++++++++++++++++ .../side_nav/side_nav_title.test.js | 16 ++++++++++++ 15 files changed, 152 insertions(+), 1 deletion(-) create mode 100644 ui_framework/src/components/side_nav/_index.scss create mode 100644 ui_framework/src/components/side_nav/_side_nav.scss create mode 100644 ui_framework/src/components/side_nav/_side_nav_item.scss create mode 100644 ui_framework/src/components/side_nav/_side_nav_title.scss create mode 100644 ui_framework/src/components/side_nav/index.js create mode 100644 ui_framework/src/components/side_nav/side_nav.js create mode 100644 ui_framework/src/components/side_nav/side_nav.test.js create mode 100644 ui_framework/src/components/side_nav/side_nav_item.js create mode 100644 ui_framework/src/components/side_nav/side_nav_item.test.js create mode 100644 ui_framework/src/components/side_nav/side_nav_title.js create mode 100644 ui_framework/src/components/side_nav/side_nav_title.test.js diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index e1d09b2bd4f2f..3f83c5fffc7d5 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -1399,6 +1399,13 @@ table { right: 16px; left: auto; } +.kuiSideNavTitle { + font-size: 16px; + font-size: 1rem; + line-height: 24px; + font-weight: 500; + color: #000; } + /** * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed. */ diff --git a/ui_framework/doc_site/src/views/kibana/kibana.js b/ui_framework/doc_site/src/views/kibana/kibana.js index ef11644b79494..58251be7531fe 100644 --- a/ui_framework/doc_site/src/views/kibana/kibana.js +++ b/ui_framework/doc_site/src/views/kibana/kibana.js @@ -24,6 +24,9 @@ import { KuiPageHeaderSection, KuiPageSidebar, KuiPopover, + KuiSideNav, + KuiSideNavItem, + KuiSideNavTitle, KuiTitle, } from '../../../../components'; @@ -298,7 +301,10 @@ export default class extends Component { - Sidebar nav + + Title + Item + diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js index 99c0514c6a575..5befd2c616692 100644 --- a/ui_framework/src/components/index.js +++ b/ui_framework/src/components/index.js @@ -85,6 +85,12 @@ export { KuiTabs, } from './tabs'; +export { + KuiSideNav, + KuiSideNavItem, + KuiSideNavTitle, +} from './side_nav'; + export { KuiTitle, KuiText, diff --git a/ui_framework/src/components/index.scss b/ui_framework/src/components/index.scss index 3eb0241d58063..73a583f80c1bd 100644 --- a/ui_framework/src/components/index.scss +++ b/ui_framework/src/components/index.scss @@ -9,6 +9,7 @@ @import 'modal/index'; @import 'page/index'; @import 'popover/index'; +@import 'side_nav/index'; @import 'table/index'; @import 'tabs/index'; @import 'typography/index'; diff --git a/ui_framework/src/components/side_nav/_index.scss b/ui_framework/src/components/side_nav/_index.scss new file mode 100644 index 0000000000000..86323c26b3903 --- /dev/null +++ b/ui_framework/src/components/side_nav/_index.scss @@ -0,0 +1,3 @@ +@import 'side_nav'; +@import 'side_nav_item'; +@import 'side_nav_title'; diff --git a/ui_framework/src/components/side_nav/_side_nav.scss b/ui_framework/src/components/side_nav/_side_nav.scss new file mode 100644 index 0000000000000..9a91ed66c6c13 --- /dev/null +++ b/ui_framework/src/components/side_nav/_side_nav.scss @@ -0,0 +1,3 @@ +.kuiSideNav { + +} diff --git a/ui_framework/src/components/side_nav/_side_nav_item.scss b/ui_framework/src/components/side_nav/_side_nav_item.scss new file mode 100644 index 0000000000000..076f7155023d3 --- /dev/null +++ b/ui_framework/src/components/side_nav/_side_nav_item.scss @@ -0,0 +1,3 @@ +.kuiSideNavItem { + +} diff --git a/ui_framework/src/components/side_nav/_side_nav_title.scss b/ui_framework/src/components/side_nav/_side_nav_title.scss new file mode 100644 index 0000000000000..e7039057fd4ec --- /dev/null +++ b/ui_framework/src/components/side_nav/_side_nav_title.scss @@ -0,0 +1,5 @@ +.kuiSideNavTitle { + @include kuiFontSize; + font-weight: $kuiFontWeightMedium; + color: $kuiColorFullShade; +} diff --git a/ui_framework/src/components/side_nav/index.js b/ui_framework/src/components/side_nav/index.js new file mode 100644 index 0000000000000..84e62eda4b73e --- /dev/null +++ b/ui_framework/src/components/side_nav/index.js @@ -0,0 +1,3 @@ +export { KuiSideNav } from './side_nav'; +export { KuiSideNavItem } from './side_nav_item'; +export { KuiSideNavTitle } from './side_nav_title'; diff --git a/ui_framework/src/components/side_nav/side_nav.js b/ui_framework/src/components/side_nav/side_nav.js new file mode 100644 index 0000000000000..0f5a67e53bd1d --- /dev/null +++ b/ui_framework/src/components/side_nav/side_nav.js @@ -0,0 +1,20 @@ +import React, { + PropTypes, +} from 'react'; +import classNames from 'classnames'; + +export const KuiSideNav = ({ children, className, ...rest }) => { + const classes = classNames('kuiSideNav', className); + + return ( +
+ {children} +
+ ); +}; + +KuiSideNav.propTypes = { +}; diff --git a/ui_framework/src/components/side_nav/side_nav.test.js b/ui_framework/src/components/side_nav/side_nav.test.js new file mode 100644 index 0000000000000..6e9b89a6807a7 --- /dev/null +++ b/ui_framework/src/components/side_nav/side_nav.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { KuiSideNav } from './side_nav'; + +describe('KuiSideNav', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/ui_framework/src/components/side_nav/side_nav_item.js b/ui_framework/src/components/side_nav/side_nav_item.js new file mode 100644 index 0000000000000..011e14a2ea876 --- /dev/null +++ b/ui_framework/src/components/side_nav/side_nav_item.js @@ -0,0 +1,20 @@ +import React, { + PropTypes, +} from 'react'; +import classNames from 'classnames'; + +export const KuiSideNavItem = ({ children, className, ...rest }) => { + const classes = classNames('kuiSideNavItem', className); + + return ( +
+ {children} +
+ ); +}; + +KuiSideNavItem.propTypes = { +}; diff --git a/ui_framework/src/components/side_nav/side_nav_item.test.js b/ui_framework/src/components/side_nav/side_nav_item.test.js new file mode 100644 index 0000000000000..68e87a0096347 --- /dev/null +++ b/ui_framework/src/components/side_nav/side_nav_item.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { KuiSideNavItem } from './side_nav_item'; + +describe('KuiSideNavItem', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/ui_framework/src/components/side_nav/side_nav_title.js b/ui_framework/src/components/side_nav/side_nav_title.js new file mode 100644 index 0000000000000..e4f2abad8f93e --- /dev/null +++ b/ui_framework/src/components/side_nav/side_nav_title.js @@ -0,0 +1,26 @@ +import React, { + PropTypes, +} from 'react'; +import classNames from 'classnames'; + +import { + KuiTitle, +} from '../../../../components'; + +export const KuiSideNavTitle = ({ children, className, ...rest }) => { + const classes = classNames('kuiSideNavTitle', className); + + return ( +
+ +

{children}

+ +
+ ); +}; + +KuiSideNavTitle.propTypes = { +}; diff --git a/ui_framework/src/components/side_nav/side_nav_title.test.js b/ui_framework/src/components/side_nav/side_nav_title.test.js new file mode 100644 index 0000000000000..bf89b44bc8fc4 --- /dev/null +++ b/ui_framework/src/components/side_nav/side_nav_title.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { KuiSideNavTitle } from './side_nav_title'; + +describe('KuiSideNavTitle', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); From 611f311c66022835774b9c59224923333ef78e17 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 2 Aug 2017 16:31:58 -0700 Subject: [PATCH 02/12] side nav component, add depth --- ui_framework/dist/ui_framework.css | 54 +++++++++++++++---- .../doc_site/src/services/routes/routes.js | 7 +++ .../doc_site/src/views/kibana/kibana.js | 32 ++++++++--- .../doc_site/src/views/side_nav/side_nav.js | 26 +++++++++ .../src/views/side_nav/side_nav_example.js | 38 +++++++++++++ .../src/components/button/_button.scss | 3 +- .../src/components/header/_header.scss | 1 + .../src/components/header/_header_logo.scss | 2 +- ui_framework/src/components/page/_page.scss | 2 +- .../page/page_content/_page_content.scss | 1 + .../page_content/_page_content_header.scss | 2 +- .../page/page_header/_page_header.scss | 2 +- .../page/page_sidebar/_page_sidebar.scss | 4 +- .../src/components/side_nav/_side_nav.scss | 1 - .../components/side_nav/_side_nav_item.scss | 31 +++++++++++ .../components/side_nav/_side_nav_title.scss | 7 ++- .../src/components/side_nav/side_nav.js | 4 +- .../src/components/side_nav/side_nav_item.js | 14 +++-- .../src/components/side_nav/side_nav_title.js | 4 +- .../src/global_styling/mixins/_shadow.scss | 8 +++ 20 files changed, 210 insertions(+), 33 deletions(-) create mode 100644 ui_framework/doc_site/src/views/side_nav/side_nav.js create mode 100644 ui_framework/doc_site/src/views/side_nav/side_nav_example.js diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 3f83c5fffc7d5..c3b222f7f14d7 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -347,12 +347,13 @@ table { border: solid 1px #0079a5; border-radius: 4px; color: #0079a5; - padding: 0 8px; + padding: 0 12px; min-width: 112px; text-align: center; font-family: "Roboto", Helvetica, Arial, sans-serif; transition: all 250ms cubic-bezier(0.34, 1.61, 0.7, 1); whitespace: nowrap; + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2); /** * 1. Apply margin to all but last item in the flex. */ } @@ -550,7 +551,8 @@ table { display: -ms-flexbox; display: flex; background: #FFF; - border-bottom: 1px solid #D9D9D9; } + border-bottom: 1px solid #D9D9D9; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); } .kuiHeader__notification { display: inline-block; @@ -623,7 +625,7 @@ table { .kuiHeaderLogo { position: relative; height: 64px; - padding: 16px 32px; + padding: 16px 24px; display: inline-block; vertical-align: middle; } .kuiHeaderLogo:hover { @@ -1201,7 +1203,7 @@ table { transform: translateY(0); } } .kuiPage { - padding: 32px; } + padding: 24px; } .kuiPageBody { display: -webkit-box; @@ -1232,7 +1234,8 @@ table { background: #FFF; border: 1px solid #D9D9D9; border-radius: 4px; - width: 100%; } + width: 100%; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); } .kuiPageContent--verticalCenter { -webkit-align-self: center; @@ -1245,7 +1248,7 @@ table { margin: auto; } .kuiPageContentHeader { - margin-bottom: 32px; + margin-bottom: 24px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1284,15 +1287,15 @@ table { .kuiPageSidebar { width: 192px; - margin-right: 32px; } + margin-right: 24px; } @media only screen and (max-width: 768px) { .kuiPageSidebar { width: 100%; - margin-bottom: 32px; } } + margin-bottom: 24px; } } .kuiPageHeader { - margin-bottom: 32px; + margin-bottom: 24px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1399,12 +1402,43 @@ table { right: 16px; left: auto; } +.kuiSideNavItem { + display: block; + width: 100%; + text-align: left; + font-size: 14px; + font-size: 0.875rem; + line-height: 18px; + padding: 4px 8px; + color: #666; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + border: 1px solid #D9D9D9; + border-color: transparent; } + .kuiSideNavItem.isSelected { + color: #00A69B; + font-weight: 500; + border-left: 2px solid #D9D9D9; + border-left-color: #00A69B; + background-color: #FFF; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); } + .kuiSideNavItem:hover { + text-decoration: underline; } + .kuiSideNavItem:focus { + background-color: #e6f2f6; } + .kuiSideNavItem:focus:not(.isSelected) { + border: solid 1px #c1dfe9; } + .kuiSideNavTitle { font-size: 16px; font-size: 1rem; line-height: 24px; font-weight: 500; - color: #000; } + margin-bottom: 8px; + margin-top: 16px; } + .kuiSideNavTitle:first-of-type { + margin-top: 0; } /** * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed. diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js index 4891e589aae46..1a937e97b76ee 100644 --- a/ui_framework/doc_site/src/services/routes/routes.js +++ b/ui_framework/doc_site/src/services/routes/routes.js @@ -36,6 +36,9 @@ import LoadingExample import PopoverExample from '../../views/popover/popover_example'; +import SideNavExample + from '../../views/side_nav/side_nav'; + import TableExample from '../../views/table/table_example'; @@ -90,6 +93,10 @@ const components = [{ name: 'Popover', component: PopoverExample, hasReact: true, +}, { + name: 'SideNav', + component: SideNavExample, + hasReact: true, }, { name: 'Table', component: TableExample, diff --git a/ui_framework/doc_site/src/views/kibana/kibana.js b/ui_framework/doc_site/src/views/kibana/kibana.js index 58251be7531fe..82ba0d0331691 100644 --- a/ui_framework/doc_site/src/views/kibana/kibana.js +++ b/ui_framework/doc_site/src/views/kibana/kibana.js @@ -3,6 +3,7 @@ import React, { } from 'react'; import { + KuiButton, KuiHeader, KuiHeaderBreadcrumb, KuiHeaderBreadcrumbCollapsed, @@ -292,7 +293,7 @@ export default class extends Component { -

Page title

+

Management

 @@ -302,23 +303,42 @@ export default class extends Component { - Title - Item + Elasticsearch + Data sources + Users + Roles + Watches + Extremely long item is long + + Kibana + Index Patterns + Saved Objects + Reporting + + Logstash + Pipeline Viewer -

Content title

+

Watches

 - Content abilities + window.alert('Button clicked')} + iconReverse + > + Create new watch + - Content body + asdf diff --git a/ui_framework/doc_site/src/views/side_nav/side_nav.js b/ui_framework/doc_site/src/views/side_nav/side_nav.js new file mode 100644 index 0000000000000..ab2f5038933c5 --- /dev/null +++ b/ui_framework/doc_site/src/views/side_nav/side_nav.js @@ -0,0 +1,26 @@ +import React from 'react'; + +import { + KuiSideNav, + KuiSideNavItem, + KuiSideNavTitle, +} from '../../../../components'; + +export default () => ( + + Elasticsearch + Data sources + Users + Roles + Watches + Extremely long item is long + + Kibana + Index Patterns + Saved Objects + Reporting + + Logstash + Pipeline Viewer + +); diff --git a/ui_framework/doc_site/src/views/side_nav/side_nav_example.js b/ui_framework/doc_site/src/views/side_nav/side_nav_example.js new file mode 100644 index 0000000000000..ad9a46afaeb7c --- /dev/null +++ b/ui_framework/doc_site/src/views/side_nav/side_nav_example.js @@ -0,0 +1,38 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +import SideNav from './side_nav'; +const sideNavSource = require('!!raw!./side_nav'); +const sideNavHtml = renderToHtml(SideNav); + +export default props => ( + + + + Description needed: how to use the SideNav component. + + + + + + + +); diff --git a/ui_framework/src/components/button/_button.scss b/ui_framework/src/components/button/_button.scss index 4eff8b618dac0..859519bfbc8c6 100644 --- a/ui_framework/src/components/button/_button.scss +++ b/ui_framework/src/components/button/_button.scss @@ -8,12 +8,13 @@ border: solid 1px $kuiColorPrimary; border-radius: $kuiBorderRadius; color: $kuiColorPrimary; - padding: 0 $kuiSizeS; + padding: 0 ($kuiSize - $kuiSizeXS); min-width: $kuiSize * 7; text-align: center; font-family: $kuiFontFamily; transition: all $kuiAnimSpeedNormal $kuiAnimSlightBounce; whitespace: nowrap; + @include kuiBottomShadowMedium; &.kuiButton--small { height: $kuiSizeXL; diff --git a/ui_framework/src/components/header/_header.scss b/ui_framework/src/components/header/_header.scss index 79859dfdb1f11..f845ce16e6d9f 100644 --- a/ui_framework/src/components/header/_header.scss +++ b/ui_framework/src/components/header/_header.scss @@ -4,6 +4,7 @@ display: flex; background: $kuiHeaderBackgroundColor; border-bottom: $kuiBorderThin; + @include kuiBottomShadowSmall; } .kuiHeader__notification { diff --git a/ui_framework/src/components/header/_header_logo.scss b/ui_framework/src/components/header/_header_logo.scss index eebefb81c3ac8..f4a52a831b126 100644 --- a/ui_framework/src/components/header/_header_logo.scss +++ b/ui_framework/src/components/header/_header_logo.scss @@ -3,7 +3,7 @@ position: relative; height: $kuiHeaderChildSize; - padding: $kuiSize $kuiSizeXL; + padding: $kuiSize $kuiSizeL; display: inline-block; vertical-align: middle; } diff --git a/ui_framework/src/components/page/_page.scss b/ui_framework/src/components/page/_page.scss index 3cf6817e89040..8ec38b12d6f77 100644 --- a/ui_framework/src/components/page/_page.scss +++ b/ui_framework/src/components/page/_page.scss @@ -1,3 +1,3 @@ .kuiPage { - padding: $kuiSizeXL; + padding: $kuiSizeL; } diff --git a/ui_framework/src/components/page/page_content/_page_content.scss b/ui_framework/src/components/page/page_content/_page_content.scss index f1af5e0ac13ed..3db52b245badb 100644 --- a/ui_framework/src/components/page/page_content/_page_content.scss +++ b/ui_framework/src/components/page/page_content/_page_content.scss @@ -4,6 +4,7 @@ border: $kuiBorderThin; border-radius: $kuiBorderRadius; width: 100%; + @include kuiBottomShadowSmall; } .kuiPageContent--verticalCenter { diff --git a/ui_framework/src/components/page/page_content/_page_content_header.scss b/ui_framework/src/components/page/page_content/_page_content_header.scss index f3353ac87005b..0672586beadc0 100644 --- a/ui_framework/src/components/page/page_content/_page_content_header.scss +++ b/ui_framework/src/components/page/page_content/_page_content_header.scss @@ -1,5 +1,5 @@ .kuiPageContentHeader { - margin-bottom: $kuiSizeXL; + margin-bottom: $kuiSizeL; display: flex; flex-direction: row; justify-content: space-between; diff --git a/ui_framework/src/components/page/page_header/_page_header.scss b/ui_framework/src/components/page/page_header/_page_header.scss index cc5d41ebf2c4c..7c87d62606a7b 100644 --- a/ui_framework/src/components/page/page_header/_page_header.scss +++ b/ui_framework/src/components/page/page_header/_page_header.scss @@ -1,5 +1,5 @@ .kuiPageHeader { - margin-bottom: $kuiSizeXL; + margin-bottom: $kuiSizeL; display: flex; flex-direction: row; justify-content: space-between; diff --git a/ui_framework/src/components/page/page_sidebar/_page_sidebar.scss b/ui_framework/src/components/page/page_sidebar/_page_sidebar.scss index 70cc8b1b4e6bd..79f8149bb2156 100644 --- a/ui_framework/src/components/page/page_sidebar/_page_sidebar.scss +++ b/ui_framework/src/components/page/page_sidebar/_page_sidebar.scss @@ -1,12 +1,12 @@ .kuiPageSidebar { width: $kuiSize * 12; - margin-right: $kuiSizeXL; + margin-right: $kuiSizeL; } @include screenXSmall { .kuiPageSidebar { width: 100%; - margin-bottom: $kuiSizeXL; + margin-bottom: $kuiSizeL; } } diff --git a/ui_framework/src/components/side_nav/_side_nav.scss b/ui_framework/src/components/side_nav/_side_nav.scss index 9a91ed66c6c13..dd37f4982dc82 100644 --- a/ui_framework/src/components/side_nav/_side_nav.scss +++ b/ui_framework/src/components/side_nav/_side_nav.scss @@ -1,3 +1,2 @@ .kuiSideNav { - } diff --git a/ui_framework/src/components/side_nav/_side_nav_item.scss b/ui_framework/src/components/side_nav/_side_nav_item.scss index 076f7155023d3..56b531413c69d 100644 --- a/ui_framework/src/components/side_nav/_side_nav_item.scss +++ b/ui_framework/src/components/side_nav/_side_nav_item.scss @@ -1,3 +1,34 @@ .kuiSideNavItem { + display: block; + width: 100%; + text-align: left; + @include kuiFontSizeS; + padding: $kuiSizeXS $kuiSizeS; + color: $kuiColorDarkShade; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + border: $kuiBorderThin; + border-color: transparent; + &.isSelected { + color: $kuiColorSecondary; + font-weight: $kuiFontWeightMedium; + border-left: $kuiBorderThick; + border-left-color: $kuiColorSecondary; + background-color: $kuiColorEmptyShade; + @include kuiBottomShadowSmall; + } + + &:hover { + text-decoration: underline; + } + + &:focus { + background-color: $kuiFocusBackgroundColor; + } + + &:focus:not(.isSelected) { + border: solid 1px darken($kuiFocusBackgroundColor, 10%); + } } diff --git a/ui_framework/src/components/side_nav/_side_nav_title.scss b/ui_framework/src/components/side_nav/_side_nav_title.scss index e7039057fd4ec..bdb7fcc85b078 100644 --- a/ui_framework/src/components/side_nav/_side_nav_title.scss +++ b/ui_framework/src/components/side_nav/_side_nav_title.scss @@ -1,5 +1,10 @@ .kuiSideNavTitle { @include kuiFontSize; font-weight: $kuiFontWeightMedium; - color: $kuiColorFullShade; + margin-bottom: $kuiSizeS; + margin-top: $kuiSize; + + &:first-of-type { + margin-top: 0; + } } diff --git a/ui_framework/src/components/side_nav/side_nav.js b/ui_framework/src/components/side_nav/side_nav.js index 0f5a67e53bd1d..595afd1a9268f 100644 --- a/ui_framework/src/components/side_nav/side_nav.js +++ b/ui_framework/src/components/side_nav/side_nav.js @@ -7,12 +7,12 @@ export const KuiSideNav = ({ children, className, ...rest }) => { const classes = classNames('kuiSideNav', className); return ( -
{children} -
+ ); }; diff --git a/ui_framework/src/components/side_nav/side_nav_item.js b/ui_framework/src/components/side_nav/side_nav_item.js index 011e14a2ea876..896918140cb83 100644 --- a/ui_framework/src/components/side_nav/side_nav_item.js +++ b/ui_framework/src/components/side_nav/side_nav_item.js @@ -3,16 +3,22 @@ import React, { } from 'react'; import classNames from 'classnames'; -export const KuiSideNavItem = ({ children, className, ...rest }) => { - const classes = classNames('kuiSideNavItem', className); +export const KuiSideNavItem = ({ children, isSelected, className, ...rest }) => { + const classes = classNames( + 'kuiSideNavItem', + className, + { + 'isSelected' : isSelected, + } + ); return ( -
{children} -
+ ); }; diff --git a/ui_framework/src/components/side_nav/side_nav_title.js b/ui_framework/src/components/side_nav/side_nav_title.js index e4f2abad8f93e..3829d95f16143 100644 --- a/ui_framework/src/components/side_nav/side_nav_title.js +++ b/ui_framework/src/components/side_nav/side_nav_title.js @@ -5,7 +5,7 @@ import classNames from 'classnames'; import { KuiTitle, -} from '../../../../components'; +} from '../../components'; export const KuiSideNavTitle = ({ children, className, ...rest }) => { const classes = classNames('kuiSideNavTitle', className); @@ -16,7 +16,7 @@ export const KuiSideNavTitle = ({ children, className, ...rest }) => { {...rest} > -

{children}

+ {children} ); diff --git a/ui_framework/src/global_styling/mixins/_shadow.scss b/ui_framework/src/global_styling/mixins/_shadow.scss index 72aba7aa3b3f4..5cda34546b4a7 100644 --- a/ui_framework/src/global_styling/mixins/_shadow.scss +++ b/ui_framework/src/global_styling/mixins/_shadow.scss @@ -1,3 +1,11 @@ @mixin kuiBottomShadow { box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); } + +@mixin kuiBottomShadowSmall { + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); +} + +@mixin kuiBottomShadowMedium { + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2); +} From 869bc3737d568290f6095b8ebd67694343ece496 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 2 Aug 2017 22:35:20 -0700 Subject: [PATCH 03/12] fix font usage --- ui_framework/dist/ui_framework.css | 1 - ui_framework/src/components/side_nav/_side_nav_item.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index c3b222f7f14d7..ca3c95108098c 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -1418,7 +1418,6 @@ table { border-color: transparent; } .kuiSideNavItem.isSelected { color: #00A69B; - font-weight: 500; border-left: 2px solid #D9D9D9; border-left-color: #00A69B; background-color: #FFF; diff --git a/ui_framework/src/components/side_nav/_side_nav_item.scss b/ui_framework/src/components/side_nav/_side_nav_item.scss index 56b531413c69d..60ece53a7cbde 100644 --- a/ui_framework/src/components/side_nav/_side_nav_item.scss +++ b/ui_framework/src/components/side_nav/_side_nav_item.scss @@ -13,7 +13,6 @@ &.isSelected { color: $kuiColorSecondary; - font-weight: $kuiFontWeightMedium; border-left: $kuiBorderThick; border-left-color: $kuiColorSecondary; background-color: $kuiColorEmptyShade; From 39077c46adeb71fff4fba16673f190a360284dd0 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 2 Aug 2017 23:36:32 -0700 Subject: [PATCH 04/12] star messing with responsive layouts --- ui_framework/dist/ui_framework.css | 46 +++++++++++++++++-- .../doc_site/src/components/guide/_guide.scss | 1 - .../doc_site/src/views/kibana/kibana.js | 3 -- ui_framework/src/components/page/_page.scss | 6 +++ .../page/page_content/_page_content.scss | 7 +++ .../page/page_header/_page_header.scss | 3 +- .../page/page_sidebar/_page_sidebar.scss | 1 - .../src/components/side_nav/_side_nav.scss | 31 +++++++++++++ .../src/components/side_nav/side_nav.js | 7 ++- 9 files changed, 95 insertions(+), 10 deletions(-) diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index ca3c95108098c..c27326bf3cc05 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -1205,6 +1205,10 @@ table { .kuiPage { padding: 24px; } +@media only screen and (max-width: 768px) { + .kuiPage { + padding: 24px 0; } } + .kuiPageBody { display: -webkit-box; display: -webkit-flex; @@ -1247,6 +1251,11 @@ table { width: auto; margin: auto; } +@media only screen and (max-width: 768px) { + .kuiPageContent { + border-radius: 0; + border: none; } } + .kuiPageContentHeader { margin-bottom: 24px; display: -webkit-box; @@ -1291,8 +1300,7 @@ table { @media only screen and (max-width: 768px) { .kuiPageSidebar { - width: 100%; - margin-bottom: 24px; } } + width: 100%; } } .kuiPageHeader { margin-bottom: 24px; @@ -1320,7 +1328,9 @@ table { -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; - flex-direction: column; } } + flex-direction: column; + padding: 0 24px; + margin-bottom: 0; } } .kuiPageHeaderSection + .kuiPageHeaderSection { margin-left: 32px; } @@ -1402,6 +1412,36 @@ table { right: 16px; left: auto; } +.kuiSideNav__mobileToggle { + display: none; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + color: #FFF; + border-bottom: 1px solid #D9D9D9; + padding: 16px 24px; } + +.kuiSideNav__mobileIcon { + fill: #0079a5; } + +.kuiSideNav__mobileTitle { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + color: #0079a5; } + +@media only screen and (max-width: 768px) { + .kuiSideNav__mobileToggle { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + .kuiSideNav__content { + display: none; } } + .kuiSideNavItem { display: block; width: 100%; diff --git a/ui_framework/doc_site/src/components/guide/_guide.scss b/ui_framework/doc_site/src/components/guide/_guide.scss index 5af1e0811ba83..b7ea3e7f88e35 100644 --- a/ui_framework/doc_site/src/components/guide/_guide.scss +++ b/ui_framework/doc_site/src/components/guide/_guide.scss @@ -1,7 +1,6 @@ .guideBody { height: 100%; background-color: #000000; - min-width: $guideMinWidth; } /** diff --git a/ui_framework/doc_site/src/views/kibana/kibana.js b/ui_framework/doc_site/src/views/kibana/kibana.js index 82ba0d0331691..8c2b7373ea402 100644 --- a/ui_framework/doc_site/src/views/kibana/kibana.js +++ b/ui_framework/doc_site/src/views/kibana/kibana.js @@ -296,9 +296,6 @@ export default class extends Component {

Management

 - - Page abilities - diff --git a/ui_framework/src/components/page/_page.scss b/ui_framework/src/components/page/_page.scss index 8ec38b12d6f77..3bac0decab7f8 100644 --- a/ui_framework/src/components/page/_page.scss +++ b/ui_framework/src/components/page/_page.scss @@ -1,3 +1,9 @@ .kuiPage { padding: $kuiSizeL; } + +@include screenXSmall { + .kuiPage { + padding: $kuiSizeL 0; + } +} diff --git a/ui_framework/src/components/page/page_content/_page_content.scss b/ui_framework/src/components/page/page_content/_page_content.scss index 3db52b245badb..7ab2067490f6e 100644 --- a/ui_framework/src/components/page/page_content/_page_content.scss +++ b/ui_framework/src/components/page/page_content/_page_content.scss @@ -15,3 +15,10 @@ width: auto; margin: auto; } + +@include screenXSmall { + .kuiPageContent { + border-radius: 0; + border: none; + } +} diff --git a/ui_framework/src/components/page/page_header/_page_header.scss b/ui_framework/src/components/page/page_header/_page_header.scss index 7c87d62606a7b..80772254f976a 100644 --- a/ui_framework/src/components/page/page_header/_page_header.scss +++ b/ui_framework/src/components/page/page_header/_page_header.scss @@ -9,6 +9,7 @@ @include screenXSmall { .kuiPageHeader { flex-direction: column; + padding: 0 $kuiSizeL; + margin-bottom: 0; } - } diff --git a/ui_framework/src/components/page/page_sidebar/_page_sidebar.scss b/ui_framework/src/components/page/page_sidebar/_page_sidebar.scss index 79f8149bb2156..a85be72458967 100644 --- a/ui_framework/src/components/page/page_sidebar/_page_sidebar.scss +++ b/ui_framework/src/components/page/page_sidebar/_page_sidebar.scss @@ -6,7 +6,6 @@ @include screenXSmall { .kuiPageSidebar { width: 100%; - margin-bottom: $kuiSizeL; } } diff --git a/ui_framework/src/components/side_nav/_side_nav.scss b/ui_framework/src/components/side_nav/_side_nav.scss index dd37f4982dc82..5a4410353f0fa 100644 --- a/ui_framework/src/components/side_nav/_side_nav.scss +++ b/ui_framework/src/components/side_nav/_side_nav.scss @@ -1,2 +1,33 @@ .kuiSideNav { } + +.kuiSideNav__mobileToggle { + display: none; + flex-direction: row; + color: $kuiColorEmptyShade; + border-bottom: $kuiBorderThin; + padding: $kuiSize $kuiSizeL; +} + +.kuiSideNav__mobileIconWrap { +} + +.kuiSideNav__mobileIcon { + fill: $kuiColorPrimary; +} + +.kuiSideNav__mobileTitle { + flex-grow: 1; + color: $kuiColorPrimary; +} + +@include screenXSmall { + + .kuiSideNav__mobileToggle { + display: flex; + } + + .kuiSideNav__content { + display: none; + } +} diff --git a/ui_framework/src/components/side_nav/side_nav.js b/ui_framework/src/components/side_nav/side_nav.js index 595afd1a9268f..8c588366c83f8 100644 --- a/ui_framework/src/components/side_nav/side_nav.js +++ b/ui_framework/src/components/side_nav/side_nav.js @@ -2,6 +2,7 @@ import React, { PropTypes, } from 'react'; import classNames from 'classnames'; +import { KuiIcon } from '../../components'; export const KuiSideNav = ({ children, className, ...rest }) => { const classes = classNames('kuiSideNav', className); @@ -11,7 +12,11 @@ export const KuiSideNav = ({ children, className, ...rest }) => { className={classes} {...rest} > - {children} +
+
Navigate within management
+
+
+
{children}
); }; From 0190cbef85cc2d0ac422c7bb00c03aab9a59e503 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 Aug 2017 09:00:06 -0700 Subject: [PATCH 05/12] open close state for sidenav in mobile --- ui_framework/dist/ui_framework.css | 12 ++++++++++- .../src/components/side_nav/_side_nav.scss | 21 +++++++++++++++---- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index c27326bf3cc05..a7f49389ba0d4 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -1434,13 +1434,23 @@ table { color: #0079a5; } @media only screen and (max-width: 768px) { + .kuiSideNav.isOpenMobile .kuiSideNav__content { + visibility: visible; + opacity: 1; + height: auto; + margin: 24px; + max-height: 5000px; } .kuiSideNav__mobileToggle { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .kuiSideNav__content { - display: none; } } + visibility: hidden; + opacity: 0; + max-height: 0; + margin: 0 24px; + transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } .kuiSideNavItem { display: block; diff --git a/ui_framework/src/components/side_nav/_side_nav.scss b/ui_framework/src/components/side_nav/_side_nav.scss index 5a4410353f0fa..b6c1a68524441 100644 --- a/ui_framework/src/components/side_nav/_side_nav.scss +++ b/ui_framework/src/components/side_nav/_side_nav.scss @@ -1,6 +1,3 @@ -.kuiSideNav { -} - .kuiSideNav__mobileToggle { display: none; flex-direction: row; @@ -23,11 +20,27 @@ @include screenXSmall { + .kuiSideNav { + &.isOpenMobile { + .kuiSideNav__content { + visibility: visible; + opacity: 1; + height: auto; + margin: $kuiSizeL; + max-height: 5000px; + } + } + } + .kuiSideNav__mobileToggle { display: flex; } .kuiSideNav__content { - display: none; + visibility: hidden; + opacity: 0; + max-height: 0; + margin: 0 $kuiSizeL; + transition: all $kuiAnimSpeedNormal $kuiAnimSlightResistance; } } From e34307c68f25fb7a63e43e57b35d4409d49a1abd Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 Aug 2017 09:42:20 -0700 Subject: [PATCH 06/12] clean up code, set up proper state --- ui_framework/dist/ui_framework.css | 13 ++++++--- .../src/components/side_nav/_side_nav.scss | 27 +++++++++---------- .../src/components/side_nav/side_nav.js | 19 ++++++++----- 3 files changed, 34 insertions(+), 25 deletions(-) diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index a7f49389ba0d4..70a0532f5a131 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -1419,9 +1419,10 @@ table { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - color: #FFF; border-bottom: 1px solid #D9D9D9; - padding: 16px 24px; } + padding: 16px 24px; + width: 100%; + text-align: left; } .kuiSideNav__mobileIcon { fill: #0079a5; } @@ -1434,12 +1435,16 @@ table { color: #0079a5; } @media only screen and (max-width: 768px) { + /** + * 1. Animation doesn't work against height. Need max-height instead. + * We set a value larger than what is needed to fake "auto". + */ .kuiSideNav.isOpenMobile .kuiSideNav__content { visibility: visible; opacity: 1; - height: auto; margin: 24px; - max-height: 5000px; } + max-height: 5000px; + /* 1 */ } .kuiSideNav__mobileToggle { display: -webkit-box; display: -webkit-flex; diff --git a/ui_framework/src/components/side_nav/_side_nav.scss b/ui_framework/src/components/side_nav/_side_nav.scss index b6c1a68524441..aba883a0c10ae 100644 --- a/ui_framework/src/components/side_nav/_side_nav.scss +++ b/ui_framework/src/components/side_nav/_side_nav.scss @@ -1,12 +1,11 @@ +// These mobile children are hidden in everything but mobile view. .kuiSideNav__mobileToggle { display: none; flex-direction: row; - color: $kuiColorEmptyShade; border-bottom: $kuiBorderThin; padding: $kuiSize $kuiSizeL; -} - -.kuiSideNav__mobileIconWrap { + width: 100%; + text-align: left; } .kuiSideNav__mobileIcon { @@ -19,17 +18,15 @@ } @include screenXSmall { - - .kuiSideNav { - &.isOpenMobile { - .kuiSideNav__content { - visibility: visible; - opacity: 1; - height: auto; - margin: $kuiSizeL; - max-height: 5000px; - } - } + /** + * 1. Animation doesn't work against height. Need max-height instead. + * We set a value larger than what is needed to fake "auto". + */ + .kuiSideNav.isOpenMobile .kuiSideNav__content { + visibility: visible; + opacity: 1; + margin: $kuiSizeL; + max-height: 5000px; /* 1 */ } .kuiSideNav__mobileToggle { diff --git a/ui_framework/src/components/side_nav/side_nav.js b/ui_framework/src/components/side_nav/side_nav.js index 8c588366c83f8..31581d06e545b 100644 --- a/ui_framework/src/components/side_nav/side_nav.js +++ b/ui_framework/src/components/side_nav/side_nav.js @@ -4,22 +4,29 @@ import React, { import classNames from 'classnames'; import { KuiIcon } from '../../components'; -export const KuiSideNav = ({ children, className, ...rest }) => { - const classes = classNames('kuiSideNav', className); +export const KuiSideNav = ({ children, isOpenMobile, className, ...rest }) => { + const classes = classNames( + 'kuiSideNav', + className, + { + 'isOpenMobile': isOpenMobile, + }, + ); return ( ); }; KuiSideNav.propTypes = { + isOpenMobile: PropTypes.string, }; From 1d9a03e5743d41d64abacb0f68e8b573fafdf3d2 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 Aug 2017 09:45:11 -0700 Subject: [PATCH 07/12] add some better docs --- ui_framework/src/components/side_nav/side_nav.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ui_framework/src/components/side_nav/side_nav.js b/ui_framework/src/components/side_nav/side_nav.js index 31581d06e545b..b1ca75639ba86 100644 --- a/ui_framework/src/components/side_nav/side_nav.js +++ b/ui_framework/src/components/side_nav/side_nav.js @@ -18,10 +18,13 @@ export const KuiSideNav = ({ children, isOpenMobile, className, ...rest }) => { className={classes} {...rest} > + {/* Hidden from view, except in mobile */} + + {/* Hidden from view in mobile, but toggled from the button above */}
{children}
); From 80d6b7cee2699e03c97d8f7f021d5e12e7eceda5 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 Aug 2017 10:09:33 -0700 Subject: [PATCH 08/12] use kuiSizeM instead of math --- ui_framework/src/components/icon/_icon.scss | 2 +- ui_framework/src/components/loading/_loading_kibana.scss | 4 ++-- ui_framework/src/components/side_nav/side_nav.js | 4 ++++ ui_framework/src/components/table/_index.scss | 2 +- ui_framework/src/components/tabs/_tabs.scss | 2 +- ui_framework/src/global_styling/variables/_size.scss | 6 +++--- 6 files changed, 12 insertions(+), 8 deletions(-) diff --git a/ui_framework/src/components/icon/_icon.scss b/ui_framework/src/components/icon/_icon.scss index a3c3cd1a85988..87749f040d62a 100644 --- a/ui_framework/src/components/icon/_icon.scss +++ b/ui_framework/src/components/icon/_icon.scss @@ -13,7 +13,7 @@ } .kuiIcon--medium { - @include size($kuiSizeM); + @include size($kuiSize); } .kuiIcon--large { diff --git a/ui_framework/src/components/loading/_loading_kibana.scss b/ui_framework/src/components/loading/_loading_kibana.scss index ab601fc1f7f6c..02acb1c4be05f 100644 --- a/ui_framework/src/components/loading/_loading_kibana.scss +++ b/ui_framework/src/components/loading/_loading_kibana.scss @@ -59,7 +59,7 @@ &:before, &:after { height: $kuiSizeS; - bottom: -($kuiSize - $kuiSizeXS); + bottom: -$kuiSizeM; } .kuiLoadingKibana__icon { animation: 1s kuiLoadingKibanaBounceXLarge $kuiAnimSlightResistance infinite; @@ -74,7 +74,7 @@ @keyframes kuiLoadingKibanaBounceLarge { 50% { - transform: translateY(-($kuiSize - $kuiSizeXS)); + transform: translateY(-$kuiSizeM); } } diff --git a/ui_framework/src/components/side_nav/side_nav.js b/ui_framework/src/components/side_nav/side_nav.js index b1ca75639ba86..1b62f47bc27b1 100644 --- a/ui_framework/src/components/side_nav/side_nav.js +++ b/ui_framework/src/components/side_nav/side_nav.js @@ -33,3 +33,7 @@ export const KuiSideNav = ({ children, isOpenMobile, className, ...rest }) => { KuiSideNav.propTypes = { isOpenMobile: PropTypes.string, }; + +KuiSideNav.defaultProps = { + isOpenMobile: false, +}; diff --git a/ui_framework/src/components/table/_index.scss b/ui_framework/src/components/table/_index.scss index 30f3ccd117a7e..e2e02bd7b4164 100644 --- a/ui_framework/src/components/table/_index.scss +++ b/ui_framework/src/components/table/_index.scss @@ -1,4 +1,4 @@ -$kuiTableCellPadding: $kuiSizeM - $kuiSizeXS; +$kuiTableCellPadding: $kuiSizeM; $kuiTableCellPaddingCompressed: $kuiSizeS; /** diff --git a/ui_framework/src/components/tabs/_tabs.scss b/ui_framework/src/components/tabs/_tabs.scss index 4397fb37cf3fa..fb7fd86d209ab 100644 --- a/ui_framework/src/components/tabs/_tabs.scss +++ b/ui_framework/src/components/tabs/_tabs.scss @@ -8,7 +8,7 @@ position: relative; cursor: pointer; - padding: ($kuiSize - $kuiSizeXS) $kuiSize; + padding: $kuiSizeM $kuiSize; color: $kuiColorDarkShade; background-color: $kuiColorEmptyShade; transition: all $kuiAnimSpeedNormal $kuiAnimSlightResistance; diff --git a/ui_framework/src/global_styling/variables/_size.scss b/ui_framework/src/global_styling/variables/_size.scss index 13a248f33ebf5..e05e6b4dc031d 100644 --- a/ui_framework/src/global_styling/variables/_size.scss +++ b/ui_framework/src/global_styling/variables/_size.scss @@ -1,8 +1,8 @@ $kuiSize: 16px; -$kuiSizeXS: $kuiSize / 4; -$kuiSizeS: $kuiSize / 2; -$kuiSizeM: $kuiSize; +$kuiSizeXS: $kuiSize * .25; +$kuiSizeS: $kuiSize * .5; +$kuiSizeM: $kuiSize * .75; $kuiSizeL: $kuiSize * 1.5; $kuiSizeXL: $kuiSize * 2; $kuiSizeXXL: $kuiSize * 2.5; From 004d3ca89d758de818ec115f58c87ea50c9d7096 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 Aug 2017 10:24:59 -0700 Subject: [PATCH 09/12] best solution for responsive system --- ui_framework/dist/ui_framework.css | 6 +++--- ui_framework/src/components/side_nav/_side_nav.scss | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 70a0532f5a131..e548b09a447d0 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -1444,7 +1444,8 @@ table { opacity: 1; margin: 24px; max-height: 5000px; - /* 1 */ } + /* 1 */ + transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .kuiSideNav__mobileToggle { display: -webkit-box; display: -webkit-flex; @@ -1454,8 +1455,7 @@ table { visibility: hidden; opacity: 0; max-height: 0; - margin: 0 24px; - transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } } + margin: 0 24px; } } .kuiSideNavItem { display: block; diff --git a/ui_framework/src/components/side_nav/_side_nav.scss b/ui_framework/src/components/side_nav/_side_nav.scss index aba883a0c10ae..c9510cb525e74 100644 --- a/ui_framework/src/components/side_nav/_side_nav.scss +++ b/ui_framework/src/components/side_nav/_side_nav.scss @@ -27,6 +27,7 @@ opacity: 1; margin: $kuiSizeL; max-height: 5000px; /* 1 */ + transition: all $kuiAnimSpeedNormal $kuiAnimSlightResistance; } .kuiSideNav__mobileToggle { @@ -38,6 +39,6 @@ opacity: 0; max-height: 0; margin: 0 $kuiSizeL; - transition: all $kuiAnimSpeedNormal $kuiAnimSlightResistance; + } } From 4e5f125de4c58abbdeae8d3bff530489b72fc07a Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 Aug 2017 15:39:18 -0700 Subject: [PATCH 10/12] don't let guide set bg color --- ui_framework/dist/ui_framework.css | 1 + ui_framework/doc_site/src/components/guide/_guide.scss | 2 -- ui_framework/src/global_styling/reset/_reset.scss | 1 + 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index e548b09a447d0..8c23ec0674ab0 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -62,6 +62,7 @@ html { font-size: 16px; color: #3F3F3F; height: 100%; + background-color: #F5F5F5; -webkit-font-smoothing: antialiased; } body { diff --git a/ui_framework/doc_site/src/components/guide/_guide.scss b/ui_framework/doc_site/src/components/guide/_guide.scss index b7ea3e7f88e35..73eb015f44d83 100644 --- a/ui_framework/doc_site/src/components/guide/_guide.scss +++ b/ui_framework/doc_site/src/components/guide/_guide.scss @@ -1,6 +1,5 @@ .guideBody { height: 100%; - background-color: #000000; } /** @@ -17,7 +16,6 @@ flex-direction: column; flex: 1 1 auto; padding-top: $guideNavHeight; - background-color: $guideBaseBackgroundColor; transition: padding-right $guideCodeViewerTransition, opacity $guideCodeViewerTransition; diff --git a/ui_framework/src/global_styling/reset/_reset.scss b/ui_framework/src/global_styling/reset/_reset.scss index 50dbafa4c7950..9d284721e6de1 100644 --- a/ui_framework/src/global_styling/reset/_reset.scss +++ b/ui_framework/src/global_styling/reset/_reset.scss @@ -54,6 +54,7 @@ html { font-size: $kuiFontSize; color: $kuiTextColor; height: 100%; + background-color: $kuiColorLightestShade; -webkit-font-smoothing: antialiased; } From 66ffaba5049dc69eb84dc95739df32ae4b9ce57d Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 Aug 2017 15:41:10 -0700 Subject: [PATCH 11/12] css compile after rebase --- ui_framework/dist/ui_framework.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 8c23ec0674ab0..d89ccb8c05cd9 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -483,7 +483,7 @@ table { transform: translateY(2px); } } .kuiCallOut { - padding: 16px 24px; + padding: 12px 24px; border-left: 4px solid #0079a5; background-color: #e6f2f6; /* 1 */ } From 9a978cd2111d472a3e1a6e8d1f7a99d0e7b9b1bc Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 Aug 2017 16:10:55 -0700 Subject: [PATCH 12/12] address CJ feedback --- ui_framework/dist/ui_framework.css | 49 +++++++++++-------- .../doc_site/src/services/routes/routes.js | 2 +- .../src/views/side_nav/side_nav_example.js | 3 +- .../src/components/side_nav/_side_nav.scss | 17 +++++-- .../components/side_nav/_side_nav_item.scss | 8 +-- .../components/side_nav/_side_nav_title.scss | 6 ++- .../src/components/side_nav/side_nav.js | 14 ++++-- .../src/components/side_nav/side_nav_item.js | 3 +- 8 files changed, 68 insertions(+), 34 deletions(-) diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index d89ccb8c05cd9..397d3f607fe61 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -1415,19 +1415,26 @@ table { .kuiSideNav__mobileToggle { display: none; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; border-bottom: 1px solid #D9D9D9; padding: 16px 24px; width: 100%; - text-align: left; } + text-align: left; + /** + * 1. This toggle also works with KUI link, but we need the outline + * that comes with the focus state. + */ } + .kuiSideNav__mobileToggle:focus { + outline: none; } .kuiSideNav__mobileIcon { fill: #0079a5; } +.kuiSideNav__mobileWrap { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + .kuiSideNav__mobileTitle { -webkit-box-flex: 1; -webkit-flex-grow: 1; @@ -1440,7 +1447,7 @@ table { * 1. Animation doesn't work against height. Need max-height instead. * We set a value larger than what is needed to fake "auto". */ - .kuiSideNav.isOpenMobile .kuiSideNav__content { + .kuiSideNav.kuiSideNav-isOpenMobile .kuiSideNav__content { visibility: visible; opacity: 1; margin: 24px; @@ -1448,10 +1455,7 @@ table { /* 1 */ transition: all 250ms cubic-bezier(0.694, 0.0482, 0.335, 1); } .kuiSideNav__mobileToggle { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } + display: block; } .kuiSideNav__content { visibility: hidden; opacity: 0; @@ -1459,12 +1463,12 @@ table { margin: 0 24px; } } .kuiSideNavItem { - display: block; - width: 100%; - text-align: left; font-size: 14px; font-size: 0.875rem; line-height: 18px; + display: block; + width: 100%; + text-align: left; padding: 4px 8px; color: #666; white-space: nowrap; @@ -1472,17 +1476,17 @@ table { text-overflow: ellipsis; border: 1px solid #D9D9D9; border-color: transparent; } - .kuiSideNavItem.isSelected { + .kuiSideNavItem.kuiSideNavItem-isSelected { + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); color: #00A69B; border-left: 2px solid #D9D9D9; border-left-color: #00A69B; - background-color: #FFF; - box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); } + background-color: #FFF; } .kuiSideNavItem:hover { text-decoration: underline; } .kuiSideNavItem:focus { background-color: #e6f2f6; } - .kuiSideNavItem:focus:not(.isSelected) { + .kuiSideNavItem:focus:not(.kuiSideNavItem-isSelected) { border: solid 1px #c1dfe9; } .kuiSideNavTitle { @@ -1491,9 +1495,14 @@ table { line-height: 24px; font-weight: 500; margin-bottom: 8px; - margin-top: 16px; } + margin-top: 16px; + /** + * 1. Only want the first title to have margin. Since buttons exist in nav + * we need to use first of type. + */ } .kuiSideNavTitle:first-of-type { - margin-top: 0; } + margin-top: 0; + /* 1 */ } /** * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed. diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js index 1a937e97b76ee..c2f5ead97aaf3 100644 --- a/ui_framework/doc_site/src/services/routes/routes.js +++ b/ui_framework/doc_site/src/services/routes/routes.js @@ -37,7 +37,7 @@ import PopoverExample from '../../views/popover/popover_example'; import SideNavExample - from '../../views/side_nav/side_nav'; + from '../../views/side_nav/side_nav_example'; import TableExample from '../../views/table/table_example'; diff --git a/ui_framework/doc_site/src/views/side_nav/side_nav_example.js b/ui_framework/doc_site/src/views/side_nav/side_nav_example.js index ad9a46afaeb7c..447cb6509795f 100644 --- a/ui_framework/doc_site/src/views/side_nav/side_nav_example.js +++ b/ui_framework/doc_site/src/views/side_nav/side_nav_example.js @@ -27,7 +27,8 @@ export default props => ( }]} > - Description needed: how to use the SideNav component. + The sidenav is a responsive menu system that usually sits on the left side of a page layout. + It will exapand to the width of its container. diff --git a/ui_framework/src/components/side_nav/_side_nav.scss b/ui_framework/src/components/side_nav/_side_nav.scss index c9510cb525e74..40e8255c76c6a 100644 --- a/ui_framework/src/components/side_nav/_side_nav.scss +++ b/ui_framework/src/components/side_nav/_side_nav.scss @@ -1,17 +1,28 @@ // These mobile children are hidden in everything but mobile view. .kuiSideNav__mobileToggle { display: none; - flex-direction: row; border-bottom: $kuiBorderThin; padding: $kuiSize $kuiSizeL; width: 100%; text-align: left; + + /** + * 1. This toggle also works with KUI link, but we need the outline + * that comes with the focus state. + */ + &:focus { + outline: none; + } } .kuiSideNav__mobileIcon { fill: $kuiColorPrimary; } +.kuiSideNav__mobileWrap { + display: flex; +} + .kuiSideNav__mobileTitle { flex-grow: 1; color: $kuiColorPrimary; @@ -22,7 +33,7 @@ * 1. Animation doesn't work against height. Need max-height instead. * We set a value larger than what is needed to fake "auto". */ - .kuiSideNav.isOpenMobile .kuiSideNav__content { + .kuiSideNav.kuiSideNav-isOpenMobile .kuiSideNav__content { visibility: visible; opacity: 1; margin: $kuiSizeL; @@ -31,7 +42,7 @@ } .kuiSideNav__mobileToggle { - display: flex; + display: block; } .kuiSideNav__content { diff --git a/ui_framework/src/components/side_nav/_side_nav_item.scss b/ui_framework/src/components/side_nav/_side_nav_item.scss index 60ece53a7cbde..ff0c48a5fd012 100644 --- a/ui_framework/src/components/side_nav/_side_nav_item.scss +++ b/ui_framework/src/components/side_nav/_side_nav_item.scss @@ -1,8 +1,8 @@ .kuiSideNavItem { + @include kuiFontSizeS; display: block; width: 100%; text-align: left; - @include kuiFontSizeS; padding: $kuiSizeXS $kuiSizeS; color: $kuiColorDarkShade; white-space: nowrap; @@ -11,12 +11,12 @@ border: $kuiBorderThin; border-color: transparent; - &.isSelected { + &.kuiSideNavItem-isSelected { + @include kuiBottomShadowSmall; color: $kuiColorSecondary; border-left: $kuiBorderThick; border-left-color: $kuiColorSecondary; background-color: $kuiColorEmptyShade; - @include kuiBottomShadowSmall; } &:hover { @@ -27,7 +27,7 @@ background-color: $kuiFocusBackgroundColor; } - &:focus:not(.isSelected) { + &:focus:not(.kuiSideNavItem-isSelected) { border: solid 1px darken($kuiFocusBackgroundColor, 10%); } } diff --git a/ui_framework/src/components/side_nav/_side_nav_title.scss b/ui_framework/src/components/side_nav/_side_nav_title.scss index bdb7fcc85b078..450e5a9c6d058 100644 --- a/ui_framework/src/components/side_nav/_side_nav_title.scss +++ b/ui_framework/src/components/side_nav/_side_nav_title.scss @@ -4,7 +4,11 @@ margin-bottom: $kuiSizeS; margin-top: $kuiSize; + /** + * 1. Only want the first title to have margin. Since buttons exist in nav + * we need to use first of type. + */ &:first-of-type { - margin-top: 0; + margin-top: 0; /* 1 */ } } diff --git a/ui_framework/src/components/side_nav/side_nav.js b/ui_framework/src/components/side_nav/side_nav.js index 1b62f47bc27b1..ed55543170aec 100644 --- a/ui_framework/src/components/side_nav/side_nav.js +++ b/ui_framework/src/components/side_nav/side_nav.js @@ -9,7 +9,7 @@ export const KuiSideNav = ({ children, isOpenMobile, className, ...rest }) => { 'kuiSideNav', className, { - 'isOpenMobile': isOpenMobile, + 'kuiSideNav-isOpenMobile': isOpenMobile, }, ); @@ -20,8 +20,16 @@ export const KuiSideNav = ({ children, isOpenMobile, className, ...rest }) => { > {/* Hidden from view, except in mobile */} {/* Hidden from view in mobile, but toggled from the button above */} diff --git a/ui_framework/src/components/side_nav/side_nav_item.js b/ui_framework/src/components/side_nav/side_nav_item.js index 896918140cb83..97ee8821d13d0 100644 --- a/ui_framework/src/components/side_nav/side_nav_item.js +++ b/ui_framework/src/components/side_nav/side_nav_item.js @@ -8,7 +8,7 @@ export const KuiSideNavItem = ({ children, isSelected, className, ...rest }) => 'kuiSideNavItem', className, { - 'isSelected' : isSelected, + 'kuiSideNavItem-isSelected' : isSelected, } ); @@ -23,4 +23,5 @@ export const KuiSideNavItem = ({ children, isSelected, className, ...rest }) => }; KuiSideNavItem.propTypes = { + isSelected: PropTypes.string, };