Successful Marketplace add-ons use common design patterns and strong visual design. Lucy Denton will walk us through the design principles when extending JIRA's UI. Learn by example how you can take full advantage of these best practices in your add-on. Lucy Denton, Designer, Atlassian Jony Cheung, Dev Manager, Atlassian

1. Building for the Future
Design your add-on with tomorrow in mind
LUCY DENTON | UX DESIGNER JONY CHEUNG | DEVELOPMENT MANAGER

17. Add Reminder
Tomorrow
In a week
In a month
Select another time…

18. Add Reminder

19. Add Reminder

21. Add Reminder
New reminder
CancelCreate
What do you want to be reminded about?
Description
dd/mm/yyyy
Due date
7 30
Time
26/11/2015
Due date
November 2015
MON TUE WED THU FRI SATSUN
131
87
1514
2221
29
6
2
9
28
5
1
8
6
13
20
27
5
12
19
26
4
11
18
25
3
10
17
24
2
9
16
23
30
7
3
10
4
11

22. Add Reminder
26 Nov, 2015
Catch up with Karen.
ldenton@atlassian.com

24. Add Reminder
26 Nov, 2015
Catch up with Karen.
ldenton@atlassian.com
New reminder created
A reminder will be sent to
ldenton@atlassian.com at the set
time.

26. Project settings
Summary
Board
Reports
Issues
Startup Co.
Business
Dashboard
Projects
Issues
Boards
My Reminders
Settings
My Reminders
ldenton@atlassian.comWD-1 Catch up with Karen. 7 Apr, 2017
ldenton@atlassian.comWD-1 Sync with Alice from the web core team. She’s been working on a similar iss... 7 Apr, 2017
Issue key Description Date Email
Action

28. Sample code
in React using AtlasKit

29. import Button from ‘@atlaskit/button’;
import ButtonGroup from '@atlaskit/button-group';
<ButtonGroup>
<Button onClick={handleReminder}>Add reminder</Button>
<DropdownMenu ..> .. </DropdownMenu>
</ButtonGroup>
..
var handleReminder = function() {
AP.require(['dialog', 'events'], function(dialog,
events){
events.on('dialog.loaded', function() {
AJS.log('Panel: the dialog was created');
});
}
}

30. import DropdownMenu from '@atlaskit/dropdown-menu';
<DropdownMenu shouldFlip={false} triggerType="button"
onItemActivated={handleDropdownReminders} items={[{
"items": [
{ "content": "Tomorrow",
"href": “http://create.reminder/tomorrow”,
"value": 'day' },
{ "content": "In a week",
"href": “http://create.reminder/nextweek”
"value": 'week' },
{ "content": "In a month",
"href": "http://create.reminder/nextmonth"
"value": 'month' },
...
]}>
</DropdownMenu>

31. const handleDropdownReminders = ({ item, event }) => {
event.preventDefault();
switch(item.value) {
case 'day':
createReminderInDay();
break;
case 'week':
createReminderInWeek();
break;
case 'month':
createReminderInMonth();
break;
...
}
}

32. import Calendar, { StatelessCalendar } from ‘@atlaskit/
calendar’;
..
<StatelessCalendar onSelect={dateHandler} />
..
const dateHandler = ( date_obj ) => {
saveDate(date_obj);
}

33. http://atlassian.design

34. http://atlaskit.atlassian.com

35. Try AtlasKit out
http://atlaskit.atlassian.com

36. Thank you!
LUCY DENTON | UX DESIGNER JONY CHEUNG | DEVELOPMENT MANAGER