Description

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.

Steps to reproduce

1. Use following code snippet

<span class="oui-flag oui-flag_be"></span>

2. See errors

Expected behavior:

SVG code from a given flag must be valid.

Actual behavior:

SVG code from a given flag is invalid.

Frequency:
5

Additional information

Issue appears since version v4.0.5.

Description

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);
  }
}

Description

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

Steps to reproduce

1. Use oui-action-menu story as an example (https://ovh.github.io/ovh-ui-kit/?path=/story/design-system-components-action-menu-webcomponent--compact).
2. Pay attention that text attribute is correctly settled (and/or use the arial-label attribute)
3. See errors (both attributes are ignored).

Expected behavior:

• text should work.
• aria-label should work.
• No accessibility issue must be reported.

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)

Additional information

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

Description

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

Steps to reproduce

1. Create a oui-datagrid
2. Use a row-loader,
3. Use data fetch in 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

Description

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.

Steps to reproduce

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:

Inputs are not disabled:

Frequency:
5 (always)

Description

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.

Steps to reproduce

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

Description

The locale option does not work because locale files are not imported

Steps to reproduce

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

Additional information

the oui-calendar component should import the given flatpicker locale automatically

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

oui-angular/numeric 'default' displays 4 and a half digits when aria-valuenow="99999".

hello,

can we have a precompiled css, instead of having to compile less in our apps ?

thanks

Description

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;

Steps to reproduce

1. Create a oui-tile-description element
2. Add a button with a label-popover

Expected behavior:

The popover should break words

Frequency:
5 (always)

Additional information

Workaround used:

.oui-popover {
    word-break: break-word;
}

[oui-action-menu]: disabled attribute does not work with items having an href attribute

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.

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.

Description

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

Steps to reproduce

1. Go to: https://ovh.github.io/ovh-ui-kit/?path=/story/design-system-components-action-menu-webcomponent--compact
2. Reach Accessibility tab
3. See error

Expected behavior:

Accessibility tab should work.

Actual behavior:

Tab cannot initialize.

Frequency:

5 (always)

Additional information

Browsers:

• Chromium (Version 84.0.4147.105)
• Firefox 79.0

Operating System: GNU/Linux
Distribution: Ubuntu 18.04 (64-bit)

Description

model attribute is not updated when value change

Steps to reproduce

<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

Additional information

Description

When using a oui-field out of a form with a nested model, a property is undefined error

Steps to reproduce

1. Create a oui-field out of a form element
2. Add an input with a model being model.nestedProperty
3. Try to edit the model

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

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:

• add an attritbute to override the isErrorVisible method return;
• add a global method in provider that determine if error is displayed or not.

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.

Description

Using popover with a long word result in a visible overflow

this is due to the following css:

.oui-popover {
    max-width: 18.75rem;
}

Steps to reproduce

1. Create a popover element with a long text

Expected behavior:

The text should fit in the popover

Frequency:
5 (always)

Additional information

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.

Description

Steps to reproduce

1. Visit: https://unpkg.com/@ovh-ux/[email protected]/dist/css/oui.css
2. Search export default
3. See errors

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.

Additional information

Our current shared webpack configuration is not able to build a package that rely on this version (v4.0.4).

Description

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.

Pulling the resize handle of a text area is slooooooow.
Tested in Chromium 65 and Firefox 59.

Description

Steps to reproduce

1. Create a component with 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>

2. Clic on the component

Expected behavior:

No glitch

Actual behavior:

An input field appears and disapear

Frequency:
always

Additional information

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)

Actual:

Should look like:

Components: oui-input and oui-select

Description

Using popover inside a oui-collapsible does not work well due to overflow:

Steps to reproduce

1. Create a oui-collapsible element
2. Add a oui-field with a label-popover

Expected behavior:

The popover overflow should be visible:

Frequency:
5 (always)

Additional information

Workaround used:

oui-collapsible {
    .oui-collapsible__header[aria-expanded='true'] ~ .oui-collapsible__wrapper {
      overflow: visible;
    }
}

Description

The issue occurs when i execute "yarn start" command.

Steps to reproduce

	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)

Additional information

OS : Windows Version 10.0.18363.959
WSL1 : Ubuntu 20.04 LTS
Node : v12.18.2
npm : 6.14.5
yarn : 1.22.4

Screenshot:

z-index and relative position seem to be useless on oui-table.

Description

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.

Steps to reproduce

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:

• '-' button is now enabled
• the text is incorrect (says "1" instead of "5")
  

Expected behavior:

Text should show a correct min value.

Actual behavior:

Text shows an incorrect min value.

Frequency:
5 (always)

Additional information

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

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.

Context

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?

Description

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

Steps to reproduce

1. Go to the Color section in the documentation

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

Additional information

... in order to avoid unwanted selections.

Description

When a value in the rows is null the datagrid display is broken (it happens for example with Iceberg API calls).

Steps to reproduce

1. Modify the rows array by hard coding a null value inside it.
2. Refresh the datagrid.
3. The datagrid is empty.

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.