-
Notifications
You must be signed in to change notification settings - Fork 827
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
Showing
12 changed files
with
454 additions
and
22 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
ui/components/popovers/__tests__/__snapshots__/renders_a_feature_popover.json
Large diffs are not rendered by default.
Oops, something went wrong.
19 changes: 19 additions & 0 deletions
19
ui/components/popovers/__tests__/__snapshots__/renders_a_walkthrough_popover.json
Large diffs are not rendered by default.
Oops, something went wrong.
22 changes: 22 additions & 0 deletions
22
ui/components/popovers/__tests__/__snapshots__/renders_an_action_popover.json
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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.