[Dropdown] Component specs #39
Description
There is a gap regarding component size & margin between design documentation and component implementation.
Design documentation
| Property for dropdown (hidden) | Value |
|---|---|
| Margin | 15px |
| Min width | 230px |
| Min height | 46px |
https://developer.dxc.com/design/components/dropdown
Component implementation
| Name | Default | Description |
|---|---|---|
| margin: string | object | Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | |
| size: string | object | 'fitContent' | Size of the component ('small' | 'medium' | 'large' | 'fitContent' | 'fillParent' ). |
https://developer.dxc.com/tools/react/2/#/components/dropdown
Regarding margin
The design specs set the value for margin as fixed (15px), the implementation gives the flexibility to choose the margin based on the following:
| margin | Value |
|---|---|
| xxsmall | 6px |
| xsmall | 16px |
| small | 24px |
| medium | 36px |
| large | 48px |
| xlarge | 64px |
| xxlarge | 100px |
- Design guidelines should be updated to accommodate the possibility to use different margin values.
Regarding width
The design specs set the value for min-width as fixed (230px), the implementation gives the flexibility to choose a value under it. The default value is 'fitContent' so we cannot ensure that the design guidelines are going to be followed even if the default value is used.
| width | Value |
|---|---|
| small | 60px |
| medium | 240px |
| large | 480px |
| fitContent | - |
| fillParent | - |
The width of the UI-Kit component is 212px
- Design guidelines and UI-Kit should be updated to accommodate the possibility to use different width values.
Regarding padding
Different padding values regarding design specs, implementation specs, and UI-Kit specs.
Design specs
| Property for dropdown (hidden) | Value |
|---|---|
| Padding left/right | 18px/13px |
| Padding top/bottom | 10px/10px |
| Property for dropdown (shown) | Value |
|---|---|
| Options padding top/bottom | 10px |
| Options padding left/right | 20px |
Implementation specs
| Property for dropdown (hidden) | Value |
|---|---|
| Padding left/right | 20px/15px |
| Padding top/bottom | 10px/10px |
| Property for dropdown (shown) | Value |
|---|---|
| Options padding top/bottom | 4px |
| Options padding left/right | 16px |
UI-Kit component specs
| Property for dropdown (hidden) | Value |
|---|---|
| Padding left/right | 20px/10px |
| Padding top/bottom | 12px/12px |
| Property for dropdown (shown) | Value |
|---|---|
| Options padding top/bottom | 12px/20px |
| Options padding left/right | 20px |
- Design guidelines and UI-Kit should be updated to bring consistency across padding values.
Icon size
Design specs
| Property | Value |
|---|---|
| Icon size | 20px x 20px |
Implementation specs
| Property | Value |
|---|---|
| Icon size | 24px x 24px |
UI-Kit component specs
| Property | Value |
|---|---|
| Icon size | 22.11px x 22.11px |
UI-Kit Component
- Design guidelines and UI-Kit component should be reviewed to accommodate the proper icon-size guidelines.