audi / audi-ui Goto Github PK

Hey,

just tried to apply an response effect on some element which isnt a button.
Problem here is in the response.js you check only for button classes for free y-position.

Maybe you can implement some class you can apply so you also get free-y-position without beeing a button element.

let boxedButton = this._element.classList.contains(CLASS_BUTTON_PRIMARY) || this._element.classList.contains(CLASS_BUTTON_SECONDARY) || this._element.classList.contains(CLASS_BUTTON_FLOATING);

    this._useTriggerX = boxedButton || !this._element.classList.contains(CLASS_BUTTON_ICON);
    this._useTriggerY = boxedButton;

Setting the value of the slider does not change the position of the handle. It just stays where it was before the change.

HTML:

<div class="aui-slider aui-js-slider" data-min="0" data-max="100">
   <input id="slider" type="hidden" class="aui-slider__hidden-field" value="30.00">
</div>
<button id="reset">Reset</button>

JavaScript:

const slider = document.getElementById('slider');
const button = document.getElementById('reset');

reset.addEventListener('click', reset);

function reset() {
   slider.value = 50;  // handle should move to the middle, but stays where it was
}

We have had to downgrade our project's node version when integrating the audi-ui, audi-icon, and audi-type repositories. Please upgrade the node dependency to allow version 7.x.

Hi,

do you think you can update the package to a more recent node version? We want to use this dependency in numerous React applications which require node >= 8.9.

Thanks

It seems that there is no component or example for a "audi like" sidebar navigation.
also see https://www.audi.com/ci/de/guides/user-interface/components/navigation.html#407181

i think it is usefull to have a component which creates the "out of the box" and responsive sidebar navigation.

It seems that some of the modal layouts are broken.

The "Morph Modal" colors are not fitting:

The "modal as window" closing button is sometimes hidden:

Tested on macOS 10.12.3 on Chrome 56.0.2924.87 and Safari 10.0.3 on current Demo-Page.

The checked method in Checkbox should return if the checkbox is checked or not, this method should use === given than we already have a method to check a checkbox.

Hello, is it possible to use it with Webpack Encore or it's 100% Gulp ? Thanks for your answer !

We have the following problem with using the audi-ui in our Angular 2 project.

Installing via:
npm install @audi/audi-ui
works fine.
After that it is existing in the node_modules folder, and in the package json the following line is added.

"@audi/audi-ui": "^1.0.0-alpha.1",

So importing
import aui from 'audi-ui';
should work, but it doesnt. It returns:

"cannot find module 'audi-ui'".

Did someone have the same problem? And how did you solve this issue?

Is there a known way to integrate this library into a react project?

In the 'Navigation Bar' component is the indicator initially displaced and the nav paddle background gradient is wrong:

Tested on latest Chrome (57.0.2987.110) on macOS 10.12.3 on the demo site.

Dropdowns uses to work correctly before.

When selection a value (single values scenarios) the dropdown should be closed.

All notification alerts are not showing up.

Tested on latest Chrome (57.0.2987.110) on macOS 10.12.3 on the demo site.

Is there any license you can provide for this code? Some people might want to use some components but are not allowed to right now.

The same applies to the audi-icon repository.

Nice work by @audi 👍

I have installed and tested the ui kit with gulp and it all works nicely.

However for certain projects we need to use the compiled js file without gulp.

I have compiled the audi-ui.min.js with gulp and would now like to use it with a standard front end website.

The only problem is i cannot call or init a plugin function from outside of the web pack ui file.

I had to run the call from within the componentHandler function to get it to work, but this is not ideal for a permanent solution.

I see we must call a function like this
Nav.upgradeElements();

The call doesn't work if I run it from a separate index.html file. The file cannot find the variable Nav for example.

Can you help me understand how to call this from another file?

Do I need to call it differently

Regards

The Project is not working for in ReactJS . Could someone help me with this Problem?

Hi,

After the Import the most Compnents are working. Only the Modals and Nav are not working.

• The Navigation needs a reset of underlining because the Browser sets his own stylesheet.
• The whole Modals do not response when i click on the button.

In the Index.js Modal was commented out. After I uncommented Modal again, the modals still didn't work.

I use Angular 8.

The _response.scss contains '&' parent-selector-referencing without any parent:

`.aui-js-response.aui-theme-light &.is-animating &__effect {
animation: aui-response-light $aui-response-duration $aui-easing both;
}

.aui-button--primary &.is-animating &__effect {
animation: aui-response-light $aui-response-duration $aui-easing both;
}

.aui-button--primary.aui-theme-light &.is-animating &__effect {
animation: aui-response-dark $aui-response-duration $aui-easing both;
}`

Errormessage: Base-level rules cannot contain the parent-selector-referencing character '&'.

Audi-Type updated the font-family name from 'AudiTypeScreen' to 'AudiTypeWide' audi/audi-type@839075b

$aui-font-default still uses AudiTypeScreen.

When you include the audi ui in an React App there are missing User Agent Style overwrites, for example when you use a nav-list , included buttons got a false font-size and links are underlinded.

As the IE is already dead and is not used anymore maybe let's rewrite/refactor the code to let the audi-ui library work with the modern js frameworks and tools?

I am using the latest version and getting the following error when build with the parceljs:

@parcel/transformer-css: Unknown at rule: @-moz-viewport
328 |

329 | @-moz-viewport {
| ^
330 | width: device-width;
331 | }

It seems that is already a legacy code which is no longer compilable.
The eslint is saying: Unknown at rule @-moz-viewportscss(unknownAtRules)

I see in the code:
// Make viewport responsive
//
// @Viewport is needed because IE 10+ doesn't honor in
// some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
// Eventually @Viewport will replace . It's been manually
// prefixed for forward-compatibility.
@-moz-viewport {
width: device-width;
}

Can anyone help here? Do we need a change in the code?

Btw.: Is this project still maintanable? Maybe let's get rid of already not supported IE ?

I am trying to integrate it with a react app and as I want to import certain elements, I get a module dependency error.

Any advice on using it with React will be more than userful.

Thanks

When a continuous spinner is initialized, it is not started/looped. Since a continuous spinner is supposed to loop indefinitely and there exists no stop, it should be started automatically.

Also, the spinner is not automatically initialized via upgradeAllElements() for no apparent reason (?).

Hi,

after npm install @audi/audi-ui the package is in node_modules. In packages.json stands: "@audi/audi-ui": "1.0.0-alpha.2",
but cannot import module.
Error:
"couldn't find a declaration file for module"

Best regards