gsoft-inc / ov-igloo-ui

Officevibe design system

Igloo

Igloo gives a collection of React components for building their products

Report a Issue . Ask a Question

Documentation

Visit igloo.officevibe.design to learn more.

Usage

To use a component from this repo you will first need to install the component into your project.

For an example we will try to use the @igloo-ui/card component.

npm i @igloo-ui/card
# or with yarn
yarn add @igloo-ui/card

Then to use the component in your code just import it!

import Card from '@igloo-ui/card';

Getting Started

Before starting make sure node and yarn is installed

Install

After cloning ov-igloo-ui, run yarn to install dependencies.

git clone https://github.com/gsoft-inc/ov-igloo-ui.git
cd ov-igloo-ui
yarn
yarn storybook

Scripts

• yarn storybook: run Storybook
• yarn test: run tests
• yarn lint: check if the JS, TS correspond on standard
• yarn lint:style: check if the style correspond on standard

🤝 Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.If you're interested, definitely check out our Contributing Guide!

License

Copyright © 2019, GSoft inc. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/gsoft-inc/gsoft-license/blob/master/LICENSE.

ov-igloo-ui's Issues

[Bug]: Datepicker with unavailable weekend cursor problem

Contact Details

No response

What happened?

The cursor is flickering when hovering the disabled weekends:

Component

Datepicker

Component Version

0.1.1

Which browsers are you seeing the problem on?

Chrome

Mobile Device

No response

Relevant log output

No response

[Bug]: Textarea not disabled when disabled is true

Contact Details

No response

What happened?

Textarea not disabled when disabled is true, it is still possible to write in the textarea.

Component

Textarea

Component Version

0.1.4

Which browsers are you seeing the problem on?

No response

Mobile Device

No response

Relevant log output

No response

clarify the component description

I see this sentence and I don't understand what we are trying to explain here.

Maybe (if I understand correctly) this version could be clearer:

Cards are used as a visual container for a sub-group of elements in a parent container.

Originally posted by @ofrogon in #13 (comment)

[Bug]: If the text in the error HelperText wraps on two lines, the icon is centered on the two lines

Contact Details

No response

What happened?

If the text in the error HelperText wraps on two lines, the icon is centered on the two lines, instead of staying aligned with the first line.

Component

HelperText

Component Version

0.2.10

Which browsers are you seeing the problem on?

No response

Mobile Device

No response

Relevant log output

No response

FormGroup documentation error

Contact Details

No response

What happened?

In the documentation page there is an error with the demo.

Currently

<FormGroup label="Name" errorMsg="Name is required" showError={true}>
  <Input type="text" placeholder="John Doe" error={true} />
</FormGroup>;

Desired

<FormGroup label="Name" message="This field is required" showMessage>
  <Input type="text" placeholder="John Doe" error={true} />
</FormGroup>;

Component

FromGroup

Component Version

latest

Which browsers are you seeing the problem on?

No response

Mobile Device

No response

Relevant log output

No response

imports with `~@` in CSS are not handle well in multi project solutions

I tested with Parcel, and the tilde specifier want to resolve to the nearest node_modules to a sub-project package.json.

But the @igloo packages are import at the root of the multi-project repo. This cause Parcel to not be able to resolve imports correctly.

Also, latest version of Webpack is deprecating it. https://webpack.js.org/loaders/sass-loader/#resolving-import-at-rules

Using ~ is deprecated and can be removed from your code (we recommend it), but we still support it for historical reasons.

SASS files hould be render without ~ in their import if we want to support external tooling

[Bug]: Can surpass maxLength in Textarea with an emoji, leading to negative character indicator

Contact Details

[email protected]

What happened?

Steps to reproduce:

1. Write until the character indicator shows 1
2. Add an emoji

Result: We surpass the maxLength specified and the character indicator shows a negative number

Component

Textarea

Component Version

0.1.5

Which browsers are you seeing the problem on?

Chrome

Mobile Device

No response

Relevant log output

No response

[Bug]: TagPicker text color on hasError

Contact Details

[email protected]

What happened?

When the hasError property for the TagPicker component is set to true, the border becomes red but the text remains the same default color.

Component

TagPicker

Component Version

0.3.1

Which browsers are you seeing the problem on?

No response

Mobile Device

No response

Relevant log output

No response

[Bug]: ActionMenu with disablePortal has a weird behaviour

Contact Details

No response

What happened?

When I play with the component, it sometimes render at a random place (the top and left css properties are not good) :

