Skip to content

Instantly share code, notes, and snippets.

@ivomynttinen

ivomynttinen/novio-ui-bug-list.md

Last active October 12, 2023 14:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ivomynttinen/714acf0a4773dc533b4f644cd7d8dea8 to your computer and use it in GitHub Desktop.
Save ivomynttinen/714acf0a4773dc533b4f644cd7d8dea8 to your computer and use it in GitHub Desktop.
Download ZIP
Novio UI Bug List
Raw
novio-ui-bug-list.md

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

Menu

  • the label of the menugroup (headline 1, headline 2) are not rendering correctly. Add display: block
  • the <ul> element is also not rendering correctly, also needs: display: block; style to avoid excess space at bottom.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment