scania / corporate-ui Goto Github PK

• - Extended Tables (DONE)
• - Tabs Light (DONE)
• - Labels in diffent sizes (DONE)
• - Alert Indicators (DONE)
• - Call Outs (DONE)

Describe the bug
Bootstrap native is loaded two times in corporate-ui

To Reproduce
http://localhost:1337 and look at the network tab and search for bootstrap native file

Expected behavior
Bootstrap native should only be loaded once

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 67

Check out this link:
https://en.wikipedia.org/wiki/EPrivacy_Regulation_(European_Union)

Button links and icons have excessive white-space.

Describe the bug
Social icons are currently stacked on top of each other, should be horizontally aligned.

Nav items, after expanding the dropup meny, should be centered align.

To Reproduce
Lok at this page in mobile view: https://scania.github.io/corporate-ui-docs/index-aws.html#

Describe the bug
When using the class "table-hover" on a table that has the "table-striped" class, the mouse hover highlighting doesn't happen for the blue rows, only the white ones.

To Reproduce
Steps to reproduce the behavior:

1. Create a table with the following classes and a few rows:

<table class="table table-hover table-striped">
(...)

2. When hovering the mouse over the white rows the highlighting applied and the row turns blue.
3. But when hovering over the blue rows nothing changes.

Expected behavior
All rows should be highlighted regardless of their color.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 67.0.3396.99

Additional context
Corporate UI version: 3.1.0

According to this CSS:
https://static.scania.com/development/users/fmat/to-be-deleted.css

Prototype to be found here (left panel):
https://static.scania.com/development/users/fmat/html-template-card.html

Delete the CSS in the inspector to understand what's left to be implemented in Corporate UI.

Describe the bug
I belive it should be possible to expand and collapse all sub-navigations once you're in the mobile navigation.

To Reproduce
On your mobile phone, or in a narrow web browser:

1. Go to https://scania.github.io/corporate-ui-docs/developer/
2. Notice that only Web Applications has an collapse icon to the right.
3. Go to https://scania.github.io/corporate-ui-docs/styleguide/
4. Notice that only Style Guide has an collapse icon to the right.

Expected behavior
I think all sub navigations should be represented by expand and collapse icons?

Currently, the social icons are not displayed in the footer. The component needs to be upgrade for the c-corporate-footer to be able to display social media icons.

Describe the bug
Highchart area cuts in half in certain situations. Visual bug.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'http://sesoco3300/foma/'
2. Look at graph. It fills out the whole div
3. Click on 'Edit values'-tab
4. Check checkbox "Last forecast"
5. Click back on "Graph"-tab
6. Loot at error
7. Resizeing the browser window resets the graph back to normal

Expected behavior
The graph should always fill out the whole div

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Describe the bug
A class "custom-select" is needed to display the arrow down. It is not visible in the bootstrap documentation.

Go to "Forms" section of the Bootstrap Docs: https://scania.github.io/corporate-ui-docs/developer/bootstrap-original-docs.html#top

The source code examples are missing the custom-select class.

Describe the bug
Radio buttons and checkboxes overflow their parent element.

To Reproduce

<script src="https://d31jnweo1ynb8u.cloudfront.net/build/global/2.5.0-CF/js/corporate-ui.js?preload=false"></script>
<style>
.radio-checkbox-test { background-color: gray; padding: 40px; }
.radio-checkbox-test .form-group { background-color: lightgray; }
</style>
<div class="radio-checkbox-test">
    <div class="form-group">
        <div class="radio">
            <label>
                <input type="radio">
                <span></span>
                Radio #1
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio">
                <span></span>
                Radio #2
            </label>
        </div>
    </div>
    <div class="form-group">
        <label class="radio-inline">
            <input type="radio">
            <span></span>
            Radio inline #1
        </label>
        <label class="radio-inline">
            <input type="radio">
            <span></span>
            Radio inline #2
        </label>
    </div>
    <div class="form-group">
        <div class="checkbox">
            <label>
                <input type="checkbox">
                <span></span>
                Checkbox #1
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">
                <span></span>
                Checkbox #2
            </label>
        </div>
    </div>
    <div class="form-group">
        <label class="checkbox-inline">
            <input type="checkbox">
            <span></span>
            Checkbox inline #1
        </label>
        <label class="checkbox-inline">
            <input type="checkbox">
            <span></span>
            Checkbox inline #2
        </label>
    </div>
