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.

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,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
Oops, something went wrong.

0 comments on commit 08b2aac

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