Also, as you can hardly see at the beginning of the gif, the hover state is not always triggered (no translation + no cursor). It seems to work well on storybook, so maybe it is related to the previous bug, or maybe it is something on my side, and if you have any ideas, I'm all ears! Edit : it seems to be related to the previous bug since I can see the top and left properties changed.

Edit 2: When testing on my side, it seems that if we change the position: fixed to position: absolute, it works! So maybe it is the fix to do here in the design system!

(+ adding on the .ids-action-menu the property position: relative)

Component

ActionMenu

Component Version

1.1.2

Which browsers are you seeing the problem on?

No response

Mobile Device

No response

Relevant log output

No response

Modal: do not render the close button on fullContent

Contact Details

No response

What happened?

The header of the modal is automatically set to display none when the fullContent option is chosen. In some cases we want to display the close button.

Example

Component

Modal

Component Version

latest

Which browsers are you seeing the problem on?

No response

Mobile Device

No response

Relevant log output

No response

[Bug]: TagPicker item error state is not working

Contact Details

No response

What happened?

When I set hasError on a TagPicker selectedResults item, there's no red border :

Also, when the TagPicker with error prop set to true isFocused, the border is blue instead of red :

Component

TagPicker

Component Version

0.3.0

Which browsers are you seeing the problem on?

No response

Mobile Device

No response

Relevant log output

No response

Feature Request: Add new props ref and autofocus on Textarea

Component that this feature request involves

Textarea

Is your feature request related to a problem? Please describe

For the form I'm working on, the textarea also takes a ref and an autofocus, which are not in the igloo component at the moment.

send by Kevin Paul (Uzinakod) on slack

Describe the solution you'd like

Add new props for the ref and the autofocus

Describe alternatives you've considered

No response

Additional context

No response

Error in IconButton ReadMe

in the ReadME it is named icon-button when it should be IconButton

import IconButton from '@igloo-ui/IconButton';
// and with css-modules
import '@igloo-ui/IconButton/dist/iconbutton.css';

Toaster documentation is wrong

Problem

In the documentation the import of Toaster is wrong.

Solution

The right way is toaster with a small t.
import Toaster, { toaster } from '@igloo-ui/toaster';

The maxWidth of the `Tooltip` does not work

The props on storybook was set to 30

Result

[Bug]: The modal with isClosable=false displays the x button in desktop

Contact Details

No response

What happened?

The modal with isClosable=false displays the x button in desktop.

Component

Modal

Component Version

1.1.0

Which browsers are you seeing the problem on?

No response

Mobile Device

No response

Relevant log output

No response

[Bug]: Can't import any Igloo component in NextJS project

Contact Details

[email protected]

What happened?

Hello,

I'm trying to learn NextJS and I wanted to use one of the Igloo components in my project. It looks like there is a compilation issue due to the way CSS are exported in the different packages in the library.

See thread in the next.js project : vercel/next.js#19936

Here's my repo if you want to reproduce : https://github.com/williamgraver/randomlistpicker-api/blob/master/components/picker.jsx

Component

All

Component Version

latest

Which browsers are you seeing the problem on?

No response

Mobile Device

No response

Relevant log output

No response

The `Tooltip` render a long scroll

https://share.getcloudapp.com/Wnu70YlN

Docs: the dropdown is not displayed correctly in the doc and storybook

Contact Details

No response

What happened?

the dropdown is not displayed correctly in the doc and storybook

Docs

Storybook

Component

Dropdown

Component Version

latest

Which browsers are you seeing the problem on?

Safari

Mobile Device

No response

Relevant log output

No response

[Feature Request]: Allow subtitle to be a ReactNode in Dialog

Component that this feature request involves

Dialog

Is your feature request related to a problem? Please describe

We need to the Dialog's subtitle to allow having multiple paragraphs but for the moment, it only allows string.

Describe the solution you'd like

Could the type for subtitle be string or ReactNode?

Describe alternatives you've considered

For the moment, we will most likely be able to use a workaround but it won't follow our conventions.

Additional context

Thanks!

[Feature Request]: Remove the necessity to write <Toaster toasts={toastList} /> each time we want a toaster

Component that this feature request involves

Toaster

Is your feature request related to a problem? Please describe

We have to write each time we want to use a toaster.

Describe the solution you'd like

It would be nice if we can only write one time at the root of the app, and after, we only have to use toast.error/success when we need a toaster. As a reference, you can see in portal what has been done with the toaster component.