</div>

Expected behavior
Radio buttons and checkboxes should be contained within their parent element.

Screenshots

Desktop (please complete the following information):

• OS: Windows 7
• Browser: Firefox
• Version: 61

Sub navigation appearance changes when parent nav-item is hidden and then shown

To Reproduce

1. Add sub navigation menu
2. The sub navigation is shown properly
3. Hide parent nav-item (for example: when user login)
4. Show parent nav-item (for example: when user logout)
5. The appearance changes, and not same as seen in step-2

version: 2.5.0

There should be a auto increment of the version number in package.json file

"version": "2.6.0"

Currently, inputs, input-groups, selects and btn-md and nav-pills has been changed from 46px to 42px. Please check so that it lines up with Select2 and other possible elements in the UX Library. @mmexvr knows what already has been merged and can help explain what's need to be done for Select2 (change so it has an height of 42px) and possible other elements.

THUROUGH TESTING FOR FIREFOX, IE11, EDGE, SAFARI, CHROME and iOS as well as Android.

Please!-)

Describe the bug
When choosing "HOME" in the navbar "STYLEGUIDE" is active.

Expected behavior
"HOME" should be active.

Screenshots

Desktop
Chrome

We should probably have a sizing variable
This could be used when seeting default padding or margin beside elements.
It would make the application feel more as a one.

To get Tabs working I had to add this script:

 var tabs = document.querySelectorAll('.nav-tabs a')
   for(var i=0; i<tabs.length; i++) {
     new Tab(tabs[i])
   }

This is the page I developed at: https://scania.github.io/corporate-ui-docs/component/component.html?c=alert

NOTE, Page might have changed.

When having the drop down visible and scrolling, the drop down covers other items like the Main Navigation and the Help Tab. Find the correct layer and test on all sections/pages of FMP.

In the FMP Build, the code below makes ALL scrollbars to be very narrow and hard to discover. Look at the image below to understand the problem. Source code remains somewhere in FMP, not in Corporate UI. Need to be scoped to the relevant components and signed of by the KS CX Team (contact Peter Pålhman or Jonatan Lidström).

.app .form-control.select2-container {
padding: 0;
}
.compact .form-control.select2-container {
padding: 0;
}
.app table .form-control.select2-container {
padding: 0;
}
::-webkit-scrollbar {
width: 10px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #ffffff;
background-clip: content-box;
}
::-webkit-scrollbar-thumb {
border-radius: 60px;
background: #f5f5f5;
border: 3px solid #ffffff;
height: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #f5f5f5;
}

Describe the bug
Error message:
Unhandled exception at line 10, column 43 in https://static.scania.com/vendors/components/pure-js/highcharts/5.0.7/code/highcharts.js
0x800a139e - Körningsfel i JavaScript: Highcharts error #17: www.highcharts.com/errors/17

To Reproduce
Trying to create a graph with following example:
https://www.highcharts.com/demo/arearange-line

Screenshots

Desktop (please complete the following information):
Doesn't matter what browser.

Smartphone (please complete the following information):

Additional context

Martin is main responsible for writing this issue off, once fixed in FMP.

Radio buttons overflow their parent(s)
https://github.scania.com/Scania/corporate-ui/issues/307

Disabled multiselect (select2) looks all kind of strange
https://github.scania.com/Scania/corporate-ui/issues/306

function chartResize() {
if(!!$.prototype.highcharts) {
$(".highcharts-container").parent().each(function() {
var chart = $(this).highcharts(); // target the chart itself
chart.reflow() // reflow that chart
});
}
}

