ovh / ovh-ui-kit Goto Github PK
View Code? Open in Web Editor NEWOVHcloud UI Kit - Master UI Framework
Home Page: https://ovh.github.io/ovh-ui-kit
License: BSD 3-Clause "New" or "Revised" License
OVHcloud UI Kit - Master UI Framework
Home Page: https://ovh.github.io/ovh-ui-kit
License: BSD 3-Clause "New" or "Revised" License
When a value in the rows is null
the datagrid display is broken (it happens for example with Iceberg API calls).
Expected behavior:
The others values (!== null
) should be displayed into the datagrid.
Actual behavior:
The datagrid is empty.
Frequency:
It happens once an item is null
.
Accessing to the following URL https://ovh.github.io/ovh-ui-kit/?path=/story/design-system-components-action-menu-webcomponent--compact leds to an infinite initialization on the "Accessibility" tab.
Issue brought by: #656
Accessibility
tabExpected behavior:
Accessibility tab
should work.
Actual behavior:
Tab cannot initialize.
Frequency:
5 (always)
Browsers:
Operating System: GNU/Linux
Distribution: Ubuntu 18.04 (64-bit)
Using <oui-action-menu compact>
component raise an accessibility issue when
using Lighthouse report (for instance).
Adding the aria-label
attribute, as mentioned into the documentation does not
provide any result (same with text
attribute).
oui-action-menu
story as an example (https://ovh.github.io/ovh-ui-kit/?path=/story/design-system-components-action-menu-webcomponent--compact).text
attribute is correctly settled (and/or use the arial-label
attribute)Expected behavior:
text
should work.aria-label
should work.Actual behavior:
Following error is reported:
Button do not have an accessible name
button#ouiDropdown4.oui-action-button.ng-scope.ng-isolate-scope.oui-dropdown__trigger
Frequency:
5 (always)
Canva link: https://ovh.github.io/ovh-ui-kit/iframe.html?id=design-system-components-action-menu-webcomponent--compact&viewMode=story
Live example: https://upufn.csb.app/
CodeSandbox: https://codesandbox.io/s/oui-action-menu-aria-label-upufn?file=/index.html
Using popover
inside a oui-collapsible
does not work well due to overflow:
oui-collapsible
elementoui-field
with a label-popover
Expected behavior:
The popover overflow should be visible:
Frequency:
5 (always)
Workaround used:
oui-collapsible {
.oui-collapsible__header[aria-expanded='true'] ~ .oui-collapsible__wrapper {
overflow: visible;
}
}
oui-angular/numeric 'default' displays 4 and a half digits when aria-valuenow="99999".
When using row-loader
attribute on a oui-datagrid
and using the value on oui-action-menu
but not oui-column
, the row-loader
is not called
oui-datagrid
row-loader
,row-loader
as conditions in oui-action-menu
without using it in a oui-column
Expected behavior:
row-loader
function should be called
Actual behavior:
row-loader
isn't called
To avoid server side cache of the differents icons fonts format the version of the ovh-ui-kit should be added to the end of the url setted here :
https://github.com/ovh-ux/ovh-ui-kit/blob/144e793cf351efb10e68fed25aa9e594dc277889/packages/oui-icons/fonts.less#L5-L9
Like this cache will be invalidated at each new version of the component.
When using a oui-field
out of a form
with a nested model, a property is undefined error
form
elementmodel.nestedProperty
Expected behavior:
The model should be updated
Actual behavior:
The model gets updated but an error appears "Cannot read property 'nestedProperty' of undefined"
Frequency:
Always
When the min
attribute of a oui-numeric
is set to a dynamic value, the checks work well.
However, the error messages are not updating.
Create two oui-numeric
inputs. The value of the first one is used to set the min
attribute of the second.
<oui-field data-label="input 1">
<oui-numeric
name="input1"
data-model="$ctrl.input1Value"
data-min="1"
data-max="100"
data-required
></oui-numeric>
</oui-field>
<oui-field data-label="input 2">
<oui-numeric
name="input2"
data-model="$ctrl.input2Value"
data-min="$ctrl.input1Value"
data-max="100"
data-required
></oui-numeric>
</oui-field>
Set input 1 value to 5
Click on the '+' button of the input 2, the value jumps from 0 to 5, and the '-' button is disabled.
Manually edit the input2 to 2.
The input is now invalid, but:
Expected behavior:
Text should show a correct min value.
Actual behavior:
Text shows an incorrect min value.
Frequency:
5 (always)
I suspect the one-time binding in the field
component template to be the cause of this bug: https://github.com/ovh/ovh-ui-kit/blob/master/packages/components/field/src/js/field.html#L26
The locale option does not work because locale files are not imported
ouiCalendarConfigurationProvider.setLocale('fr'); // same for fr-FR fr_FR
then instantiate a oui-calendar
Expected behavior:
oui-calendar should be displayed in french locale
Actual behavior:
oui-calendar is in english, warning message in the console telling that the flatpicker locale does not exists
Frequency:
always
the oui-calendar component should import the given flatpicker locale automatically
http://master.ui-kit.ovh/#!/ovh-ui-kit/loader
The example with a button contains a loader made with div.
It should use span instead.
With Firefox, the oui-numeric still has the up and down arrows which is the default behavior of numeric inputs. This leads to incorrect display on small numeric values.
<oui-field
data-label="{{:: 'data_processing_submit_job_stepper_spark_driver_cores_label' | translate }}"
>
<div class="sizing__advanced-units-container">
<oui-numeric
name="driver-cores"
data-model="$ctrl.state.driverCores"
data-min="$ctrl.jobParameters.driver_cores.validator.min"
data-max="$ctrl.jobParameters.driver_cores.validator.max"
>
</oui-numeric>
</div>
<span class="sizing__advanced-units">vCores</span>
</oui-field>
Expected behavior:
Arrows should not appear / hide value (screenshot on Linux OS)
Actual behavior:
Default behavior truncates input value (Windows OS - Firefox)
Frequency:
5 (always)
model attribute is not updated when value change
<oui-timepicker model="$ctrl.foo"></oui-timepicker>
$timeout(() => {
$ctrl.foo = '09:00';
}, 1000);
Expected behavior:
timepicker should display updated value since it's double binding
Actual behavior:
nothing happen
Frequency:
always
Pulling the resize handle of a text area is slooooooow.
Tested in Chromium 65 and Firefox 59.
$ yarn build
yarn build v0.23.4
$ rimraf dist && npm run build:less && npm run build:icons
> [email protected] build:less /home/aleblanc/Code/github/ovh-ux/ovh-ui-kit
> lessc --remcalc packages/oui/stylekit.less dist/oui.css
Unable to interpret argument remcalc - if it is a plugin (less-plugin-remcalc), make sure that it is installed under or at the same level as less
Is your feature request related to a problem? Please describe.
I'm always frustrated when I have to download the invoices for the last month and that I have to click approx. 40 times on the checkboxes to select all of them.
Describe the solution you'd like
The simplest solution would be to click the first checkbox, then clicking the last checkbox while holding the Shift key would check automatically all checkboxes in between.
Describe alternatives you've considered
It’s possible to filter the invoices by setting a start and end date, then click the checkbox at the top of the column to select them all, but this is very tedious and isn’t faster than selecting them manually.
Additional context
Related URL: https://www.ovh.com/manager/dedicated/#/billing/history
(Transfer of OVH manager reported issue #5076 in ovh-ui-kit repository)
(cc @EmbDclic)
According to the documentation of the component (https://ovh.github.io/ovh-ui-kit/?path=/docs/design-system-components-timepicker-webcomponent--default), the oui-timepicker
component does have a disabled
attribute. However, it seems that it is not taken into account as we are still able to modify the inputs.
Have a oui-timepicker with a disabled attribute:
html file:
<oui-timepicker
model="$ctrl.timepickerModel"
format="H:i"
inline
disabled="$ctrl.timepickerdisabled"
></oui-timepicker>
controller:
this.timepickerModel = '00:15:20';
this.timepickerdisabled = true;
Expected behavior:
Inputs in the timepicker's generated template should be disabled.
Actual behavior:
Frequency:
5 (always)
searchable
property<oui-select
id="container-select"
name="container-select"
data-model="$ctrl.data"
data-items="$ctrl.filteredContainers"
data-match="description"
data-searchable
data-required
>
</oui-select>
Expected behavior:
No glitch
Actual behavior:
An input field appears and disapear
Frequency:
always
Using popover
inside a oui-tile-description
does not work well.
This is due to the oui-tile__description
having the following css
word-break: break-all;
oui-tile-description
elementbutton
with a label-popover
Expected behavior:
The popover should break words
Frequency:
5 (always)
Workaround used:
.oui-popover {
word-break: break-word;
}
I just saw this package (https://github.com/twbs/rfs) for responsive font-size, should it be integrated inside ui-kit?
Example :
.oui-icon {
// font-size: rem-calc(4rem); // old way
.font-size(4rem);
}
generates as
.oui-icon {
font-size: 4rem;
}
@media (max-width: 1200px) {
.oui-icon {
font-size: calc(1.525rem + 3.3vw);
}
}
From https://ovh.github.io/ovh-ui-kit/?path=/story/design-system-helpers-colors--primary, some text therefore some color are not seen due to lack of contrast
This happens for almost all color categories
e.g : .oui-color-ae-100, .oui-color-p-050, oui-color-product-soon
Expected behavior:
We should be able to distinguish all the colors
Actual behavior:
Some colors cannot be seen due to lack of contrast with the background
Frequency:
Always
Is your feature request related to a problem? Please describe.
I'm always frustrated when I have to download the invoices for the last month and that I have to click approx. 40 times on the checkboxes to select all of them.
Describe the solution you'd like
The simplest solution would be to click the first checkbox, then clicking the last checkbox while holding the Shift key would check automatically all checkboxes in between.
Describe alternatives you've considered
It’s possible to filter the invoices by setting a start and end date, then click the checkbox at the top of the column to select them all, but this is very tedious and isn’t faster than selecting them manually.
Additional context
Related URL: https://www.ovh.com/manager/dedicated/#/billing/history
Using popover
with a long word result in a visible overflow
this is due to the following css:
.oui-popover {
max-width: 18.75rem;
}
popover
element with a long textExpected behavior:
The text should fit in the popover
Frequency:
5 (always)
Workaround used:
.oui-popover {
max-width: fit-content;
}
However, this is probably not the best solution. Maybe we want to check if the text contains a long word, but I'm not sure if it is doable.
export default
Expected behavior:
A valid URL should be specified.
Actual behavior:
A wrong URL is defined probably due to an Issue when compiling the styles.
Frequency:
Always.
Our current shared webpack configuration is not able to build a package that rely on this version (v4.0.4).
In this UI kit, it would be nice to have a "range" component where user can select a min & a max value.
Such a component exists in OVHcloud website, but is not available in this UI kit (so not available in the OVHcloud Manager):
The needs behind: we are working on some auto-scaling feature. For this we would like user to select a minimum & maximum number of servers in the OVHcloud Manager, through this kind of range component.
But as far as I know, nothing like this is currently available.
hello,
can we have a precompiled css, instead of having to compile less in our apps ?
thanks
Bootstrap overrides the rem-base to 10px. To use ovh-ui-kit in a project with bootstrap, you need to add some configuration to your project as outlined in the documentation.
For those who want to use ovh-ui-kit with bootstrap on the same project you need change the rem-base to 10px otherwise components proportions will not be respected.
@import '~bootstrap/less/bootstrap';
// Sets rem-base to 10px because bootstrap sets font-size: 10px on the html element.
@rem-base: rem-base(10px);
@import "~ovh-ui-kit/packages/oui/stylekit.less";
Is it possible to detect bootstrap (by variable) and set @rem-base accordingly?
A oui-action-menu-item
with href
attribute is not disabled when disabled
attribute is truthy.
If the item is disabled and it's a link it should be displayed as a disabled button.
z-index and relative position seem to be useless on oui-table.
... in order to avoid unwanted selections.
The issue occurs when i execute "yarn start" command.
1. git clone https://github.com/ovh/ovh-ui-kit.git
2. cd ovh-ui-kit
3. yarn install
4. yarn start
Expected behavior:
In normal case we expect that server is up and the app launched into browser
Unexpected behavior:
Build fails and we got these first errors lines
[./.storybook/generated-entry.js] 1.52 KiB {main} [built] [failed] [1 error]
[./.storybook/preview.js] 1.52 KiB {main} [built] [failed] [1 error]
...
Frequency:
5 (always)
OS : Windows Version 10.0.18363.959
WSL1 : Ubuntu 20.04 LTS
Node : v12.18.2
npm : 6.14.5
yarn : 1.22.4
From the Storybook we list some flags available:
https://ovh.github.io/ovh-ui-kit/?path=/story/design-system-content-icons--flags
Using a given flags (:belgium: for instance) is not allowed due to invalid SVG format published to the registry.
<span class="oui-flag oui-flag_be"></span>
Expected behavior:
SVG code from a given flag must be valid.
Actual behavior:
SVG code from a given flag is invalid.
Frequency:
5
Issue appears since version v4.0.5
.
Currently with oui-field errors are displayed when field are invalid and if the form has been validated and also if the field is not focused.
As a developper, we should be abble to determine how to display errors.
My proposition is to:
isErrorVisible
method return;If the attribute is present on a oui-field element, it overrides the default and the global. Otherwise if the provider has been configured, it overrides the default behaviour.
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.