Skip to content

Commit 7fba52d

Browse files
sahigamergify[bot]
sahiga
and
mergify[bot]
authored
fix(content-explorer): Align copy button in ShareDialog (#2093)
* fix(content-explorer): Align copy button in ShareDialog * fix(content-explorer): Align copy button in ShareDialog Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
1 parent 7b42192 commit 7fba52d

10 files changed

+133
-15
lines changed

‎.storybook/addons.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ import '@storybook/addon-actions/register';
33
import '@storybook/addon-links/register';
44
import '@storybook/addon-viewport/register';
55
import '@storybook/addon-notes/register-panel';
6+
import 'storybook-addon-intl/register';

‎.storybook/config.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import { configure, addParameters, addDecorator } from '@storybook/react';
22
import { withKnobs } from '@storybook/addon-knobs/react';
3+
import { setIntlConfig, withIntl } from 'storybook-addon-intl';
4+
import enUS from '../i18n/en-US';
5+
import deDE from '../i18n/de-DE';
6+
import frFR from '../i18n/fr-FR';
7+
import jaJP from '../i18n/ja-JP';
8+
import zhCN from '../i18n/zh-CN';
39

410
import '../scripts/styleguide.setup.js';
511
import customTheme from './customTheme';
@@ -22,4 +28,23 @@ addParameters({
2228
},
2329
});
2430

31+
// Enable translations in stories
32+
const messages = {
33+
'en': { ...enUS },
34+
'de': { ...deDE },
35+
'fr': { ...frFR },
36+
'jp': { ...jaJP },
37+
'zh': { ...zhCN },
38+
};
39+
40+
const getMessages = (locale) => messages[locale];
41+
42+
setIntlConfig({
43+
locales: ['en', 'de', 'fr', 'jp', 'zh'],
44+
defaultLocale: 'en',
45+
getMessages,
46+
});
47+
48+
addDecorator(withIntl);
49+
2550
configure([require.context('../src', true, /\.stories\.(js|tsx)$/)], module);

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,7 @@
288288
"source-map-loader": "^0.2.4",
289289
"start-server-and-test": "^1.10.8",
290290
"storybook": "^5.3.9",
291+
"storybook-addon-intl": "^2.4.1",
291292
"string-replace-loader": "^2.2.0",
292293
"style-loader": "^1.0.0",
293294
"styled-components": "^5.0.0",

