Skip to content

Commit e7d9a70

Browse files
interactivellamainteractivellama
authored
Merge pull request #1973 from kevinparkerson/carousel-design-updates
Carousel: Design updates
2 parents e411d94 + d2c094c commit e7d9a70

13 files changed

+338
-357
lines changed

‎components/carousel/__docs__/__snapshots__/storybook-stories.storyshot‎

Lines changed: 237 additions & 182 deletions
Large diffs are not rendered by default.

‎components/carousel/__examples__/default-with-autoplay.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ const items = [
2525
},
2626
{
2727
id: 3,
28-
heading: 'Download SalesforceA',
28+
heading: 'Download Salesforce Apps',
2929
description: "Get the mobile app that's just for Salesforce admins.",
30-
imageAssistiveText: 'SalesforceA',
30+
imageAssistiveText: 'Salesforce Apps',
3131
src: '/assets/images/carousel/carousel-03.jpg',
3232
href: 'https://www.salesforce.com',
3333
},
@@ -51,7 +51,7 @@ const items = [
5151
id: 6,
5252
heading: 'Carousel Item 6',
5353
description: 'Description for carousel item #6',
54-
imageAssistiveText: 'SalesforceA',
54+
imageAssistiveText: 'Salesforce Apps',
5555
src: '/assets/images/carousel/carousel-03.jpg',
5656
href: 'https://www.salesforce.com',
5757
},
@@ -73,7 +73,8 @@ class Example extends React.Component {
7373
<IconSettings iconPath="/assets/icons">
7474
<div
7575
style={{
76-
maxWidth: '1280px',
76+
margin: '0 auto',
77+
maxWidth: '774px',
7778
}}
7879
>
7980
<Carousel

‎components/carousel/__examples__/default-with-navigation.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ const items = [
2525
},
2626
{
2727
id: 3,
28-
heading: 'Download SalesforceA',
28+
heading: 'Download Salesforce Apps',
2929
description: "Get the mobile app that's just for Salesforce admins.",
30-
imageAssistiveText: 'SalesforceA',
30+
imageAssistiveText: 'Salesforce Apps',
3131
src: '/assets/images/carousel/carousel-03.jpg',
3232
href: 'https://www.salesforce.com',
3333
},
@@ -51,7 +51,7 @@ const items = [
5151
id: 6,
5252
heading: 'Carousel Item 6',
5353
description: 'Description for carousel item #6',
54-
imageAssistiveText: 'SalesforceA',
54+
imageAssistiveText: 'Salesforce Apps',
5555
src: '/assets/images/carousel/carousel-03.jpg',
5656
href: 'https://www.salesforce.com',
5757
},
@@ -73,7 +73,8 @@ class Example extends React.Component {
7373
<IconSettings iconPath="/assets/icons">
7474
<div
7575
style={{
76-
maxWidth: '1280px',
76+
margin: '0 auto',
77+
maxWidth: '774px',
7778
}}
7879
>
7980
<Carousel

‎components/carousel/__examples__/default.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ const items = [
2525
},
2626
{
2727
id: 3,
28-
heading: 'Download SalesforceA',
28+
heading: 'Download Salesforce Apps',
2929
description: "Get the mobile app that's just for Salesforce admins.",
30-
imageAssistiveText: 'SalesforceA',
30+
imageAssistiveText: 'Salesforce Apps',
3131
src: '/assets/images/carousel/carousel-03.jpg',
3232
href: 'https://www.salesforce.com',
3333
},
@@ -51,7 +51,7 @@ const items = [
5151
id: 6,
5252
heading: 'Carousel Item 6',
5353
description: 'Description for carousel item #6',
54-
imageAssistiveText: 'SalesforceA',
54+
imageAssistiveText: 'Salesforce Apps',
5555
src: '/assets/images/carousel/carousel-03.jpg',
5656
href: 'https://www.salesforce.com',
5757
},
@@ -73,7 +73,8 @@ class Example extends React.Component {
7373
<IconSettings iconPath="/assets/icons">
7474
<div
7575
style={{
76-
maxWidth: '1280px',
76+
margin: '0 auto',
77+
maxWidth: '774px',
7778
}}
7879
>
7980
<Carousel

‎components/carousel/__examples__/five-items.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ const items = [
2828
{
2929
buttonLabel: 'Get Started',
3030
id: 3,
31-
heading: 'Download SalesforceA',
31+
heading: 'Download Salesforce Apps',
3232
description: "Get the mobile app that's just for Salesforce admins.",
33-
imageAssistiveText: 'SalesforceA',
33+
imageAssistiveText: 'Salesforce Apps',
3434
src: '/assets/images/carousel/carousel-03.jpg',
3535
href: 'https://www.salesforce.com',
3636
},
@@ -57,7 +57,7 @@ const items = [
5757
id: 6,
5858
heading: 'Carousel Item 6',
5959
description: 'Description for carousel item #6',
60-
imageAssistiveText: 'SalesforceA',
60+
imageAssistiveText: 'Salesforce Apps',
6161
src: '/assets/images/carousel/carousel-03.jpg',
6262
href: 'https://www.salesforce.com',
6363
},

‎components/carousel/__examples__/three-items-with-autoplay.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ const items = [
2828
{
2929
buttonLabel: 'Get Started',
3030
id: 3,
31-
heading: 'Download SalesforceA',
31+
heading: 'Download Salesforce Apps',
3232
description: "Get the mobile app that's just for Salesforce admins.",
33-
imageAssistiveText: 'SalesforceA',
33+
imageAssistiveText: 'Salesforce Apps',
3434
src: '/assets/images/carousel/carousel-03.jpg',
3535
href: 'https://www.salesforce.com',
3636
},
@@ -57,7 +57,7 @@ const items = [
5757
id: 6,
5858
heading: 'Carousel Item 6',
5959
description: 'Description for carousel item #6',
60-
imageAssistiveText: 'SalesforceA',
60+
imageAssistiveText: 'Salesforce Apps',
6161
src: '/assets/images/carousel/carousel-03.jpg',
6262
href: 'https://www.salesforce.com',
6363
},

‎components/carousel/__examples__/three-items.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ const items = [
2828
{
2929
buttonLabel: 'Get Started',
3030
id: 3,
31-
heading: 'Download SalesforceA',
31+
heading: 'Download Salesforce Apps',
3232
description: "Get the mobile app that's just for Salesforce admins.",
33-
imageAssistiveText: 'SalesforceA',
33+
imageAssistiveText: 'Salesforce Apps',
3434
src: '/assets/images/carousel/carousel-03.jpg',
3535
href: 'https://www.salesforce.com',
3636
},
@@ -57,7 +57,7 @@ const items = [
5757
id: 6,
5858
heading: 'Carousel Item 6',
5959
description: 'Description for carousel item #6',
60-
imageAssistiveText: 'SalesforceA',
60+
imageAssistiveText: 'Salesforce Apps',
6161
src: '/assets/images/carousel/carousel-03.jpg',
6262
href: 'https://www.salesforce.com',
6363
},

‎components/carousel/__examples__/with-custom-items.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ const items = [
2929
{
3030
buttonLabel: 'Get Started',
3131
id: 3,
32-
heading: 'Download SalesforceA',
32+
heading: 'Download Salesforce Apps',
3333
description: "Get the mobile app that's just for Salesforce admins.",
34-
imageAssistiveText: 'SalesforceA',
34+
imageAssistiveText: 'Salesforce Apps',
3535
src: '/assets/images/carousel/carousel-03.jpg',
3636
href: 'https://www.salesforce.com',
3737
},
@@ -58,7 +58,7 @@ const items = [
5858
id: 6,
5959
heading: 'Carousel Item 6',
6060
description: 'Description for carousel item #6',
61-
imageAssistiveText: 'SalesforceA',
61+
imageAssistiveText: 'Salesforce Apps',
6262
src: '/assets/images/carousel/carousel-03.jpg',
6363
href: 'https://www.salesforce.com',
6464
},

‎components/carousel/index.jsx‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -135,11 +135,11 @@ class Carousel extends React.Component {
135135
this.stageItem = React.createRef();
136136

137137
this.state = {
138-
translateX: -1000000,
139138
currentPanel: 1,
140139
indicatorsHaveFocus: false,
141140
isAutoPlayOn: this.props.hasAutoplay,
142141
stageWidth: 0,
142+
translateX: -1000000,
143143
};
144144
}
145145

@@ -191,10 +191,12 @@ class Carousel extends React.Component {
191191
onIndicatorClickHandler = (panel) => {
192192
this.setCurrentPanel(panel, this.changeTranslationAutomatically);
193193
this.setState({ indicatorsHaveFocus: true });
194+
this.stopAutoplay();
194195
};
195196

196197
onIndicatorFocus = () => {
197198
this.setState({ indicatorsHaveFocus: true });
199+
this.stopAutoplay();
198200
};
199201

200202
onAutoPlayBtnClick = () => {
@@ -265,12 +267,14 @@ class Carousel extends React.Component {
265267
if (this.canGoToPrevious()) {
266268
this.onPreviousPanelHandler();
267269
this.setState({ indicatorsHaveFocus: true });
270+
this.stopAutoplay();
268271
}
269272
},
270273
[KEYS.RIGHT]: () => {
271274
if (this.canGoToNext()) {
272275
this.onNextPanelHandler();
273276
this.setState({ indicatorsHaveFocus: true });
277+
this.stopAutoplay();
274278
}
275279
},
276280
};
@@ -314,10 +318,13 @@ class Carousel extends React.Component {
314318
{hasPreviousNextPanelNavigation && (
315319
<PreviousNextCarouselNavigator
316320
assistiveText={this.props.assistiveText.previousPanel}
317-
iconName="left"
321+
iconName="chevronleft"
318322
isDisabled={isPreviousBtnDisabled}
319-
onClick={this.onPreviousPanelHandler}
320-
inlineStyle={{ left: '-60px' }}
323+
onClick={() => {
324+
this.stopAutoplay();
325+
this.onPreviousPanelHandler();
326+
}}
327+
inlineStyle={{ left: '-38px' }}
321328
/>
322329
)}
323330
<div
@@ -335,6 +342,9 @@ class Carousel extends React.Component {
335342
onClick={(event) => {
336343
this.props.onItemClick(event, { item });
337344
}}
345+
onFocus={() => {
346+
this.stopAutoplay();
347+
}}
338348
onRenderItem={this.props.onRenderItem}
339349
{...item}
340350
isInCurrentPanel={
@@ -355,10 +365,13 @@ class Carousel extends React.Component {
355365
{hasPreviousNextPanelNavigation && (
356366
<PreviousNextCarouselNavigator
357367
assistiveText={this.props.assistiveText.nextPanel}
358-
iconName="right"
368+
iconName="chevronright"
359369
isDisabled={isNextBtnDisabled}
360-
onClick={this.onNextPanelHandler}
361-
inlineStyle={{ right: '-60px' }}
370+
onClick={() => {
371+
this.stopAutoplay();
372+
this.onNextPanelHandler();
373+
}}
374+
inlineStyle={{ right: '-38px' }}
362375
/>
363376
)}
364377
</div>

‎components/carousel/private/auto-play-button.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { CAROUSEL_AUTOPLAY_BUTTON } from '../../../utilities/constants';
1111
* AutoPlayButton is used to start/pause the autoplay iteration of the carousel
1212
*/
1313
const AutoPlayButton = (props) => (
14-
<span className="slds-carousel__autoplay">
14+
<span className="slds-carousel__autoplay" style={{ left: '66px' }}>
1515
<Button
1616
assistiveText={{ icon: props.assistiveText }}
1717
className="slds-button_icon"

0 commit comments

Comments
 (0)