vimeo / iris Goto Github PK
View Code? Open in Web Editor NEWVimeo Design System
Home Page: https://vimeo.github.io/iris
License: MIT License
Vimeo Design System
Home Page: https://vimeo.github.io/iris
License: MIT License
Keyboard control should behave like pointer events.
eg pointer events
eg keyboard control
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.
https://vimeo.github.io/iris/sb/main/?path=/story/components-checkboxset-props--coupled
0.118.1
No response
No response
No response
The TourPoint component does not stay attached to anchor on screen resize.
Resize the canvas in Storybook
https://vimeo.github.io/iris/sb/main/?path=/story/components-tourpoint--controls
0.114.0
No response
No response
No response
Sidebar
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 virtualizationList
: support virtualizationPopOver
: support hover
trigger in addition to click
TextArea
: add Rich Text Editor features, toolbar, and iconsframer-motion
peerDeploading
prop on all relevant componentsonChange
, onMouseEnter
, onBlur
, etc)/minors
story folders for minor component stories (and examples)children
for relevant example storiesusePortal
and portal components?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.
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"
/>
</>
);
}
No response
0.128.0
Firefox
No response
No response
Below mentioned icons are needed in IRIS
cc: @seanmcintyre
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
Render <Input type="number" />
and you will get a Mark component return instead of an input element with type number
https://vimeo.github.io/iris/sb/main/?path=/story/components-input--controls&args=type:number
0.117
Firefox, Chrome
No response
No response
A bug happened!
1.0.2 (Default)
Chrome
test
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.
Run vimeo's NextJS and request a page that uses the minimal footer.
No response
0.108.0
No response
No response
No response
Issues that have surfaced while using the Iris toggle component:
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
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.
No response
0.104.0
Firefox, Chrome, Safari
No response
No response
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
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.
0.109.0
No response
No response
No response
No response
A bug happened!
test
0.104.0
Chrome, Safari
No response
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.