liferay / clay Goto Github PK

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

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!

BS4 removed the transition.js plugin.

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

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

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!

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.

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.

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!

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

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.

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.

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

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

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.

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.

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.

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

btn-default & btn-primary + hover state:

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.

Hi!

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

Thx!

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.

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

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

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

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

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

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.

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

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

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?

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

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

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

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:

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

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.

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

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