Skip to content

Commit 2963c1c

Browse files
kflournoy-sfkflournoy-sf
authored
fix(drop zone): fix IE11 layout problem with label (#4578)
* bug(drop zone): fix IE11 layout problem with label * fix(drop zone): small change to spark new build for VRT
1 parent 8e18c9e commit 2963c1c

File tree

7 files changed

+77
-63
lines changed

7 files changed

+77
-63
lines changed

‎RELEASENOTES.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@
3636
#### Added
3737
- Added Kinetic styles and demo functionality for Button Base, Brand, Neutral, Inverse, Outline Brand, Destructive and Success
3838

39+
### [Drop Zone](https://www.lightningdesignsystem.com/components/drop-zone)
40+
#### Changed
41+
- Changed `flex-basis` to `auto` for the drop zone label to fix a layout issue in IE11
42+
3943
### [Icons](https://www.lightningdesignsystem.com/components/icons)
4044
#### Changed
4145
- Changed `product_quantity_rules` icon's color from light blue to salem green (#04844B)

‎applitools.config.js

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,12 @@ module.exports = {
1212
level: 'AA',
1313
guidelinesVersion: 'WCAG_2_0'
1414
},
15-
properties: [
16-
{ name: 'Group', value: 'desktop' }
17-
],
18-
batchName: process.env.CI
19-
? undefined
20-
: '',
15+
properties: [{ name: 'Group', value: 'desktop' }],
16+
batchName: process.env.CI ? undefined : '',
2117
branchName: process.env.CI
22-
? undefined
23-
: `localRun/${process.env.LOGNAME}/${currentBranch}`,
24-
parentBranchName: process.env.CI
25-
? undefined
26-
: `localRun/${currentBranch}`,
18+
? undefined
19+
: `localRun/${process.env.LOGNAME}/${currentBranch}`,
20+
parentBranchName: process.env.CI ? undefined : `localRun/${currentBranch}`,
2721
showLogs: process.env.CI || false,
2822
showStorybookOutput: process.env.CI || false,
2923
// saveDebugData: false,
@@ -32,12 +26,15 @@ module.exports = {
3226
serverUrl: 'https://salesforceuxeyesapi.applitools.com',
3327
testBlueprintPattern: '.*',
3428
testNamePattern: '^Kitchen Sink',
35-
include: function ({ name, kind, parameters }) {
36-
return new RegExp(this.testBlueprintPattern, 'gi').test(kind) && new RegExp(this.testNamePattern, 'gi').test(name);
29+
include: function({ name, kind, parameters }) {
30+
return (
31+
new RegExp(this.testBlueprintPattern, 'gi').test(kind) &&
32+
new RegExp(this.testNamePattern, 'gi').test(name)
33+
);
3734
},
3835
puppeteerOptions: process.env.CIRCLECI
39-
? { executablePath: '/usr/bin/google-chrome' }
40-
: undefined,
36+
? { executablePath: '/usr/bin/google-chrome' }
37+
: undefined,
4138
waitBeforeScreenshot: 250,
4239
browser: [
4340
{ width: resolution.width, height: resolution.height, name: 'firefox' },

‎applitools.legacy.config.js

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,11 @@ module.exports = {
1313
guidelinesVersion: 'WCAG_2_0'
1414
},
1515
properties: [{ name: 'Group', value: 'legacy' }],
16-
batchName: process.env.CI
17-
? undefined
18-
: '',
16+
batchName: process.env.CI ? undefined : '',
1917
branchName: process.env.CI
2018
? undefined
2119
: `localRun/${process.env.LOGNAME}/${currentBranch}`,
22-
parentBranchName: process.env.CI
23-
? undefined
24-
: `localRun/${currentBranch}`,
20+
parentBranchName: process.env.CI ? undefined : `localRun/${currentBranch}`,
2521
showLogs: process.env.CI || false,
2622
showStorybookOutput: process.env.CI || false,
2723
// saveDebugData: false,
@@ -30,8 +26,11 @@ module.exports = {
3026
serverUrl: 'https://salesforceuxeyesapi.applitools.com',
3127
testBlueprintPattern: '.*',
3228
testNamePattern: '^Kitchen Sink',
33-
include: function ({ name, kind, parameters }) {
34-
return new RegExp(this.testBlueprintPattern, 'gi').test(kind) && new RegExp(this.testNamePattern, 'gi').test(name);
29+
include: function({ name, kind, parameters }) {
30+
return (
31+
new RegExp(this.testBlueprintPattern, 'gi').test(kind) &&
32+
new RegExp(this.testNamePattern, 'gi').test(name)
33+
);
3534
},
3635
puppeteerOptions: process.env.CIRCLECI
3736
? { executablePath: '/usr/bin/google-chrome' }

‎applitools.mobile.config.js

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,12 @@ module.exports = {
1111
level: 'AA',
1212
guidelinesVersion: 'WCAG_2_0'
1313
},
14-
properties: [
15-
{ name: 'Group', value: 'mobile' }
16-
],
17-
batchName: process.env.CI
18-
? undefined
19-
: '',
14+
properties: [{ name: 'Group', value: 'mobile' }],
15+
batchName: process.env.CI ? undefined : '',
2016
branchName: process.env.CI
21-
? undefined
22-
: `localRun/${process.env.LOGNAME}/${currentBranch}`,
23-
parentBranchName: process.env.CI
24-
? undefined
25-
: `localRun/${currentBranch}`,
17+
? undefined
18+
: `localRun/${process.env.LOGNAME}/${currentBranch}`,
19+
parentBranchName: process.env.CI ? undefined : `localRun/${currentBranch}`,
2620
showLogs: process.env.CI || false,
2721
showStorybookOutput: process.env.CI || false,
2822
// saveDebugData: false,
@@ -31,18 +25,21 @@ module.exports = {
3125
serverUrl: 'https://salesforceuxeyesapi.applitools.com',
3226
testBlueprintPattern: '.*',
3327
testNamePattern: '^Kitchen Sink',
34-
include: function ({ name, kind, parameters }) {
35-
return new RegExp(this.testBlueprintPattern, 'gi').test(kind) && new RegExp(this.testNamePattern, 'gi').test(name);
28+
include: function({ name, kind, parameters }) {
29+
return (
30+
new RegExp(this.testBlueprintPattern, 'gi').test(kind) &&
31+
new RegExp(this.testNamePattern, 'gi').test(name)
32+
);
3633
},
3734
puppeteerOptions: process.env.CIRCLECI
38-
? { executablePath: '/usr/bin/google-chrome' }
39-
: undefined,
35+
? { executablePath: '/usr/bin/google-chrome' }
36+
: undefined,
4037
waitBeforeScreenshot: 250,
4138
browser: [
4239
{
4340
iosDeviceInfo: {
4441
deviceName: 'iPhone XR',
45-
screenOrientation: 'portrait',
42+
screenOrientation: 'portrait'
4643
}
4744
}
4845
]

‎applitools.prompts.js

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@ const pkg = require('./package.json');
55

66
const yargs = require('yargs');
77

8-
const argv = yargs.option('type', {
8+
const argv = yargs
9+
.option('type', {
910
alias: 't',
1011
describe: 'provide the type of run (standard, legacy, mobile)',
1112
demandOption: true,
1213
default: 'standard',
1314
type: 'string'
1415
})
1516
.help()
16-
.alias('help', 'h')
17-
.argv;
17+
.alias('help', 'h').argv;
1818

1919
let runType = '';
2020

@@ -125,22 +125,24 @@ async function ask() {
125125
name: 'showLogs',
126126
message: `Would you like to show Applitools output logs?\n `
127127
}
128-
])
129-
.catch(console.error);
130-
};
128+
]).catch(console.error);
129+
}
131130

132131
const chalk = require('chalk');
133-
console.log(chalk.blue(`\n
132+
console.log(
133+
chalk.blue(`\n
134134
██████╗ ███████╗███████╗ ██╗ ██╗██████╗ ████████╗
135135
██╔══██╗██╔════╝██╔════╝ ██║ ██║██╔══██╗╚══██╔══╝
136136
██║ ██║███████╗█████╗ ██║ ██║██████╔╝ ██║
137137
██║ ██║╚════██║██╔══╝ ╚██╗ ██╔╝██╔══██╗ ██║
138138
██████╔╝███████║███████╗ ╚████╔╝ ██║ ██║ ██║
139-
╚═════╝ ╚══════╝╚══════╝ ╚═══╝ ╚═╝ ╚═╝ ╚═╝ \n`));
139+
╚═════╝ ╚══════╝╚══════╝ ╚═══╝ ╚═╝ ╚═╝ ╚═╝ \n`)
140+
);
140141

141142
// Special note when running mobile VRT
142143
if (argv.type === 'mobile') {
143-
console.log(chalk.inverse(`
144+
console.log(
145+
chalk.inverse(`
144146
╓───────────────────────────────────────────────────────╖
145147
║ ║
146148
║ Please keep in mind that the mobile ║
@@ -150,14 +152,17 @@ if (argv.type === 'mobile') {
150152
║ > npm run start:mobile ║
151153
║ ║
152154
╙───────────────────────────────────────────────────────╜
153-
\n`));
155+
\n`)
156+
);
154157
}
155158

156159
ask().then(async answers => {
157160
const template = require(`./applitools.${runType}config`);
158161

159162
// add proper full "kind" search regular expression
160-
answers.testBlueprintPattern = `${answers.testKindPattern}${answers.testKindSubPattern}$`;
163+
answers.testBlueprintPattern = `${answers.testKindPattern}${
164+
answers.testKindSubPattern
165+
}$`;
161166

162167
const userConfig = Object.keys(answers).reduce((acc, key) => {
163168
if (key in template) {
@@ -168,24 +173,26 @@ ask().then(async answers => {
168173

169174
const config = Object.assign(template, userConfig);
170175

171-
const parsedConfig = Object.keys(config).map(key => {
172-
const value = config[key];
173-
const type = typeof value;
174-
175-
if (type === 'object') {
176-
return `${key}: ${JSON.stringify(value, null, 4)}`;
177-
} else if (type === 'string') {
178-
return `${key}: '${value}'`
179-
} else {
180-
return `${key}: ${value}`;
181-
}
182-
}).join(',\n ');
176+
const parsedConfig = Object.keys(config)
177+
.map(key => {
178+
const value = config[key];
179+
const type = typeof value;
180+
181+
if (type === 'object') {
182+
return `${key}: ${JSON.stringify(value, null, 4)}`;
183+
} else if (type === 'string') {
184+
return `${key}: '${value}'`;
185+
} else {
186+
return `${key}: ${value}`;
187+
}
188+
})
189+
.join(',\n ');
183190

184191
const configExport = `
185192
module.exports = {
186193
${parsedConfig}
187194
}
188-
`
195+
`;
189196

190197
await fs.writeFile(`./applitools.${runType}config.local.js`, configExport);
191198
});

‎ui/components/drop-zone/RELEASENOTES.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44

55
<!-- ## [Unreleased] -->
66

7+
## 2.15.0
8+
9+
### Changed
10+
11+
- Changed `flex-basis` to `auto` for the drop zone label to fix a layout issue in IE11
12+
713
## 2.7.0
814

915
### Added

‎ui/components/drop-zone/base/_index.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,10 @@
6464
opacity: 0;
6565
background: $color-background-brand-primary;
6666
}
67+
68+
.slds-media__body {
69+
flex-basis: auto; // Fix IE11 bug
70+
}
6771
}
6872

6973
/**

0 commit comments

Comments
 (0)