Skip to content

Commit

Permalink
feat(panel): Add docked panels with documentation/tests (#3053)
Browse files Browse the repository at this point in the history
* 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 e88713e
Show file tree
Hide file tree
Showing 30 changed files with 4,872 additions and 46 deletions.
634 changes: 634 additions & 0 deletions test/__tests__/__snapshots__/Panel_Filtering.json

Large diffs are not rendered by default.

779 changes: 779 additions & 0 deletions test/__tests__/__snapshots__/Panel_Filtering_Error.json

Large diffs are not rendered by default.

734 changes: 734 additions & 0 deletions test/__tests__/__snapshots__/Panel_Filtering_Locked.json

Large diffs are not rendered by default.

718 changes: 718 additions & 0 deletions test/__tests__/__snapshots__/Panel_Filtering_New.json

Large diffs are not rendered by default.

146 changes: 146 additions & 0 deletions test/__tests__/__snapshots__/Panel_base.json

Large diffs are not rendered by default.

23 changes: 23 additions & 0 deletions test/__tests__/__snapshots__/Panel_base_Drawer.json

Large diffs are not rendered by default.

146 changes: 146 additions & 0 deletions test/__tests__/__snapshots__/Panel_base_Left_dock_drill_in.json

Large diffs are not rendered by default.

23 changes: 23 additions & 0 deletions test/__tests__/__snapshots__/Panel_base_Overlay.json

Large diffs are not rendered by default.

146 changes: 146 additions & 0 deletions test/__tests__/__snapshots__/Panel_base_Right_dock_drill_in.json

Large diffs are not rendered by default.

146 changes: 146 additions & 0 deletions test/__tests__/__snapshots__/Panel_base_header.json

Large diffs are not rendered by default.

146 changes: 146 additions & 0 deletions test/__tests__/__snapshots__/Panel_base_left_dock_toggle.json

Large diffs are not rendered by default.

146 changes: 146 additions & 0 deletions test/__tests__/__snapshots__/Panel_base_right_dock_toggle.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ui/components/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
'brand-band/base/index',

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

// Popovers
Expand Down

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

165 changes: 165 additions & 0 deletions ui/components/panels/__tests__/snapshot.spec.js
Original file line number Diff line number Diff line change
@@ -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>
));
});
184 changes: 184 additions & 0 deletions ui/components/panels/base/_index.scss
Original file line number Diff line number Diff line change
@@ -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);
}
7 changes: 7 additions & 0 deletions ui/components/panels/base/example.jsx
Original file line number Diff line number Diff line change
@@ -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 />;
Loading

0 comments on commit e88713e

Please sign in to comment.