Content Comparison

Text Field

https://

zpl.io/

aMW4dR2

http://10.165.245.224/reactlux/?path=/story/textfield--text-field-story

Button

https://zpl.io/bJOdGjK

https://

zpl.io/

29NpG7A

https:/

/

zpl.io/

25Ne193

http://10.165.245.224/reactlux/?path=/story/button--button-story

Icons

https://

zpl.

io/

VKMjAXb

https:/

/

zpl.io/

VDnAW4v

http://10.165.245.224/reactlux/?path=/story/icon--icon-story

Table

https://zpl.io/Vx7kQm2

http://10.165.245.224/reactlux/?path=/story/table--table-story

1

Sorting

2MW

0.5D

Row selection

2D

0.5D

https://zpl.io/29Wxw6z

Inline Editing Tables

4D

2D

https://zpl.io/2pEq6rV

Tree Tables

2D

2D

https://zpl.io/25WWrg0

Extended Rows Tables

4D

2D

Checkbox + checkbox group

https://zpl.io/2jGkQWV

https://app.zeplin.io/project/5970b366bee38cf87b2de932/screen/59928f231aef8c781243c927

http://10.165.245.224/reactlux/?path=/story/checkbox--checkbox-story

2D

• Add a focus indication - need to add show a checkbox which has a focus (grey BG)

• The checkbox will have an hovered/active state when hovering/clicking either the checkbox or the label describing it

0.5D

Radio button + radio group

https://

zpl.

io/

VxP6OWV

http://10.165.245.224/reactlux/?path=/story/radio--radio-story

Select (Drop Down Menu)

https://

zpl.io/

bWOjejb

http://10.165.245.224/reactlux/?path=/story/select--selecttory

Selector - Segmented button

https://zpl.io/2Eyk8XD

http://10.165.245.224/reactlux/?path=/story/buttongroup--button-group-story

Date Picker

https://zpl.io/aNXBPk2

http://10.165.245.224/reactlux/?path=/story/datepicker--keyboard-date-picker-story

Time Picker

https://zpl.io/adOXdRV

1

Create component according to LUX

1MW

3D

Combo Box

https://zpl.io/amp1y3V

1

Add a combobox with a functionality where the user enters a value which is not from the list

2D

2D

Split button

https://zpl.io/V4WPQ82

http://10.165.245.224/reactlux/?path=/story/splitbutton--split-button-story

2

Add 2 types of split buttons:

1. Persistent

2. Fixed

Currently, only Persistent is supported

3D

missing disabled, error and warning states

2D

Slider

https://zpl.io/VqoY84b

2

Add component according to LUX design and according to the design

2D

3D

Tree

https://zpl.io/agwRA0a

1

• When the label is truncated (node name), hovering over it will show a tooltip with the full label.

2D

Fix styling issues

1D

Tree

https://zpl.io/agwRA0a

4

• When a user expands a node if the nodes are not shown immediately, provide a "loading" indication at the place below the expanded node.

1D

1D

Tree

https://zpl.io/agwRA0a

2

• Multiple selection -  Allow the selection of one or more items. For this, the tree provides checkboxes on the left side of each line item

1D

2D

Switches

https://zpl.io/bl5Myv2

http://10.165.245.224/reactlux/?path=/story/switch--switch-story

Tabs

https://zpl.io/bPkL1ma

http://10.165.245.224/reactlux/?path=/story/tabs--tabs-story

1

Add components according to LUX design (including error/warning indications)

Tabs - Details pane tabs

https://zpl.io/VODWzzr

http://10.165.245.224/reactlux/?path=/story/tabs--details-pane-tabs-story

1

Add components according to LUX design

Tabs - Ribbon tabs

https://zpl.io/bJvqAmE

http://10.165.245.224/reactlux/?path=/story/tabs--ribbon-tabs-story

2

Add components according to LUX design

Popup window

https://zpl.io/VKOlj6V

http://10.165.245.224/reactlux/?path=/story/popup--popup-story

4

Add component according to LUX design:

• The popup should appear at 2/3 height of the screen

• The user will be able to move the popup across the screen

Message popups(warning, error etc)

https://zpl.io/bP6mg6V

http://10.165.245.224/reactlux/?path=/story/popup--help-message-story

http://10.165.245.224/reactlux/?path=/story/popup--info-message-story

http://10.165.245.224/reactlux/?path=/story/popup--warning-message-story

http://10.165.245.224/reactlux/?path=/story/popup--error-message-story

1

Add components according to LUX design:

• max-height: 600px for the whole popup

• if the text is longer, a scroll will be added

Wizard

https://zpl.io/bW6oWKa

http://10.165.245.224/reactlux/?path=/story/wizard--wizard-story

2

Add component according to LUX design

Tooltips

https://zpl.io/b6JJj6K

http://10.165.245.224/reactlux/?path=/story/tooltip--tooltip-story

1

Add all types of tooltips according to LUX design

List

https://zpl.io/V1XnDX2

http://10.165.245.224/reactlux/?path=/story/list--list-story

http://10.165.245.224/reactlux/?path=/story/list--chekbox-list-story

http://10.165.245.224/reactlux/?path=/story/list--smart-select-list-story

1

Add component according to LUX design

Numeric Stepper

https://zpl.io/2ZWPJwV

http://10.165.245.224/reactlux/?path=/story/numeric-stepper--numeric-stepper-story

1

Add component according to LUX design

1D

Need to hover on input and trigger separately. This is currently not enabled in CSS (hover over pseudo elements)

Text Area

https://zpl.io/2v4yY7a

http://10.165.245.224/reactlux/?path=/story/textfield--text-field-story

2

Search

https://zpl.io/25Gz0na

http://10.165.245.224/reactlux/?path=/story/textfield--text-field-story

2

Text link

https://zpl.io/29WK6ea

http://10.165.245.224/reactlux/?path=/story/textlink--text-link-story

Spreadsheet table

3

Add component according to LUX design

3D

Accordion

https://zpl.io/V04WW99

http://10.165.245.224/reactlux/?path=/story/accordion--accordion-story

2

Add component according to LUX design

Breadcrumbs

https://zpl.io/VkqxLgM

1

Add component according to LUX design

Action Menus

https://zpl.io/VxPedqm

1

Add component according to LUX design

1W

2D

Multiple selection drop down menu

2

Add component according to LUX design

2D

Searchable drop down menu

2

Add component according to LUX design

2D

Multi select searchable drop down menu

2

Add component according to LUX design

2D

Progress Indicator

https://zpl.io/VOOxOnk

1

Add component according to LUX design

3D

1D

Toast

https://zpl.io/2ynev9n

http://10.165.245.224/reactlux/?path=/story/toast--toast-story

1

Add component according to LUX design

2D

Tagging

2

Add component according to LUX design

3D

Range Picker

2

Add component according to LUX design

3D

Popover

https://zpl.io/2v4Y9nn

http://10.165.245.224/reactlux/?path=/story/popover--popover-story

Add component according to LUX design

3D

• Add 1 px white border on top and bottom (over blue sections) - done

• Anchor triangle should have a border- done

• Add border radius - done