‎src/elements/content-explorer/ShareDialog.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -69,20 +69,20 @@ const ShareDialog = ({
6969
<div className="be-modal-content">
7070
<label>
7171
<FormattedMessage tagName="div" {...messages.shareDialogText} />
72-
<span>
73-
<input
74-
ref={input => {
75-
textInput = input;
76-
}}
77-
onChange={noop}
78-
type="text"
79-
value={url}
80-
/>
81-
<PrimaryButton autoFocus className="be-modal-button-copy" onClick={copy} type="button">
82-
<FormattedMessage {...messages.copy} />
83-
</PrimaryButton>
84-
</span>
8572
</label>
73+
<div className="be-modal-input-group">
74+
<input
75+
ref={input => {
76+
textInput = input;
77+
}}
78+
onChange={noop}
79+
type="text"
80+
value={url}
81+
/>
82+
<PrimaryButton autoFocus className="be-modal-button-copy" onClick={copy} type="button">
83+
<FormattedMessage {...messages.copy} />
84+
</PrimaryButton>
85+
</div>
8686
</div>
8787
<div className="be-modal-btns">
8888
<ShareAccessSelect

‎src/elements/content-explorer/ShareDialog.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
position: relative;
1111

1212
input[type='text'] {
13-
width: 296px;
13+
flex-grow: 1;
14+
max-width: 296px;
1415
text-overflow: ellipsis;
1516
border-right: 0 none;
1617
border-radius: 3px 0 0 3px;
@@ -21,7 +22,13 @@
2122
}
2223
}
2324

25+
.be-modal-input-group {
26+
display: flex;
27+
justify-content: space-between;
28+
}
29+
2430
.be-modal-button-copy {
31+
min-width: 70px;
2532
height: 36px;
2633
margin: 0 0 0 -5px;
2734
padding: 0 10px;
@@ -36,5 +43,9 @@
3643
.be-modal-btns {
3744
align-items: center;
3845
justify-content: space-between;
46+
47+
.btn {
48+
margin: 0;
49+
}
3950
}
4051
}

‎src/elements/content-explorer/__tests__/ShareDialog.stories.test.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
describe('elements/content-explorer/ShareDialog', () => {
2+
const SHARE_DIALOG_STORY = 'elements-contentexplorer-sharedialog--share-dialog';
3+
4+
test(`looks visually correct when using story ${SHARE_DIALOG_STORY}`, async () => {
5+
const image = await BoxVisualTestUtils.takeModalScreenshot(SHARE_DIALOG_STORY);
6+
return expect(image).toMatchImageSnapshot();
7+
});
8+
});

‎src/elements/content-explorer/__tests__/__image_snapshots__/share-dialog-stories-test-js-elements-content-explorer-share-dialog-looks-visually-correct-when-using-story-elements-contentexplorer-sharedialog-share-dialog-1-snap.png‎

14.7 KB
Loading

‎src/elements/content-explorer/stories/ShareDialog.stories.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
// @flow
2+
import * as React from 'react';
3+
import { boolean } from '@storybook/addon-knobs';
4+
import { State, Store } from '@sambego/storybook-state';
5+
6+
import PrimaryButton from '../../../components/primary-button/PrimaryButton';
7+
import { ACCESS_OPEN } from '../../../constants';
8+
9+
import ShareDialog from '../ShareDialog';
10+
import notes from './ShareDialog.stories.md';
11+
12+
export const shareDialog = () => {
13+
const componentStore = new Store({
14+
isModalOpen: false,
15+
});
16+
17+
const openModal = () =>
18+
componentStore.set({
19+
isModalOpen: true,
20+
});
21+
22+
const closeModal = () => componentStore.set({ isModalOpen: false });
23+
24+
const rootElement = document.createElement('div');
25+
const appElement = document.createElement('div');
26+
rootElement.appendChild(appElement);
27+
if (document.body) {
28+
document.body.appendChild(rootElement);
29+
}
30+
31+
return (
32+
<State store={componentStore}>
33+
{state => (
34+
<div>
35+
<ShareDialog
36+
appElement={appElement}
37+
canSetShareAccess={boolean('canSetShareAccess', true)}
38+
isLoading={boolean('isLoading', false)}
39+
isOpen={state.isModalOpen}
40+
item={{
41+
id: 'abcdefg',
42+
shared_link: {
43+
access: ACCESS_OPEN,
44+
url: 'https://cloud.box.com/s/abcdefg',
45+
},
46+
}}
47+
onCancel={closeModal}
48+
onShareAccessChange={() => null}
49+
parentElement={rootElement}
50+
/>
51+
<PrimaryButton onClick={openModal}>Launch ShareDialog</PrimaryButton>
52+
</div>
53+
)}
54+
</State>
55+
);
56+
};
57+
58+
export default {
59+
title: 'Elements|ContentExplorer|ShareDialog',
60+
component: ShareDialog,
61+
parameters: {
62+
notes,
63+
},
64+
};

‎src/elements/content-explorer/stories/ShareDialog.stories.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
`import ShareDialog from 'src/elements/content-explorer/ShareDialog';`

‎yarn.lock‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21163,7 +21163,7 @@ prop-types-exact@^1.2.0:
2116321163
object.assign "^4.1.0"
2116421164
reflect.ownkeys "^0.2.0"
2116521165

21166-
prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.7.2:
21166+
prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.7.2:
2116721167
version "15.7.2"
2116821168
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
2116921169
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -24554,6 +24554,13 @@ store2@^2.7.1:
2455424554
resolved "https://registry.yarnpkg.com/store2/-/store2-2.10.0.tgz#46b82bb91878daf1b0d56dec2f1d41e54d5103cf"
2455524555
integrity sha512-tWEpK0snS2RPUq1i3R6OahfJNjWCQYNxq0+by1amCSuw0mXtymJpzmZIeYpA1UAa+7B0grCpNYIbDcd7AgTbFg==
2455624556

24557+
storybook-addon-intl@^2.4.1:
24558+
version "2.4.1"
24559+
resolved "https://registry.yarnpkg.com/storybook-addon-intl/-/storybook-addon-intl-2.4.1.tgz#870d990defde87615e490aa4ca18abec3ac19f2c"
24560+
integrity sha512-07CofbUQcx8axTWd2/x0CNyaNJzRFW+/idHg2W3fnimy9w56A088kJwQzefjVFVSJELFDL2kjG19pP3MJ2A0ng==
24561+
dependencies:
24562+
prop-types "^15.5.0"
24563+
2455724564
storybook-chromatic@^2.2.2:
2455824565
version "2.2.2"
2455924566
resolved "https://registry.yarnpkg.com/storybook-chromatic/-/storybook-chromatic-2.2.2.tgz#eade5178f334d6dd173dbe980c902ae90e727cb0"

0 commit comments

Comments
 (0)