This occurs in Corporate UI version 3.1.0 on iPhone X IOS 11.4 but possibly other devices and versions as well.

To reproduce:
Go to the UX Library and navigate around:

• Go to the Style Guide
• Then go to the Colours page
• Then go to the Variables page

Now, try to go back to the Style Guide by using the browsers back icon (arrow left).

Have a look at the public headers at this page: https://scania.github.io/corporate-ui-docs/typography/ and make the window really narrow.

Both Safari and Chrome.

Panels can't be nested without loosing look and feel. This report contains a few of the issues reported in the former Corporate UI Enterprise repository:

Nested panels inherit wrong font-size for .panel-title
https://github.scania.com/Scania/corporate-ui/issues/305

Nested panels are not affected by contextual classes (See #305, a .panel-primary inside of a .panel-default will receive the styling of the parent.)
https://github.scania.com/Scania/corporate-ui/issues/308

Headings inside .panel-body are blue
https://github.scania.com/Scania/corporate-ui/issues/299

Please fix them all in once as they are closely related.

The issues are originally reoported by Adam Thorsell and should be communicated with him once the issue is resolved.

https://github.scania.com/athbjj

Hamburger menu not visble in mobile mode due to font-size: 0 when shortname is used

Appered in #201 (Site short name: https://github.scania.com/Scania/corporate-ui/issues/201)

Should only include Primary Items that does not fit on screen...look at the dropdown menu to the right on attached image.

Describe the bug
When hovering over a nav-item in the footer the size changes and gets a white space between the bottom of the browser and the footer. In IE

To Reproduce
Steps to reproduce the behavior:

1. Go to a page with nav-item in the bottom
2. Hover over it
   3.. See error that the size changes

Expected behavior
The footer shouldn't move

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser IE
• Version 11

Go to this page:
https://scania.github.io/corporate-ui-docs/developer/test-of-more.html#

Look for the link "KEEP ON ADDING ANOTHER ITEM", yes ut breaks the navigation.

Then click the MORE link. And yes, there you have the same link again...

Now right click the fist "KEEP ON ADDING..." link that is on the standad main navigation. Delete the nav-item from the inspector.

And now you see, it fits perfectly. Probably only a for loop or something that does not do a -1 at some place.

A also made a testpage with many items on both the main and the sub-navigation:
https://scania.github.io/corporate-ui-docs/developer/test-of-more-subnav.html#

Describe the bug
When trying to switch brand using the parameter ?brand=XXX it works fine in Chrome but does not work in IE.

Open Chrome

1. Go to https://scania.github.io/corporate-ui-docs/index.html?brand=man

Open IE11, go to the same page:

1. https://scania.github.io/corporate-ui-docs/index.html?brand=man

**When using .input-group and input-group-btn with .btn .btn-default on grey background it melts into the background.

How it looks now

Suggestion how it should look

Problem:
When navigating to a certain help section in the Bootstrap Documentation, the URL does not add the selected tab and the selected anchor. For example, if I go to:
https://scania.github.io/corporate-ui-docs/developer/bootstrap-original-docs.html

and there I select Code from the right hand side menu, then the URL looks correct, like this:
https://scania.github.io/corporate-ui-docs/developer/bootstrap-original-docs.html#code
This one I can send by e-mail and the developer/designer will find their way to that section.

Although, if I go back to the top of the page:
https://scania.github.io/corporate-ui-docs/developer/bootstrap-original-docs.html#top

And there I click the Tab "Bootstrap Javascript" and then click "Popover" on right menu, then we do not get the parameter for the acutall Tab, rather than only the Anchor:
https://scania.github.io/corporate-ui-docs/developer/bootstrap-original-docs.html#popovers

So we need some kind of JS solution keeping track on what tab and anchor we are at, something like this:

if #URL anchor is found in section
#bootstrap-css-section .nav.bs-docs-sidenav
Then
#bootstrap-css-section display: block
#bootstrap-components-section display: none
bootstrap-javascript-section display: none

else if

List all 3 variants

When using .form-control[readonly] the text in the inputfield is barely visible.

How it looks

How it could look:

CSSS

Suggestion: Remove opacity or change it to 1

I'd like to be able to determine the CUI version through a CorporateUi.version property in the developer tools console. Might help debugging.

Click Bootstrap Javascript here: https://scania.github.io/corporate-ui-docs/developer/bootstrap-original-docs.html#top

Should acutally display this information: https://thednp.github.io/bootstrap.native/

sraabr commented on Apr 6 • edited
Main Navigation > Small device mode : Secondary Menu Items are not visible
@mmexvr
Member
mmexvr commented on Apr 6
related with #251 @awinny (Remove jQuery dependency from Corproate UI #251)

Describe the bug
Mobile menu scrolls when scrolling in Desktop mode, and then goes to mobile.

To Reproduce at https://scania.github.io/corporate-ui-docs/
1 Scrolla ner på sidan.
2 Dra ihop skärmen så att hamburgaren visas.
3 Klicka på burgaren...

Expected behavior
All items should be visible.

Describe the bug

@font-face error appears in IE
CSS3111: @font-face encountered unknown error.
ScaniaSans-Regular.eot
CSS3111: @font-face encountered unknown error.
ScaniaSansHeadline-Regular.eot
CSS3111: @font-face encountered unknown error.
ScaniaSansHeadline-Bold.eot

To Reproduce
Steps to reproduce the behavior:

1. Go to localhost:1337
2. Look at the console

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version 67

• Arrow icon should not be shown as a nav-item for mobile.
• Can't close navigation when minimized as the navigation is hidden. Should always be visible.

Open any portal using corporate-ui in IE, and having top menu items aligned right
Scroll vertically
Now you can see that the top level Scania Icon is hiding the menu item

Its happening only in IE, working in Chrome

Web components listing works fine:
https://scania.github.io/corporate-ui-docs/component/

Clicking on an individual component, it does not show.

Also, use the corporate-ui JS method for showing the same components as the current version in use for Corporate UI.,

Describe the bug
On the page https://scania.github.io/corporate-ui-docs/developer/bootstrap-original-docs.html#forms there is an example of a checkbox. Here is the code:
< label >
< input type="checkbox" > Check me out
< span >< /span >
< /label >

But this will not work. The span needs to be above the text. This is a working example:
< label>
< input type="checkbox" >
< span>< /span>
Check me out
< /label>

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Also check so that panel-warning etc works in conjunction with table panel.

table class="tabel tabel-panel"

table class="tabel tabel-panel panel-primary"

table class="tabel tabel-panel panel-default"

table class="tabel tabel-panel panel-warning"

Etc

When there is a sub-navigation an animation occurs for the content.

To Reproduce
Steps to reproduce the behavior:

1. Go to http://localhost:1337/development.html
2. Click on "testing"
3. 1. Go to http://localhost:1337/testing.html

Desktop (please complete the following information):

• Windows 10
• Browser: Chrome
• Vers: 66

c-corporate-footer still shows a empty container when you don't have any nav-items inside the footer component in mobile-mode in the dropdown.

#288 is related: https://github.scania.com/Scania/corporate-ui/pull/288

Container has a fixed with and that makes component break the design if hosted in a 2 column, or more, layout. See the Alert below.

Adding free text search functionality to UX Library using for exampel Jekyll Tipue Search or equivalent.

Demo
https://jekylltools.github.io/jekyll-tipue-search/

Code
https://github.com/jekylltools/jekyll-tipue-search

Should be added to this repository:
https://github.com/scania/corporate-ui-docs

Shown using GitHub Pages here;
https://scania.github.io/corporate-ui-docs/

Make it work on one separate search page to start with...for example on this one (mockup):

scania.github.io/corporate-ui-docs/search/