gsoft-inc / ov-igloo-ui Goto Github PK
View Code? Open in Web Editor NEWOfficevibe design system
Home Page: https://igloo.officevibe.design
License: Apache License 2.0
Officevibe design system
Home Page: https://igloo.officevibe.design
License: Apache License 2.0
Dialog
We need to the Dialog's subtitle to allow having multiple paragraphs but for the moment, it only allows string.
Could the type for subtitle be string or ReactNode?
For the moment, we will most likely be able to use a workaround but it won't follow our conventions.
Thanks!
ActionMenu
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!
Add a prop onAfterClose (or the naming that you want) on the ActionMenu that will be triggered after the animation is completed.
As mentionned before, I used a settimeout, but it is not a good solution in my opinion.
No response
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
All
latest
No response
No response
No response
Steps to reproduce:
Result: We surpass the maxLength specified and the character indicator shows a negative number
Textarea
0.1.5
Chrome
No response
No response
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
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.
@igloo-ui/datepicker
0.1.5
Chrome
No response
No response
combobox
When we don't want to load all options at once because there's too much
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.
A custom component was made instead, calling a LoadMore(...) if it HasMore(...) when the user gets near the end of options.
No response
TagPicker
No response
I want to be able to hide the x
button that allows users to remove a specific tag from the TagPicker
No response
No response
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
No response
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 :)
BarChart
0.2.1
Chrome
No response
No response
TagPicker
No response
I want to be able to set an autoFocus prop on the TagPicker.
No response
No response
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)
No response
TagPicker
0.1.4
Chrome
No response
No response
No response
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).
Tabs
0.1.3
Chrome
No response
No response
Test de la fonction
No response
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).
TagPicker
0.3.1
No response
No response
No response
Textarea
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
Add new props for the ref
and the autofocus
No response
No response
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:
When using the loading
prop, once loaded the labels on the y-axis appear cut off
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.
AreaChart
2.0.0
No response
No response
No response
No response
Textarea not disabled when disabled is true, it is still possible to write in the textarea.
Textarea
0.1.4
No response
No response
No response
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';
No response
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.
Modal
latest
No response
No response
No response
combobox
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.
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.
Right now a custom wrapper is created around the existing component to handle this.
No response
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.
Modal
1.2.2
Chrome
No response
No response
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.
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
No response
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)
ActionMenu
1.1.2
No response
No response
No response
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.
@igloo-ui/tooltip
3.1.4
Chrome
No response
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
When the hasError property for the TagPicker component is set to true, the border becomes red but the text remains the same default color.
TagPicker
0.3.1
No response
No response
No response
No response
In the documentation page there is an error with the demo.
<FormGroup label="Name" errorMsg="Name is required" showError={true}>
<Input type="text" placeholder="John Doe" error={true} />
</FormGroup>;
<FormGroup label="Name" message="This field is required" showMessage>
<Input type="text" placeholder="John Doe" error={true} />
</FormGroup>;
FromGroup
latest
No response
No response
No response
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).
Modal
1.2.3
Microsoft Edge
No response
No response
No response
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 :
TagPicker
0.3.0
No response
No response
No response
Toaster
We have to write each time we want to use a toaster.
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.
No response
No response
No response
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.
ActionMenu
0.1.2
No response
No response
No response
A debugging console.log()
was left in the Alert
component in the Alert.stories.tsx
file.
The @igloo-ui/tooltip
v.0.0.7 has an error on the build time with css
After analyzing the css file I found that the calc(var(--ids-tooltip-arrow-size)*-1)
was causing problems once the file was minified.
Change the order of the calculation calc(-1*var(--ids-tooltip-arrow-size))
No response
The Tabs component renders everything and not only the children of the selected tab. It should only render the children of the selected tab.
Tabs
0.1.3
No response
No response
No response
No response
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.
HelperText
0.2.10
No response
No response
No response
Dialog
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
Add a loading state on validate button
No response
No response
example screenshot for reference:
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).
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.
AreaChart
2.0.0
Firefox, Chrome, Microsoft Edge
No response
No response
teest
dsafdsf
sdfsdafa
No response
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.