This behavior can be seen in Liferay Portal when reproducing this ticket: https://issues.liferay.com/browse/LPS-70956.

BS4 removed the transition.js plugin.

@victorvalle has confirmed we can drop this button type from Clay and it will be created in compatibility layer.

BS4 removed the Pager component. Should we keep it or remove it? Waiting on UX for more details.

We are working on a Liferay project to migrate theme from Bootstrap 3 to Lexicon. Found that latest Lexicon is using Bootstrap Alpha version. We do have a lot of utility classes and methods from Bootstrap 3.0 that won't support in Lexicon with Bootstrap 4.

Can someone please help us to get the Lexicon with Bootstrap 3.x and not the Alpha/4.0 bootstrap.
Or please advice the workaround to use bootstrap3.x with Lexicon? Can I just replace the bootstrap 4 with the latest stable version which is Bootstrap 3.x?

The IE input clear field button's size is inconsistent in the navbars.

According to the mockups, the checkboxes are 20px by 20px, and we should size them accordingly in the Atlas theme

Z-index variables are scattered throughout each component in Clay, probably should consolidate them in _globals.scss

Hi!

Alerts doesn't match with Lexicon designs. Here the documentation:
https://docs.google.com/document/d/1mR8k7TE_5s6wzn94HtM7kB3NYVItDMoi4RkKZ0yRezw/edit#heading=h.jkrp0t7cj15n

Thx!

Toggles in small spaces can be broken when label goes in multi-line

Discovered and related with LPS-68928, LPS-68927.

The Sidenav plugin does not have an API to destroy instances. This is particularly harmful in SPA environments, where the plugin needs to be destroyed upon navigation and instantiated again.

In particular, https://github.com/liferay/lexicon/blob/master/src/js/side-navigation.js#L676 makes new instantiations fail because the reference to the toggler to be destroyed is kept in the document.

Dropdowns with classes like:

dropdown-menu-right-side-middle
dropdown-menu-left-side-middle

Do not works fine in mobile versions when they are used inside a navbar:

Dropdown positioning is broken, BS4 is using a positioning plugin called popper.js.

Force textarea resizing to be constrained within the dimensions of its parent element

Firefox has some awkward fieldset styling involving width that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that is not provided in Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

For more information, read https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685

For Bootstrap's documentation, see http://getbootstrap.com/css/#callout-tables-responsive-ff-fieldset

Read-only inputs are partially obstructed by padding in Firefox. This issue was found in liferay-portal master, https://issues.liferay.com/browse/LPS-57663. And is reproducible at http://natecavanaugh.github.io/lexicon/content/form-elements/ as well.

This hasn't been implemented in alpha yet, we're limited to whatever configuration options provided by BS4.

Only in Atlas theme.

table-striped and table-hover provides striped lines and hover effect, those styles are lost when these classes are combined with table-striped.

The select element is customizable in Clay, but the behavior fits better with BS4's custom forms.

Edit: Researched it a bit more, I think it fits better where it stands. select.form-control in vanilla Bootstrap isn't that useful if you plan on modifying the border-radius property on .form-control.

Hi!

I'm implementing the sticker component in metal-clay but I'm having some issues with the styling. I've done following http://liferay.github.io/clay/content/badges-and-labels/ markup, but there're classes that doesn't exist like sticker-circle, sticker-default, sticker-static, etc.

Are those classes missing or do I have to use other markup?

Also I noticed that the previous .sticker had an absolute positioning by default (overwritten by .sticker-static if necessary). It would be very helpful having examples of the correct current markup.

Thx!

Popovers and Tooltips need to be converted to work with BS4.

There is a bug in portal where a button group is appearing in front of a autocomplete list. https://issues.liferay.com/browse/LPS-58060

Seems to be caused by this z-index: https://github.com/natecavanaugh/lexicon/blob/master/src/scss/atlas-theme/_button-groups.scss#L24

