Skip to content

Commit

Permalink
Bug 1846108 - Add styles for feature callout survey confirmation scre…
Browse files Browse the repository at this point in the history
…en r=aminomancer

Differential Revision: https://phabricator.services.mozilla.com/D184876
jwayn committed Jul 29, 2023
1 parent e3cd329 commit ddff487
Showing 5 changed files with 60 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -1126,6 +1126,7 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
className: `screen ${this.props.id || ""}
${screenClassName} ${textColorClass}`,
role: "alertdialog",
layout: content.layout,
pos: content.position || "center",
tabIndex: "-1",
"aria-labelledby": "mainContentHeader",
20 changes: 20 additions & 0 deletions browser/components/newtab/aboutwelcome/content/aboutwelcome.css
Original file line number Diff line number Diff line change
@@ -209,6 +209,26 @@
min-height: unset;
overflow: visible;
}
.onboardingContainer.featureCallout .screen[pos=callout][layout=inline] .section-main .main-content,
.onboardingContainer.featureCallout .screen[pos=callout][layout=inline] .section-main .main-content.no-steps {
width: 18em;
padding-inline: 16px;
padding-block: 0;
}
.onboardingContainer.featureCallout .screen[pos=callout][layout=inline] .section-main .main-content .welcome-text,
.onboardingContainer.featureCallout .screen[pos=callout][layout=inline] .section-main .main-content.no-steps .welcome-text {
margin-block: 12px 14px;
margin-inline: 0;
padding: 0;
}
.onboardingContainer.featureCallout .screen[pos=callout][layout=inline] .section-main .dismiss-button {
height: 24px;
width: 24px;
min-height: 24px;
min-width: 24px;
margin-block: 11px 0;
margin-inline: 0 12px;
}
.onboardingContainer.featureCallout .screen[pos=callout] .logo-container {
display: flex;
justify-content: center;
Original file line number Diff line number Diff line change
@@ -444,6 +444,7 @@ export class ProtonScreen extends React.PureComponent {
className={`screen ${this.props.id || ""}
${screenClassName} ${textColorClass}`}
role="alertdialog"
layout={content.layout}
pos={content.position || "center"}
tabIndex="-1"
aria-labelledby="mainContentHeader"
26 changes: 26 additions & 0 deletions browser/components/newtab/content-src/styles/_feature-callout.scss
Original file line number Diff line number Diff line change
@@ -80,6 +80,32 @@
min-height: unset;
overflow: visible;

&[layout='inline'] {
.section-main {
.main-content,
.main-content.no-steps {
width: 18em;
padding-inline: 16px;
padding-block: 0;

.welcome-text {
margin-block: 12px 14px;
margin-inline: 0;
padding: 0;
}
}

.dismiss-button {
height: 24px;
width: 24px;
min-height: 24px;
min-width: 24px;
margin-block: 11px 0;
margin-inline: 0 12px;
}
}
}

.logo-container {
display: flex;
justify-content: center;
Original file line number Diff line number Diff line change
@@ -266,6 +266,18 @@ describe("MultiStageAboutWelcomeProton module", () => {
assert.ok(wrapper.exists());
assert.equal(wrapper.find(".steps.progress-bar").exists(), true);
});

it("should render confirmation-screen if layout property is set to inline", () => {
const SCREEN_PROPS = {
content: {
title: "test title",
layout: "inline",
},
};
const wrapper = mount(<MultiStageProtonScreen {...SCREEN_PROPS} />);
assert.ok(wrapper.exists());
assert.equal(wrapper.find("[layout='inline']").exists(), true);
});
});

describe("AboutWelcomeDefaults for proton", () => {

0 comments on commit ddff487

Please sign in to comment.