Describe alternatives you've considered

No response

Additional context

No response

[Bug]: The ActionMenu is not the same as in Figma

Contact Details

No response

What happened?

There should be no hover state on another item when hovering a disabled item (from https://igloo.officevibe.design/storybook/?path=/docs/components-actionmenu--docs):

Linked to the previous point, there should be no hover state when nothing is hovered (from https://igloo.officevibe.design/storybook/?path=/docs/components-actionmenu--docs):

Also, there should be some spacing here (spacing from figma):

Also, the icon is not the right color (color from figma):

Also, I was expecting to see the ActionMenu move if his reference is moving (see behaviour of the legacy actionMenu):

And the Igloo ActionMenu:

And as my last point, I think I could be a lot easier to use the component if the ActionMenuOption was an object
{ label: string, icon: node, onClick: func, closeMenuOnClick: bool, disabled: bool }
As of today, we need to have a value and always do a switch/case on that value for the closeOnSelect and onOptionSelect. It becomes less readable in my opinion.

Component

ActionMenu

Component Version

0.1.2

Which browsers are you seeing the problem on?

No response

Mobile Device

No response

Relevant log output

No response

[Feature Request]: Add infinite scroll capabilities to combobox

Component that this feature request involves

combobox

Is your feature request related to a problem? Please describe

When we don't want to load all options at once because there's too much

Describe the solution you'd like

An optional infinite scroll feature would allow us to iterate through a big list without having to load all results at once and load more results as needed.

Describe alternatives you've considered

A custom component was made instead, calling a LoadMore(...) if it HasMore(...) when the user gets near the end of options.

Additional context

No response

[Bug]: Component, containing a Modal, if rendered by key prevent opening and closing animation

Contact Details

[email protected]

What happened?

If the component rendering the modal is mounted/unmounted through a key, the mounting/unmounting process could prevent the opening/closing animations of the Modal component.

This occurs if the Modal tries to open on the first render or reset its key in the onClose callback.

One way to prevent the issue is to set the open state in the useEffect and reset the key in the onAfterClose callback.

That will ensure the component is already mounted before triggering the opening animation and that the component can be unmounted after the animation.

The following gif shows the difference between the usual behavior (no key) and the problematic one (with key).

Component

Modal

Component Version

1.2.3

Which browsers are you seeing the problem on?

Microsoft Edge

Mobile Device

No response

Relevant log output

No response

Error in the export of the `Button` in the doc

Button export is default and documentation is not good

In production

Expected

import Button from '@igloo-ui/button';

[Bug]: When retrieving the local date from the DatePicker, the timezone is appended in brackets at the end

Contact Details

[email protected]

What happened?

When we select a date in the DatePicker component, the local value returned contains the timezone in bracket at the end (ex: "2023-08-19T25:14:41.081-04:00[America/Toronto]").

Since we already have the offset -4:00, there is no need for that additional data which we need to split before parsing said local date.

Component

@igloo-ui/datepicker

Component Version

0.1.5

Which browsers are you seeing the problem on?

Chrome

Mobile Device

No response

Relevant log output

No response

Tooltip ParseError on build

The @igloo-ui/tooltip v.0.0.7 has an error on the build time with css

Error in console

Problem

After analyzing the css file I found that the calc(var(--ids-tooltip-arrow-size)*-1) was causing problems once the file was minified.

Solution

Change the order of the calculation calc(-1*var(--ids-tooltip-arrow-size))

[Bug]: It is possible to add more than the maxTags tags in the TagPicker

Contact Details

No response

What happened?

When we already have selectedResults (so the first render of the TagPicker has selectedResults), it is possible to add more tags in the TagPicker than the maxTags prop. For exemple, I want a max of 5 tags. When my TagPicker is empty at the first render, I can put max 5 tags. But when my selectedResults contain already 2 tags at the first render, I can now have 7 tags (and I don't want it).

Component

TagPicker

Component Version

0.3.1

Which browsers are you seeing the problem on?

No response

Mobile Device

No response

Relevant log output

No response

[Bug]: Issues with AreaChart loading state

Contact Details

[email protected]

What happened?

1. When using the AreaChart component in the OV portal, the loading state looks like this (black rectangles with no animations):

After doing some investigation, we found it's due to the pulse-light keyframe animation used. In the OV portal, pulse-light keyframes work with the background-color, while the AreaChart loading requires fill to be used instead. When we change it to fill it seems to display as intended:

2. When using the loading prop, once loaded the labels on the y-axis appear cut off
   

3. In the empty state, the animation of the line goes from right to left, it would make more sense for the animation to go left to right like it does when there is data.
   

Component

AreaChart

Component Version

2.0.0

Which browsers are you seeing the problem on?

No response

Mobile Device

No response

Relevant log output

No response

`Toggle` stopPropagation

When a parent with an onClick event handler that, when clicked,  calls the function. Within this parent are Toggle element   that, when clicked, call the onChange of Toggle and the parent function.

Example

  const handleCardClick = (event) => {
    console.log('handleCardClick');
  }

  const handleToggle = (event) => {
    console.log('handleToggle');
  }

  <Card onClick={handleCardClick}>
   ...
      <Toggle
        htmlFor="toggle-1"
        onChange={handleToggle}
      >
      </Toggle>
  </Card>

Result on console when clicking on Toggle

handleCardClick
handleToggle

[Bug]: Some inconsistencies in x and y axis labels displayed (AreaChart)

Contact Details

[email protected]

What happened?

example screenshot for reference:

1. For x-axis labels, it would be preferable to show as many dates as we can allow. In the example, we have the last 7 days + the current day (8 days total), there is room to show all days but some are skipped (Jan 1, Jan 3, Jan 5).

2. For the y-axis labels, in some instances not all numbers in the range are included, in the example I would expect all numbers 0 - 5 to be shown but only 0, 2, and 5 are shown. the range provided is min: 0 max: 5. Most of the time the y-axis labels are fine, but in this case with little data and a small range it doesn't behave like I would expect.

Component

AreaChart

Component Version

2.0.0

Which browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

Mobile Device

No response

Relevant log output

No response

IconButton - Wrong title display when hover button

When hover an @igloo-ui/icon-button element, the title is [object Object].

This may also need to be fixed in @igloo-ui/button and add an option to disable the title when hover.

[Feature Request]: Test

Component that this feature request involves

teest

Is your feature request related to a problem? Please describe

dsafdsf

Describe the solution you'd like

sdfsdafa

Describe alternatives you've considered

No response

Additional context

No response

[Bug]: BarChart can have some improvements

Contact Details

No response

What happened?

The space between the label and the bar is a little bit too big, according to the designs.

Also, there's a visual glitch when the barGraph is reloading (as you can see on the gif).

Also, according to my designer, the animation of the bars is too fast. I don't know exactly what would be a better duration, but a little slower should be enough :)

Component

BarChart

Component Version

0.2.1

Which browsers are you seeing the problem on?

Chrome

Mobile Device

No response

Relevant log output

No response

[Bug] ActionMenu Component breaks when used within a modal with scrollwheel

Contact Details
[email protected]

What happened?
Using component code out of the box inside modal component with a scrollwheel causes dropdown to bug

Result: Dropdown overflows outside the parent component

Component
AcrtionMenu

Component Version
0.1.2

Which browsers are you seeing the problem on?
Chrome

[Feature Request]: Support non-removable TagItem inside the TagPicker

Component that this feature request involves

TagPicker

Is your feature request related to a problem? Please describe

No response

Describe the solution you'd like

I want to be able to hide the x button that allows users to remove a specific tag from the TagPicker

Describe alternatives you've considered

No response

Additional context

No response

Tooltip - Wrong position with `div` or `svg` element

The tooltip is not positioned correctly with a div or a svg child.

Example

Proposed Solution

It's possible to fix this issue by adding display: inline-block; to the className .ids-tooltip__container

[Feature Request]: Add a prop onAfterClose on the ActionMenu

Component that this feature request involves

ActionMenu

Is your feature request related to a problem? Please describe

I need to remove a css class onClose of the ActionMenu, but it is not visually nice because of the animation (the onClose is triggered before the animation is completed). With a prop onAfterClose triggered after the animation is completed, it would be perfect for my case! Now I use a settimeout and the timeout value is 150 because I checked in the ds code to see what it is. So if you change it, my value will not be good anymore. The best would be a onAfterClose prop! Thanks!

Describe the solution you'd like

Add a prop onAfterClose (or the naming that you want) on the ActionMenu that will be triggered after the animation is completed.

Describe alternatives you've considered

As mentionned before, I used a settimeout, but it is not a good solution in my opinion.

Additional context

No response

[Bugs]: TagPicker missing error prop, focused on page load, missing ability to provide icon

Contact Details

No response

What happened?

1. The TagPicker is missing an error prop in order to display the error state (like Input, Textarea, Datepicker have)
2. The TagPicker is focused on initial load. This can be seen for example in the storybook for the component, the last picker on the page is focused (it should not be focused by default on initial load or the focus should be configurable)
3. In our mockups, we have a magnifying glass icon that should be there when nothing is selected in the picker, we would need a way to prepend an icon to the picker

Component

TagPicker

Component Version

0.1.4

Which browsers are you seeing the problem on?

Chrome

Mobile Device

No response

Relevant log output

No response

Hyperlink does not work with translations

[Feature Request]: add onSearch and searchLatency props to Combobox

Component that this feature request involves

combobox

Is your feature request related to a problem? Please describe

Sometimes the list of options is too long to load at once. Calling the database for the auto-complete results as the user types would help.

Describe the solution you'd like

With onSearch, we could have a callback that is triggered every time a keyup event happens (i.e. a character is added to or removed from the auto-complete search term). Using searchLatency, we'd be able to decide how often the callback is triggered. So for instance, if I have searchLatency set to 3, every time 3 characters are changed in the search term, the onSearch callback is triggered.

Describe alternatives you've considered

Right now a custom wrapper is created around the existing component to handle this.

Additional context

No response

[Bug]: Not selected Tabs content is rendered (and should not)

Contact Details

No response

What happened?

The Tabs component renders everything and not only the children of the selected tab. It should only render the children of the selected tab.

Component

Tabs

Component Version

0.1.3

Which browsers are you seeing the problem on?

No response

Mobile Device

No response

Relevant log output

No response

[Bug]: When dismissing a Dialog (or other similar component) displayed on top of a Modal, the Modal is also dismissed

Contact Details

[email protected]

What happened?

When a Dialog (or other similar type of component) is displayed on top of a Modal with isDismissable, when the Dialog is dismissed, the Modal below is also dismissed even though we would expect it not to.

Component

Modal

Component Version

1.2.2

Which browsers are you seeing the problem on?

Chrome

Mobile Device

No response

Relevant log output

No response

We miss a `console.log()` call in the `Alert` component

A debugging console.log() was left in the Alert component in the Alert.stories.tsx file.

[Feature Request]: Add autoFocus prop on TagPicker

Component that this feature request involves

TagPicker

Is your feature request related to a problem? Please describe

No response

Describe the solution you'd like

I want to be able to set an autoFocus prop on the TagPicker.

Describe alternatives you've considered

No response

Additional context

No response

Open a new issue via Github

Test de la fonction

[Feature Request]: We need to have a loading state for dialog component when clicking on validate button

Component that this feature request involves

Dialog

Is your feature request related to a problem? Please describe

When I click on validate button, a call is made on the backend. It could be better to have a loading spinner during this call

Describe the solution you'd like

Add a loading state on validate button

Describe alternatives you've considered

No response

Additional context

No response

Quand un input est disabled et qu'on clique dessus, le border bleu override le gris du disabled

[Bug]: The Tabs component have some things different from the designs

Contact Details

No response

What happened?

The space between the label and the blue bar should be 1.2rem (instead of 0.8rem because of the blue bar height of 0.4rem).

Also, the font-family is not the good one (should be inter instead of arial).

Also, the not active tab should have a font-weight of 400 (instead of 500).

Component

Tabs

Component Version

0.1.3

Which browsers are you seeing the problem on?

Chrome

Mobile Device

No response

Relevant log output

No response

[Bug]: Tooltip wrapping up a @igloo-ui/button or @igloo-ui/icon-button causes a Warning: This synthetic event is reused for performance reasons.

Contact Details

[email protected]

What happened?

When a tooltip wraps up a button or an icon-button, on the release it will generate the following error:

index.js:1 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property nativeEvent on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.

Component

@igloo-ui/tooltip

Component Version

3.1.4

Which browsers are you seeing the problem on?

Chrome

Mobile Device

No response

Relevant log output

ReviewEventListItems.jsx:15 Delete event with id: 1 from cycle with id: 64b58ad7cd386feefa0ce7e2
index.js:1 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `nativeEvent` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.
console.<computed> @ index.js:1
overrideMethod @ console.js:213
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
warn @ react-dom.development.js:8566
get @ react-dom.development.js:8560
(anonymous) @ Tooltip.js:34434
setTimeout (async)
onBlur @ Tooltip.js:34427
(anonymous) @ Tooltip.js:34467
acc.<computed> @ Tooltip.js:34467
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:414
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
Show 1 more frame