Could you please link both sites: the one with the live demo (http://liferay.github.io/lexicon/) and the source code (https://github.com/liferay/lexicon/).

Visitos cannot directly access the source code site from the demo site neither access the demo site from the source code site.

Thanks. Juan

https://issues.liferay.com/browse/LPS-59141

@pat270 I noticed this was a problem even in Lexicon (since it has an equal z-index with dropdowns, and the ones later in the source win out).
Could you take a look at this one and fix it?

Thanks!

When clicking any link in the Clay API Documentation there is a flash of styling then most styles are removed and each page looks like this.

Manually changing the url to be https instead of http causes all styles to be loaded correctly.

Not sure what to do with this. The namespace is really common and collides easily with 3rd party stuff. At the very least it should be converted to flexbox, don't see much benefit of keeping it table based.

The example of http://liferay.github.io/lexicon/content/blogs-action/ looks nice. However, when the title "7 UX Trends of 2015: Get Ready for Big Changes" contains a link (to be able to click the entry) the style changes completely and it looks worse.

Bootstrap 4 dropped all icon fonts, left up to 3rd party devs to include whatever icon font they want.

This can be reproduced at http://liferay.github.io/lexicon/content/modals/ and also in liferay-portal. I think this is caused by the styles from the class modal-open that is appended to the body.

1. Navigate to http://liferay.github.io/lexicon/content/modals/.
2. Scroll down a bit and click the 'Large Modal' button or the 'Full Screen Modal' button.
3. Close the modal.

Result: The page is scrolled back to the top.

Note: It seems like for the bottom 3 buttons on the Modal demo page, the bootstrap modal component is resetting the scroll position after the modal is closed.

Hi!
I'm wondering if you'll provide some builtin functionality on the framework to provide visual feedback to the user while running AJAX processes.

For example, if the user hits a button that submits a form through AJAX, while the AJAX request is being processed the UI displays something to tell the user that an action is being done (typically some kind of spinning wheel or an state button like http://getbootstrap.com/javascript/#buttons-stateful)

Thanks. Juan.

We need to create new icons for the following: info-circle, info-circle-open, caret-top, caret-bottom.

You should add a link to https://liferay.github.io/lexicon/ in the repository metadata, and probably a short description wouldn’t hurt.

I think this is helpful to other users who wants to use lexicon outside of the liferay context.

Hi!

I've just created the progress bar metal clay component and I realized that the appearance doesn't match with lexicon mockups. Colors, shapes, shadows, alignments...

Here's the lexicon design:
https://liferay.invisionapp.com/share/PSAI8IVRY#/screens/219580173_Progress_Bar

Here's the component:
deprecate/metal-clay-components#52

Thanks!

When there is a fixed element on the page and I want it to transition with a sidenav, it's hard to figure out the transition duration and timing function used by the sidenav. So it would be useful to set those values with variables that can be used elsewhere.

So variables specifically for 0.5s and ease in _side_navigation.scss.

.sidenav-transition,
.sidenav-transition .sidenav-content,
.sidenav-transition .sidenav-menu-slider,
.sidenav-transition .sidenav-menu-slider .sidenav-menu {
    @include transition(all 0.5s ease);
}

When you combine buttons they can be shown wrong, this pattern happen a lot in liferay-portal.

btn-default & btn-primary + hover state:

Right now, if you add text into the .toggle-switch-handle element, it will butt up against the toggle switch.
There are cases where someone may prefer to augment the data-label-* attributes with persistent text, or just use text with HTML elements inside of it, and forego the data-label-* attributes altogether.

The idea Patrick and I came up with was to support this by wrapping the text inside of a span with toggle-switch-text as the class name.
That will give it the same appearance as the data-label-* attributes.

Some shadows in buttons we don't need:

Sidenav plugin follows the href of the toggler when using the data API.
This is because of a missing event.preventDefault() in the delegate handler.