Skip to content
Permalink
Browse files
fix(popovers): update background and styling of walkthrough popovers …
…(#2792)

* fix(popovers): update background and styling of walkthrough popovers

* fix(popovers): add new nubbin colors

* fix(popovers): add feature variant, tests, and tokens

* chore(popovers): delete snapshots

* chore(popovers): add tests and specify port

* chore(popovers): extend Footer component in walkthrough

* chore(popovers): skip tests until port issue is resolved

* chore(popovers): remove title and add back tests

* chore(popovers): update snapshots

* chore(popovers): skip tests until hyphens issue is resolved
  • Loading branch information
engai committed Oct 3, 2017
1 parent 92933ad commit 08b2aaca3bd5f81dfc6b6cbcfa5cf2e138f0a881
Binary file not shown.
Binary file not shown.
@@ -97,3 +97,15 @@ props:
value: '{!PALETTE_GRAY_2}'
TABLE_COLOR_BACKGROUND_HEADER_HOVER:
value: '{!PALETTE_GRAY_1}'
POPOVER_WALKTHROUGH_COLOR_BACKGROUND:
value: '#032e61'
POPOVER_WALKTHROUGH_HEADER_COLOR_BACKGROUND:
value: '#164A85'
POPOVER_WALKTHROUGH_COLOR_BACKGROUND_ALT:
value: '#164A85'
POPOVER_WALKTHROUGH_IMAGE:
value: '/assets/images/popovers/popover-body.png'
type: string
POPOVER_WALKTHROUGH_HEADER_IMAGE:
value: '/assets/images/popovers/popover-header.png'
type: string

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

@@ -0,0 +1,81 @@
/* eslint-env jest */
import React from 'react';
import SvgIcon from '../../../shared/svg-icon';
import { Popover } from '../base/example';
import { Header, Footer } from '../walkthrough/example';

import createHelpers from '../../../../jest.setup';

const { matchesMarkupAndStyle } = createHelpers(__dirname, 8080);
const headingUniqueId = 'dialog-heading-id-01';

xit('renders a walkthrough popover', () =>
matchesMarkupAndStyle(
<Popover
className="slds-popover_walkthrough slds-nubbin_left"
headingId={headingUniqueId}
header={<Header title="Manage your channels" />}
footer={<Footer nextButton />}
closeButton
inverse
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</Popover>
)
);

xit('renders an action popover', () =>
matchesMarkupAndStyle(
<Popover
className="slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left"
headingId={headingUniqueId}
closeButton
inverse
>
<div className="slds-media">
<div className="slds-media__figure">
<span
className="slds-icon_container"
title="description of icon when needed"
>
<SvgIcon
className="slds-icon slds-icon_small slds-icon-text-default"
sprite="utility"
symbol="touch_action"
/>
<span className="slds-assistive-text">Description of icon</span>
</span>
</div>
<div className="slds-media__body">
<h2 id={headingUniqueId} className="slds-text-heading_small">
Text that describes the action
</h2>
<p className="slds-m-top_medium slds-text-title">Step 3 of 4</p>
</div>
</div>
</Popover>
)
);

xit('renders a feature popover', () =>
matchesMarkupAndStyle(
<Popover
className="slds-popover_walkthrough slds-popover_feature slds-nubbin_left"
headingId={headingUniqueId}
closeButton
inverse
>
<div className="slds-media">
<div className="slds-media__body">
<h2 id={headingUniqueId} className="slds-text-heading_small">
Shelly, it seems you frequent this record. Try favoriting it for
easy access.
</h2>
</div>
</div>
</Popover>
)
);
@@ -0,0 +1,16 @@
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
* Feature components are use to describe notable features
*
* @summary Initializes a feature non-modal dialog
*
* @name feature
* @selector .slds-popover_feature
* @restrict .slds-popover
* @variant
*/

// Styles for feature popover are in walkthrough variant due to similar styling with action popovers.
// When styling changes, move .slds-popover_feature selector into this file
@@ -0,0 +1,183 @@
// 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 SvgIcon from '../../../shared/svg-icon';
import { ButtonIcon } from '../../button-icons/base/example';
import { Popover } from '../base/example';
import { Footer } from '../walkthrough/example';
import classNames from 'classnames';

const headingUniqueId = 'dialog-heading-id-01';

/// ///////////////////////////////////////////
// Export
/// ///////////////////////////////////////////

export default (
<Popover
className="slds-popover_walkthrough slds-popover_feature slds-nubbin_left"
headingId={headingUniqueId}
closeButton
inverse
>
<div className="slds-media">
<div className="slds-media__body">
<h2 id={headingUniqueId} className="slds-text-heading_small">
Shelly, it seems you frequent this record. Try favoriting it for easy
access.
</h2>
</div>
</div>
</Popover>
);

export let examples = [
{
id: 'icon-text',
label: 'With icon and text',
element: (
<Popover
className="slds-popover_walkthrough slds-popover_feature slds-nubbin_left"
headingId={headingUniqueId}
closeButton
inverse
>
<div className="slds-media">
<div className="slds-media__figure">
<span
className="slds-icon_container"
title="description of icon when needed"
>
<SvgIcon
className="slds-icon slds-icon_small slds-icon-text-default"
sprite="utility"
symbol="favorite"
/>
<span className="slds-assistive-text">Description of icon</span>
</span>
</div>
<div className="slds-media__body">
<h2 id={headingUniqueId} className="slds-text-heading_small">
Shelly, it seems you frequent this record. Try favoriting it for
easy access.
</h2>
</div>
</div>
</Popover>
)
},
{
id: 'icon-header-text-link',
label: 'With icon, header, text, and link',
element: (
<Popover
className="slds-popover_walkthrough slds-popover_feature slds-nubbin_left"
headingId={headingUniqueId}
closeButton
inverse
>
<div className="slds-media">
<div className="slds-media__figure">
<span
className="slds-icon_container"
title="description of icon when needed"
>
<SvgIcon
className="slds-icon slds-icon_small slds-icon-text-default"
sprite="utility"
symbol="smiley_and_people"
/>
<span className="slds-assistive-text">Description of icon</span>
</span>
</div>
<div className="slds-media__body">
<h2 id={headingUniqueId} className="slds-text-heading_small">
Title
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.{' '}
<a>Learn more</a>
</p>
</div>
</div>
</Popover>
)
},
{
id: 'icon-header-text',
label: 'With icon, header, and text',
element: (
<Popover
className="slds-popover_walkthrough slds-popover_feature slds-nubbin_left"
headingId={headingUniqueId}
closeButton
inverse
>
<div className="slds-media">
<div className="slds-media__figure">
<span
className="slds-icon_container"
title="description of icon when needed"
>
<SvgIcon
className="slds-icon slds-icon_small slds-icon-text-default"
sprite="utility"
symbol="description"
/>
<span className="slds-assistive-text">Description of icon</span>
</span>
</div>
<div className="slds-media__body">
<h2 id={headingUniqueId} className="slds-text-heading_small">
Title
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</Popover>
)
},
{
id: 'icon-header-text-footer',
label: 'With icon, header, text, and footer',
element: (
<Popover
className="slds-popover_walkthrough slds-popover_feature slds-nubbin_left"
headingId={headingUniqueId}
footer={<Footer learnMoreButton />}
closeButton
inverse
>
<div className="slds-media">
<div className="slds-media__figure">
<span
className="slds-icon_container"
title="description of icon when needed"
>
<SvgIcon
className="slds-icon slds-icon_small slds-icon-text-default"
sprite="utility"
symbol="favorite"
/>
<span className="slds-assistive-text">Description of icon</span>
</span>
</div>
<div className="slds-media__body">
<h2 id={headingUniqueId} className="slds-text-heading_small">
Title
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</Popover>
)
}
];
@@ -0,0 +1,28 @@
global:
type: color
category: background-color
cssProperties:
- 'background*'
- 'border*'
- box-shadow
imports:
- "../../../../design-tokens/force-base/aliases/color.yml"
props:
POPOVER_WALKTHROUGH_COLOR_BACKGROUND:
value: '{!DEEP_COVE}'
comment: The default background color for Popover Walkthrough
POPOVER_WALKTHROUGH_HEADER_COLOR_BACKGROUND:
value: '{!BISCAY}'
comment: The default background color for Popover Walkthrough Header
POPOVER_WALKTHROUGH_COLOR_BACKGROUND_ALT:
value: '{!SCIENCE_BLUE}'
comment: The default background color for alternative Popover Walkthrough
POPOVER_WALKTHROUGH_CLOUD_COLOR_BACKGROUND:
value: '#215ca0'
comment: The background color for Popover Walkthrough Cloud Nubbins
POPOVER_WALKTHROUGH_IMAGE:
value: ''
type: string
POPOVER_WALKTHROUGH_HEADER_IMAGE:
value: ''
type: string

0 comments on commit 08b2aac

Please sign in to comment.