Novio UI Bug List

Button

All Variants

add transition: .15s ease-in-out
if button has an icon, the padding-left needs to be --space-15
should have cursor: pointer or cursor: not-allowed if disabled.
- Note: looks like the CSS is correct, but for some reason, the pointer isn't showing up correctly (Storybook issue?)

Primary, Secondary, Danger

:active and :focus state should not have a box-shadow.

FloatingButton

add transition: .15s ease-in-out
on :hover add translateY(-2px)

IconButton

add transition: .15s ease-in-out
Highlighted Icon Button: change :hover background to cyan-5, change :focus/:active background to cyan-6

Link

add transition: .15s ease-in-out
add :hover style: color: var(--colors-cyan12)

Segmented Button

large button height is incorrect, should be 36px
small button height is incorrect, should be 28px
results in area height incorrect, should be 40px for large and 32px for medium.
should have cursor: pointer when not disabled

SortButton

add transition: .15s ease-in-out

Tile

Since a transition from background-color to background-image isn't possible in a smooth way, this :hover effect should be restructured. Here is an example: https://codepen.io/ivomynttinen/pen/BavqXyw

CheckboxField

when checked, the border-color should match the background-color
add transition: .15s ease-in-out

DateField

problematic UX: the input element itself is not the same size as the wrapper -> calendar not opening and input not focused when clicking on the icon, or the upper/lower paddings. Either the input should fill the entire wrapper, or handle the click event on the wrapper to focus the input.
add transition: .15s ease-in-out
height of the outer DateField is incorrect (33.01px?). Should 32px / 40px (large). This is important so it aligns correctly with buttons, other inputs, etc.
padding-left should be 8px (calendar icon is too far on the right)
focus and error borders need to be thicker. To avoid jumping content, use eg.: box-shadow: 0 0 0 .5px var(--colors-tomato10)
disabled field should not have any :hover effects.

InlineInputField

padding-left should be 8px on medium.
add transition: .15s ease-in-out

InputField

add transition: .15s ease-in-out
the non-focused, non-error state (default) should have a border: 1px solid transparent, to avoiding jumping content when focused.
height is incorrect (34.02px?). Should 32px / 40px (large). This is important so it aligns correctly with buttons, other inputs, etc.
focus and error borders need to be thicker. To avoid jumping content, use eg.: box-shadow: 0 0 0 .5px var(--colors-tomato10)
disabled field should not have any :hover effects.

RadioButtonGroup

radio button elements are too large (they render as 22x22, but should be 20x20)
add transition: .15s ease-in-out

SearchField

add transition: .15s ease-in-out

SelectField

the highlighted state of items in the dropdown list has a too strong background, should be slate3

TagInputField

height is jumping when you add a tag

Filter

the button styles of the small "Ort" button should exactly match a button of type secondary. Except for font-size, height and paddings. Right now it indicated no interactivity (hover, active).

Avatar

the hover style should be addable via a separate prop. In general, avatars that are interactive in some way (show tooltip, link to user, etc.) should have a hover style, others that are just visual indicators should not have any hover styles.
:hover style border should be 2px wide
add transition: .15s ease-in-out

Banner

the wrapper element of the icon does not need position relative and top: 0; instead:
- set the height to 24px;
the Banner element itself should have align-items: start instead of center, to make sure the icon always aligns with the first line of text.
for the dismiss button:
- remove position relative and top values.
- change size to 24x24 (also the inner icon)

Toast

Dismiss button should have padding: 0 but margin-right: 8px
Change size to 24x24 (also the inner icon)

Tooltip

should have some slight transition like the default Radix tooltip

Accordion

possible to add expand collapse animation?
to the svg icon (chevron-right), add transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1) 0s to animate on state change.

Header

background should not be plain white, but WhiteA10 (seems to be missing in css variables): https://www.radix-ui.com/colors
on scroll, add this to the header element (the outer one with data-testid="header"): box-shadow: 0 -1px 0 0 var(--colors-slate5) inset, 0 2px 10px rgba(17,24,28,.1);
the alert and home icons should make use of the IconButton component, not be standalone icons, as those wouldn't have any interaction styles.
font size of the title is way too small on desktop (for mobile it seems to be ok)

Panel

Title should use --fontSizes-4
Panel actions should not use a custom style, but the Button component with type tertiary instead.

Tabs

The active tab button should use this (to avoid the blue border to be visually on above the grey border):

box-shadow: 0 1px 0 var(--colors-cyan11);
border-bottom: solid 1px var(--colors-cyan11);

The inactive tab button should use this: border-bottom: 1px solid transparent; ( to adapt to the new styles of the active button).

List

General

Zebra background should be slate2, hover of zebra should be slate3. This seems to be correct for the large variant, but not the small one?

Modal

The backdrop (dark overlay background) color should be rgba(17, 24, 28, 0.2) (not as dark as now).
The close button in the Dialog example should use the IconButton component (same as in Sheet variant)
This component would be one that would benefit the most from some subtle animations:
- Alert/Dialog: subtle fade in/slide in from top.
- Sheet: slide in from the right

Breadcrumb

add transition: .15s ease-in-out to breadcrumb-label

ivomynttinen/novio-ui-bug-list.md