maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Remove unused KUI code (#42748)

Browse source 
* Remove unused KUI code

* delete a bunch of dead code

* feedback

* linting
This commit is contained in:
dave.snider@gmail.com 2019-08-06 17:50:46 -07:00 committed by GitHub
parent 1b477672c2
commit 04a9547612
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
106 changed files with 149 additions and 5842 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

431
packages/kbn-ui-framework/dist/kui_dark.css vendored
View file

@ -492,29 +492,6 @@ main {
.kuiCollapseButton:hover {
opacity: 1; }
.kuiExpression {
padding: 20px;
white-space: nowrap; }
.kuiExpressionButton {
background-color: transparent;
padding: 5px 0px;
border: none;
border-bottom: dotted 2px #343741;
font-size: 16px;
cursor: pointer; }
.kuiExpressionButton__description {
color: #7DE2D1;
text-transform: uppercase; }
.kuiExpressionButton__value {
color: #DFE5EF;
text-transform: lowercase; }
.kuiExpressionButton-isActive {
border-bottom: solid 2px #7DE2D1; }
/**
* 1. Set inline-block so this wrapper shrinks to fit the input.
*/
@ -1635,262 +1612,6 @@ main {
padding: 0;
display: none; }
/**
* 1. Allow class to be applied to `ul` and `ol` elements
*/
.kuiMenu {
padding-left: 0;
/* 1 */ }
.kuiMenu--contained {
border: 1px solid #343741; }
.kuiMenu--contained .kuiMenuItem {
padding: 6px 10px; }
/**
* 1. Allow class to be applied to `li` elements
*/
.kuiMenuItem {
list-style: none;
/* 1 */
padding: 6px 0; }
.kuiMenuItem + .kuiMenuItem {
border-top: 1px solid #343741; }
/**
* 1. Setting to inline-block guarantees the same height when applied to both
* button elements and anchor tags.
* 2. Disable for Angular.
* 3. Make the button just tall enough to fit inside an Option Layout.
*/
.kuiMenuButton {
display: inline-block;
/* 1 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
padding: 2px 10px;
/* 3 */
font-size: 12px;
font-weight: 400;
line-height: 1.5;
text-decoration: none;
border: none;
border-radius: 4px; }
.kuiMenuButton:disabled {
cursor: default;
pointer-events: none;
/* 2 */ }
.kuiMenuButton:active:enabled {
-webkit-transform: translateY(1px);
transform: translateY(1px); }
.kuiMenuButton:focus {
z-index: 1;
/* 1 */
outline: none !important;
/* 2 */
-webkit-box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #1BA9F5;
box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #1BA9F5;
/* 3 */ }
.kuiMenuButton--iconText .kuiMenuButton__icon:first-child {
margin-right: 4px; }
.kuiMenuButton--iconText .kuiMenuButton__icon:last-child {
margin-left: 4px; }
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiMenuButton--basic {
color: #DFE5EF;
background-color: #1D1E24; }
.kuiMenuButton--basic:focus {
color: #DFE5EF !important;
/* 1 */ }
.kuiMenuButton--basic:hover, .kuiMenuButton--basic:active {
/* 2 */
color: #DFE5EF !important;
/* 1 */
background-color: #25262E; }
.kuiMenuButton--basic:disabled {
color: #535966;
cursor: not-allowed; }
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiMenuButton--primary {
color: #FFF;
background-color: #1BA9F5; }
.kuiMenuButton--primary:focus {
color: #FFF !important;
/* 1 */ }
.kuiMenuButton--primary:hover, .kuiMenuButton--primary:active {
/* 2 */
color: #FFF !important;
/* 1 */
background-color: #098dd4; }
.kuiMenuButton--primary:disabled {
background-color: #535966;
cursor: not-allowed; }
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiMenuButton--danger {
color: #FFF;
background-color: #F66; }
.kuiMenuButton--danger:hover, .kuiMenuButton--danger:active {
/* 2 */
color: #FFF !important;
/* 1 */
background-color: #ff3333; }
.kuiMenuButton--danger:disabled {
color: #FFF;
background-color: #535966;
cursor: not-allowed; }
.kuiMenuButton--danger:focus {
z-index: 1;
/* 1 */
outline: none !important;
/* 2 */
-webkit-box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #F66;
box-shadow: 0 0 0 1px #1D1E24, 0 0 0 2px #F66;
/* 3 */ }
.kuiMenuButtonGroup {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
.kuiMenuButtonGroup .kuiMenuButton + .kuiMenuButton {
margin-left: 4px; }
.kuiMenuButtonGroup--alignRight {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end; }
.kuiModalOverlay {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding-bottom: 10vh;
background: rgba(52, 55, 65, 0.8); }
.kuiModal {
-webkit-box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1), 0 6px 12px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1), 0 6px 12px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
line-height: 1.5;
background-color: #1D1E24;
border: 1px solid #343741;
border-radius: 4px;
z-index: 1001;
-webkit-animation: kuiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1);
animation: kuiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1); }
.kuiModal--confirmation {
width: 450px;
min-width: auto; }
.kuiModalHeader {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 10px;
padding-left: 20px;
border-bottom: 1px solid #343741; }
.kuiModalHeader__title {
font-size: 20px; }
.kuiModalHeaderCloseButton {
display: inline-block;
/* 1 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
padding: 2px 5px;
border: 1px solid transparent;
color: #98A2B3;
background-color: transparent;
line-height: 1;
/* 2 */
font-size: 20px; }
.kuiModalHeaderCloseButton:hover {
color: #DFE5EF; }
.kuiModalBody {
padding: 20px; }
.kuiModalBodyText {
font-size: 14px; }
.kuiModalFooter {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 20px;
padding-top: 10px; }
.kuiModalFooter > * + * {
margin-left: 5px; }
@-webkit-keyframes kuiModal {
0% {
opacity: 0;
-webkit-transform: translateY(32px);
transform: translateY(32px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes kuiModal {
0% {
opacity: 0;
-webkit-transform: translateY(32px);
transform: translateY(32px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
/**
* 1. Put 10px of space between each child.
*/
@ -2090,107 +1811,6 @@ main {
.kuiPanelBody {
padding: 10px; }
.kuiPanelSimple {
-webkit-box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3), 0 1px 5px -2px rgba(0, 0, 0, 0.3);
background-color: #1D1E24;
border: 1px solid #343741;
border-radius: 4px;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.kuiPanelSimple.kuiPanelSimple--paddingSmall {
padding: 8px; }
.kuiPanelSimple.kuiPanelSimple--paddingMedium {
padding: 16px; }
.kuiPanelSimple.kuiPanelSimple--paddingLarge {
padding: 24px; }
.kuiPanelSimple.kuiPanelSimple--shadow {
-webkit-box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); }
.kuiPanelSimple.kuiPanelSimple--flexGrowZero {
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0; }
.kuiPopover {
display: inline-block;
position: relative; }
.kuiPopover.kuiPopover-isOpen .kuiPopover__panel {
opacity: 1;
visibility: visible;
margin-top: 8px;
pointer-events: auto; }
.kuiPopover__panel {
position: absolute;
z-index: 2000;
top: 100%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(8px) translateZ(0);
transform: translateX(-50%) translateY(8px) translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, margin-top cubic-bezier(0.34, 1.61, 0.7, 1) 350ms;
transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, margin-top cubic-bezier(0.34, 1.61, 0.7, 1) 350ms;
-webkit-transform-origin: center top;
transform-origin: center top;
opacity: 0;
visibility: hidden;
pointer-events: none;
margin-top: 24px; }
.kuiPopover__panel:before {
position: absolute;
content: "";
top: -16px;
height: 0;
width: 0;
left: 50%;
margin-left: -16px;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 16px solid #343741; }
.kuiPopover__panel:after {
position: absolute;
content: "";
top: -15px;
right: 0;
height: 0;
left: 50%;
margin-left: -16px;
width: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 16px solid #1D1E24; }
.kuiPopover--withTitle .kuiPopover__panel:after {
border-bottom-color: #25262E; }
.kuiPopover--anchorLeft .kuiPopover__panel {
left: 0;
-webkit-transform: translateX(0%) translateY(8px) translateZ(0);
transform: translateX(0%) translateY(8px) translateZ(0); }
.kuiPopover--anchorLeft .kuiPopover__panel:before, .kuiPopover--anchorLeft .kuiPopover__panel:after {
right: auto;
left: 16px;
margin: 0; }
.kuiPopover--anchorRight .kuiPopover__panel {
left: 100%;
-webkit-transform: translateX(-100%) translateY(8px) translateZ(0);
transform: translateX(-100%) translateY(8px) translateZ(0); }
.kuiPopover--anchorRight .kuiPopover__panel:before, .kuiPopover--anchorRight .kuiPopover__panel:after {
right: 16px;
left: auto; }
.kuiPopoverTitle {
background-color: #25262E;
border-bottom: 1px solid #343741;
padding: 12px;
font-size: 16px; }
.kuiEmptyTablePrompt {
display: -webkit-box;
display: -webkit-flex;
@ -2497,57 +2117,6 @@ main {
background-color: transparent;
border-bottom-color: transparent; }
/**
* 1. Allow container to determine font-size and line-height.
* 2. Override inherited Bootstrap styles.
*/
.kuiToggleButton {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
background-color: transparent;
border: none;
padding: 0;
font-size: inherit;
/* 1 */
line-height: inherit;
/* 1 */
color: #DFE5EF; }
.kuiToggleButton:focus {
color: #DFE5EF; }
.kuiToggleButton:active {
color: #1BA9F5 !important;
/* 2 */ }
.kuiToggleButton:hover:not(:disabled) {
color: #098dd4 !important;
/* 2 */
text-decoration: underline; }
.kuiToggleButton:disabled {
cursor: not-allowed;
opacity: .5; }
/**
* 1. Make icon a consistent width so the text doesn't get pushed around as the icon changes
* between "expand" and "collapse". Use ems to be relative to inherited font-size.
*/
.kuiToggleButton__icon {
width: 0.8em;
/* 1 */ }
.kuiTogglePanelHeader {
padding-bottom: 4px;
margin-bottom: 15px;
border-bottom: 1px solid #343741;
/**
* 1. Allow the user to click anywhere on the header, not just on the button text.
*/ }
.kuiTogglePanelHeader .kuiToggleButton {
width: 100%;
/* 1 */
text-align: left;
/* 1 */ }
.kuiToolBar {
display: -webkit-box;
display: -webkit-flex;

431
packages/kbn-ui-framework/dist/kui_light.css vendored
View file

@ -492,29 +492,6 @@ main {
.kuiCollapseButton:hover {
opacity: 1; }
.kuiExpression {
padding: 20px;
white-space: nowrap; }
.kuiExpressionButton {
background-color: transparent;
padding: 5px 0px;
border: none;
border-bottom: dotted 2px #D3DAE6;
font-size: 16px;
cursor: pointer; }
.kuiExpressionButton__description {
color: #017D73;
text-transform: uppercase; }
.kuiExpressionButton__value {
color: #343741;
text-transform: lowercase; }
.kuiExpressionButton-isActive {
border-bottom: solid 2px #017D73; }
/**
* 1. Set inline-block so this wrapper shrinks to fit the input.
*/
@ -1635,262 +1612,6 @@ main {
padding: 0;
display: none; }
/**
* 1. Allow class to be applied to `ul` and `ol` elements
*/
.kuiMenu {
padding-left: 0;
/* 1 */ }
.kuiMenu--contained {
border: 1px solid #D3DAE6; }
.kuiMenu--contained .kuiMenuItem {
padding: 6px 10px; }
/**
* 1. Allow class to be applied to `li` elements
*/
.kuiMenuItem {
list-style: none;
/* 1 */
padding: 6px 0; }
.kuiMenuItem + .kuiMenuItem {
border-top: 1px solid #D3DAE6; }
/**
* 1. Setting to inline-block guarantees the same height when applied to both
* button elements and anchor tags.
* 2. Disable for Angular.
* 3. Make the button just tall enough to fit inside an Option Layout.
*/
.kuiMenuButton {
display: inline-block;
/* 1 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
padding: 2px 10px;
/* 3 */
font-size: 12px;
font-weight: 400;
line-height: 1.5;
text-decoration: none;
border: none;
border-radius: 4px; }
.kuiMenuButton:disabled {
cursor: default;
pointer-events: none;
/* 2 */ }
.kuiMenuButton:active:enabled {
-webkit-transform: translateY(1px);
transform: translateY(1px); }
.kuiMenuButton:focus {
z-index: 1;
/* 1 */
outline: none !important;
/* 2 */
-webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #006BB4;
box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #006BB4;
/* 3 */ }
.kuiMenuButton--iconText .kuiMenuButton__icon:first-child {
margin-right: 4px; }
.kuiMenuButton--iconText .kuiMenuButton__icon:last-child {
margin-left: 4px; }
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiMenuButton--basic {
color: #343741;
background-color: #FFF; }
.kuiMenuButton--basic:focus {
color: #343741 !important;
/* 1 */ }
.kuiMenuButton--basic:hover, .kuiMenuButton--basic:active {
/* 2 */
color: #343741 !important;
/* 1 */
background-color: #F5F7FA; }
.kuiMenuButton--basic:disabled {
color: #98A2B3;
cursor: not-allowed; }
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiMenuButton--primary {
color: #FFF;
background-color: #006BB4; }
.kuiMenuButton--primary:focus {
color: #FFF !important;
/* 1 */ }
.kuiMenuButton--primary:hover, .kuiMenuButton--primary:active {
/* 2 */
color: #FFF !important;
/* 1 */
background-color: #004d81; }
.kuiMenuButton--primary:disabled {
background-color: #98A2B3;
cursor: not-allowed; }
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiMenuButton--danger {
color: #FFF;
background-color: #BD271E; }
.kuiMenuButton--danger:hover, .kuiMenuButton--danger:active {
/* 2 */
color: #FFF !important;
/* 1 */
background-color: #911e17; }
.kuiMenuButton--danger:disabled {
color: #FFF;
background-color: #98A2B3;
cursor: not-allowed; }
.kuiMenuButton--danger:focus {
z-index: 1;
/* 1 */
outline: none !important;
/* 2 */
-webkit-box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E;
box-shadow: 0 0 0 1px #FFF, 0 0 0 2px #BD271E;
/* 3 */ }
.kuiMenuButtonGroup {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
.kuiMenuButtonGroup .kuiMenuButton + .kuiMenuButton {
margin-left: 4px; }
.kuiMenuButtonGroup--alignRight {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end; }
.kuiModalOverlay {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding-bottom: 10vh;
background: rgba(255, 255, 255, 0.8); }
.kuiModal {
-webkit-box-shadow: 0 12px 24px 0 rgba(65, 78, 101, 0.1), 0 6px 12px 0 rgba(65, 78, 101, 0.1), 0 4px 4px 0 rgba(65, 78, 101, 0.1), 0 2px 2px 0 rgba(65, 78, 101, 0.1);
box-shadow: 0 12px 24px 0 rgba(65, 78, 101, 0.1), 0 6px 12px 0 rgba(65, 78, 101, 0.1), 0 4px 4px 0 rgba(65, 78, 101, 0.1), 0 2px 2px 0 rgba(65, 78, 101, 0.1);
line-height: 1.5;
background-color: #FFF;
border: 1px solid #D3DAE6;
border-radius: 4px;
z-index: 1001;
-webkit-animation: kuiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1);
animation: kuiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1); }
.kuiModal--confirmation {
width: 450px;
min-width: auto; }
.kuiModalHeader {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 10px;
padding-left: 20px;
border-bottom: 1px solid #D3DAE6; }
.kuiModalHeader__title {
font-size: 20px; }
.kuiModalHeaderCloseButton {
display: inline-block;
/* 1 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
padding: 2px 5px;
border: 1px solid transparent;
color: #69707D;
background-color: transparent;
line-height: 1;
/* 2 */
font-size: 20px; }
.kuiModalHeaderCloseButton:hover {
color: #343741; }
.kuiModalBody {
padding: 20px; }
.kuiModalBodyText {
font-size: 14px; }
.kuiModalFooter {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 20px;
padding-top: 10px; }
.kuiModalFooter > * + * {
margin-left: 5px; }
@-webkit-keyframes kuiModal {
0% {
opacity: 0;
-webkit-transform: translateY(32px);
transform: translateY(32px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes kuiModal {
0% {
opacity: 0;
-webkit-transform: translateY(32px);
transform: translateY(32px); }
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0); } }
/**
* 1. Put 10px of space between each child.
*/
@ -2090,107 +1811,6 @@ main {
.kuiPanelBody {
padding: 10px; }
.kuiPanelSimple {
-webkit-box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3);
box-shadow: 0 2px 2px -1px rgba(152, 162, 179, 0.3), 0 1px 5px -2px rgba(152, 162, 179, 0.3);
background-color: #FFF;
border: 1px solid #D3DAE6;
border-radius: 4px;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.kuiPanelSimple.kuiPanelSimple--paddingSmall {
padding: 8px; }
.kuiPanelSimple.kuiPanelSimple--paddingMedium {
padding: 16px; }
.kuiPanelSimple.kuiPanelSimple--paddingLarge {
padding: 24px; }
.kuiPanelSimple.kuiPanelSimple--shadow {
-webkit-box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); }
.kuiPanelSimple.kuiPanelSimple--flexGrowZero {
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0; }
.kuiPopover {
display: inline-block;
position: relative; }
.kuiPopover.kuiPopover-isOpen .kuiPopover__panel {
opacity: 1;
visibility: visible;
margin-top: 8px;
pointer-events: auto; }
.kuiPopover__panel {
position: absolute;
z-index: 2000;
top: 100%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(8px) translateZ(0);
transform: translateX(-50%) translateY(8px) translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, margin-top cubic-bezier(0.34, 1.61, 0.7, 1) 350ms;
transition: opacity cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, visibility cubic-bezier(0.34, 1.61, 0.7, 1) 350ms, margin-top cubic-bezier(0.34, 1.61, 0.7, 1) 350ms;
-webkit-transform-origin: center top;
transform-origin: center top;
opacity: 0;
visibility: hidden;
pointer-events: none;
margin-top: 24px; }
.kuiPopover__panel:before {
position: absolute;
content: "";
top: -16px;
height: 0;
width: 0;
left: 50%;
margin-left: -16px;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 16px solid #D3DAE6; }
.kuiPopover__panel:after {
position: absolute;
content: "";
top: -15px;
right: 0;
height: 0;
left: 50%;
margin-left: -16px;
width: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 16px solid #FFF; }
.kuiPopover--withTitle .kuiPopover__panel:after {
border-bottom-color: #F5F7FA; }
.kuiPopover--anchorLeft .kuiPopover__panel {
left: 0;
-webkit-transform: translateX(0%) translateY(8px) translateZ(0);
transform: translateX(0%) translateY(8px) translateZ(0); }
.kuiPopover--anchorLeft .kuiPopover__panel:before, .kuiPopover--anchorLeft .kuiPopover__panel:after {
right: auto;
left: 16px;
margin: 0; }
.kuiPopover--anchorRight .kuiPopover__panel {
left: 100%;
-webkit-transform: translateX(-100%) translateY(8px) translateZ(0);
transform: translateX(-100%) translateY(8px) translateZ(0); }
.kuiPopover--anchorRight .kuiPopover__panel:before, .kuiPopover--anchorRight .kuiPopover__panel:after {
right: 16px;
left: auto; }
.kuiPopoverTitle {
background-color: #F5F7FA;
border-bottom: 1px solid #D3DAE6;
padding: 12px;
font-size: 16px; }
.kuiEmptyTablePrompt {
display: -webkit-box;
display: -webkit-flex;
@ -2497,57 +2117,6 @@ main {
background-color: transparent;
border-bottom-color: transparent; }
/**
* 1. Allow container to determine font-size and line-height.
* 2. Override inherited Bootstrap styles.
*/
.kuiToggleButton {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
background-color: transparent;
border: none;
padding: 0;
font-size: inherit;
/* 1 */
line-height: inherit;
/* 1 */
color: #343741; }
.kuiToggleButton:focus {
color: #343741; }
.kuiToggleButton:active {
color: #006BB4 !important;
/* 2 */ }
.kuiToggleButton:hover:not(:disabled) {
color: #004d81 !important;
/* 2 */
text-decoration: underline; }
.kuiToggleButton:disabled {
cursor: not-allowed;
opacity: .5; }
/**
* 1. Make icon a consistent width so the text doesn't get pushed around as the icon changes
* between "expand" and "collapse". Use ems to be relative to inherited font-size.
*/
.kuiToggleButton__icon {
width: 0.8em;
/* 1 */ }
.kuiTogglePanelHeader {
padding-bottom: 4px;
margin-bottom: 15px;
border-bottom: 1px solid #D3DAE6;
/**
* 1. Allow the user to click anywhere on the header, not just on the button text.
*/ }
.kuiTogglePanelHeader .kuiToggleButton {
width: 100%;
/* 1 */
text-align: left;
/* 1 */ }
.kuiToolBar {
display: -webkit-box;
display: -webkit-flex;

266
packages/kbn-ui-framework/doc_site/src/services/routes/routes.js
View file

@ -19,184 +19,136 @@
import Slugify from '../string/slugify';
import BarExample
from '../../views/bar/bar_example';
import BarExample from '../../views/bar/bar_example';
import ButtonExample
from '../../views/button/button_example';
import ButtonExample from '../../views/button/button_example';
import CollapseButtonExample
from '../../views/collapse_button/collapse_button_example';
import CollapseButtonExample from '../../views/collapse_button/collapse_button_example';
import ExpressionExample
from '../../views/expression/expression_example';
import FormExample
from '../../views/form/form_example';
import FormExample from '../../views/form/form_example';
import FormLayoutExample
from '../../views/form_layout/form_layout_example';
import FormLayoutExample from '../../views/form_layout/form_layout_example';
import IconExample
from '../../views/icon/icon_example';
import IconExample from '../../views/icon/icon_example';
import InfoPanelExample
from '../../views/info_panel/info_panel_example';
import InfoPanelExample from '../../views/info_panel/info_panel_example';
import LinkExample
from '../../views/link/link_example';
import LinkExample from '../../views/link/link_example';
import LocalNavExample
from '../../views/local_nav/local_nav_example';
import LocalNavExample from '../../views/local_nav/local_nav_example';
import MenuExample
from '../../views/menu/menu_example';
import PagerExample from '../../views/pager/pager_example';
import MenuButtonExample
from '../../views/menu_button/menu_button_example';
import PanelExample from '../../views/panel/panel_example';
import ModalExample
from '../../views/modal/modal_example';
import EmptyTablePromptExample from '../../views/empty_table_prompt/empty_table_prompt_example';
import PagerExample
from '../../views/pager/pager_example';
import StatusTextExample from '../../views/status_text/status_text_example';
import PanelExample
from '../../views/panel/panel_example';
import TableExample from '../../views/table/table_example';
import PanelSimpleExample
from '../../views/panel_simple/panel_simple_example';
import TabsExample from '../../views/tabs/tabs_example';
import PopoverExample
from '../../views/popover/popover_example';
import ToolBarExample from '../../views/tool_bar/tool_bar_example';
import EmptyTablePromptExample
from '../../views/empty_table_prompt/empty_table_prompt_example';
import TypographyExample from '../../views/typography/typography_example';
import StatusTextExample
from '../../views/status_text/status_text_example';
import VerticalRhythmExample from '../../views/vertical_rhythm/vertical_rhythm_example';
import TableExample
from '../../views/table/table_example';
import TabsExample
from '../../views/tabs/tabs_example';
import ToggleButtonExample
from '../../views/toggle_button/toggle_button_example';
import ToolBarExample
from '../../views/tool_bar/tool_bar_example';
import TypographyExample
from '../../views/typography/typography_example';
import VerticalRhythmExample
from '../../views/vertical_rhythm/vertical_rhythm_example';
import ViewSandbox
from '../../views/view/view_sandbox';
import ViewSandbox from '../../views/view/view_sandbox';
// Component route names should match the component name exactly.
const components = [{
name: 'Bar',
component: BarExample,
hasReact: true,
}, {
name: 'Button',
component: ButtonExample,
hasReact: true,
}, {
name: 'CollapseButton',
component: CollapseButtonExample,
hasReact: true,
}, {
name: 'CollapseButton',
component: CollapseButtonExample,
hasReact: true,
}, {
name: 'EmptyTablePrompt',
component: EmptyTablePromptExample,
hasReact: true,
}, {
name: 'Expression',
component: ExpressionExample,
hasReact: true,
}, {
name: 'Form',
component: FormExample,
}, {
name: 'FormLayout',
component: FormLayoutExample,
hasReact: true,
}, {
name: 'Icon',
component: IconExample,
}, {
name: 'InfoPanel',
component: InfoPanelExample,
}, {
name: 'Link',
component: LinkExample,
}, {
name: 'LocalNav',
component: LocalNavExample,
hasReact: true,
}, {
name: 'Menu',
component: MenuExample,
hasReact: true,
}, {
name: 'MenuButton',
component: MenuButtonExample,
}, {
name: 'Modal',
component: ModalExample,
hasReact: true,
}, {
name: 'Pager',
component: PagerExample,
hasReact: true,
}, {
name: 'Panel',
component: PanelExample,
}, {
name: 'PanelSimple',
component: PanelSimpleExample,
hasReact: true,
}, {
name: 'Popover',
component: PopoverExample,
hasReact: true,
}, {
name: 'StatusText',
component: StatusTextExample,
}, {
name: 'Table',
component: TableExample,
hasReact: true,
}, {
name: 'Tabs',
component: TabsExample,
hasReact: true,
}, {
name: 'ToggleButton',
component: ToggleButtonExample,
}, {
name: 'ToolBar',
component: ToolBarExample,
hasReact: true,
}, {
name: 'Typography',
component: TypographyExample,
}, {
name: 'VerticalRhythm',
component: VerticalRhythmExample,
}];
const components = [
{
name: 'Bar',
component: BarExample,
hasReact: true,
},
{
name: 'Button',
component: ButtonExample,
hasReact: true,
},
{
name: 'CollapseButton',
component: CollapseButtonExample,
hasReact: true,
},
{
name: 'EmptyTablePrompt',
component: EmptyTablePromptExample,
hasReact: true,
},
{
name: 'Form',
component: FormExample,
},
{
name: 'FormLayout',
component: FormLayoutExample,
hasReact: true,
},
{
name: 'Icon',
component: IconExample,
},
{
name: 'InfoPanel',
component: InfoPanelExample,
},
{
name: 'Link',
component: LinkExample,
},
{
name: 'LocalNav',
component: LocalNavExample,
hasReact: true,
},
{
name: 'Pager',
component: PagerExample,
hasReact: true,
},
{
name: 'Panel',
component: PanelExample,
},
{
name: 'StatusText',
component: StatusTextExample,
},
{
name: 'Table',
component: TableExample,
hasReact: true,
},
{
name: 'Tabs',
component: TabsExample,
hasReact: true,
},
{
name: 'ToolBar',
component: ToolBarExample,
hasReact: true,
},
{
name: 'Typography',
component: TypographyExample,
},
{
name: 'VerticalRhythm',
component: VerticalRhythmExample,
},
];
const sandboxes = [{
name: 'View',
component: ViewSandbox,
}];
const sandboxes = [
{
name: 'View',
component: ViewSandbox,
},
];
const allRoutes = components.concat(sandboxes);

220
packages/kbn-ui-framework/doc_site/src/views/expression/expression.js
View file

@ -1,220 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import {
KuiExpression,
KuiExpressionButton,
KuiFieldGroup,
KuiFieldGroupSection,
KuiPopover,
KuiPopoverTitle,
} from '../../../../components';
class KuiExpressionItemExample extends React.Component {
constructor(props) {
super(props);
this.state = {
example1: {
isOpen: false,
value: 'count()'
},
example2: {
object: 'A',
value: '100',
description: 'Is above'
},
};
}
openExample1 = () => {
this.setState({
example1: {
...this.state.example1,
isOpen: true,
},
example2: {
...this.state.example2,
isOpen: false,
},
});
};
closeExample1 = () => {
this.setState({
example1: {
...this.state.example1,
isOpen: false,
},
});
};
openExample2 = () => {
this.setState({
example1: {
...this.state.example1,
isOpen: false,
},
example2: {
...this.state.example2,
isOpen: true,
},
});
};
closeExample2 = () => {
this.setState({
example2: {
...this.state.example2,
isOpen: false,
},
});
};
changeExample1 = (event) => {
this.setState({ example1: { ...this.state.example1, value: event.target.value } });
}
changeExample2Object = (event) => {
this.setState({ example2: { ...this.state.example2, object: event.target.value } });
}
changeExample2Value = (event) => {
this.setState({ example2: { ...this.state.example2, value: event.target.value } });
}
changeExample2Description = (event) => {
this.setState({ example2: { ...this.state.example2, description: event.target.value } });
}
render() {
// Rise the popovers above GuidePageSideNav
const popoverStyle = { zIndex: '200' };
return (
<KuiFieldGroup>
<KuiFieldGroupSection>
<KuiPopover
button={(
<KuiExpressionButton
description="when"
buttonValue={this.state.example1.value}
isActive={this.state.example1.isOpen}
onClick={this.openExample1}
/>
)}
isOpen={this.state.example1.isOpen}
closePopover={this.closeExample1}
panelPaddingSize="none"
withTitle
>
{this.getPopover1(popoverStyle)}
</KuiPopover>
</KuiFieldGroupSection>
<KuiFieldGroupSection>
<KuiPopover
button={(
<KuiExpressionButton
description={this.state.example2.description}
buttonValue={this.state.example2.value}
isActive={this.state.example2.isOpen}
onClick={this.openExample2}
/>
)}
isOpen={this.state.example2.isOpen}
closePopover={this.closeExample2}
panelPaddingSize="none"
withTitle
anchorPosition="left"
>
{this.getPopover2(popoverStyle)}
</KuiPopover>
</KuiFieldGroupSection>
</KuiFieldGroup>
);
}
getPopover1(popoverStyle) {
return (
<div style={popoverStyle}>
<KuiPopoverTitle>When</KuiPopoverTitle>
<KuiExpression>
<select
className="kuiSelect"
value={this.state.example1.value}
onChange={this.changeExample1}
>
<option label="count()">count()</option>
<option label="average()">average()</option>
<option label="sum()">sum()</option>
<option label="median()">median()</option>
<option label="min()">min()</option>
<option label="max()">max()</option>
</select>
</KuiExpression>
</div>
);
}
getPopover2(popoverStyle) {
return (
<div style={popoverStyle}>
<KuiPopoverTitle>{this.state.example2.description}</KuiPopoverTitle>
<KuiExpression>
<select
className="kuiSelect"
value={this.state.example2.object}
onChange={this.changeExample2Object}
>
<option label="A">A</option>
<option label="B">B</option>
<option label="C">C</option>
</select>
<input
type="text"
className="kuiTextInput kuiTextInput--small"
value={this.state.example2.value}
onChange={this.changeExample2Value}
/>
<select
className="kuiSelect kuiSelect--large"
value={this.state.example2.description}
onChange={this.changeExample2Description}
>
<option label="Is above">Is above</option>
<option label="Is below">Is below</option>
<option label="Is exactly">Is exactly</option>
</select>
</KuiExpression>
</div>
);
}
}
KuiExpressionItemExample.propTypes = {
defaultActiveButton: PropTypes.string.isRequired
};
export default KuiExpressionItemExample;

59
packages/kbn-ui-framework/doc_site/src/views/expression/expression_example.js
View file

@ -1,59 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable import/no-duplicates */
import React from 'react';
import { renderToHtml } from '../../services';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import Expression from './expression';
import expressionSource from '!!raw-loader!./expression';
const expressionHtml = renderToHtml(Expression, { defaultActiveButton: 'example2' });
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="ExpressionButton"
source={[{
type: GuideSectionTypes.JS,
code: expressionSource,
}, {
type: GuideSectionTypes.HTML,
code: expressionHtml,
}]}
>
<GuideText>
ExpressionButtons allow you to compress a complicated form into a small space.
</GuideText>
<GuideDemo>
<Expression defaultActiveButton="example2"/>
</GuideDemo>
</GuideSection>
</GuidePage>
);

43
packages/kbn-ui-framework/doc_site/src/views/menu/menu.js
View file

@ -1,43 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import {
KuiMenu,
KuiMenuItem,
} from '../../../../components';
export default () => (
<div>
<KuiMenu>
<KuiMenuItem>
<p className="kuiText">Item A</p>
</KuiMenuItem>
<KuiMenuItem>
<p className="kuiText">Item B</p>
</KuiMenuItem>
<KuiMenuItem>
<p className="kuiText">Item C</p>
</KuiMenuItem>
</KuiMenu>
</div>
);

43
packages/kbn-ui-framework/doc_site/src/views/menu/menu_contained.js
View file

@ -1,43 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import {
KuiMenu,
KuiMenuItem,
} from '../../../../components';
export default () => (
<div>
<KuiMenu contained>
<KuiMenuItem>
<p className="kuiText">Item A</p>
</KuiMenuItem>
<KuiMenuItem>
<p className="kuiText">Item B</p>
</KuiMenuItem>
<KuiMenuItem>
<p className="kuiText">Item C</p>
</KuiMenuItem>
</KuiMenu>
</div>
);

73
packages/kbn-ui-framework/doc_site/src/views/menu/menu_example.js
View file

@ -1,73 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable import/no-duplicates */
import React from 'react';
import { renderToHtml } from '../../services';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
} from '../../components';
import Menu from './menu';
import menuSource from '!!raw-loader!./menu';
const menuHtml = renderToHtml(Menu);
import MenuContained from './menu_contained';
import menuContainedSource from '!!raw-loader!./menu_contained';
const menuContainedHtml = renderToHtml(MenuContained);
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Menu"
source={[{
type: GuideSectionTypes.JS,
code: menuSource,
}, {
type: GuideSectionTypes.HTML,
code: menuHtml,
}]}
>
<GuideDemo>
<Menu />
</GuideDemo>
</GuideSection>
<GuideSection
title="Menu, contained"
source={[{
type: GuideSectionTypes.JS,
code: menuContainedSource,
}, {
type: GuideSectionTypes.HTML,
code: menuContainedHtml,
}]}
>
<GuideDemo>
<MenuContained />
</GuideDemo>
</GuideSection>
</GuidePage>
);

9
packages/kbn-ui-framework/doc_site/src/views/menu_button/menu_button_basic.html
View file

@ -1,9 +0,0 @@
<button class="kuiMenuButton kuiMenuButton--basic">
Basic button
</button>
<hr class="guideBreak">
<button disabled class="kuiMenuButton kuiMenuButton--basic">
Basic button, disabled
</button>

9
packages/kbn-ui-framework/doc_site/src/views/menu_button/menu_button_danger.html
View file

@ -1,9 +0,0 @@
<button class="kuiMenuButton kuiMenuButton--danger">
Danger button
</button>
<hr class="guideBreak">
<button disabled class="kuiMenuButton kuiMenuButton--danger">
Danger button, disabled
</button>

17
packages/kbn-ui-framework/doc_site/src/views/menu_button/menu_button_elements.html
View file

@ -1,17 +0,0 @@
<button class="kuiMenuButton kuiMenuButton--basic">
Button element
</button>
&nbsp;
<input
type="submit"
class="kuiMenuButton kuiMenuButton--basic"
value="Submit input element"
>
&nbsp;
<a href="#" class="kuiMenuButton kuiMenuButton--basic">
Anchor element
</a>

119
packages/kbn-ui-framework/doc_site/src/views/menu_button/menu_button_example.js
View file

@ -1,119 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import basicHtml from './menu_button_basic.html';
import primaryHtml from './menu_button_primary.html';
import dangerHtml from './menu_button_danger.html';
import withIconHtml from './menu_button_with_icon.html';
import groupHtml from './menu_button_group.html';
import elementsHtml from './menu_button_elements.html';
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Basic MenuButton"
source={[{
type: GuideSectionTypes.HTML,
code: basicHtml,
}]}
>
<GuideDemo
html={basicHtml}
/>
</GuideSection>
<GuideSection
title="Primary MenuButton"
source={[{
type: GuideSectionTypes.HTML,
code: primaryHtml,
}]}
>
<GuideDemo
html={primaryHtml}
/>
</GuideSection>
<GuideSection
title="Danger MenuButton"
source={[{
type: GuideSectionTypes.HTML,
code: dangerHtml,
}]}
>
<GuideDemo
html={dangerHtml}
/>
</GuideSection>
<GuideSection
title="MenuButton with Icon"
source={[{
type: GuideSectionTypes.HTML,
code: withIconHtml,
}]}
>
<GuideText>
You can use a MenuButton with an Icon, with or without text.
</GuideText>
<GuideDemo
html={withIconHtml}
/>
</GuideSection>
<GuideSection
title="MenuButtonGroup"
source={[{
type: GuideSectionTypes.HTML,
code: groupHtml,
}]}
>
<GuideDemo
html={groupHtml}
/>
</GuideSection>
<GuideSection
title="Element variations"
source={[{
type: GuideSectionTypes.HTML,
code: elementsHtml,
}]}
>
<GuideText>
You can create a MenuButton using a button element, link, or input[type=&ldquo;submit&rdquo;].
</GuideText>
<GuideDemo
html={elementsHtml}
/>
</GuideSection>
</GuidePage>
);

19
packages/kbn-ui-framework/doc_site/src/views/menu_button/menu_button_group.html
View file

@ -1,19 +0,0 @@
<div class="kuiMenuButtonGroup">
<button class="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button class="kuiMenuButton kuiMenuButton--basic">
Duplicate
</button>
<button class="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
<hr class="guideBreak">
<div class="kuiMenuButtonGroup">
<button class="kuiMenuButton kuiMenuButton--basic">
Button group with one button
</button>
</div>

9
packages/kbn-ui-framework/doc_site/src/views/menu_button/menu_button_primary.html
View file

@ -1,9 +0,0 @@
<button class="kuiMenuButton kuiMenuButton--primary">
Primary button
</button>
<hr class="guideBreak">
<button disabled class="kuiMenuButton kuiMenuButton--primary">
Primary button, disabled
</button>

17
packages/kbn-ui-framework/doc_site/src/views/menu_button/menu_button_with_icon.html
View file

@ -1,17 +0,0 @@
<button class="kuiMenuButton kuiMenuButton--basic kuiMenuButton--iconText">
<span class="kuiMenuButton__icon kuiIcon fa-gear"></span>
<span>Settings</span>
</button>
<hr class="guideBreak">
<button class="kuiMenuButton kuiMenuButton--basic kuiMenuButton--iconText">
<span>Next</span>
<span class="kuiMenuButton__icon kuiIcon fa-chevron-right"></span>
</button>
<hr class="guideBreak">
<button class="kuiMenuButton kuiMenuButton--basic" aria-label="Settings">
<span class="kuiMenuButton__icon kuiIcon fa-gear"></span>
</button>

82
packages/kbn-ui-framework/doc_site/src/views/modal/confirm_modal.js
View file

@ -1,82 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, {
Component,
} from 'react';
import {
KuiButton,
KuiConfirmModal,
KuiModalOverlay,
KUI_MODAL_CONFIRM_BUTTON,
} from '../../../../components';
export class ConfirmModalExample extends Component {
constructor(props) {
super(props);
this.state = {
isModalVisible: false,
};
this.closeModal = this.closeModal.bind(this);
this.showModal = this.showModal.bind(this);
}
closeModal() {
this.setState({ isModalVisible: false });
}
showModal() {
this.setState({ isModalVisible: true });
}
render() {
let modal;
if (this.state.isModalVisible) {
modal = (
<KuiModalOverlay>
<KuiConfirmModal
title="Do this thing"
onCancel={this.closeModal}
onConfirm={this.closeModal}
cancelButtonText="No, don't do it"
confirmButtonText="Yes, do it"
defaultFocusedButton={KUI_MODAL_CONFIRM_BUTTON}
>
<p className="kuiText">You&rsquo;re about to do something.</p>
<p className="kuiText">Are you sure you want to do this?</p>
</KuiConfirmModal>
</KuiModalOverlay>
);
}
return (
<div>
<KuiButton onClick={this.showModal}>
Show ConfirmModal
</KuiButton>
{modal}
</div>
);
}
}

102
packages/kbn-ui-framework/doc_site/src/views/modal/modal.js
View file

@ -1,102 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, {
Component,
} from 'react';
import {
KuiButton,
KuiModal,
KuiModalBody,
KuiModalFooter,
KuiModalHeader,
KuiModalHeaderTitle,
KuiModalOverlay,
} from '../../../../components';
export class ModalExample extends Component {
constructor(props) {
super(props);
this.state = {
isModalVisible: false,
};
}
closeModal = () => {
this.setState({ isModalVisible: false });
};
showModal = () => {
this.setState({ isModalVisible: true });
};
render() {
let modal;
if (this.state.isModalVisible) {
modal = (
<KuiModalOverlay>
<KuiModal
onClose={this.closeModal}
style={{ width: '800px' }}
>
<KuiModalHeader>
<KuiModalHeaderTitle >
Modal
</KuiModalHeaderTitle>
</KuiModalHeader>
<KuiModalBody>
<p className="kuiText">
You can put anything you want in here!
</p>
</KuiModalBody>
<KuiModalFooter>
<KuiButton
buttonType="hollow"
onClick={this.closeModal}
>
Cancel
</KuiButton>
<KuiButton
buttonType="primary"
onClick={this.closeModal}
>
Save
</KuiButton>
</KuiModalFooter>
</KuiModal>
</KuiModalOverlay>
);
}
return (
<div>
<KuiButton onClick={this.showModal}>
Show Modal
</KuiButton>
{modal}
</div>
);
}
}

81
packages/kbn-ui-framework/doc_site/src/views/modal/modal_example.js
View file

@ -1,81 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable import/no-duplicates */
import React from 'react';
import { renderToHtml } from '../../services';
import {
GuideCode,
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import { ModalExample } from './modal';
import modalSource from '!!raw-loader!./modal'; // eslint-disable-line import/default
const modalHtml = renderToHtml(ModalExample);
import { ConfirmModalExample } from './confirm_modal';
import confirmModalSource from '!!raw-loader!./confirm_modal'; // eslint-disable-line import/default
const confirmModalHtml = renderToHtml(ConfirmModalExample);
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Confirmation Modal"
source={[{
type: GuideSectionTypes.JS,
code: modalSource,
}, {
type: GuideSectionTypes.HTML,
code: modalHtml,
}]}
>
<GuideText>
Use a <GuideCode>KuiModal</GuideCode> to temporarily escape the current UX and create
another UX within it.
</GuideText>
<GuideDemo>
<ModalExample />
</GuideDemo>
</GuideSection>
<GuideSection
title="Pop up Confirmation Modal with Overlay"
source={[{
type: GuideSectionTypes.JS,
code: confirmModalSource,
}, {
type: GuideSectionTypes.HTML,
code: confirmModalHtml,
}]}
>
<GuideDemo>
<ConfirmModalExample />
</GuideDemo>
</GuideSection>
</GuidePage>
);

56
packages/kbn-ui-framework/doc_site/src/views/panel_simple/panel_simple.js
View file

@ -1,56 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import {
KuiPanelSimple,
} from '../../../../components';
export default () => (
<div>
<KuiPanelSimple paddingSize="none">
sizePadding=&quot;none&quot;
</KuiPanelSimple>
<br />
<KuiPanelSimple paddingSize="s">
sizePadding=&quot;s&quot;
</KuiPanelSimple>
<br />
<KuiPanelSimple paddingSize="m">
sizePadding=&quot;m&quot;
</KuiPanelSimple>
<br />
<KuiPanelSimple paddingSize="l">
sizePadding=&quot;l&quot;
</KuiPanelSimple>
<br />
<KuiPanelSimple paddingSize="l" hasShadow>
sizePadding=&quot;l&quot;, hasShadow
</KuiPanelSimple>
</div>
);

64
packages/kbn-ui-framework/doc_site/src/views/panel_simple/panel_simple_example.js
View file

@ -1,64 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable import/no-duplicates */
import React from 'react';
import { Link } from 'react-router';
import { renderToHtml } from '../../services';
import {
GuideCode,
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import PanelSimple from './panel_simple';
import panelSimpleSource from '!!raw-loader!./panel_simple';
const panelSimpleHtml = renderToHtml(PanelSimple);
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="PanelSimple"
source={[{
type: GuideSectionTypes.JS,
code: panelSimpleSource,
}, {
type: GuideSectionTypes.HTML,
code: panelSimpleHtml,
}]}
>
<GuideText>
<GuideCode>PanelSimple</GuideCode> is a simple wrapper component to add
depth to a contained layout. It it commonly used as a base for
other larger components like <Link className="guideLink" to="/popover">Popover</Link>.
</GuideText>
<GuideDemo>
<PanelSimple />
</GuideDemo>
</GuideSection>
</GuidePage>
);

68
packages/kbn-ui-framework/doc_site/src/views/popover/popover.js
View file

@ -1,68 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, {
Component,
} from 'react';
import {
KuiPopover,
KuiButton,
} from '../../../../components';
export default class extends Component {
constructor(props) {
super(props);
this.state = {
isPopoverOpen: false,
};
}
onButtonClick() {
this.setState({
isPopoverOpen: !this.state.isPopoverOpen,
});
}
closePopover() {
this.setState({
isPopoverOpen: false,
});
}
render() {
const button = (
<KuiButton buttonType="basic" onClick={this.onButtonClick.bind(this)}>
Show popover
</KuiButton>
);
return (
<KuiPopover
ownFocus
button={button}
isOpen={this.state.isPopoverOpen}
closePopover={this.closePopover.bind(this)}
>
<div style={{ width: '300px' }}>Popover content that&rsquo;s wider than the default width</div>
</KuiPopover>
);
}
}

98
packages/kbn-ui-framework/doc_site/src/views/popover/popover_anchor_position.js
View file

@ -1,98 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, {
Component,
} from 'react';
import {
KuiPopover,
KuiButton,
} from '../../../../components';
export default class extends Component {
constructor(props) {
super(props);
this.state = {
isPopoverOpen1: false,
isPopoverOpen2: false,
};
}
onButtonClick1() {
this.setState({
isPopoverOpen1: !this.state.isPopoverOpen1,
});
}
closePopover1() {
this.setState({
isPopoverOpen1: false,
});
}
onButtonClick2() {
this.setState({
isPopoverOpen2: !this.state.isPopoverOpen2,
});
}
closePopover2() {
this.setState({
isPopoverOpen2: false,
});
}
render() {
return (
<div>
<KuiPopover
ownFocus
button={(
<KuiButton buttonType="basic" onClick={this.onButtonClick1.bind(this)}>
Popover anchored to the right.
</KuiButton>
)}
isOpen={this.state.isPopoverOpen1}
closePopover={this.closePopover1.bind(this)}
anchorPosition="right"
>
Popover content
</KuiPopover>
&nbsp;
<KuiPopover
ownFocus
button={(
<KuiButton buttonType="basic" onClick={this.onButtonClick2.bind(this)}>
Popover anchored to the left.
</KuiButton>
)}
isOpen={this.state.isPopoverOpen2}
closePopover={this.closePopover2.bind(this)}
anchorPosition="left"
>
Popover content
</KuiPopover>
</div>
);
}
}

67
packages/kbn-ui-framework/doc_site/src/views/popover/popover_body_class_name.js
View file

@ -1,67 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, {
Component,
} from 'react';
import {
KuiPopover,
KuiButton
} from '../../../../components';
export default class extends Component {
constructor(props) {
super(props);
this.state = {
isPopoverOpen: false,
};
}
onButtonClick() {
this.setState({
isPopoverOpen: !this.state.isPopoverOpen,
});
}
closePopover() {
this.setState({
isPopoverOpen: false,
});
}
render() {
return (
<KuiPopover
ownFocus
button={(
<KuiButton buttonType="basic" onClick={this.onButtonClick.bind(this)}>
Custom class
</KuiButton>
)}
isOpen={this.state.isPopoverOpen}
closePopover={this.closePopover.bind(this)}
bodyClassName="yourClassNameHere"
>
It&rsquo;s hard to tell but there&rsquo;s a custom class on this element
</KuiPopover>
);
}
}

160
packages/kbn-ui-framework/doc_site/src/views/popover/popover_example.js
View file

@ -1,160 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable import/no-duplicates */
import React from 'react';
import { renderToHtml } from '../../services';
import {
GuideCode,
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import Popover from './popover';
import popoverSource from '!!raw-loader!./popover';
const popoverHtml = renderToHtml(Popover);
import TrapFocus from './trap_focus';
import trapFocusSource from '!!raw-loader!./trap_focus';
const trapFocusHtml = renderToHtml(TrapFocus);
import PopoverAnchorPosition from './popover_anchor_position';
import popoverAnchorPositionSource from '!!raw-loader!./popover_anchor_position';
const popoverAnchorPositionHtml = renderToHtml(PopoverAnchorPosition);
import PopoverPanelClassName from './popover_panel_class_name';
import popoverPanelClassNameSource from '!!raw-loader!./popover_panel_class_name';
const popoverPanelClassNameHtml = renderToHtml(PopoverPanelClassName);
import PopoverWithTitle from './popover_with_title';
import popoverWithTitleSource from '!!raw-loader!./popover_with_title';
const popoverWithTitleHtml = renderToHtml(PopoverWithTitle);
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Popover"
source={[{
type: GuideSectionTypes.JS,
code: popoverSource,
}, {
type: GuideSectionTypes.HTML,
code: popoverHtml,
}]}
>
<GuideText>
Use the Popover component to hide controls or options behind a clickable element.
</GuideText>
<GuideDemo>
<Popover />
</GuideDemo>
</GuideSection>
<GuideSection
title="Trap focus"
source={[{
type: GuideSectionTypes.JS,
code: trapFocusSource,
}, {
type: GuideSectionTypes.HTML,
code: trapFocusHtml,
}]}
>
<GuideText>
If the Popover should be responsible for trapping the focus within itself (as opposed
to a child component), then you should set <GuideCode>ownFocus</GuideCode>.
</GuideText>
<GuideDemo>
<TrapFocus />
</GuideDemo>
</GuideSection>
<GuideSection
title="Popover with title"
source={[{
type: GuideSectionTypes.JS,
code: popoverWithTitleSource,
}, {
type: GuideSectionTypes.HTML,
code: popoverWithTitleHtml,
}]}
>
<GuideText>
Popovers often have need for titling. This can be applied through
a prop or used separately as its own component
KuiPopoverTitle nested somewhere in the child
prop.
</GuideText>
<GuideDemo>
<PopoverWithTitle />
</GuideDemo>
</GuideSection>
<GuideSection
title="Anchor position"
source={[{
type: GuideSectionTypes.JS,
code: popoverAnchorPositionSource,
}, {
type: GuideSectionTypes.HTML,
code: popoverAnchorPositionHtml,
}]}
>
<GuideText>
The alignment and arrow on your popover can be set with
the anchorPosition prop.
</GuideText>
<GuideDemo>
<PopoverAnchorPosition />
</GuideDemo>
</GuideSection>
<GuideSection
title="Panel class name and padding size"
source={[{
type: GuideSectionTypes.JS,
code: popoverPanelClassNameSource,
}, {
type: GuideSectionTypes.HTML,
code: popoverPanelClassNameHtml,
}]}
>
<GuideText>
Use the panelPaddingSize prop to adjust the padding
on the panel within the panel. Use the panelClassName
prop to pass a custom class to the panel.
inside a popover.
</GuideText>
<GuideDemo>
<PopoverPanelClassName />
</GuideDemo>
</GuideSection>
</GuidePage>
);

68
packages/kbn-ui-framework/doc_site/src/views/popover/popover_panel_class_name.js
View file

@ -1,68 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, {
Component,
} from 'react';
import {
KuiPopover,
KuiButton,
} from '../../../../components';
export default class extends Component {
constructor(props) {
super(props);
this.state = {
isPopoverOpen: false,
};
}
onButtonClick() {
this.setState({
isPopoverOpen: !this.state.isPopoverOpen,
});
}
closePopover() {
this.setState({
isPopoverOpen: false,
});
}
render() {
return (
<KuiPopover
ownFocus
button={(
<KuiButton buttonType="basic" onClick={this.onButtonClick.bind(this)}>
Turn padding off and apply a custom class
</KuiButton>
)}
isOpen={this.state.isPopoverOpen}
closePopover={this.closePopover.bind(this)}
panelClassName="yourClassNameHere"
panelPaddingSize="none"
>
This should have no padding, and if you inspect, also a custom class.
</KuiPopover>
);
}
}

79
packages/kbn-ui-framework/doc_site/src/views/popover/popover_with_title.js
View file

@ -1,79 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, {
Component,
} from 'react';
import {
KuiPopover,
KuiPopoverTitle,
KuiButton,
} from '../../../../components';
export default class extends Component {
constructor(props) {
super(props);
this.state = {
isPopoverOpen: false,
};
}
onButtonClick() {
this.setState({
isPopoverOpen: !this.state.isPopoverOpen,
});
}
closePopover() {
this.setState({
isPopoverOpen: false,
});
}
render() {
const button = (
<KuiButton
buttonType="basic"
onClick={this.onButtonClick.bind(this)}
>
Show popover with Title
</KuiButton>
);
return (
<KuiPopover
ownFocus
button={button}
isOpen={this.state.isPopoverOpen}
closePopover={this.closePopover.bind(this)}
panelPaddingSize="none"
withTitle
>
<div style={{ width: '300px' }}>
<KuiPopoverTitle>Hello, I&rsquo;m a popover title</KuiPopoverTitle>
<p className="kuiText" style={{ padding: 20 }}>
Popover content that&rsquo;s wider than the default width
</p>
</div>
</KuiPopover>
);
}
}

96
packages/kbn-ui-framework/doc_site/src/views/popover/trap_focus.js
View file

@ -1,96 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, {
Component,
} from 'react';
import {
KuiButton,
KuiFieldGroup,
KuiFieldGroupSection,
KuiPopover,
} from '../../../../components';
export default class extends Component {
constructor(props) {
super(props);
this.state = {
isPopoverOpen: false,
};
}
onButtonClick() {
this.setState({
isPopoverOpen: !this.state.isPopoverOpen,
});
}
closePopover() {
this.setState({
isPopoverOpen: false,
});
}
render() {
const button = (
<KuiButton buttonType="basic" onClick={this.onButtonClick.bind(this)}>
Show popover
</KuiButton>
);
return (
<KuiPopover
ownFocus
button={button}
isOpen={this.state.isPopoverOpen}
closePopover={this.closePopover.bind(this)}
>
<div style={{ width: '300px' }}>
<div className="kuiVerticalRhythmSmall">
<KuiFieldGroup>
<KuiFieldGroupSection isWide>
<div className="kuiSearchInput">
<div className="kuiSearchInput__icon kuiIcon fa-search" />
<input
className="kuiSearchInput__input"
type="text"
/>
</div>
</KuiFieldGroupSection>
<KuiFieldGroupSection>
<select className="kuiSelect">
<option>Animal</option>
<option>Mineral</option>
<option>Vegetable</option>
</select>
</KuiFieldGroupSection>
</KuiFieldGroup>
</div>
<div className="kuiVerticalRhythmSmall">
<KuiButton buttonType="primary">Save</KuiButton>
</div>
</div>
</KuiPopover>
);
}
}

81
packages/kbn-ui-framework/doc_site/src/views/table/table_with_menu_buttons.js
View file

@ -28,86 +28,29 @@ import {
KuiTableBody,
} from '../../../../components';
import {
RIGHT_ALIGNMENT
} from '../../../../src/services';
export function TableWithMenuButtons() {
return (
<KuiTable>
<KuiTableHeader>
<KuiTableHeaderCell>
Reminder
</KuiTableHeaderCell>
<KuiTableHeaderCell>
A
</KuiTableHeaderCell>
<KuiTableHeaderCell>
B
</KuiTableHeaderCell>
<KuiTableHeaderCell>
C
</KuiTableHeaderCell>
<KuiTableHeaderCell className="kuiTableHeaderCell--alignRight">
Actions
</KuiTableHeaderCell>
<KuiTableHeaderCell>Reminder</KuiTableHeaderCell>
<KuiTableHeaderCell>A</KuiTableHeaderCell>
<KuiTableHeaderCell>B</KuiTableHeaderCell>
<KuiTableHeaderCell>C</KuiTableHeaderCell>
</KuiTableHeader>
<KuiTableBody>
<KuiTableRow>
<KuiTableRowCell>
Core temperature critical
</KuiTableRowCell>
<KuiTableRowCell>
A
</KuiTableRowCell>
<KuiTableRowCell>
B
</KuiTableRowCell>
<KuiTableRowCell>
C
</KuiTableRowCell>
<KuiTableRowCell align={RIGHT_ALIGNMENT}>
<div className="kuiMenuButtonGroup kuiMenuButtonGroup--alignRight">
<button className="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</KuiTableRowCell>
<KuiTableRowCell>Core temperature critical</KuiTableRowCell>
<KuiTableRowCell>A</KuiTableRowCell>
<KuiTableRowCell>B</KuiTableRowCell>
<KuiTableRowCell>C</KuiTableRowCell>
</KuiTableRow>
<KuiTableRow>
<KuiTableRowCell>
Time for your snack
</KuiTableRowCell>
<KuiTableRowCell>
A
</KuiTableRowCell>
<KuiTableRowCell>
B
</KuiTableRowCell>
<KuiTableRowCell>
C
</KuiTableRowCell>
<KuiTableRowCell align={RIGHT_ALIGNMENT}>
<div className="kuiMenuButtonGroup kuiMenuButtonGroup--alignRight">
<button className="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</KuiTableRowCell>
<KuiTableRowCell>Time for your snack</KuiTableRowCell>
<KuiTableRowCell>A</KuiTableRowCell>
<KuiTableRowCell>B</KuiTableRowCell>
<KuiTableRowCell>C</KuiTableRowCell>
</KuiTableRow>
</KuiTableBody>
</KuiTable>

4
packages/kbn-ui-framework/doc_site/src/views/toggle_button/toggle_button.html
View file

@ -1,4 +0,0 @@
<button class="kuiToggleButton" data-id="toggleButton">
<span class="kuiToggleButton__icon kuiIcon fa-caret-right" data-id="toggleButtonIcon"></span>
Expand and collapse this content
</button>

17
packages/kbn-ui-framework/doc_site/src/views/toggle_button/toggle_button.js
View file

@ -1,17 +0,0 @@
/* eslint-disable */
let isButtonCollapsed = true;
const $toggleButton = $('[data-id="toggleButton"]');
const $toggleButtonIcon = $('[data-id="toggleButtonIcon"]');
$toggleButton.on('click', () => {
isButtonCollapsed = !isButtonCollapsed;
if (isButtonCollapsed) {
$toggleButtonIcon.addClass('fa-caret-right');
$toggleButtonIcon.removeClass('fa-caret-down');
} else {
$toggleButtonIcon.removeClass('fa-caret-right');
$toggleButtonIcon.addClass('fa-caret-down');
}
});

4
packages/kbn-ui-framework/doc_site/src/views/toggle_button/toggle_button_disabled.html
View file

@ -1,4 +0,0 @@
<button class="kuiToggleButton" disabled data-id="toggleButton">
<span class="kuiToggleButton__icon kuiIcon fa-caret-right" data-id="toggleButtonIcon"></span>
Expand and collapse this content
</button>

86
packages/kbn-ui-framework/doc_site/src/views/toggle_button/toggle_button_example.js
View file

@ -1,86 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
GuideText,
} from '../../components';
import {
Link,
} from 'react-router';
import toggleButtonHtml from './toggle_button.html';
import toggleButtonJs from 'raw-loader!./toggle_button.js';
import toggleButtonDisabledHtml from './toggle_button_disabled.html';
import togglePanelHtml from './toggle_panel.html';
import togglePanelJs from 'raw-loader!./toggle_panel.js';
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="ToggleButton"
source={[{
type: GuideSectionTypes.HTML,
code: toggleButtonHtml,
}]}
>
<GuideText>
You can use this button to reveal and hide content. For a complete example
on how to make an collapsable panel proper accessible, read
the <Link to="collapsebutton" className="guideLink">CollapseButton</Link> documentation.
</GuideText>
<GuideDemo
html={toggleButtonHtml}
js={toggleButtonJs}
/>
</GuideSection>
<GuideSection
title="ToggleButton, disabled"
source={[{
type: GuideSectionTypes.HTML,
code: toggleButtonDisabledHtml,
}]}
>
<GuideDemo
html={toggleButtonDisabledHtml}
/>
</GuideSection>
<GuideSection
title="TogglePanel"
source={[{
type: GuideSectionTypes.HTML,
code: togglePanelHtml,
}]}
>
<GuideDemo
html={togglePanelHtml}
js={togglePanelJs}
/>
</GuideSection>
</GuidePage>
);

21
packages/kbn-ui-framework/doc_site/src/views/toggle_button/toggle_panel.html
View file

@ -1,21 +0,0 @@
<div>
<div class="kuiTogglePanelHeader">
<button
class="kuiToggleButton"
data-id="togglePanelButton"
aria-controls="togglePanelContent"
aria-expanded="false"
>
<span class="kuiToggleButton__icon kuiIcon fa-caret-right" data-id="togglePanelButtonIcon"></span>
Expand and collapse this content
</button>
</div>
<div
id="togglePanelContent"
class="kuiTogglePanelContent"
data-id="togglePanelContent"
>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas dictum enim non lobortis. Curabitur vel viverra metus. Ut non dignissim neque. Nulla metus lorem, maximus et vehicula vel, pharetra vitae sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam mi risus, varius in elit a, scelerisque blandit dolor. Donec ut leo mi. Duis ac tincidunt urna. Sed finibus eros odio, vitae euismod turpis ullamcorper pulvinar. Sed in ipsum at magna euismod tristique. Donec eget orci blandit, convallis odio sed, hendrerit dui. Aenean augue nibh, hendrerit sit amet aliquet et, efficitur sit amet nulla. Vivamus placerat pulvinar ipsum, dignissim sodales libero pulvinar sit amet. Maecenas pellentesque neque at quam varius aliquam. Ut at pretium augue, a pellentesque neque.</p>
</div>
</div>

24
packages/kbn-ui-framework/doc_site/src/views/toggle_button/toggle_panel.js
View file

@ -1,24 +0,0 @@
/* eslint-disable */
let isButtonCollapsed = true;
const $togglePanelButton = $('[data-id="togglePanelButton"]');
const $togglePanelButtonIcon = $('[data-id="togglePanelButtonIcon"]');
const $togglePanelContent = $('[data-id="togglePanelContent"]');
$togglePanelButton.on('click', () => {
isButtonCollapsed = !isButtonCollapsed;
$togglePanelButton.attr('aria-expanded', !isButtonCollapsed);
if (isButtonCollapsed) {
$togglePanelButtonIcon.addClass('fa-caret-right');
$togglePanelButtonIcon.removeClass('fa-caret-down');
$togglePanelContent.hide();
} else {
$togglePanelButtonIcon.removeClass('fa-caret-right');
$togglePanelButtonIcon.addClass('fa-caret-down');
$togglePanelContent.show();
}
});
$togglePanelContent.hide();

17
packages/kbn-ui-framework/src/components/expression/__snapshots__/expression.test.js.snap generated
View file

@ -1,17 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`KuiExpression Props children is rendered 1`] = `
<div
class="kuiExpression"
>
some expression
</div>
`;
exports[`KuiExpression renders 1`] = `
<div
aria-label="aria-label"
class="kuiExpression testClass1 testClass2"
data-test-subj="test subject string"
/>
`;

57
packages/kbn-ui-framework/src/components/expression/__snapshots__/expression_button.test.js.snap generated
View file

@ -1,57 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`KuiExpressionButton Props isActive false renders inactive 1`] = `
<button
class="kuiExpressionButton"
>
<span
class="kuiExpressionButton__description"
>
the answer is
</span>
<span
class="kuiExpressionButton__value"
>
42
</span>
</button>
`;
exports[`KuiExpressionButton Props isActive true renders active 1`] = `
<button
class="kuiExpressionButton kuiExpressionButton-isActive"
>
<span
class="kuiExpressionButton__description"
>
the answer is
</span>
<span
class="kuiExpressionButton__value"
>
42
</span>
</button>
`;
exports[`KuiExpressionButton renders 1`] = `
<button
aria-label="aria-label"
class="kuiExpressionButton testClass1 testClass2"
data-test-subj="test subject string"
>
<span
class="kuiExpressionButton__description"
>
the answer is
</span>
<span
class="kuiExpressionButton__value"
>
42
</span>
</button>
`;

27
packages/kbn-ui-framework/src/components/expression/_expression.scss
View file

@ -1,27 +0,0 @@
.kuiExpression {
padding: 20px;
white-space: nowrap;
}
.kuiExpressionButton {
background-color: transparent;
padding: 5px 0px;
border: none;
border-bottom: dotted 2px $kuiBorderColor;
font-size: $kuiFontSize;
cursor: pointer;
}
.kuiExpressionButton__description {
color: $expressionColorHighlight;
text-transform: uppercase;
}
.kuiExpressionButton__value {
color: $kuiTextColor;
text-transform: lowercase;
}
.kuiExpressionButton-isActive {
border-bottom: solid 2px $expressionColorHighlight;
}

3
packages/kbn-ui-framework/src/components/expression/_index.scss
View file

@ -1,3 +0,0 @@
$expressionColorHighlight: $euiColorSecondary;
@import "expression";

44
packages/kbn-ui-framework/src/components/expression/expression.js
View file

@ -1,44 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
export const KuiExpression = ({
children,
className,
...rest
}) => {
const classes = classNames('kuiExpression', className);
return (
<div
className={classes}
{...rest}
>
{children}
</div>
);
};
KuiExpression.propTypes = {
children: PropTypes.node,
className: PropTypes.string
};

51
packages/kbn-ui-framework/src/components/expression/expression.test.js
View file

@ -1,51 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiExpression,
} from './expression';
describe('KuiExpression', () => {
test('renders', () => {
const component = (
<KuiExpression {...requiredProps} />
);
expect(render(component)).toMatchSnapshot();
});
describe('Props', () => {
describe('children', () => {
test('is rendered', () => {
const component = render(
<KuiExpression>
some expression
</KuiExpression>
);
expect(component)
.toMatchSnapshot();
});
});
});
});

58
packages/kbn-ui-framework/src/components/expression/expression_button.js
View file

@ -1,58 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
export const KuiExpressionButton = ({
className,
description,
buttonValue,
isActive,
onClick,
...rest
}) => {
const classes = classNames('kuiExpressionButton', className, {
'kuiExpressionButton-isActive': isActive
});
return (
<button
className={classes}
onClick={onClick}
{...rest}
>
<span className="kuiExpressionButton__description">{description}</span>{' '}
<span className="kuiExpressionButton__value">{buttonValue}</span>
</button>
);
};
KuiExpressionButton.propTypes = {
className: PropTypes.string,
description: PropTypes.string.isRequired,
buttonValue: PropTypes.string.isRequired,
isActive: PropTypes.bool.isRequired,
onClick: PropTypes.func.isRequired,
};
KuiExpressionButton.defaultProps = {
isActive: false,
};

93
packages/kbn-ui-framework/src/components/expression/expression_button.test.js
View file

@ -1,93 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render, shallow } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import sinon from 'sinon';
import {
KuiExpressionButton,
} from './expression_button';
describe('KuiExpressionButton', () => {
test('renders', () => {
const component = (
<KuiExpressionButton
description="the answer is"
buttonValue="42"
isActive={false}
onClick={()=>{}}
{...requiredProps}
/>
);
expect(render(component)).toMatchSnapshot();
});
describe('Props', () => {
describe('isActive', () => {
test('true renders active', () => {
const component = (
<KuiExpressionButton
description="the answer is"
buttonValue="42"
isActive={true}
onClick={()=>{}}
/>
);
expect(render(component)).toMatchSnapshot();
});
test('false renders inactive', () => {
const component = (
<KuiExpressionButton
description="the answer is"
buttonValue="42"
isActive={false}
onClick={()=>{}}
/>
);
expect(render(component)).toMatchSnapshot();
});
});
describe('onClick', () => {
test('is called when the button is clicked', () => {
const onClickHandler = sinon.spy();
const button = shallow(
<KuiExpressionButton
description="the answer is"
buttonValue="42"
isActive={false}
onClick={onClickHandler}
{...requiredProps}
/>
);
button.simulate('click');
sinon.assert.calledOnce(onClickHandler);
});
});
});
});

21
packages/kbn-ui-framework/src/components/expression/index.js
View file

@ -1,21 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export { KuiExpression } from './expression';
export { KuiExpressionButton } from './expression_button';

71
packages/kbn-ui-framework/src/components/index.js
View file

@ -17,22 +17,11 @@
* under the License.
*/
export {
KuiBar,
KuiBarSection,
} from './bar';
export { KuiBar, KuiBarSection } from './bar';
export {
KuiButton,
KuiButtonGroup,
KuiButtonIcon,
KuiLinkButton,
KuiSubmitButton,
} from './button';
export { KuiButton, KuiButtonGroup, KuiButtonIcon, KuiLinkButton, KuiSubmitButton } from './button';
export {
KuiCollapseButton,
} from './collapse_button';
export { KuiCollapseButton } from './collapse_button';
export {
KuiEmptyTablePrompt,
@ -40,15 +29,7 @@ export {
KuiEmptyTablePromptPanel,
} from './empty_table_prompt';
export {
KuiExpression,
KuiExpressionButton,
} from './expression';
export {
KuiFieldGroup,
KuiFieldGroupSection,
} from './form_layout';
export { KuiFieldGroup, KuiFieldGroupSection } from './form_layout';
export {
KuiLabel,
@ -68,45 +49,9 @@ export {
KuiLocalTitle,
} from './local_nav';
export {
KuiMenu,
KuiMenuItem,
} from './menu';
export { KuiPager, KuiPagerButtonGroup } from './pager';
export {
KUI_MODAL_CANCEL_BUTTON,
KUI_MODAL_CONFIRM_BUTTON,
KuiConfirmModal,
KuiModal,
KuiModalBody,
KuiModalFooter,
KuiModalHeader,
KuiModalHeaderTitle,
KuiModalOverlay,
} from './modal';
export {
KuiOutsideClickDetector,
} from './outside_click_detector';
export {
KuiPager,
KuiPagerButtonGroup,
} from './pager';
export {
KuiPanelSimple,
} from './panel_simple';
export {
KuiPopover,
KuiPopoverTitle,
} from './popover';
export {
KuiTabs,
KuiTab
} from './tabs';
export { KuiTabs, KuiTab } from './tabs';
export {
KuiTable,
@ -123,7 +68,7 @@ export {
KuiListingTableCreateButton,
KuiListingTableDeleteButton,
KuiListingTableNoMatchesPrompt,
KuiListingTableLoadingPrompt
KuiListingTableLoadingPrompt,
} from './table';
export {
@ -132,5 +77,5 @@ export {
KuiToolBarFooter,
KuiToolBarSection,
KuiToolBarFooterSection,
KuiToolBarText
KuiToolBarText,
} from './tool_bar';

47
packages/kbn-ui-framework/src/components/index.scss
View file

@ -12,30 +12,23 @@
// When possible, if making changes to those legacy components, please think about
// instead adding them to this library and deprecating that dependency.
@import "bar/index";
@import "button/index";
@import "collapse_button/index";
@import "expression/index";
@import "form/index";
@import "form_layout/index";
@import "icon/index";
@import "info_panel/index";
@import "link/index";
@import "local_nav/index";
@import "menu/index";
@import "menu_button/index";
@import "modal/index";
@import "pager/index";
@import "panel/index";
@import "panel_simple/index";
@import "popover/index";
@import "empty_table_prompt/index";
@import "status_text/index";
@import "table/index";
@import "table_info/index";
@import "tabs/index";
@import "toggle_button/index";
@import "tool_bar/index";
@import "typography/index";
@import "vertical_rhythm/index";
@import "view/index";
@import 'bar/index';
@import 'button/index';
@import 'collapse_button/index';
@import 'form/index';
@import 'form_layout/index';
@import 'icon/index';
@import 'info_panel/index';
@import 'link/index';
@import 'local_nav/index';
@import 'pager/index';
@import 'panel/index';
@import 'empty_table_prompt/index';
@import 'status_text/index';
@import 'table/index';
@import 'table_info/index';
@import 'tabs/index';
@import 'tool_bar/index';
@import 'typography/index';
@import 'vertical_rhythm/index';
@import 'view/index';

19
packages/kbn-ui-framework/src/components/menu/__snapshots__/menu.test.js.snap generated
View file

@ -1,19 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`contained prop 1`] = `
<ul
class="kuiMenu kuiMenu--contained"
>
children
</ul>
`;
exports[`renders KuiMenu 1`] = `
<ul
aria-label="aria-label"
class="kuiMenu testClass1 testClass2"
data-test-subj="test subject string"
>
children
</ul>
`;

11
packages/kbn-ui-framework/src/components/menu/__snapshots__/menu_item.test.js.snap generated
View file

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiMenuItem 1`] = `
<li
aria-label="aria-label"
class="kuiMenuItem testClass1 testClass2"
data-test-subj="test subject string"
>
children
</li>
`;

1
packages/kbn-ui-framework/src/components/menu/_index.scss
View file

@ -1 +0,0 @@
@import "menu";

26
packages/kbn-ui-framework/src/components/menu/_menu.scss
View file

@ -1,26 +0,0 @@
/**
* 1. Allow class to be applied to `ul` and `ol` elements
*/
.kuiMenu {
padding-left: 0; /* 1 */
}
.kuiMenu--contained {
border: $kuiBorderThin;
.kuiMenuItem {
padding: 6px 10px;
}
}
/**
* 1. Allow class to be applied to `li` elements
*/
.kuiMenuItem {
list-style: none; /* 1 */
padding: 6px 0;
& + & {
border-top: $kuiBorderThin;
}
}

21
packages/kbn-ui-framework/src/components/menu/index.js
View file

@ -1,21 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export { KuiMenu } from './menu';
export { KuiMenuItem } from './menu_item';

48
packages/kbn-ui-framework/src/components/menu/menu.js
View file

@ -1,48 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
export const KuiMenu = ({
contained,
className,
children,
...rest
}) => {
const classes = classNames('kuiMenu', className, {
'kuiMenu--contained': contained
});
return (
<ul
className={classes}
{...rest}
>
{children}
</ul>
);
};
KuiMenu.propTypes = {
contained: PropTypes.bool,
className: PropTypes.string,
children: PropTypes.node
};

36
packages/kbn-ui-framework/src/components/menu/menu.test.js
View file

@ -1,36 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiMenu,
} from './menu';
test('renders KuiMenu', () => {
const component = <KuiMenu {...requiredProps}>children</KuiMenu>;
expect(render(component)).toMatchSnapshot();
});
test('contained prop', () => {
const component = <KuiMenu contained >children</KuiMenu>;
expect(render(component)).toMatchSnapshot();
});

43
packages/kbn-ui-framework/src/components/menu/menu_item.js
View file

@ -1,43 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
export const KuiMenuItem = ({
className,
children,
...rest
}) => {
return (
<li
className={classNames('kuiMenuItem', className)}
{...rest}
>
{children}
</li>
);
};
KuiMenuItem.propTypes = {
className: PropTypes.string,
children: PropTypes.node
};

31
packages/kbn-ui-framework/src/components/menu/menu_item.test.js
View file

@ -1,31 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiMenuItem,
} from './menu_item';
test('renders KuiMenuItem', () => {
const component = <KuiMenuItem {...requiredProps}>children</KuiMenuItem>;
expect(render(component)).toMatchSnapshot();
});

20
packages/kbn-ui-framework/src/components/menu_button/_index.scss
View file

@ -1,20 +0,0 @@
$menuButtonFontSize: 12px;
$menuButtonBasicTextColor: $euiTextColor;
$menuButtonBasicBackgroundColor: $euiColorEmptyShade;
$menuButtonBasicHoverBackgroundColor: $euiColorLightestShade;
$menuButtonBasicDisabledTextColor: $euiColorMediumShade;
$menuButtonPrimaryTextColor: $euiColorGhost;
$menuButtonPrimaryBackgroundColor: $euiColorPrimary;
$menuButtonPrimaryHoverBackgroundColor: darken($euiColorPrimary, 10%);
$menuButtonPrimaryDisabledBackgroundColor: $euiColorMediumShade;
$menuButtonDangerTextColor: $euiColorGhost;
$menuButtonDangerBackgroundColor: $euiColorDanger;
$menuButtonDangerHoverTextColor: $euiColorGhost;
$menuButtonDangerHoverBackgroundColor: darken($euiColorDanger, 10%);
$menuButtonDangerDisabledBackgroundColor: $euiColorMediumShade;
$menuButtonDangerHoverDisabledTextColor: $euiColorGhost;
@import "menu_button";
@import "menu_button_group";

118
packages/kbn-ui-framework/src/components/menu_button/_menu_button.scss
View file

@ -1,118 +0,0 @@
/**
* 1. Setting to inline-block guarantees the same height when applied to both
* button elements and anchor tags.
* 2. Disable for Angular.
* 3. Make the button just tall enough to fit inside an Option Layout.
*/
.kuiMenuButton {
display: inline-block; /* 1 */
appearance: none;
cursor: pointer;
padding: 2px 10px; /* 3 */
font-size: $menuButtonFontSize;
font-weight: $kuiFontWeightRegular;
line-height: $kuiLineHeight;
text-decoration: none;
border: none;
border-radius: $kuiBorderRadius;
&:disabled {
cursor: default;
pointer-events: none; /* 2 */
}
&:active:enabled {
transform: translateY(1px);
}
&:focus {
@include focus;
}
}
.kuiMenuButton--iconText {
.kuiMenuButton__icon {
&:first-child {
margin-right: 4px;
}
&:last-child {
margin-left: 4px;
}
}
}
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiMenuButton--basic {
color: $menuButtonBasicTextColor;
background-color: $menuButtonBasicBackgroundColor;
// Goes before hover, so that hover can override it.
&:focus {
color: $menuButtonBasicTextColor !important; /* 1 */
}
&:hover, /* 2 */
&:active { /* 2 */
color: $menuButtonBasicTextColor !important; /* 1 */
background-color: $menuButtonBasicHoverBackgroundColor;
}
&:disabled {
color: $menuButtonBasicDisabledTextColor;
cursor: not-allowed;
}
}
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiMenuButton--primary {
color: $menuButtonPrimaryTextColor;
background-color: $menuButtonPrimaryBackgroundColor;
// Goes before hover, so that hover can override it.
&:focus {
color: $menuButtonPrimaryTextColor !important; /* 1 */
}
&:hover, /* 2 */
&:active { /* 2 */
color: $menuButtonPrimaryTextColor !important; /* 1 */
background-color: $menuButtonPrimaryHoverBackgroundColor;
}
&:disabled {
background-color: $menuButtonPrimaryDisabledBackgroundColor;
cursor: not-allowed;
}
}
/**
* 1. Override Bootstrap.
* 2. Safari won't respect :enabled:hover/active on links.
*/
.kuiMenuButton--danger {
color: $menuButtonDangerTextColor;
background-color: $menuButtonDangerBackgroundColor;
&:hover, /* 2 */
&:active { /* 2 */
color: $menuButtonDangerHoverTextColor !important; /* 1 */
background-color: $menuButtonDangerHoverBackgroundColor;
}
&:disabled {
color: $menuButtonDangerHoverDisabledTextColor;
background-color: $menuButtonDangerDisabledBackgroundColor;
cursor: not-allowed;
}
&:focus {
@include focus($kuiFocusDangerColor);
}
}

11
packages/kbn-ui-framework/src/components/menu_button/_menu_button_group.scss
View file

@ -1,11 +0,0 @@
.kuiMenuButtonGroup {
display: flex;
.kuiMenuButton + .kuiMenuButton {
margin-left: 4px;
}
}
.kuiMenuButtonGroup--alignRight {
justify-content: flex-end;
}

64
packages/kbn-ui-framework/src/components/modal/__snapshots__/confirm_modal.test.js.snap generated
View file

@ -1,64 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiConfirmModal 1`] = `
<div>
<div
aria-label="aria-label"
class="kuiModal kuiModal--confirmation testClass1 testClass2"
data-test-subj="test subject string"
tabindex="0"
>
<div
class="kuiModalHeader"
>
<div
class="kuiModalHeader__title"
data-test-subj="confirmModalTitleText"
>
A confirmation modal
</div>
</div>
<div
class="kuiModalBody"
>
<div
data-test-subj="confirmModalBodyText"
>
<p
class="kuiText"
>
This is a confirmation modal example
</p>
</div>
</div>
<div
class="kuiModalFooter"
>
<button
class="kuiButton kuiButton--hollow"
data-test-subj="confirmModalCancelButton"
>
<span
class="kuiButton__inner"
>
<span>
Cancel Button Text
</span>
</span>
</button>
<button
class="kuiButton kuiButton--primary"
data-test-subj="confirmModalConfirmButton"
>
<span
class="kuiButton__inner"
>
<span>
Confirm Button Text
</span>
</span>
</button>
</div>
</div>
</div>
`;

14
packages/kbn-ui-framework/src/components/modal/__snapshots__/modal.test.js.snap generated
View file

@ -1,14 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiModal 1`] = `
<div>
<div
aria-label="aria-label"
class="kuiModal testClass1 testClass2"
data-test-subj="test subject string"
tabindex="0"
>
children
</div>
</div>
`;

11
packages/kbn-ui-framework/src/components/modal/__snapshots__/modal_body.test.js.snap generated
View file

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiModalBody 1`] = `
<div
aria-label="aria-label"
class="kuiModalBody testClass1 testClass2"
data-test-subj="test subject string"
>
children
</div>
`;

11
packages/kbn-ui-framework/src/components/modal/__snapshots__/modal_footer.test.js.snap generated
View file

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiModalFooter 1`] = `
<div
aria-label="aria-label"
class="kuiModalFooter testClass1 testClass2"
data-test-subj="test subject string"
>
children
</div>
`;

11
packages/kbn-ui-framework/src/components/modal/__snapshots__/modal_header.test.js.snap generated
View file

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiModalHeader 1`] = `
<div
aria-label="aria-label"
class="kuiModalHeader testClass1 testClass2"
data-test-subj="test subject string"
>
children
</div>
`;

11
packages/kbn-ui-framework/src/components/modal/__snapshots__/modal_header_title.test.js.snap generated
View file

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiModalHeaderTitle 1`] = `
<div
aria-label="aria-label"
class="kuiModalHeader__title testClass1 testClass2"
data-test-subj="test subject string"
>
children
</div>
`;

11
packages/kbn-ui-framework/src/components/modal/__snapshots__/modal_overlay.test.js.snap generated
View file

@ -1,11 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiModalOverlay 1`] = `
<div
aria-label="aria-label"
class="kuiModalOverlay testClass1 testClass2"
data-test-subj="test subject string"
>
children
</div>
`;

11
packages/kbn-ui-framework/src/components/modal/_index.scss
View file

@ -1,11 +0,0 @@
$modalPadding: 10px;
$modalBorderColor: $euiBorderColor;
$modalBackgroundColor: $euiColorEmptyShade;
$kuiModalDepth: 1000;
$modalOverlayBackground: $euiColorEmptyShade;
@if (lightness($euiTextColor) > 50) {
$modalOverlayBackground: $euiColorLightShade;
}
@import "modal_overlay";
@import "modal";

63
packages/kbn-ui-framework/src/components/modal/_modal.scss
View file

@ -1,63 +0,0 @@
.kuiModal {
@include euiBottomShadow;
line-height: $kuiLineHeight;
background-color: $modalBackgroundColor;
border: 1px solid $modalBorderColor;
border-radius: $kuiBorderRadius;
z-index: $kuiModalDepth + 1;
animation: kuiModal $kuiAnimSpeedSlow $kuiAnimSlightBounce;
}
.kuiModal--confirmation {
width: 450px;
min-width: auto;
}
.kuiModalHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: $modalPadding;
padding-left: $modalPadding * 2;
border-bottom: $kuiBorderThin;
}
.kuiModalHeader__title {
font-size: $kuiTitleFontSize;
}
.kuiModalHeaderCloseButton {
@include microButton;
font-size: $kuiTitleFontSize;
}
.kuiModalBody {
padding: $modalPadding * 2;
}
.kuiModalBodyText {
font-size: 14px;
}
.kuiModalFooter {
display: flex;
justify-content: flex-end;
padding: $modalPadding * 2;
padding-top: $modalPadding;
> * + * {
margin-left: 5px;
}
}
@keyframes kuiModal {
0% {
opacity: 0;
transform: translateY($kuiSizeXL);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

13
packages/kbn-ui-framework/src/components/modal/_modal_overlay.scss
View file

@ -1,13 +0,0 @@
.kuiModalOverlay {
position: fixed;
z-index: $kuiModalDepth;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 10vh;
background: transparentize($modalOverlayBackground, .2);
}

120
packages/kbn-ui-framework/src/components/modal/confirm_modal.js
View file

@ -1,120 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { KuiModal } from './modal';
import { KuiModalFooter } from './modal_footer';
import { KuiModalHeader } from './modal_header';
import { KuiModalHeaderTitle } from './modal_header_title';
import { KuiModalBody } from './modal_body';
import {
KuiButton,
} from '../../components/';
export const CONFIRM_BUTTON = 'confirm';
export const CANCEL_BUTTON = 'cancel';
const CONFIRM_MODAL_BUTTONS = [
CONFIRM_BUTTON,
CANCEL_BUTTON,
];
export function KuiConfirmModal({
children,
title,
onCancel,
onConfirm,
cancelButtonText,
confirmButtonText,
className,
defaultFocusedButton,
...rest
}) {
const classes = classnames('kuiModal--confirmation', className);
let modalTitle;
if (title) {
modalTitle = (
<KuiModalHeader>
<KuiModalHeaderTitle data-test-subj="confirmModalTitleText">
{title}
</KuiModalHeaderTitle>
</KuiModalHeader>
);
}
let message;
if (typeof children === 'string') {
message = <p className="kuiText">{children}</p>;
} else {
message = children;
}
return (
<KuiModal
className={classes}
onClose={onCancel}
{...rest}
>
{modalTitle}
<KuiModalBody>
<div data-test-subj="confirmModalBodyText">
{message}
</div>
</KuiModalBody>
<KuiModalFooter>
<KuiButton
buttonType="hollow"
autoFocus={defaultFocusedButton === CANCEL_BUTTON}
data-test-subj="confirmModalCancelButton"
onClick={onCancel}
>
{cancelButtonText}
</KuiButton>
<KuiButton
buttonType="primary"
autoFocus={defaultFocusedButton === CONFIRM_BUTTON}
data-test-subj="confirmModalConfirmButton"
onClick={onConfirm}
>
{confirmButtonText}
</KuiButton>
</KuiModalFooter>
</KuiModal>
);
}
KuiConfirmModal.propTypes = {
children: PropTypes.node,
title: PropTypes.string,
cancelButtonText: PropTypes.string,
confirmButtonText: PropTypes.string,
onCancel: PropTypes.func.isRequired,
onConfirm: PropTypes.func,
className: PropTypes.string,
defaultFocusedButton: PropTypes.oneOf(CONFIRM_MODAL_BUTTONS)
};

145
packages/kbn-ui-framework/src/components/modal/confirm_modal.test.js
View file

@ -1,145 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import sinon from 'sinon';
import { mount, render } from 'enzyme';
import { findTestSubject, requiredProps } from '../../test';
import { keyCodes } from '../../services';
import {
CANCEL_BUTTON, CONFIRM_BUTTON, KuiConfirmModal,
} from './confirm_modal';
let onConfirm;
let onCancel;
beforeEach(() => {
onConfirm = sinon.spy();
onCancel = sinon.spy();
});
test('renders KuiConfirmModal', () => {
const component = render(
<KuiConfirmModal
title="A confirmation modal"
onCancel={() => {}}
onConfirm={onConfirm}
cancelButtonText="Cancel Button Text"
confirmButtonText="Confirm Button Text"
{...requiredProps}
>
This is a confirmation modal example
</KuiConfirmModal>
);
expect(component).toMatchSnapshot();
});
test('onConfirm', () => {
const component = mount(
<KuiConfirmModal
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText="Cancel Button Text"
confirmButtonText="Confirm Button Text"
/>
);
findTestSubject(component, 'confirmModalConfirmButton').simulate('click');
sinon.assert.calledOnce(onConfirm);
sinon.assert.notCalled(onCancel);
});
describe('onCancel', () => {
test('triggered by click', () => {
const component = mount(
<KuiConfirmModal
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText="Cancel Button Text"
confirmButtonText="Confirm Button Text"
/>
);
findTestSubject(component, 'confirmModalCancelButton').simulate('click');
sinon.assert.notCalled(onConfirm);
sinon.assert.calledOnce(onCancel);
});
test('triggered by esc key', () => {
const component = mount(
<KuiConfirmModal
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText="Cancel Button Text"
confirmButtonText="Confirm Button Text"
data-test-subj="modal"
/>
);
findTestSubject(component, 'modal').simulate('keydown', { keyCode: keyCodes.ESCAPE });
sinon.assert.notCalled(onConfirm);
sinon.assert.calledOnce(onCancel);
});
});
describe('defaultFocusedButton', () => {
test('is cancel', () => {
const component = mount(
<KuiConfirmModal
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText="Cancel Button Text"
confirmButtonText="Confirm Button Text"
defaultFocusedButton={CANCEL_BUTTON}
/>
);
const button = findTestSubject(component, 'confirmModalCancelButton').getDOMNode();
expect(document.activeElement).toEqual(button);
});
test('is confirm', () => {
const component = mount(
<KuiConfirmModal
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText="Cancel Button Text"
confirmButtonText="Confirm Button Text"
defaultFocusedButton={CONFIRM_BUTTON}
/>
);
const button = findTestSubject(component, 'confirmModalConfirmButton').getDOMNode();
expect(document.activeElement).toEqual(button);
});
test('when not given gives focus to the modal', () => {
const component = mount(
<KuiConfirmModal
onCancel={onCancel}
onConfirm={onConfirm}
cancelButtonText="Cancel Button Text"
confirmButtonText="Confirm Button Text"
/>
);
expect(document.activeElement).toEqual(component.getDOMNode().firstChild);
});
});

30
packages/kbn-ui-framework/src/components/modal/index.js
View file

@ -1,30 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export {
KuiConfirmModal,
CONFIRM_BUTTON as KUI_MODAL_CONFIRM_BUTTON,
CANCEL_BUTTON as KUI_MODAL_CANCEL_BUTTON,
} from './confirm_modal';
export { KuiModal } from './modal';
export { KuiModalFooter } from './modal_footer';
export { KuiModalHeader } from './modal_header';
export { KuiModalOverlay } from './modal_overlay';
export { KuiModalBody } from './modal_body';
export { KuiModalHeaderTitle } from './modal_header_title';

74
packages/kbn-ui-framework/src/components/modal/modal.js
View file

@ -1,74 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, {
Component,
} from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import FocusTrap from 'focus-trap-react';
import { keyCodes } from '../../services';
export class KuiModal extends Component {
onKeyDown = event => {
if (event.keyCode === keyCodes.ESCAPE) {
this.props.onClose();
}
};
render() {
const {
className,
children,
onClose, // eslint-disable-line no-unused-vars
...rest
} = this.props;
const classes = classnames('kuiModal', className);
return (
<FocusTrap
focusTrapOptions={{
fallbackFocus: () => this.modal,
}}
>
{
// Create a child div instead of applying these props directly to FocusTrap, or else
// fallbackFocus won't work.
}
<div
ref={node => { this.modal = node; }}
className={classes}
onKeyDown={this.onKeyDown}
tabIndex={0}
{...rest}
>
{children}
</div>
</FocusTrap>
);
}
}
KuiModal.propTypes = {
className: PropTypes.string,
children: PropTypes.node,
onClose: PropTypes.func.isRequired,
};

39
packages/kbn-ui-framework/src/components/modal/modal.test.js
View file

@ -1,39 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiModal,
} from './modal';
test('renders KuiModal', () => {
const component = (
<KuiModal
onClose={() => {}}
{...requiredProps}
>
children
</KuiModal>
);
expect(render(component)).toMatchSnapshot();
});

36
packages/kbn-ui-framework/src/components/modal/modal_body.js
View file

@ -1,36 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
export function KuiModalBody({ className, children, ...rest }) {
const classes = classnames('kuiModalBody', className);
return (
<div className={classes} {...rest}>
{ children }
</div>
);
}
KuiModalBody.propTypes = {
className: PropTypes.string,
children: PropTypes.node
};

31
packages/kbn-ui-framework/src/components/modal/modal_body.test.js
View file

@ -1,31 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiModalBody,
} from './modal_body';
test('renders KuiModalBody', () => {
const component = <KuiModalBody {...requiredProps}>children</KuiModalBody>;
expect(render(component)).toMatchSnapshot();
});

36
packages/kbn-ui-framework/src/components/modal/modal_footer.js
View file

@ -1,36 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
export function KuiModalFooter({ className, children, ...rest }) {
const classes = classnames('kuiModalFooter', className);
return (
<div className={classes} {...rest}>
{ children }
</div>
);
}
KuiModalFooter.propTypes = {
className: PropTypes.string,
children: PropTypes.node
};

31
packages/kbn-ui-framework/src/components/modal/modal_footer.test.js
View file

@ -1,31 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiModalFooter,
} from './modal_footer';
test('renders KuiModalFooter', () => {
const component = <KuiModalFooter {...requiredProps}>children</KuiModalFooter>;
expect(render(component)).toMatchSnapshot();
});

36
packages/kbn-ui-framework/src/components/modal/modal_header.js
View file

@ -1,36 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
export function KuiModalHeader({ className, children, ...rest }) {
const classes = classnames('kuiModalHeader', className);
return (
<div className={classes} {...rest}>
{ children }
</div>
);
}
KuiModalHeader.propTypes = {
className: PropTypes.string,
children: PropTypes.node
};

31
packages/kbn-ui-framework/src/components/modal/modal_header.test.js
View file

@ -1,31 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiModalHeader,
} from './modal_header';
test('renders KuiModalHeader', () => {
const component = <KuiModalHeader {...requiredProps}>children</KuiModalHeader>;
expect(render(component)).toMatchSnapshot();
});

36
packages/kbn-ui-framework/src/components/modal/modal_header_title.js
View file

@ -1,36 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
export function KuiModalHeaderTitle({ className, children, ...rest }) {
const classes = classnames('kuiModalHeader__title', className);
return (
<div className={classes} {...rest}>
{ children }
</div>
);
}
KuiModalHeaderTitle.propTypes = {
className: PropTypes.string,
children: PropTypes.node
};

31
packages/kbn-ui-framework/src/components/modal/modal_header_title.test.js
View file

@ -1,31 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiModalHeaderTitle,
} from './modal_header_title';
test('renders KuiModalHeaderTitle', () => {
const component = <KuiModalHeaderTitle {...requiredProps}>children</KuiModalHeaderTitle>;
expect(render(component)).toMatchSnapshot();
});

36
packages/kbn-ui-framework/src/components/modal/modal_overlay.js
View file

@ -1,36 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
export function KuiModalOverlay({ className, ...rest }) {
const classes = classnames('kuiModalOverlay', className);
return (
<div
className={classes}
{...rest}
/>
);
}
KuiModalOverlay.propTypes = {
className: PropTypes.string,
};

31
packages/kbn-ui-framework/src/components/modal/modal_overlay.test.js
View file

@ -1,31 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiModalOverlay,
} from './modal_overlay';
test('renders KuiModalOverlay', () => {
const component = <KuiModalOverlay {...requiredProps}>children</KuiModalOverlay>;
expect(render(component)).toMatchSnapshot();
});

3
packages/kbn-ui-framework/src/components/outside_click_detector/__snapshots__/outside_click_detector.test.js.snap generated
View file

@ -1,3 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`KuiOutsideClickDetector is rendered 1`] = `<div />`;

22
packages/kbn-ui-framework/src/components/outside_click_detector/index.js
View file

@ -1,22 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export {
KuiOutsideClickDetector,
} from './outside_click_detector';

68
packages/kbn-ui-framework/src/components/outside_click_detector/outside_click_detector.js
View file

@ -1,68 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import {
Children,
cloneElement,
Component,
} from 'react';
import PropTypes from 'prop-types';
export class KuiOutsideClickDetector extends Component {
static propTypes = {
children: PropTypes.node.isRequired,
onOutsideClick: PropTypes.func.isRequired,
};
onClickOutside = event => {
if (!this.wrapperRef) {
return;
}
if (this.wrapperRef === event.target) {
return;
}
if (this.wrapperRef.contains(event.target)) {
return;
}
this.props.onOutsideClick();
};
componentDidMount() {
document.addEventListener('mousedown', this.onClickOutside);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.onClickOutside);
}
render() {
const props = {
...this.props.children.props,
ref: node => {
this.wrapperRef = node;
},
};
const child = Children.only(this.props.children);
return cloneElement(child, props);
}
}

36
packages/kbn-ui-framework/src/components/outside_click_detector/outside_click_detector.test.js
View file

@ -1,36 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render } from 'enzyme';
import { KuiOutsideClickDetector } from './outside_click_detector';
describe('KuiOutsideClickDetector', () => {
test('is rendered', () => {
const component = render(
<KuiOutsideClickDetector onOutsideClick={() => {}}>
<div />
</KuiOutsideClickDetector>
);
expect(component)
.toMatchSnapshot();
});
});

9
packages/kbn-ui-framework/src/components/panel_simple/__snapshots__/panel_simple.test.js.snap generated
View file

@ -1,9 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`KuiPanelSimple is rendered 1`] = `
<div
aria-label="aria-label"
class="kuiPanelSimple kuiPanelSimple--paddingMedium testClass1 testClass2"
data-test-subj="test subject string"
/>
`;

1
packages/kbn-ui-framework/src/components/panel_simple/_index.scss
View file

@ -1 +0,0 @@
@import 'panel_simple';

27
packages/kbn-ui-framework/src/components/panel_simple/_panel_simple.scss
View file

@ -1,27 +0,0 @@
.kuiPanelSimple {
@include euiBottomShadowSmall;
background-color: $euiColorEmptyShade;
border: $euiBorderThin;
border-radius: $euiBorderRadius;
flex-grow: 1;
&.kuiPanelSimple--paddingSmall {
padding: $kuiSizeS;
}
&.kuiPanelSimple--paddingMedium {
padding: $kuiSize;
}
&.kuiPanelSimple--paddingLarge {
padding: $kuiSizeL;
}
&.kuiPanelSimple--shadow {
@include kuiBottomShadow;
}
&.kuiPanelSimple--flexGrowZero {
flex-grow: 0;
}
}

23
packages/kbn-ui-framework/src/components/panel_simple/index.js
View file

@ -1,23 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export {
KuiPanelSimple,
SIZES,
} from './panel_simple';

78
packages/kbn-ui-framework/src/components/panel_simple/panel_simple.js
View file

@ -1,78 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
const paddingSizeToClassNameMap = {
'none': null,
's': 'kuiPanelSimple--paddingSmall',
'm': 'kuiPanelSimple--paddingMedium',
'l': 'kuiPanelSimple--paddingLarge',
};
export const SIZES = Object.keys(paddingSizeToClassNameMap);
export const KuiPanelSimple = ({
children,
className,
paddingSize,
hasShadow,
grow,
panelRef,
...rest
}) => {
const classes = classNames(
'kuiPanelSimple',
paddingSizeToClassNameMap[paddingSize],
{
'kuiPanelSimple--shadow': hasShadow,
'kuiPanelSimple--flexGrowZero': !grow,
},
className
);
return (
<div
ref={panelRef}
className={classes}
{...rest}
>
{children}
</div>
);
};
KuiPanelSimple.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
hasShadow: PropTypes.bool,
paddingSize: PropTypes.oneOf(SIZES),
grow: PropTypes.bool,
panelRef: PropTypes.func,
};
KuiPanelSimple.defaultProps = {
paddingSize: 'm',
hasShadow: false,
grow: true,
};

35
packages/kbn-ui-framework/src/components/panel_simple/panel_simple.test.js
View file

@ -1,35 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import { KuiPanelSimple } from './panel_simple';
describe('KuiPanelSimple', () => {
test('is rendered', () => {
const component = render(
<KuiPanelSimple {...requiredProps} />
);
expect(component)
.toMatchSnapshot();
});
});

125
packages/kbn-ui-framework/src/components/popover/__snapshots__/popover.test.js.snap generated
View file

@ -1,125 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`KuiPopover children is rendered 1`] = `
<div
class="kuiPopover"
>
<button />
</div>
`;
exports[`KuiPopover is rendered 1`] = `
<div
aria-label="aria-label"
class="kuiPopover testClass1 testClass2"
data-test-subj="test subject string"
>
<button />
</div>
`;
exports[`KuiPopover props anchorPosition defaults to center 1`] = `
<div
class="kuiPopover"
>
<button />
</div>
`;
exports[`KuiPopover props anchorPosition left is rendered 1`] = `
<div
class="kuiPopover kuiPopover--anchorLeft"
>
<button />
</div>
`;
exports[`KuiPopover props anchorPosition right is rendered 1`] = `
<div
class="kuiPopover kuiPopover--anchorRight"
>
<button />
</div>
`;
exports[`KuiPopover props isOpen defaults to false 1`] = `
<div
class="kuiPopover"
>
<button />
</div>
`;
exports[`KuiPopover props isOpen renders true 1`] = `
<div
class="kuiPopover"
>
<button />
<div>
<div
class="kuiPanelSimple kuiPanelSimple--paddingMedium kuiPanelSimple--shadow kuiPopover__panel"
/>
</div>
</div>
`;
exports[`KuiPopover props ownFocus defaults to false 1`] = `
<div
class="kuiPopover"
>
<button />
<div>
<div
class="kuiPanelSimple kuiPanelSimple--paddingMedium kuiPanelSimple--shadow kuiPopover__panel"
/>
</div>
</div>
`;
exports[`KuiPopover props ownFocus renders true 1`] = `
<div
class="kuiPopover"
>
<button />
<div>
<div
class="kuiPanelSimple kuiPanelSimple--paddingMedium kuiPanelSimple--shadow kuiPopover__panel"
tabindex="0"
/>
</div>
</div>
`;
exports[`KuiPopover props panelClassName is rendered 1`] = `
<div
class="kuiPopover"
>
<button />
<div>
<div
class="kuiPanelSimple kuiPanelSimple--paddingMedium kuiPanelSimple--shadow kuiPopover__panel test"
/>
</div>
</div>
`;
exports[`KuiPopover props panelPaddingSize is rendered 1`] = `
<div
class="kuiPopover"
>
<button />
<div>
<div
class="kuiPanelSimple kuiPanelSimple--paddingSmall kuiPanelSimple--shadow kuiPopover__panel"
/>
</div>
</div>
`;
exports[`KuiPopover props withTitle is rendered 1`] = `
<div
class="kuiPopover kuiPopover--withTitle"
>
<button />
</div>
`;

9
packages/kbn-ui-framework/src/components/popover/__snapshots__/popover_title.test.js.snap generated
View file

@ -1,9 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`KuiPopoverTitle is rendered 1`] = `
<div
aria-label="aria-label"
class="kuiPopoverTitle testClass1 testClass2"
data-test-subj="test subject string"
/>
`;

3
packages/kbn-ui-framework/src/components/popover/_index.scss
View file

@ -1,3 +0,0 @@
@import 'mixins';
@import 'popover';
@import 'popover_title';

6
packages/kbn-ui-framework/src/components/popover/_mixins.scss
View file

@ -1,6 +0,0 @@
@mixin kuiPopoverTitle {
background-color: $kuiColorLightestShade;
border-bottom: $kuiBorderThin;
padding: $kuiSizeM;
font-size: $kuiFontSize;
}

96
packages/kbn-ui-framework/src/components/popover/_popover.scss
View file

@ -1,96 +0,0 @@
// Pop menu is an animated popover relatively positioned to a button / action.
// By default it positions in the middle, but can be anchored left and right.
.kuiPopover {
display: inline-block;
position: relative;
// Open state happens on the wrapper and applies to the panel.
&.kuiPopover-isOpen {
.kuiPopover__panel {
opacity: 1;
visibility: visible;
margin-top: $kuiSizeS;
pointer-events: auto;
}
}
}
// Animation happens on the panel.
.kuiPopover__panel {
position: absolute;
z-index: $kuiZContentMenu;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY($kuiSizeS) translateZ(0);
backface-visibility: hidden;
transition:
opacity $kuiAnimSlightBounce $kuiAnimSpeedSlow,
visibility $kuiAnimSlightBounce $kuiAnimSpeedSlow,
margin-top $kuiAnimSlightBounce $kuiAnimSpeedSlow;
transform-origin: center top;
opacity: 0;
visibility: hidden;
pointer-events: none;
margin-top: $kuiSizeL;
// This fakes a border on the arrow.
&:before {
position: absolute;
content: "";
top: -$kuiSize;
height: 0;
width: 0;
left: 50%;
margin-left: -$kuiSize;
border-left: $kuiSize solid transparent;
border-right: $kuiSize solid transparent;
border-bottom: $kuiSize solid $kuiBorderColor;
}
// This part of the arrow matches the panel.
&:after {
position: absolute;
content: "";
top: -$kuiSize + 1;
right: 0;
height: 0;
left: 50%;
margin-left: -$kuiSize;
width: 0;
border-left: $kuiSize solid transparent;
border-right: $kuiSize solid transparent;
border-bottom: $kuiSize solid $euiColorEmptyShade;
}
}
.kuiPopover--withTitle .kuiPopover__panel:after {
border-bottom-color: $kuiColorLightestShade;
}
// Positions the menu and arrow to the left of the parent.
.kuiPopover--anchorLeft {
.kuiPopover__panel {
left: 0;
transform: translateX(0%) translateY($kuiSizeS) translateZ(0);
&:before, &:after {
right: auto;
left: $kuiSize;
margin: 0;
}
}
}
// Positions the menu and arrow to the right of the parent.
.kuiPopover--anchorRight {
.kuiPopover__panel {
left: 100%;
transform: translateX(-100%) translateY($kuiSizeS) translateZ(0);
&:before, &:after {
right: $kuiSize;
left: auto;
}
}
}

3
packages/kbn-ui-framework/src/components/popover/_popover_title.scss
View file

@ -1,3 +0,0 @@
.kuiPopoverTitle {
@include kuiPopoverTitle;
}

21
packages/kbn-ui-framework/src/components/popover/index.js
View file

@ -1,21 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export { KuiPopover, } from './popover';
export { KuiPopoverTitle } from './popover_title';

218
packages/kbn-ui-framework/src/components/popover/popover.js
View file

@ -1,218 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, {
Component,
} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import FocusTrap from 'focus-trap-react';
import tabbable from 'tabbable';
import { cascadingMenuKeyCodes } from '../../services';
import { KuiOutsideClickDetector } from '../outside_click_detector';
import { KuiPanelSimple, SIZES } from '../../components/panel_simple';
const anchorPositionToClassNameMap = {
'center': '',
'left': 'kuiPopover--anchorLeft',
'right': 'kuiPopover--anchorRight',
};
export const ANCHOR_POSITIONS = Object.keys(anchorPositionToClassNameMap);
export class KuiPopover extends Component {
constructor(props) {
super(props);
this.closingTransitionTimeout = undefined;
this.state = {
isClosing: false,
isOpening: false,
};
}
onKeyDown = e => {
if (e.keyCode === cascadingMenuKeyCodes.ESCAPE) {
this.props.closePopover();
}
};
updateFocus() {
// Wait for the DOM to update.
window.requestAnimationFrame(() => {
if (!this.panel) {
return;
}
// If we've already focused on something inside the panel, everything's fine.
if (this.panel.contains(document.activeElement)) {
return;
}
// Otherwise let's focus the first tabbable item and expedite input from the user.
const tabbableItems = tabbable(this.panel);
if (tabbableItems.length) {
tabbableItems[0].focus();
}
});
}
componentDidMount() {
this.updateFocus();
}
componentWillReceiveProps(nextProps) {
// The popover is being opened.
if (!this.props.isOpen && nextProps.isOpen) {
clearTimeout(this.closingTransitionTimeout);
// We need to set this state a beat after the render takes place, so that the CSS
// transition can take effect.
window.requestAnimationFrame(() => {
this.setState({
isOpening: true,
});
});
}
// The popover is being closed.
if (this.props.isOpen && !nextProps.isOpen) {
// If the user has just closed the popover, queue up the removal of the content after the
// transition is complete.
this.setState({
isClosing: true,
isOpening: false,
});
this.closingTransitionTimeout = setTimeout(() => {
this.setState({
isClosing: false,
});
}, 250);
}
}
componentDidUpdate() {
this.updateFocus();
}
componentWillUnmount() {
clearTimeout(this.closingTransitionTimeout);
}
panelRef = node => {
if (this.props.ownFocus) {
this.panel = node;
}
};
render() {
const {
anchorPosition,
button,
isOpen,
ownFocus,
withTitle,
children,
className,
closePopover,
panelClassName,
panelPaddingSize,
...rest
} = this.props;
const classes = classNames(
'kuiPopover',
anchorPositionToClassNameMap[anchorPosition],
className,
{
'kuiPopover-isOpen': this.state.isOpening,
'kuiPopover--withTitle': withTitle,
},
);
const panelClasses = classNames('kuiPopover__panel', panelClassName);
let panel;
if (isOpen || this.state.isClosing) {
let tabIndex;
let initialFocus;
if (ownFocus) {
tabIndex = '0';
initialFocus = () => this.panel;
}
panel = (
<FocusTrap
focusTrapOptions={{
clickOutsideDeactivates: true,
initialFocus,
}}
>
<KuiPanelSimple
panelRef={this.panelRef}
className={panelClasses}
paddingSize={panelPaddingSize}
tabIndex={tabIndex}
hasShadow
>
{children}
</KuiPanelSimple>
</FocusTrap>
);
}
return (
<KuiOutsideClickDetector onOutsideClick={closePopover}>
<div
className={classes}
onKeyDown={this.onKeyDown}
{...rest}
>
{button}
{panel}
</div>
</KuiOutsideClickDetector>
);
}
}
KuiPopover.propTypes = {
isOpen: PropTypes.bool,
ownFocus: PropTypes.bool,
withTitle: PropTypes.bool,
closePopover: PropTypes.func.isRequired,
button: PropTypes.node.isRequired,
children: PropTypes.node,
anchorPosition: PropTypes.oneOf(ANCHOR_POSITIONS),
panelClassName: PropTypes.string,
panelPaddingSize: PropTypes.oneOf(SIZES),
};
KuiPopover.defaultProps = {
isOpen: false,
ownFocus: false,
anchorPosition: 'center',
panelPaddingSize: 'm',
};

Some files were not shown because too many files have changed in this diff Show more