sebgroup / bootstrap Goto Github PK

Design change 2019-01-30

This change was reviewed in Design Working Group:

• The error indicator for input fields have a 2 px line (#D81A1A) at the bottom
• No frame or shadow (as in Bootstrap)
• No error indication icon in the text field

The reasoning for changing the line from 4 px to 2 px is that the line was too hefty, especially when there were many fields lighting up at the same time. We try this for now and evaluate. Please give us feedback so we can learn in time for the next update.

/Ulrika,
Design Management

Discussion: sebgroup/design-library#13

Examples how to use radio buttons is missing in the documentation

Dropdowns always shows up the first time, but then they tend to hook up. After double-clicking and or scrolling for a bit, the menu usually shows up . Asking the NgbDropdown, it will correctly report that it's opened or closed when clicking, even though it's not showing.
Commenting out lines 77 to 187 in _ng-bootstrap.scss helps in the sense that the dropdown menus now works as expected.
Seen this on safari and chrome on iphone. @bollind

Size of month and year dropdown should be 40px according to #32

On desktop it should be 32.

• pagination
• search
• filter

I am currently using .primary and .danger for positive and negative text values:

I would, however, prefer to use the following:
.text-positive and .text-negative

Please decide which colors to use and apply them in their own classes (as mentioned above).

https://github.com/hjalmers/angular-exemplify

Design change 2019-02-13

The Ghost button is updated to two versions:

Ghost button light

• Transparent with a "White" outline (1 px).
• On hover: Background and outline is "Grey 2".

Ghost button dark

• Transparent with a "Grey 2" outline (1 px)
• On hover: Background and outline is "White".

Reason:
The instruction for the Ghost button is clarified. It is used on coloured background and photographs. Ghost light is for darker backgrounds, and Ghost dark for lighter backgrounds.

Discussion:
sebgroup/design-library#35

Design Library description:
http://designlibrary.sebgroup.com/components/forms/button/#usage

Thank you!
/Ulrika
Design management

See sebgroup/design-library#13 (comment)

When using css class table-expandable from _tables.scss this message is printed in developer console:

[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M68, around July 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.

Proposed fix is to change:
fill='#fff' to fill='%23fff'
fill='#0092e1' to fill='%230092e1'

For example when input isn't focused the progress should be 100%

With additional instructions for SEB fonts.

A user might not want to use the SASS compilation step since the user has problems installing node-sass.

It's not possible to click a button in a modal-footer. Safari will show a stupid little navigation pane instead. Maybe it would be possible to integrate a workaround into the framework?

FYI here's a discussion: https://www.eventbrite.com/engineering/mobile-safari-why/

The sticky bar is a new component in Design library. It can be used both on mobile and desktop. There are two versions, depending on placement and content. Go to the styles tab in Design library for detailed descriptions.

1. Sticky summary bar

• Gives the user an overview, related to the choices made in the main content
• Height: 90 px
• Placement: At the top
• Identifier: component-stickysummarybar
• Specification: http://designlibrary.sebgroup.com/components/sticky-bar/sticky-summary-bar/#styles

2. Sticky button bar

• Gives the user the fasted possible call-to-action
• Height: 76 px
• Placement: At the bottom
• Identifier: component-stickybuttonbar
• Specification: http://designlibrary.sebgroup.com/components/sticky-bar/sticky-button-bar/#styles

Thank you,
Ulrika
Design management

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://[secure]@github.com/sebgroup/bootstrap.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Cannot click on left side of the toggle when toggle is on which is confusing for the user and also inconsistent.

toggled off right side => is clickable
toggled off left side => is clickable
toggled on right side => is clickable
toggled on left side => NOT clickable

Suggested solution:

Remove/change
pointer-events: none;
in class
.custom-control-label::before

Review 2019-02-27
At the review, Design working group decided to WAIT with publishing this component so we can evaluate the use (read further down on this thread). We will keep it in Design library, under Components/Upcoming for a while.

You are still welcome to use it, but please give us feedback on how it worked.

Need
A step indicator that shows progress in a flow. Today we have wizards which take-over the complete focus for the user. This indicator is a way to gently guide the user forward without loosing context.

Specification

• Used for mobile and desktop
• Height 8 px
• Filled step: Dark Green 1
• Unvisited step: Grey 8
• Gap between steps: White 2 px

Description
See details on Design library: http://designlibrary.sebgroup.com/components/upcoming/progress-indicator/#usage

Ulrika,
Design management

Breadcrumbs has been updated with an SEB- design. See the details here: http://designlibrary.sebgroup.com/components/upcoming/breadcrumbs/#usage

Desktop

Mobile

Any questions? Let me know!
/Ulrika

See sebgroup/design-library#8 for discussion

See sebgroup/design-library#26

Design change 2019-01-30

This issue was reviewed today in Design Working Group. We decided the following change:

• Form components (Input Field, Drop Down, Medium Button, Segmented Control and Stepper) all have the same height: 44 px
• This applies to both desktop and mobile

The reasoning for this is that when labels got bigger, the form components follow in size to harmonise and match. Also, the mobile click area needed to be bigger so we want them to be the same size, to simplify and have fewer options (=easier to do it right).

Discussion: sebgroup/design-library#16

Thank you!
/Ulrika, Design Management

Large aside modal should have max-width 800 px and min-width same as normal modal.

The actual size of the modal should be determined by it's content.

As we're not distributing the font with this package directly they should be excluded from the compiled css to avoid 404 errors related to invalid font paths.

from
1rem

to
0.875rem

See sebgroup/design-library#2

the main reason being that the font has it's own license and can and should be updated independent of bootstrap