vimeo / iris Goto Github PK

Description

Keyboard control should behave like pointer events.

eg pointer events

eg keyboard control

Steps to Reproduce

Visit CheckboxSet component story, see that when parent or children checkbox is toggled via keyboard events, the set of checkboxes do not update accordingly like when you use pointer events.

Storybook Demonstration

https://vimeo.github.io/iris/sb/main/?path=/story/components-checkboxset-props--coupled

Version

0.118.1

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Screenshots

No response

Description

Issues that have surfaced while using the Iris toggle component:

• The a11ykey event handler is on Wrapper not hidden Input, so it only visually does the trick of faking the faux toggle on/off, doesn't actually change the value of the hidden input.
• Once a Iris toggle is controlled by keyboard controls (Enter/Arrow key - a11ykey method triggered), the value is very likely inverted compared to where the checked value is from

I wonder if we can remove the a11yKey method from Mark.tsx, and allow an onKeyUp prop to determine how the toggle responds to keyboard events

Steps to Reproduce

Use toggle event with checked prop, try updating the Toggle using Enter/Arrow keyboard event. On re-render, the toggle will switch back to the checked valued because the a11ykeyevent handler only visually updates the faux toggle not the hidden input component.

Storybook Demonstration

No response

Version

0.104.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

Relevant log output

No response

Screenshots

No response

Contact Details

No response

Description

A bug happened!

Steps to Reproduce

test

version

0.104.0

What browsers are you seeing the problem on?

Chrome, Safari

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Description

The TourPoint component does not stay attached to anchor on screen resize.

Steps to Reproduce

Resize the canvas in Storybook

Storybook Demonstration

https://vimeo.github.io/iris/sb/main/?path=/story/components-tourpoint--controls

Version

0.114.0

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Screenshots

No response

Below mentioned icons are needed in IRIS

1. Mobile.svg
2. Desktop.svg
3. Attendee.svg
4. TextAlignLeft
5. TextAlignCenter
6. TextAlignRight
7. NumberedList

cc: @seanmcintyre

Description

We're seeing warnings in our NextJS build:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client.

Steps to Reproduce

Run vimeo's NextJS and request a page that uses the minimal footer.

Storybook Demonstration

No response

Version

0.108.0

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Screenshots

No response

New Components

• Sidebar

Component Updates

• ColorSelect: separate from its PopOver
• DateSelect: separate from its PopOver
• DateRange: separate from its PopOver
• DateRange: remove minDate and maxDate props (in favor of min and max)
• Grid: support virtualization
• List: support virtualization
• PopOver: support hover trigger in addition to click
• TextArea: add Rich Text Editor features, toolbar, and icons

Design Tokens

• replace all relevant CSS and theme object code with design tokens
• support gradients as color tokens
• implement theming with CSS Variables and remove React Context theming

Animation

• add framer-motion peerDep
• standardize animations across all Iris components (with new animation tokens)
• add loading state animations and standardize loading prop on all relevant components
• filter and sort animations for grids, lists, etc (inspo: https://isotope.metafizzy.co/)

Accessibility

• audit all components
• raise all component scores to minimum WCAG 2.1 AA

Monorepo

• move SVG components out to Lyra (aka. Iris-Icons, Iris-SVG)

Miscellaneous

• audit all Event functions and correct any issues (onChange, onMouseEnter, onBlur, etc)
• standardize Input component labels (consider minor components?)
• add a CSS arg to single component stories for modifying styles
• (??) remove CJS support, bundle only as ESM
• automatic generation of props stories and story controls via type naming conventions or doc annotations
• standardize approach to complex props
• correctly implement JSON editor for relevant controls (https://storybook.js.org/blog/storybook-6-2/)
• add /minors story folders for minor component stories (and examples)
• add more examples of different children for relevant example stories
• (??) refactor usePortal and portal components?

Description

Two issues:
1) It seems like top and bottom and right and left are switched around? Can be seen in storybook
2) Attaching a tour point to the bottom of a component near the edge of the screen will go off the screen

Steps to Reproduce

1) Check the attach options in Storybook. These seem inverted?
2) Add a tour point to an element near the edge of the screen. Ideally the tour point would be nudged to a few pixels in from the edge and the arrow would still point to the correct element.

Storybook Demonstration

https://vimeo.github.io/iris/sb/main/?path=/story/components-info-tourpoint--controls&args=attach:right

Version

0.109.0

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Screenshots

No response

Contact Details

[email protected]

What happened?

A bug happened!

Version

1.0.2 (Default)

What browsers are you seeing the problem on?

Chrome

Relevant log output

test

Code of Conduct

• I agree to follow this project's Code of Conduct

Description

Input does not rendering correctly when passing type number. Looks like it's missing from the type switch statement and defaulting to the Mark component

Steps to Reproduce

Render <Input type="number" /> and you will get a Mark component return instead of an input element with type number

Storybook Demonstration

https://vimeo.github.io/iris/sb/main/?path=/story/components-input--controls&args=type:number

Version

0.117

What browsers are you seeing the problem on?

Firefox, Chrome

Relevant log output

No response

Screenshots

No response

Description

I have a popover similar to what you see in the story for that component. The problem is that the menu does not disappear when I click a menu item in the list (also demonstrated in the aforementioned story.) I tried to use the active prop to control its open state but that leads to problems since I am trying to use the component in a parent component which itself is a list of cards. This is especially problematic for my use case because I am trying to show a modal when an item in the menu is clicked which leaves the popover component open and it overlays above the Modal. I realize I could adjust the z-index for the popover but I would not like to. Instead, if there was a prop that I could pass to the component to tell it to hide the popover when a child component is clicked, especially a typical case for popovers used to display menus, that would be great!

As an aside, when using the active prop the component ignores "outside clicks" which means I needed to pass a ref to the component, as well as use your useOutsideClick hook to wire things up myself. Not a huge deal but it would be nice if the component didn't ignore outside clicks when active is used. I could use onClose to sync the external state when that happens.

Steps to Reproduce

Here's a sample demonstrating the problem with showing a modal while the popover is still open.

import { useState } from "react";
import { Button, Modal, PopOver, Pop } from "@vimeo/iris/components";

export function Test() {
  const [showModal, setShowModal] = useState(false);
  return (
    <>
      <PopOver
        content={
          <Pop.List>
            <Pop.Item onClick={() => setShowModal(true)}>Item 1</Pop.Item>
          </Pop.List>
        }
      >
        <Button>Open popover</Button>
      </PopOver>
      <Modal
        active={showModal}
        content={<div>modal content!</div>} onClose={() => setShowModal(false)}
        size="sm"
      />
    </>
  );
}

Storybook Demonstration

No response

Version

0.128.0

What browsers are you seeing the problem on?

Firefox

Relevant log output

No response

Screenshots

No response