sebgroup / ng-components Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://sebgroup.github.io/ng-components
License: Apache License 2.0
Home Page: https://sebgroup.github.io/ng-components
License: Apache License 2.0
(Moved from https://github.sebank.se/DesignLibrary/AngularComponents/issues/44)
As of 2018-12-11
Labels
font size: 16 px (1 rem)
weight: medium
line height: 20 px*
distance from input border to label: 8 px*
Input instruction
font size: 14 px (.875 rem)
weight: regular
line height: 20 px*
distance from input border to instruction: 8 px*
Input error text
font size: 14 px (.875)
weight: regular
line height: 20*
distance from input border to error text: 8 px*
*Note that 8 pixles and line height 20 refers to actual pixels in design and not margin-bottom: 8 pixels and line height in browser, due to line height affecting actual space between input and text.
Dependabot couldn't authenticate with registry.npmjs.org.
You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.
Design update 2019-10-01
To align with the other form components, pls update the height to 44 px for
Original discussion: sebgroup/design-library#16
Thanks!
/Ulrika, Design management
Running npm install
after cloning this repo will end up failing because these repositories are private inside SEB network:
@fortawesome/fontawesome-svg-core
@fortawesome/pro-light-svg-icons
Since this repo is supposed to be open source, I think these should be removed and replaced by an open-source icon library
Dependabot couldn't authenticate with registry.npmjs.org.
You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.
What is this?
This component calls attention to a status/tag/category.
Details
See the specification to get all the right details:
https://designlibrary.sebgroup.com/components/badge/
Component identifier
component-badge
Thank you!
/Ulrika
Dependabot couldn't authenticate with registry.npmjs.org.
You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.
The button Button link used to be called Alternative button.
The name Button link says what it is.
See the full specification here:
https://designlibrary.sebgroup.com/components/forms/button/
Feel free to update this in your frameworks so that we use the same language on components. If this is not relevant to you, please close the issue with a comment. Thank you!
/Ulrika,
Design Management team
Dependabot couldn't authenticate with registry.npmjs.org.
You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.
When working in a project that requires support for accessibility features like a screen reader, these components should have all the necessary flags like aria-
flags to support accessibility features. Form components should be focusable with pressing tab
and collapsable items should declare its state and the new content of the changed area. The HTML markup should be used semantically so that screen readers can identify what the user is hovering over.
I believe this feature must be incorporated from the start instead of leaving it to the end since some of these changes might cause a major restructuring if it were to be implemented later.
https://developer.mozilla.org/en-US/docs/Web/Accessibility
https://www.w3.org/WAI/standards-guidelines/wcag/
(Moved from https://github.sebank.se/DesignLibrary/AngularComponents/issues/56)
Design change 2019-01-30
This change was reviewed in Design Working Group:
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
The accordion has been updated.
Change
Reason
Many reasons. First of all, it was time to specify the component better. We have adjusted to fit users’ need with more efficient use of space. The direction of chevron is updated to show how it is animated. We also noticed that the component has been (too) content-heavy and added clearer guidelines.
Specification
https://designlibrary.sebgroup.com/components/accordion/
Let us know if you have any questions!
/Ulrika
Design management
Dependabot couldn't authenticate with registry.npmjs.org.
You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.
The design of the tab component has been adjusted:
Mobile version
See the specification to get the correct details:
https://designlibrary.sebgroup.com/components/tab/#specification
Original discussion
sebgroup/design-library#66
Thank you @TheresaHedlund for working on this!
Any feedback? Do contact [email protected]
Ulrika,
Design Management
First version:
xs
, sm
, md
, lg
, xl
(no size should default to md)Dependabot couldn't authenticate with registry.npmjs.org.
You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.
Library | Include | Wrap |
---|---|---|
ng-bootstrap | ? | ? |
ngx-toastr | ? | ? |
body-scroll-lock | ? | ? |
etc. | ? | ? |
We need to decide on and agree on a naming convention for the following:
Anything else?
I'd propose that we try and follow/adhere to bootstrap markup where its applicable i.e. a button should use .btn
for default button behavior and can be combined with for example .btn-primary
(modifier) to declare a primary button. If we invent a custom button we should still stick to this pattern and follow the BEM filosophy which for bootstrap is slightly adjusted i.e.
<button class="btn btn-primary">A button</button>
Instead of the more "strict":
<button class="btn btn--primary">A button</button>
Pros:
Cons:
Reuse variables from bootstrap and other libraries but declare them using default value using same pattern as for prefix i.e.:
$ngseb-table-cell-padding: $table-cell-padding !default;
(Moved from https://github.sebank.se/DesignLibrary/AngularComponents/issues/55)
Design change 2019-01-30
This issue was reviewed today in Design Working Group. We decided the following change:
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
Design review 2019-03-27
We are changing the name of the Toggle switch to Slide toggle and would like to you update the identifier:
Reason
To match convention in other frameworks. It also makes sense to change the identifier.
Description: https://designlibrary.sebgroup.com/components/slide-toggle/#usage
Decision from the Design review May 8
The dropdown now has another version that allows multiple selections.
Full specification
See states and sizes here: https://designlibrary.sebgroup.com/components/forms/dropdown/#styles
Component identifier
component-dropdown
Thank you! :)
Ulrika
Design management
Dependabot couldn't authenticate with registry.npmjs.org.
You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.
Dependabot couldn't authenticate with registry.npmjs.org.
You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.
Proposal:
Use mixins to conditional add styles for third party libraries that we support such as ng-bootstrap
and ngx-toastr
, avoid wrapping them unless we actually add value or build something around the component.
Dependabot couldn't authenticate with registry.npmjs.org.
You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.
Dependabot couldn't authenticate with registry.npmjs.org.
You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.
Pattern (sep 2019)
A pattern that describes a uniform way for the user to add both soft and hard properties. This two-step pattern is especially useful in pages where the user has to manually update values.
A white card triggers a slide-out. Use is the same behaviour for all devices.
Details
See the measurements (etc) in Design Library:
https://designlibrary.sebgroup.com/patterns/crud/#usage
Design library identifier: component-crud
Any questions or feedback? /Ulrika, [email protected]
First version:
(Moved from https://github.sebank.se/DesignLibrary/AngularComponents/issues/63)
Design change 2019-03-13
The design update on Toggle selector was reviewed March 13:
Change
See the details in the description: https://designlibrary.sebgroup.com/components/toggle-selector/
Reason
Analytics showed that the component was overlooked by users. It was unclear that the component was clickable.
Thanks!
/Ulrika,
Design Management
(Moved from https://github.sebank.se/DesignLibrary/AngularComponents/issues/49)
Following adjustment to typography has been made 2019-01-21:
H2
weight: bold
H3
weight: bold
New
If you are unsure, please see the complete list of sizes and line-height for each size: http://designlibrary.sebgroup.com/visual-identity/typography/#usage (scroll down on the page)
Ask us anything (about this)!
Thank you,
Ulrika, Design management
There are two small and important changes on table design:
There is more to come, but these changes are the most urgent. So the rest of what we know about tables stays the same for now.
Thank you!
/Ulrika
Design Management
(Moved from https://github.sebank.se/DesignLibrary/AngularComponents/issues/57)
Design change 2019-02-13
The Ghost button is updated to two versions:
Ghost button light
Ghost button dark
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.sebank.se/components/forms/button/#usage
Thank you!
/Ulrika
Design management
The error indicator for checkbox and radio button have been defined. The component and label text are framed in red border. Red error text is placed under and near the component.
To synk our error indicators across all our sites and apps.
https://designlibrary.sebgroup.com/components/forms/checkbox/#specification
https://designlibrary.sebgroup.com/components/forms/radio-button/
If this is not relevant to you, please close the issue with a comment. Thank you!
/Ulrika,
Design Management team
What is this?
A new component to display a filter
Details
See the specification to get all the right details:
https://designlibrary.sebgroup.com/components/chips/#specification
Component identifier
component-chip
Thank you!
/Ulrika
Dependabot couldn't authenticate with registry.npmjs.org.
You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.
There is a new button variation. There are two versions:
Delete button
For complete specification, see Design library: https://designlibrary.sebgroup.com/components/forms/button/#usage
Component identifier: component-button
Thank you!
Ulrika, Design Management
See this article for more info
After a long period of testing, we have now updated the Alert ribbon component. See the full description for the details (measurements, colour codes, etc):
https://designlibrary.sebgroup.com/components/alerts/alert-ribbons/#guidelines
Feedback from user tests and usage from several channels, saying that purple was too loud. We also learned that the description in Design Library generally was too confusing. And we hade a design synk between Bootstrap and Design Library which generated sensible updates for both.
Let me know if anything is unclear. Thank you!
Ulrika,
Design Management
Dependabot couldn't authenticate with registry.npmjs.org.
You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.
Dependabot couldn't authenticate with registry.npmjs.org.
You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.