mondaycom / vibe Goto Github PK
View Code? Open in Web Editor NEW๐จ Official monday.com UI resources for application development in React.js
Home Page: https://style.monday.com
๐จ Official monday.com UI resources for application development in React.js
Home Page: https://style.monday.com
We are migrating to typescript, we are doing so component by component
We would love some help in converting some of our component to typescript - we've created a README
https://github.com/mondaycom/monday-ui-react-core/blob/master/TYPESCRIPT_MIGRATION.md
in this PR we expect you to convert the following files
Good luck!
Due to pointer-events: none;
cursor: not-allowed
is no longer working
Add role: "combobox" to the input element of the Combobox component
TypeScript here we come!
We are migrating to typescript, we are doing so component by component
We would love some help in converting some of our component to typescript - we've created a README
https://github.com/mondaycom/monday-ui-react-core/blob/master/TYPESCRIPT_MIGRATION.md
in this PR we expect you to convert the following files
Good luck!
Fix the class names inside the MultiStepIndicator component to be according to BEM conventions.
please add a screen shot of the components stories inside your PR :)
Hi,
I want to create an automation UI the same as monday.com and I was exploring your API. I was successfully able to install monday-ui-react-core but I am getting errors when I run storybook. Could you please help me how to resolve the storybook error? Also, are there any initial simple examples to run and check simple UI with your API?
We are migrating to typescript, we are doing so component by component
We would love some help in converting some of our component to typescript - we've created a README
https://github.com/mondaycom/monday-ui-react-core/blob/master/TYPESCRIPT_MIGRATION.md
in this PR we expect you to convert the following files
Good luck!
In the screen recording you can see me trying to select inside the Editable heading component (and failing)
I then show how it does work in Editable input component for reference :)
Can you please support the dialog component having an "arrow" support?
It will assist the user to connect between the anchor and the dialog like usually used on tooltips.
I assume it should be a big dynamic so it can match the actual position of the dialog and its position comparing the anchor.
At the moment, our <Dropdown>
component supports a extraStyles
prop which is passed pretty directly into the underlying react-select
component.
<Dropdown
extraStyles={(baseStyles) => ({ ...baseStyles, menu: (base) => ({ ...base, width: 300 }) })}
/>
<Dropdown menuWidth={300} />
We can create a leaner, more focused (and perhaps intuitive?) API, by giving specific props that affect only the aspects of the component we want to.
please add screenshot or video on the pr when the prop "title" is empty and with value
I wish to keep the gap between the anchor and the dialog, but then I can't hover into it.
We wish to have support for hovering both dialog and its anchor, keep it open, and be able to go from one to the other using the mouse without closing it.
It shows keyboard focus when hovering a SubMenu and then moving the mouse out.
Also when hovering a MenuItem and then hovering the MenuDevider.
Loom link: https://www.loom.com/share/5bac5849699c435d87475da0f5df4de0
AttentionBox: Change the role of the "AttentionBox" component to alert instead of complementary.
Please add
export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup";
to src/index.js
This prevents me from using it.
Tried to PR but repo is locked to contrib from outside.
Hi,
I noticed the Dropdown component documentation is lacking info on the onOptionRemove prop. It took me quite some time to figure out how to remove a single element when working with a multi Dropdown controlled component. When checking out the source, I found the existence of the onOptionRemove prop.
Thank you for al the work done in this library, it is so much fun working with it :).
TypeScript here we come!
We are migrating to typescript, we are doing so component by component
We would love some help in converting some of our component to typescript - we've created a README
https://github.com/mondaycom/monday-ui-react-core/blob/master/TYPESCRIPT_MIGRATION.md
in this PR we expect you to convert the following files
Good luck!
We are migrating to typescript, we are doing so component by component
We would love some help in converting some of our component to typescript - we've created a README
https://github.com/mondaycom/monday-ui-react-core/blob/master/TYPESCRIPT_MIGRATION.md
in this PR we expect you to convert the following files
Good luck!
Firstly, thank you for creating an awesome UI component library; it's saved us a ton of time.
We are using the component in our application and we are experiencing something a bit odd with the styling.
When I zoom out to 80% in Chrome, the component's bottom border is hidden. See "Customer Name" in the screenshot below:
Note: The "Terms" field is also using the component--but is not having any bottom border rendering issues.
The "Terms" dropdown starts having bottom border rendering issues at 75%:
However, when I zoom out to only 90%, the component's bottom border is visible again:
This seems to be happening in the storybook, as well (at 75% zoom):
I dug through the styles a bit but had no luck finding the issue.
Note: This does not seem to be happening on React Select's component at any zoom (I tried 100%, 90%, 80%, 75%, 66%, all the way down).
The current documentation for extraStyles
is not entirely clear on how to use it properly.
Seeing as this prop is a proxy for react-select
's styles
prop, we can simply add an external link for now.
Add aria-disabled="true" attribute to button when disabled
TypeScript here we come!
We are migrating to typescript, we are doing so component by component
We would love some help in converting some of our component to typescript - we've created a README
https://github.com/mondaycom/monday-ui-react-core/blob/master/TYPESCRIPT_MIGRATION.md
in this PR we expect you to convert the following files
Good luck!
Maybe passing here element type like we did in the clickable component (@3dyonic you can see the clickable component for reference)
Originally posted by @hadasfa in #687 (comment)
Checked on [email protected].
const validation = { status: "error", text: "Some error text" }
return (
<TextField
{...textFieldProps}
validation={validation}
/>
);
The TextField
will be rendered with a red border and a red error text.
Only the red error text is rendered.
Please note that this repository is publicly visible to all users!
/cc @danielmittelman
When button is in loading state - it shrinks but no spinner is shown. Works fine in mobile emulators on desktop
Talked to Orr about it.
Add support on "isIconHidden" to AttentionBox component (will hide the icon before the title).
when the height/width of the virtualized list parent component is a dynamic size (100% / fit-content/ min-content or else) the virtualized list does not render and not virtualized list children are displayed
Hi all and thanks for the inspiring work on your Design System, as well as for making this public so we can all appreciate it.
I am working on building a Design System for my company using our existing components and because I love your style I was wondering if you might think of separating the storybook functions and components from the actual component library so that others could use that setup as a storybook addon. If that's too much to ask for, maybe just exposing those in an alternate build would also be useful.
For now I forked your repo and changed the webpack entry point to include the src/storybook
directory to get access to the storybook components but it would be great if you supported this.
Thanks!
// works fine
import EditableInput from "monday-ui-react-core/dist/EditableInput";
export default () => EditableInput value="Edit H2 tooltip" />
// throws an error
import EditableHeading from "monday-ui-react-core/dist/EditableHeading";
export default () => <EditableHeading value="Edit H2 tooltip" />
index.js:1 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
When I did a console.log of those components I got:
So looks like EditableHeading
is not a React component, while EditableInput
is.
Is there any workaround? Thank you
When setting the loading prop to true (hardcoded/initially), we get an empty small box instead of a button with the loading animation
https://style.monday.com/?path=/story/components-button--loading
Checked on [email protected]
, but the releases since then (latest release is 0.0.108 at time of writing) were either bumps or didn't reference this - the last update the search component had is 10 days ago.
In any case, this behaviour could also be replicated on the style.monday.com search page.
When the "Enter" or "Space" keyboard keys are pressed and the 'clear' button is on focus, the button would erase the current contents of the search.
In that scenario, when the keys are pressed, the button does nothing.
It could be the same like component in MenuButton
Currently when we use the combobox component we need to wrap it in a scrollable div.
This results in the keyboard navigation of the combobox not controlling the scrollable part and we lose view of the focused items when they are under the scroll line.
The combobox component should have its own prop of maxHeight for the options section and control the scrollable when using keyboard navigation to make sure the focused item is always in view.
cc @adirhaz1z
Am trying to implement with React 18, Is this will support ?? because this developed in react 16.
I'm facing many issues while adding the components with storybook styles. Kindly assist
For using this package with typescript, can you add declaration files
I'm using the Textwithhighlight component, and I'd like to override/add the highlight-text element style.
highlight-text
element?highlightTag
prop to render another Html tag, for example <strong>
instead of <em>
?Remove the role: "image" attribute from the icon component when the value of the prop ariaHidden is true.
This prop is passed as part of the props inside screenReaderAccessProps which calculate in the hook "useIconScreenReaderAccessProps."
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.