Skip to content
Permalink
Browse files

feat(panel): Add docked panels with documentation/tests (#3053)

* Add new panel component

* Add tokens

* Add documentation and full width sizing class

* Add documentation and test

* Add more documentation and update snapshots

* Add animation and update snapshots

* Remove example test from filtering since they keep failing on travis

* Update documentation

* Add accessibility blocks to documentation

* Update documentation and snapshots

* Character encode html elements in blockquote
  • Loading branch information...
brandonferrua committed Feb 15, 2018
1 parent 60a628d commit e88713e86c8a32b0821dea040ca4783022bf6562
Showing with 4,872 additions and 46 deletions.
  1. +634 −0 test/__tests__/__snapshots__/Panel_Filtering.json
  2. +779 −0 test/__tests__/__snapshots__/Panel_Filtering_Error.json
  3. +734 −0 test/__tests__/__snapshots__/Panel_Filtering_Locked.json
  4. +718 −0 test/__tests__/__snapshots__/Panel_Filtering_New.json
  5. +146 −0 test/__tests__/__snapshots__/Panel_base.json
  6. +23 −0 test/__tests__/__snapshots__/Panel_base_Drawer.json
  7. +146 −0 test/__tests__/__snapshots__/Panel_base_Left_dock_drill_in.json
  8. +23 −0 test/__tests__/__snapshots__/Panel_base_Overlay.json
  9. +146 −0 test/__tests__/__snapshots__/Panel_base_Right_dock_drill_in.json
  10. +146 −0 test/__tests__/__snapshots__/Panel_base_header.json
  11. +146 −0 test/__tests__/__snapshots__/Panel_base_left_dock_toggle.json
  12. +146 −0 test/__tests__/__snapshots__/Panel_base_right_dock_toggle.json
  13. +1 −1 ui/components/_index.scss
  14. +16 −0 ui/components/panels/__tests__/__snapshots__/render_Panel_component_render_Base_Panel.json
  15. +16 −0 ui/components/panels/__tests__/__snapshots__/render_Panel_component_render_Base_Panel_drawer.json
  16. +16 −0 ui/components/panels/__tests__/__snapshots__/render_Panel_component_render_Base_Panel_full_size.json
  17. +16 −0 ...omponents/panels/__tests__/__snapshots__/render_Panel_component_render_Base_Panel_large_size.json
  18. +16 −0 ...mponents/panels/__tests__/__snapshots__/render_Panel_component_render_Base_Panel_medium_size.json
  19. +16 −0 ...omponents/panels/__tests__/__snapshots__/render_Panel_component_render_Base_Panel_small_size.json
  20. +16 −0 ...__tests__/__snapshots__/render_Panel_component_render_Base_Panel_with_left_position_drill_in.json
  21. +16 −0 ..._tests__/__snapshots__/render_Panel_component_render_Base_Panel_with_right_position_drill_in.json
  22. +16 −0 ...ponents/panels/__tests__/__snapshots__/render_Panel_component_render_Base_Panel_x_large_size.json
  23. +165 −0 ui/components/panels/__tests__/snapshot.spec.js
  24. +184 −0 ui/components/panels/base/_index.scss
  25. +7 −0 ui/components/panels/base/example.jsx
  26. +0 −41 ui/components/panels/detail/_index.scss
  27. +381 −0 ui/components/panels/docs.mdx
  28. +179 −0 ui/components/panels/index.jsx
  29. +15 −0 ui/components/panels/tokens/box-shadow.yml
  30. +9 −4 ui/utilities/sizing/_index.scss

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -83,7 +83,7 @@
'brand-band/base/index',

// Panels
'panels/detail/index',
'panels/base/index',
'panels/filtering/index',

// Popovers

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,165 @@
/* eslint-env jest */
import React from 'react';
import createHelpers from '../../../../jest.setup';
import Panel from '../';

const { matchesMarkupAndStyle } = createHelpers(__dirname);

describe('render Panel component', () => {
it('render Base Panel', () =>
matchesMarkupAndStyle(
<div
style={{
backgroundColor: '#fafaf9',
position: 'relative',
height: '600px',
overflow: 'hidden'
}}
>
<Panel size="medium" title="Panel Header" docked="left" invoke="toggle">
A panel body accepts any layout or component
</Panel>
</div>
));
it('render Base Panel with left position drill in', () =>
matchesMarkupAndStyle(
<div
style={{
backgroundColor: '#fafaf9',
position: 'relative',
height: '600px',
overflow: 'hidden'
}}
>
<Panel
size="medium"
title="Panel Header"
docked="left"
invoke="drill-in"
>
A panel body accepts any layout or component
</Panel>
</div>
));
it('render Base Panel with right position drill in', () =>
matchesMarkupAndStyle(
<div
style={{
backgroundColor: '#fafaf9',
position: 'relative',
height: '600px',
overflow: 'hidden'
}}
>
<Panel
size="medium"
title="Panel Header"
docked="right"
invoke="drill-in"
>
A panel body accepts any layout or component
</Panel>
</div>
));
it('render Base Panel drawer', () =>
matchesMarkupAndStyle(
<div
style={{
backgroundColor: '#fafaf9',
position: 'relative',
height: '600px',
overflow: 'hidden'
}}
>
<Panel
size="medium"
title="Panel Header"
docked="left"
invoke="toggle"
isStatic
>
A panel body accepts any layout or component
</Panel>
</div>
));
it('render Base Panel small size', () =>
matchesMarkupAndStyle(
<div
style={{
backgroundColor: '#fafaf9',
position: 'relative',
height: '600px',
overflow: 'hidden'
}}
>
<Panel size="small" title="Panel Header" docked="left" invoke="toggle">
A panel body accepts any layout or component
</Panel>
</div>
));
it('render Base Panel medium size', () =>
matchesMarkupAndStyle(
<div
style={{
backgroundColor: '#fafaf9',
position: 'relative',
height: '600px',
overflow: 'hidden'
}}
>
<Panel size="medium" title="Panel Header" docked="left" invoke="toggle">
A panel body accepts any layout or component
</Panel>
</div>
));
it('render Base Panel large size', () =>
matchesMarkupAndStyle(
<div
style={{
backgroundColor: '#fafaf9',
position: 'relative',
height: '600px',
overflow: 'hidden'
}}
>
<Panel size="large" title="Panel Header" docked="left" invoke="toggle">
A panel body accepts any layout or component
</Panel>
</div>
));
it('render Base Panel x-large size', () =>
matchesMarkupAndStyle(
<div
style={{
backgroundColor: '#fafaf9',
position: 'relative',
height: '600px',
overflow: 'hidden'
}}
>
<Panel
size="x-large"
title="Panel Header"
docked="left"
invoke="toggle"
>
A panel body accepts any layout or component
</Panel>
</div>
));
it('render Base Panel full size', () =>
matchesMarkupAndStyle(
<div
style={{
backgroundColor: '#fafaf9',
position: 'relative',
height: '600px',
overflow: 'hidden'
}}
>
<Panel size="full" title="Panel Header" docked="left" invoke="toggle">
A panel body accepts any layout or component
</Panel>
</div>
));
});
@@ -0,0 +1,184 @@
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
* @summary Panel component
*
* @name base
* @selector .slds-panel
* @restrict div
* @variant
*/
.slds-panel {
background: $color-background-alt;
border-radius: $border-radius-medium;

/**
* Contains sub sections of a panel
*
* @selector .slds-panel__section
* @restrict .slds-panel div
* @required
*/
&__section {
padding: $spacing-medium;
}

/**
* Contains form actions at the bottom of a panel
*
* @selector .slds-panel__actions
* @restrict .slds-panel div
* @required
*/
&__actions {
padding: $spacing-small;
}

&.slds-is-editing {
box-shadow: $shadow-drop-down;
}
}

/**
* @summary Header element of a panel
* @selector .slds-panel__header
* @restrict .slds-panel div
*/
.slds-panel__header {
display: flex;
position: relative;
padding: $spacing-small $spacing-xx-large;
border-bottom: $border-width-thin solid $color-border;
}

/**
* @summary Modifier that notifies panel header that something other than a title and close button exist
* @selector .slds-panel__header_custom
* @restrict .slds-panel__header
* @modifier
*/
.slds-panel__header_custom {
padding: $spacing-small $spacing-medium;
}

/**
* @summary Close button of a panel
* @selector .slds-panel__close
* @restrict .slds-panel .slds-button
*/
.slds-panel__close {
position: absolute;
right: $spacing-small;
top: 50%;
margin-top: (($square-icon-small-boundary / 2) * -1);
}

/**
* @summary Body element of a panel
* @selector .slds-panel__body
* @restrict .slds-panel div
*/
.slds-panel__body {
padding: $spacing-medium;
}

/**
* @summary Modifier that changes the display of a panel to dock to the viewport
* @selector .slds-panel_docked
* @restrict .slds-panel
* @modifier
*/
.slds-panel_docked {
position: absolute;
top: 0;
bottom: 0;
min-width: $size-small;
height: 100%;
border-radius: 0;
transition: transform 300ms ease;

/**
* @summary Title of the header panel
* @selector .slds-panel__header-title
* @restrict .slds-panel__header h2
*/
.slds-panel__header-title {
text-align: center;
width: 100%;
}
}

/**
* @summary Modifier that changes the display of a panel to dock but reflow the panel
* @selector .slds-panel_drawer
* @restrict .slds-panel_docked
* @modifier
*/
.slds-panel_drawer {
position: relative;
}

/**
* @summary Modifier that changes the position of a panel to the left
* @selector .slds-panel_docked-left
* @restrict .slds-panel_docked
* @modifier
*/
.slds-panel_docked-left {
left: 0;
box-shadow: $panel-docked-left-shadow;

/**
* @summary Modifier that informs the panel that it was invoked by a drill in link
* @selector .slds-is-directional
* @restrict .slds-panel_docked
* @modifier
*/
&.slds-is-directional .slds-panel__close {
left: $spacing-small;
right: auto;
}
}

/**
* @summary Modifier that changes the position of a panel to the right
* @selector .slds-panel_docked-right
* @restrict .slds-panel_docked
* @modifier
*/
.slds-panel_docked-right {
right: 0;
box-shadow: $panel-docked-right-shadow;

&.slds-is-directional .slds-panel__close {
right: $spacing-small;
left: auto;
}
}

.slds-panel_drawer.slds-panel_slide-in {
display: block;
}

.slds-panel_drawer.slds-panel_slide-out {
display: none;
}

/**
* @summary Animates the panel back into the canvas
* @selector .slds-panel_slide-in
* @restrict .slds-panel
*/
.slds-panel.slds-panel_slide-in {
transform: translate3d(0, 0, 0);
}

/**
* @summary Animates the panel off the canvas
* @selector .slds-panel_slide-out
* @restrict .slds-panel
*/
.slds-panel.slds-panel_slide-out {
transform: translate3d(-120%, 0, 0);
}
@@ -0,0 +1,7 @@
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

import React from 'react';
import Panel, { PanelPlayground } from '../';

export default <PanelPlayground />;
Oops, something went wrong.

0 comments on commit e88713e

Please sign in to comment.
You can’t perform that action at this time.