mondaycom / vibe

Official monday.com UI resources for application development in React.js

Vibe Design System

Important

Exciting Update: The monday-ui-react-core repository is now - vibe!

Welcome to the Vibe Design System repository! This monorepo contains various open-source packages maintained by Vibe (monday.com).

Overview

Vibe Design System is a collection of packages designed to streamline your development process and enhance the user experience. Below is a list of our main packages:

1. core: Vibe (monday.com) React components library - Storybook.
2. style: Vibe (monday.com) styling foundations library.
3. storybook-blocks: Vibe (monday.com) collection of Storybook blocks library.

Each package comes with its own README providing detailed information about its usage, installation instructions, and getting started guide.

Installation

npm install monday-ui-react-core

Getting Started

If you're new to Vibe Design System, we recommend starting with our main package:

• core: This is the core of the Vibe Design System. Follow the installation guide and getting started instructions to integrate it into your project.

Contributing

We welcome every contributor, please read the contribution guidelines before submitting a PR

vibe's Issues

Add aria-disabled="true" attribute to button when disabled

Add aria-disabled="true" attribute to button when disabled

AttentionBox: Change the role of the component to alert instead of complementary

AttentionBox: Change the role of the "AttentionBox" component to alert instead of complementary.

Banner Component Typescript Migration

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

• Banner.jsx
• banner.jest.js
• BannerConstants.js

Good luck!

Feature request - Expose storybook utils as a storybook addon

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!

support continous hover between anchor and dialog

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.

shuold be console.error

https://github.com/mondaycom/monday-ui-react-core/blob/4d234e11a72351f304c1084f27659422807d8865/src/components/Menu/MenuItem/MenuItem.jsx#L59

AttentionBox Typescript Migration

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

• AttentionBox.jsx
• attentionBox-tests.jest.js
• attentionBox-snapshot-tests.jest.js

Good luck!

Add support indeterminate state for the checkbox component

split buttons doens't look good in safari

split buttons are really splitted on safari

Group button looks weird when both buttons have tooltips (bug)

The bug occurs when the group has two buttons and each has a tooltip as in the following code example:

[CRITICAL] Public Repositories are visible to all users

Please note that this repository is publicly visible to all users!

/cc @danielmittelman

Virtual list does not render when its parent height or width dynamic instead of custom

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

Fix dark mode combobox bug and add categories stories

2022-03-20.-14.48.38.mov

Add documentation for `<Dropdown>` 's `extraStyles` prop

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 right badge support for MenuItem

Add support to right badges in the MenuItem (For example New / Beta..)

Combobox should have its own scrollable section for options to allow smooth keyboard navigation

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

Adding validation with { status: "error" } adds the error text but not the red border

Checked on [email protected].

Example code:

const validation = { status: "error", text: "Some error text" }
    return (
          <TextField
            {...textFieldProps}
            validation={validation}
          />
    );

Expected result

The TextField will be rendered with a red border and a red error text.

Actual result

Only the red error text is rendered.

Disabled button no longer showing a not-allowed cursor

Due to pointer-events: none; cursor: not-allowed is no longer working

EditableHeading doesn't work while EditableInput does

// 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

Add role "combobox" to Combobox component

Add role: "combobox" to the input element of the Combobox component

ButtonGroup is not exported from the package

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.

Accordion Typescript conversion

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

• Accordion.jsx
• accordionItem-tests.jest.js
• accordion.interactions.js
• AccordionItem.jsx

Good luck!

Feature: add support on "isIconHidden" prop to attention box component

Add support on "isIconHidden" to AttentionBox component (will hide the icon before the title).

Dropdown: onOptionRemove prop is missing in the documentation

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 :).

Add image support for MenuItem

It could be the same like component in MenuButton

This component is very beautiful, what is it called? Are there plans to open source it?

[RFC] `<Dropdown>` should expose a leaner API for styling

What we have now

At the moment, our <Dropdown> component supports a extraStyles prop which is passed pretty directly into the underlying react-select component.

Why is it problematic?

• Creates coupling between the API we give consumers and our implementation.
• Makes the component too extendable - consumers can change and potentially mess up our basic styling.
• Unfocused API, which makes controlling specific properties of the component more difficult than it needs to be. For example, let's say a user wants to control the menu's width; consider the 2 following examples:

<Dropdown
    extraStyles={(baseStyles) => ({ ...baseStyles, menu: (base) => ({ ...base, width: 300 }) })}
/>

<Dropdown menuWidth={300} />

Suggestion

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.

Automations same as monday.com

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?

Textwithhighlight - Feature request - Support custom tags and classnames

I'm using the Textwithhighlight component, and I'd like to override/add the highlight-text element style.

1. Is it possible to support an additional className for the highlight-text element?
2. Is it is possible to support rendering different HTML tags? like in this library, I can see you can use highlightTag prop to render another Html tag, for example <strong> instead of <em>?

Incorrect usage of aria labels in components EditableInput, ComboboxCategory and ComboboxOption

Declaration File for typescript

For using this package with typescript, can you add declaration files

React 18 issue

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

Accessibility: Search's "clear" functionality does not respond to enter/space keys

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.

Expected:

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.

Actual:

In that scenario, when the keys are pressed, the button does nothing.

Bugs with menu keyboard focus

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

Block text selection on monday-ui-react-core disabled button

Screen.Recording.2021-10-11.at.14.46.03.mov

Selecting and copying content of Editable heading doesn't work

Screen.Recording.2021-03-16.at.18.53.57.mov

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 :)

Checkbox Component Typescript converstion

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

• Checkbox.js
• useSupportFirefoxLabelClick.jsx
• checkbox-tests.jest.js
• checkbox-snapshot-tests.jest.js

Good luck!

Fix the class names inside the MultiStepIndicator component to be according to BEM conventions

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 :)

Maybe passing here element type like we did in the clickable component (@3dyonic you can see the clickable component for reference)

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)

Avatar Component Typescript Migration

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

• Avatar.jsx
• AvatarBadge.jsx
• avatar.jest.js
• AvatarConstants.jsx
• AvatarContent.jsx

Good luck!

Remove role image for decorative (ariaHidden=true) icon

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."

When pressing enter, menu doesn't close although passing closeDialogOnContentClick

add "arrow" to the dialog component

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.

Button aria-expanded typo

There is a typo in the Button component: aria-expended instead of aria-expanded.

"monday-ui-react-core": "^0.3.9",

<Dropdown />'s Border Bottom Hidden

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).

Initially loading prop on a button appears broken

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

Attention box: when the prop "title" is undefined do not draw the "monday-style-attention-box-component__title-container"

please add screenshot or video on the pr when the prop "title" is empty and with value

If i have categories, there are not taken into cosideration to set the height

https://github.com/mondaycom/monday-ui-react-core/blob/841e13f134091e09789828c3813941a46131f832/src/components/Combobox/components/ComboboxItems/ComboboxItems.jsx#L38

Square Button - Spinner not shown in mobile browsers in loading state

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.

Divider Component Typescript Migration

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

• Divider.jsx
• DividerConstants.js
• divider.jest.js

Good luck!