bootstrap-styled / bootstrap-styled Goto Github PK

Bootstrap Styled provide a chart :scroll: and common utilities for writing UI components that can be shared and maintained globally for all the :rocket: ReactJS community. It permit an ecosystem of tools, components and variables to create standardized, sharable and highly customizable front-end modules.

Home Page: https://bootstrap-styled.github.io/bootstrap-styled

License: MIT License

JavaScript 98.93% Shell 1.07%

bootstrap-styled's Introduction

Bootstrap Styled is a front-end ecosystem for React made with Bootstrap 4 philosophy, using the power of css-in-js thanks to styled-components. It offer a community an ecosystem of tools, components and variables to create standardized, sharable and highly customizable front-end modules.

This main package explain our chart for writing components and provide theme common utilities for writing UI components that can be shared and maintained globally for all the 🚀 ReactJS community.

Why ?
How ?
Documentation
Contributing
License MIT

Why ?

Most of front-end developers one day used Twitter Bootstrap. Because most developers know it, it is the favorite front-end framework for companies.

This is why bootstrap-styled is the best library for sharing React UI globally and this is the main reason why it is a solid front-end library candidate for your organization.

How ?

It's fully written in javascript, the API is working for every React application. Everyone use the same set of theme variables or can create a new scope of variables.

Every UI created with it can be shared and maintained in Community without any risks of breaking change for anyone thanks to the simplicity of extending styles anywhere.

Using bootstrap-styled, you can quickly prototype things that will be working in other's Bootstrap Styled applications without any change to your source code.

Documentation

Read bootstrap-styled documentation.

Contributing

If you want to contribute to bootstrap-styled please see our contributing and community guidelines, they'll help you get set up locally and explain the whole process.

Please also note that all repositories under the bootstrap-styled organization follow our Code of Conduct, make sure to review and follow it.

License MIT

The MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

bootstrap-styled's People

Contributors

Stargazers

Watchers

bootstrap-styled's Issues

[RFC][Feature proposal] log grid breakpoints

Add logging feature to grid breakpoint changes

Purpose of this feature proposal is to add a way to log when the grid breakpoint in the console when the width change. This must enrich only the development experience.

Issue Type

Feature

Description

Enrich the <BootstrapProvider options={{ logging: { bp: true }}} /> with a way to log the current $grid-breakpoints.

It can be done as follow:

Write the feature method in @bootstrap-styled/css-mixins/lib/breakpoints.js and implement a single function getCurrentBreakpoint. This function can be only calculated with javascript in a real DOM, and will be skipped during unit tests
Use withTheme HoC to retrieve $grid-breakpoints and call the getCurrentBreakpoint(window.innerWidth, props.theme['$grid-breakpoints']) method to produce a console.log if options.logging.bp is true and when not in process.env.NODE_ENV !== production.

related issues

[Doc] How to pull left or right <Cols /> depending on viewport is not explained anywhere

Bootstrap Styled

Row and Col:

Bootstrap 4 Original feature

Reordering: https://getbootstrap.com/docs/4.1/layout/grid/#reordering
No gutters: https://getbootstrap.com/docs/4.1/layout/grid/#no-gutters

Related issues

bootstrap-styled/css-mixins#16

Description

I'd like to pull the second col left when I have <Col sm="6" /><Col sm="6" /> so it is displayed before the first one for mobile.

This is BS 4 feature which is not documented anywhere in our documentation

[Bug] Invalid prop `tag` supplied to `Button`.

Tag props generates warnings

Issue Type

Bug (https://module.kopaxgroup.com/styled-components/bootstrap-styled/blob/master/.github/CONTRIBUTING.md#bug-reports)

Description

Console is getting verbose when we use the props tag an pass another component

Steps to reproduce

<Button tag={Link} />

will throw error

index.js:1452 Warning: Failed prop type: Invalid prop `tag` supplied to `Button`.
    in Button (at NavBar/index.js:103)
    in NavBarYeutech (at App.js:97)
    in div (created by Context.Consumer)
    in StyledComponent (created by Css)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by Context.Consumer)
    in Connect(ConnectedRouterWithContext) (at App.js:95)
    in div (created by Context.Consumer)
    in StyledComponent (created by UtilityProvider)
    in ThemeProvider (created by BootstrapProvider)
    in BootstrapProvider (created by ConnectedBootstrapProvider)
    in ConnectedBootstrapProvider (created by Context.Consumer)
    in Connect(ConnectedBootstrapProvider) (at App.js:85)
    in IntlProvider (at LanguageProvider/index.js:21)
    in LanguageProvider (created by Context.Consumer)
    in Connect(LanguageProvider) (at App.js:84)
    in Provider (at App.js:83)
    in App (at src/index.js:11)
function.console.(anonymous function) @ index.js:1452
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:75
validatePropTypes @ react.development.js:1682
createElementWithValidation @ react.development.js:1775
render @ index.js:102
finishClassComponent @ react-dom.development.js:14899
updateClassComponent @ react-dom.development.js:14863
beginWork @ react-dom.development.js:15716
performUnitOfWork @ react-dom.development.js:18750
workLoop @ react-dom.development.js:18791
renderRoot @ react-dom.development.js:18876
performWorkOnRoot @ react-dom.development.js:19812
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
scheduleRootUpdate @ react-dom.development.js:20062
updateContainerAtExpirationTime @ react-dom.development.js:20088
updateContainer @ react-dom.development.js:20156
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20435
(anonymous) @ react-dom.development.js:20589
unbatchedUpdates @ react-dom.development.js:19939
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20585
render @ react-dom.development.js:20652
render @ index.js:11
./src/index.js @ index.js:29
__webpack_require__ @ bootstrap:787
fn @ bootstrap:150
0 @ .*$:31
__webpack_require__ @ bootstrap:787
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1

This seems to be wide accross our system:

index.js:1452 Warning: Failed prop type: Invalid prop `tag` supplied to `Col`.
    in Col (at NavBar/index.js:102)
    in NavBarYeutech (at App.js:97)
    in div (created by Context.Consumer)
    in StyledComponent (created by Css)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by Context.Consumer)
    in Connect(ConnectedRouterWithContext) (at App.js:95)
    in div (created by Context.Consumer)
    in StyledComponent (created by UtilityProvider)
    in ThemeProvider (created by BootstrapProvider)
    in BootstrapProvider (created by ConnectedBootstrapProvider)
    in ConnectedBootstrapProvider (created by Context.Consumer)
    in Connect(ConnectedBootstrapProvider) (at App.js:85)
    in IntlProvider (at LanguageProvider/index.js:21)
    in LanguageProvider (created by Context.Consumer)
    in Connect(LanguageProvider) (at App.js:84)
    in Provider (at App.js:83)
    in App (at src/index.js:11)
function.console.(anonymous function) @ index.js:1452
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:75
validatePropTypes @ react.development.js:1682
createElementWithValidation @ react.development.js:1775
render @ index.js:92
finishClassComponent @ react-dom.development.js:14899
updateClassComponent @ react-dom.development.js:14863
beginWork @ react-dom.development.js:15716
performUnitOfWork @ react-dom.development.js:18750
workLoop @ react-dom.development.js:18791
renderRoot @ react-dom.development.js:18876
performWorkOnRoot @ react-dom.development.js:19812
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
scheduleRootUpdate @ react-dom.development.js:20062
updateContainerAtExpirationTime @ react-dom.development.js:20088
updateContainer @ react-dom.development.js:20156
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20435
(anonymous) @ react-dom.development.js:20589
unbatchedUpdates @ react-dom.development.js:19939
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20585
render @ react-dom.development.js:20652
render @ index.js:11
./src/index.js @ index.js:29
__webpack_require__ @ bootstrap:787
fn @ bootstrap:150
0 @ .*$:31
__webpack_require__ @ bootstrap:787
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1452 Warning: Failed prop type: Invalid prop `color` of value `link` supplied to `DropdownToggle`, expected one of ["white","muted","gray-dark","primary","success","info","warning","danger"].
    in DropdownToggle (at NavBar/index.js:116)
    in NavBarYeutech (at App.js:97)
    in div (created by Context.Consumer)
    in StyledComponent (created by Css)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by Context.Consumer)
    in Connect(ConnectedRouterWithContext) (at App.js:95)
    in div (created by Context.Consumer)
    in StyledComponent (created by UtilityProvider)
    in ThemeProvider (created by BootstrapProvider)
    in BootstrapProvider (created by ConnectedBootstrapProvider)
    in ConnectedBootstrapProvider (created by Context.Consumer)
    in Connect(ConnectedBootstrapProvider) (at App.js:85)
    in IntlProvider (at LanguageProvider/index.js:21)
    in LanguageProvider (created by Context.Consumer)
    in Connect(LanguageProvider) (at App.js:84)
    in Provider (at App.js:83)
    in App (at src/index.js:11)
function.console.(anonymous function) @ index.js:1452
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:75
validatePropTypes @ react.development.js:1682
createElementWithValidation @ react.development.js:1775
render @ index.js:112
finishClassComponent @ react-dom.development.js:14899
updateClassComponent @ react-dom.development.js:14863
beginWork @ react-dom.development.js:15716
performUnitOfWork @ react-dom.development.js:18750
workLoop @ react-dom.development.js:18791
renderRoot @ react-dom.development.js:18876
performWorkOnRoot @ react-dom.development.js:19812
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
scheduleRootUpdate @ react-dom.development.js:20062
updateContainerAtExpirationTime @ react-dom.development.js:20088
updateContainer @ react-dom.development.js:20156
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20435
(anonymous) @ react-dom.development.js:20589
unbatchedUpdates @ react-dom.development.js:19939
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20585
render @ react-dom.development.js:20652
render @ index.js:11
./src/index.js @ index.js:29
__webpack_require__ @ bootstrap:787
fn @ bootstrap:150
0 @ .*$:31
__webpack_require__ @ bootstrap:787
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1452 Warning: Failed prop type: Invalid prop `tag` supplied to `NavbarBrand`.
    in NavbarBrand (created by Context.Consumer)
    in StyledComponent (created by Styled(NavbarBrand))
    in div (at NavBar/index.js:45)
    in div (created by ContainerUnstyled)
    in ContainerUnstyled (created by Context.Consumer)
    in StyledComponent (created by Container)
    in nav (created by NavbarUnstyled)
    in NavbarUnstyled (created by Context.Consumer)
    in StyledComponent (created by Navbar)
    in NavBarYeutech (at App.js:97)
    in div (created by Context.Consumer)
    in StyledComponent (created by Css)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by Context.Consumer)
    in Connect(ConnectedRouterWithContext) (at App.js:95)
    in div (created by Context.Consumer)
    in StyledComponent (created by UtilityProvider)
    in ThemeProvider (created by BootstrapProvider)
    in BootstrapProvider (created by ConnectedBootstrapProvider)
    in ConnectedBootstrapProvider (created by Context.Consumer)
    in Connect(ConnectedBootstrapProvider) (at App.js:85)
    in IntlProvider (at LanguageProvider/index.js:21)
    in LanguageProvider (created by Context.Consumer)
    in Connect(LanguageProvider) (at App.js:84)
    in Provider (at App.js:83)
    in App (at src/index.js:11)
function.console.(anonymous function) @ index.js:1452
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:75
validatePropTypes @ react.development.js:1682
createElementWithValidation @ react.development.js:1775
renderInner @ styled-components.browser.esm.js:1999
renderInner @ styled-components.browser.esm.js:1882
updateContextConsumer @ react-dom.development.js:15558
beginWork @ react-dom.development.js:15757
performUnitOfWork @ react-dom.development.js:18750
workLoop @ react-dom.development.js:18791
renderRoot @ react-dom.development.js:18876
performWorkOnRoot @ react-dom.development.js:19812
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
scheduleRootUpdate @ react-dom.development.js:20062
updateContainerAtExpirationTime @ react-dom.development.js:20088
updateContainer @ react-dom.development.js:20156
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20435
(anonymous) @ react-dom.development.js:20589
unbatchedUpdates @ react-dom.development.js:19939
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20585
render @ react-dom.development.js:20652
render @ index.js:11
./src/index.js @ index.js:29
__webpack_require__ @ bootstrap:787
fn @ bootstrap:150
0 @ .*$:31
__webpack_require__ @ bootstrap:787
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1452 Warning: Failed prop type: Invalid prop `tag` supplied to `ColUnstyled`.
    in ColUnstyled (created by Context.Consumer)
    in StyledComponent (created by Col)
    in div (created by RowUnstyled)
    in RowUnstyled (created by Context.Consumer)
    in StyledComponent (created by Styled(Row))
    in div (created by Collapse)
    in Collapse (at NavBar/index.js:56)
    in div (created by ContainerUnstyled)
    in ContainerUnstyled (created by Context.Consumer)
    in StyledComponent (created by Container)
    in nav (created by NavbarUnstyled)
    in NavbarUnstyled (created by Context.Consumer)
    in StyledComponent (created by Navbar)
    in NavBarYeutech (at App.js:97)
    in div (created by Context.Consumer)
    in StyledComponent (created by Css)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by Context.Consumer)
    in Connect(ConnectedRouterWithContext) (at App.js:95)
    in div (created by Context.Consumer)
    in StyledComponent (created by UtilityProvider)
    in ThemeProvider (created by BootstrapProvider)
    in BootstrapProvider (created by ConnectedBootstrapProvider)
    in ConnectedBootstrapProvider (created by Context.Consumer)
    in Connect(ConnectedBootstrapProvider) (at App.js:85)
    in IntlProvider (at LanguageProvider/index.js:21)
    in LanguageProvider (created by Context.Consumer)
    in Connect(LanguageProvider) (at App.js:84)
    in Provider (at App.js:83)
    in App (at src/index.js:11)
function.console.(anonymous function) @ index.js:1452
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:75
validatePropTypes @ react.development.js:1682
createElementWithValidation @ react.development.js:1775
renderInner @ styled-components.browser.esm.js:1999
renderInner @ styled-components.browser.esm.js:1882
updateContextConsumer @ react-dom.development.js:15558
beginWork @ react-dom.development.js:15757
performUnitOfWork @ react-dom.development.js:18750
workLoop @ react-dom.development.js:18791
renderRoot @ react-dom.development.js:18876
performWorkOnRoot @ react-dom.development.js:19812
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
scheduleRootUpdate @ react-dom.development.js:20062
updateContainerAtExpirationTime @ react-dom.development.js:20088
updateContainer @ react-dom.development.js:20156
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20435
(anonymous) @ react-dom.development.js:20589
unbatchedUpdates @ react-dom.development.js:19939
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20585
render @ react-dom.development.js:20652
render @ index.js:11
./src/index.js @ index.js:29
__webpack_require__ @ bootstrap:787
fn @ bootstrap:150
0 @ .*$:31
__webpack_require__ @ bootstrap:787
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1452 Warning: Failed prop type: Invalid prop `tag` supplied to `ButtonUnstyled`.
    in ButtonUnstyled (created by Context.Consumer)
    in StyledComponent (created by Button)
    in form (created by FormUnstyled)
    in FormUnstyled (created by Context.Consumer)
    in StyledComponent (created by Form)
    in ColUnstyled (created by Context.Consumer)
    in StyledComponent (created by Col)
    in div (created by RowUnstyled)
    in RowUnstyled (created by Context.Consumer)
    in StyledComponent (created by Styled(Row))
    in div (created by Collapse)
    in Collapse (at NavBar/index.js:56)
    in div (created by ContainerUnstyled)
    in ContainerUnstyled (created by Context.Consumer)
    in StyledComponent (created by Container)
    in nav (created by NavbarUnstyled)
    in NavbarUnstyled (created by Context.Consumer)
    in StyledComponent (created by Navbar)
    in NavBarYeutech (at App.js:97)
    in div (created by Context.Consumer)
    in StyledComponent (created by Css)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by Context.Consumer)
    in Connect(ConnectedRouterWithContext) (at App.js:95)
    in div (created by Context.Consumer)
    in StyledComponent (created by UtilityProvider)
    in ThemeProvider (created by BootstrapProvider)
    in BootstrapProvider (created by ConnectedBootstrapProvider)
    in ConnectedBootstrapProvider (created by Context.Consumer)
    in Connect(ConnectedBootstrapProvider) (at App.js:85)
    in IntlProvider (at LanguageProvider/index.js:21)
    in LanguageProvider (created by Context.Consumer)
    in Connect(LanguageProvider) (at App.js:84)
    in Provider (at App.js:83)
    in App (at src/index.js:11)
function.console.(anonymous function) @ index.js:1452
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:75
validatePropTypes @ react.development.js:1682
createElementWithValidation @ react.development.js:1775
renderInner @ styled-components.browser.esm.js:1999
renderInner @ styled-components.browser.esm.js:1882
updateContextConsumer @ react-dom.development.js:15558
beginWork @ react-dom.development.js:15757
performUnitOfWork @ react-dom.development.js:18750
workLoop @ react-dom.development.js:18791
renderRoot @ react-dom.development.js:18876
performWorkOnRoot @ react-dom.development.js:19812
performWork @ react-dom.development.js:19722
performSyncWork @ react-dom.development.js:19696
requestWork @ react-dom.development.js:19551
scheduleWork @ react-dom.development.js:19358
scheduleRootUpdate @ react-dom.development.js:20062
updateContainerAtExpirationTime @ react-dom.development.js:20088
updateContainer @ react-dom.development.js:20156
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20435
(anonymous) @ react-dom.development.js:20589
unbatchedUpdates @ react-dom.development.js:19939
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20585
render @ react-dom.development.js:20652
render @ index.js:11
./src/index.js @ index.js:29
__webpack_require__ @ bootstrap:787
fn @ bootstrap:150
0 @ .*$:31
__webpack_require__ @ bootstrap:787
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1452 Warning: Failed prop type: Invalid prop `tag` supplied to `Customers__Button`.
    in Customers__Button (at Customers/index.js:99)
    in Customers (at HomePage/index.js:14)
    in HomePage (created by Route)
    in Route (at Routes.js:10)
    in Switch (at Routes.js:18)
    in Unknown (at App.js:98)
    in div (created by Context.Consumer)
    in StyledComponent (created by Css)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by Context.Consumer)
    in Connect(ConnectedRouterWithContext) (at App.js:95)
    in div (created by Context.Consumer)
    in StyledComponent (created by UtilityProvider)
    in ThemeProvider (created by BootstrapProvider)
    in BootstrapProvider (created by ConnectedBootstrapProvider)
    in ConnectedBootstrapProvider (created by Context.Consumer)
    in Connect(ConnectedBootstrapProvider) (at App.js:85)
    in IntlProvider (at LanguageProvider/index.js:21)
    in LanguageProvider (created by Context.Consumer)
    in Connect(LanguageProvider) (at App.js:84)
    in Provider (at App.js:83)
    in App (at src/index.js:11)

I've checked quickly the source code and it seems fine, probably a react update, there must be discussion about it.

Otherwise to investigage.

Typings for Typescript projects?

[Improvement] Add gitter badge to historical projects

I have added this badge for accessing the bootstrap-styled gitter:

[![gitter](https://badges.gitter.im/bootstrap-styled/bootstrap-styled.svg)](https://gitter.im/bootstrap-styled)

It is by default for new project used when releasing a project with @bootstrap-styled scope during transitive release.

[Bug] Unordered list are not displayed correctly

List is not listing by default

I wanted a bullet point list or a dash list, instead we have just <div /> effect for text:

Is this supposed to be the default behavior for list in bootstrap 4 or is this just wrong?

EDIT

https://getbootstrap.com/docs/4.1/content/typography/#unstyled

You must add list-unstyled to get the unstyled mode.

Issue Type

Description

List is listed as div text:

https://bootstrap-styled.github.io/v4/#/UI%20Components/Ul

Steps to reproduce

Possibly related to :

bootstrap-styled/rsg-components#17

Versions

Bootstrap-styled: 2.2.5

An in-range update of eslint-plugin-import is breaking the build 🚨

The devDependency eslint-plugin-import was updated from `2.16.0` to `2.17.0`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-import is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Commits

The new version differs by 61 commits.

0499050 bump to v2.17.0
f479635 [webpack] v0.11.1
8a4226d Merge pull request #1320 from bradzacher/export-ts-namespaces
988e12b fix(export): Support typescript namespaces
70c3679 [docs] make rule names consistent
6ab25ea [Tests] skip a TS test in eslint < 4
405900e [Tests] fix tests from #1319
2098797 [fix] export: false positives for typescript type + value export
70a59fe [fix] Fix overwriting of dynamic import() CallExpression
e4850df [ExportMap] fix condition for checking if block comment
918567d [fix] namespace: add check for null ExportMap
2d21c4c Merge pull request #1297 from echenley/ech/fix-isBuiltIn-local-aliases
0ff1c83 [dev deps] lock typescript to ~, since it doesn’t follow semver
40bf40a [*] [deps] update resolve
28dd614 Merge pull request #1304 from bradennapier/feature/typescript-export-type

There are 61 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

[RFC] @bootstrap-styled/theme-server

@bootstrap-styled/theme-server

This package would contains:

Specification for creating your own theme-server
One example of implementation of theme server, including driver for datasources:
- text datasource
- mangodb nosql datasource
- postgresql/mysql datasource
Basic Auth / OAuth

Issue Type

Feature

Description

This server is in charge of storing theme, it stores it under the organization and can be retrieved using @bootstrap-styled/saga.

It is useful with theme editor tools such as @bootstrap-styled/theme-customizer (write) or for any website (read).

Versions

Node/NPM: 11/6
Bootstrap Styled: 2.0.4

[Bug] Cannot use linear gradient

bootstrap-styled

I've been trying to set a linear-gradient

Issue Type

Description

Valid gradient values crash the rendering

Steps to reproduce

This is a valid linear gradient:

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(-45deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

This is how I have set my gradient:

const theme = makeTheme({
  '$btn-primary-bg': 'linear-gradient(#B21255, #790A68)',
});

Produce the following error

Versions

Node/NPM: 11/6
bootstrap-styled: 2.0.4

An in-range update of eslint-plugin-react is breaking the build 🚨

The devDependency eslint-plugin-react was updated from `7.18.0` to `7.18.1`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Commits

The new version differs by 9 commits.

000d6b8 Update CHANGELOG and bump version
ffdf69a [Fix] jsx-indent: Does not check indents for JSXText
182b045 [Docs] use markdown-magic to automatically sort all rules alphabetically
45b9d32 [Docs] jsx-props-no-spreading: fix typo to use correct rule
f9aee94 [Fix] jsx-props-no-spreading: add support for namespaced jsx components
e69b113 [Fix] jsx-no-target-blank: allow rel to be an expression
fc6e406 [meta] fix changelog date
50df78f [Fix] sort-comp: | isn’t a valid regex flag; u and s are
a7f6a8b [Tests] on node v13

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

[Feature Request] Animation demo panel

@bootstrap-styled/animation demo panel

We use to have a live demo panel for animation components.

This ticket consist of restoring the designed tool to be able to play with their option in live.

Issue Type

Feature

Description

Any lib that uses animation should share the same set of props, for this reason, it would be conveniant if:

Any animation component can work directly with the animation demo panel
The animation demo panel can be it's own package, for being reused easely.

Versions

Node/NPM: 11/6
Bootstrap Styled: 2.0.4

An in-range update of @bootstrap-styled/css-utils is breaking the build 🚨

The dependency @bootstrap-styled/css-utils was updated from `1.2.0` to `1.2.1`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@bootstrap-styled/css-utils is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Release Notes for v1.2.1

1.2.1 (2018-12-16)

Bug Fixes

greenkeeper: fix sonar running on greenkeeper test (6259b08)

Commits

The new version differs by 3 commits.

12e5ae5 chore(release): 1.2.1 [skip ci]
2dd201d Merge pull request #11 from bootstrap-styled/dev
6259b08 fix(greenkeeper): fix sonar running on greenkeeper test

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of eslint-plugin-react is breaking the build 🚨

The devDependency eslint-plugin-react was updated from `7.14.0` to `7.14.1`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Release Notes for v7.14.1

Fixed

Fix prop-types crash on multiple destructuring (#2319 @golopot)

Commits

The new version differs by 3 commits.

62255af Update CHANGELOG and bump version
655eb01 Merge pull request #2320 from golopot/issue-2319
9639d82 [Fix] prop-types: fix crash on multiple destructuring

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

[Variable Request][Cards] $cards-box-shadow, $cards-focus-box-shadow, $cards-active-box-shadow

Cards shadows

Enabling shadow with $enable-shadow = true does not enable shadow on cards.

This ticket consists of adding this feature.

Issue Type

Feature

Proposition

Add to src/Cards/makeTheme.js (inspired from $btn-*):

v['$cards-box-shadow'] = u['$cards-box-shadow'] || `inset 0 1px 0 ${Color(v['$white']).alpha(0.15).toString()}, 0 1px 1px ${Color(v['$black']).alpha(0.075).toString()}`;
v['$cards-focus-box-shadow'] = u['$cards-focus-box-shadow'] || `0 0 0 2px ${Color(v['$brand-primary']).alpha(0.25).toString()}`;
v['$cards-active-box-shadow'] = u['$cards-active-box-shadow'] || `inset 0 3px 5px ${Color(v['$black']).alpha(0.125).toString()}`;

And into src/Cards/Card.js:

const Card = styled(CardUnstyled)`
  // add this css:
  ${(props) => `
    ${boxShadow(props.theme['$enable-shadows'], props.theme['$card-box-shadow'])}
  `}
  // -- end
`

Versions

Node/NPM: 11/6
Bootstrap Styled: 2.0.4

[Bug] Card is having wrong theme defaultProps

bootstrap-styled Cards

Bootstrap-styled card is having a set of wrong value in default props, this is suprising

Issue Type

Description

Card is having wrong value in default props:

'$card-margin-y-halved': '((rmUnit(], UNIT.REM) / 2) + UNIT.REM',
'$card-margin-x-halved': '((rmUnit(], UNIT.REM) / 2) + UNIT.REM',
 '$card-columns-margin-md': '$card-spacer-y',
 '$card-columns-margin-lg': '$card-spacer-y',
 '$card-columns-margin-xl': '$card-spacer-y',
 '$card-columns-margin-xxl': '$card-spacer-y',

Steps to reproduce

https://github.com/bootstrap-styled/v4/blob/master/src/Cards/Card.js#L36

proposed solution

Figure out the original values and restore them.

Add tests to avoid such kind of mistake to be missed in the future. (test all default props at once maybe ?)

Versions

Bootstrap Styled: 2.2.0
Bootstrap Styled v4: 2.2.0

[Improvement] Add @bootstrap-styled/documentation to historical packages

I have added https://bootstrap-styled.github.io/documentation/ to a few project

npm uninstall --save-dev @yeutech-lab/documentation && npm install @bootstrap-styled/documentation

It is done by default for new project when releasing a project with @bootstrap-styled scope during transitive release.

This is the historical remaining list of projects to be updated manually.

Customize Dropdown

Issue Type

Clearly didn't understand how to do it

Description

I'm playing with boostrap-styled but I tried to use the theme props on the dropdown component <Dropdown theme={{}}/> and adding some style like in the documentation :

<Dropdown
    theme={{
         "$component-active-bg": "#fff",
    }}
>

But it doesn't works... Moreover, the caret disapear!

I tried to look inside of the defaultProps and I found a theme props, soooo I tired a dirty approach :

<Dropdown
  theme={Object.assign({}, Dropdown.defaultProps.theme, {
      "$component-active-bg": "#fff",
      // "$btn-padding-x": "2rem"
  })}
>

But nothing works.

The documentation says that I need a shape type on the theme prop with the full list of parameters we can manipulate.

I clearly doing something wrong. I hope someone could show me how I can customize a Dropdown without customizing them all! (Like having two dropdown on the same page without having styling conflict)

Steps to reproduce

<Dropdown
    theme={{
         "$component-active-bg": "#fff",
    }}
>

Versions

Node/NPM: 8.10
OS: OSX
bootstrap-styled: ^3.0.6

Thx a lot ! 😄

Update :
It works well on Button right now, but not on Dropdown...

An in-range update of @bootstrap-styled/documentation is breaking the build 🚨

The devDependency @bootstrap-styled/documentation was updated from `1.1.1` to `1.2.0`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@bootstrap-styled/documentation is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Release Notes for v1.2.0

1.2.0 (2018-12-16)

Features

greenkeeper: added greenkeeper (9faed88)

Commits

The new version differs by 6 commits.

8136b8b chore(release): 1.2.0 [skip ci]
52d1592 Merge pull request #15 from bootstrap-styled/dev
9faed88 feat(greenkeeper): added greenkeeper
291e74d Merge pull request #14 from bootstrap-styled/greenkeeper/initial
8519f6a docs(readme): add Greenkeeper badge
e75263c chore(package): update dependencies

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of enzyme is breaking the build 🚨

There have been updates to the enzyme monorepo:

- The devDependency enzyme-adapter-react-16 was updated from 1.12.0 to 1.12.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

[Bug] Button does not have css for cursor-point

bootstrap-styled

A button is a clickable element, however, ours does not use the cursor: pointer.

This is present since always, that would be interesting to know why we have missed that.

Issue Type

Steps to reproduce

Their css class:

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

Versions

2.2.0

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from `1.9.2` to `1.9.3`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Release Notes for v1.9.3

2019-04-10

Bug Fixes

Simplify return expressions that are evaluated before the surrounding function is bound (#2803)

Pull Requests

#2803: Handle out-of-order binding of identifiers to improve tree-shaking (@lukastaegert)

Commits

The new version differs by 3 commits.

516a06d 1.9.3
a5526ea Update changelog
c3d73ff Handle out-of-order binding of identifiers to improve tree-shaking (#2803)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

[Doc] Error in Combining theme examples

Issue Type

Description

The demo here is wrong https://bootstrap-styled.github.io/bootstrap-styled/#/Combining%20themes

First line is wrong,

- import { createMakeTheme, toMakeTheme } from 'bootstrap-styled/lib/utils'; 
+ import createMakeTheme, { toMakeTheme } from 'bootstrap-styled/lib/utils';

Ignore and close if already fixed.

An in-range update of @rollup-umd/documentation is breaking the build 🚨

The devDependency @rollup-umd/documentation was updated from `1.3.14` to `1.3.15`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@rollup-umd/documentation is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Release Notes for v1.3.15

1.3.15 (2019-02-25)

Bug Fixes

dependencies: upgrade all dependencies (cd4eed0)

Commits

The new version differs by 3 commits.

126c400 chore(release): 1.3.15 [skip ci]
7cd5ac5 Merge pull request #37 from rollup-umd/dev
cd4eed0 fix(dependencies): upgrade all dependencies

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of babel7 is breaking the build 🚨

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

There have been updates to the babel7 monorepo:

- The devDependency @babel/cli was updated from 7.8.3 to 7.8.4.

The devDependency @babel/core was updated from 7.8.7 to 7.9.0.
The devDependency @babel/plugin-external-helpers was updated from 7.8.0 to 7.8.3.
The devDependency @babel/plugin-proposal-class-properties was updated from 7.8.0 to 7.8.3.
The devDependency @babel/plugin-proposal-decorators was updated from 7.8.0 to 7.8.3.
The devDependency @babel/plugin-proposal-json-strings was updated from 7.8.0 to 7.8.3.
The devDependency @babel/plugin-proposal-object-rest-spread was updated from 7.8.3 to 7.9.0.
The devDependency @babel/plugin-syntax-dynamic-import was updated from 7.8.0 to 7.8.3.
The devDependency @babel/plugin-syntax-import-meta was updated from 7.8.0 to 7.8.3.
The devDependency @babel/plugin-transform-modules-commonjs was updated from 7.8.3 to 7.9.0.
The devDependency @babel/plugin-transform-react-constant-elements was updated from 7.8.3 to 7.9.0.
The devDependency @babel/plugin-transform-react-inline-elements was updated from 7.8.3 to 7.9.0.
The devDependency @babel/preset-env was updated from 7.8.7 to 7.9.0.
The devDependency @babel/preset-react was updated from 7.8.3 to 7.9.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

[Documentation] restore pages from V1 doc for public

Public documentation

The entry point documentation https://bootstrap-styled.github.io/bootstrap-styled should only refer in an undetailed way where to find these features and focus on the philosophy, the community that write and share modules and the mixins and management of multiple / compatibles themes.

This is the unterminated list of features currently missing:

Utilities : It is not possible to know any of the utilities present in BS (these utilities should be described on the provider documentation https://bootstrap-styled.github.io/provider/#/UI%20Components?id=utilityprovider)
Categories and group: v4 listing is not grouped in a way to understand how the lib should be used and every components seems independant to each over.

[RFC] Restore @bootstrap-styled/theme-customizer

@bootstrap-styled/theme-customizer

This tools is in charge of adding a live utils for reading (@bootstrap-styled/saga) editing (@bootstrap-styled/theme-customizer) saving locally (@bootstrap-styled/redux), with persistence (@bootstrap-styled/persist) and posting to a theme server (@bootstrap-styled/theme-server)

Issue Type

Feature

Description

It is often useful to create the theme in live. It will save the time of recompiling when editing variable 1 by 1.

This will be the advanced tools for creating a theme quickly.

It can also be used with existing plugin for async theme:

@bootstrap-styled/redux: is the store for local theme
@bootstrap-styled/saga: is in charge of loading theme from a server
@bootstrap-styled/persist: offer a way to persiste theme (see #14) in the local storage
@bootstrap-styled/theme-server: is a server with a db of theme *<= this can be added later, the local persistance and emailing the theme is enought *

Form

It should provide a <ThemeCustomizerForm /> to edit any variables on any scope.

The form can use @bootstrap-styled/analyzer to display current state of customization and compatibility between original and next theme.

Rendering

The rendering will happen in the <ThemeCustomizer />, it must support to way of being attached:

In the page (as in an administration panel)
In a position fixed div (as a debugging tool for creating sites)

Preview

<PreviewBoard> is used to display a dynamic list of BS component to be displayed.

It's main goal is to help customize a website in live while using the customizer form.

It commes with a <PreviewBoardSettings /> and is extended in <ConnectedPreviewBoardSettings /> that use redux store and can be anywhere on the page.

It should come with a set of components that can be added to a PreviewBoard:

Example :

Redux

Using redux, the <PreviewBoard /> and the <SettingsBoard /> can be separated anywhere on the main view and does not need to be child of.

It should also export an immutable version of the store following the [Immutable guidelines] (https://dev-tools.yeutech.com/rollup-umd/#immutable-guidelines) recommendations.

Rendering

The rendering will happen inside the <ThemeCustomizer /> (when building a website), or anywhere on the site (for bootstrap-documentation)

Example:

In the page (as in an administration panel)
In a position fixed div (as a debugging tool for creating sites)

Versions

Node/NPM: 11/6
Bootstrap-Styled: 2.2.0

An in-range update of webpack is breaking the build 🚨

The devDependency webpack was updated from `4.35.3` to `4.36.0`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Release Notes for v4.36.0

Features

SourceMapDevToolPlugin append option now supports the default placeholders in addition to [url]
Arrays in resolve and parser options (Rule and Loader API) support backreferences with "..." when overriding options.

Commits

The new version differs by 42 commits.

95d21bb 4.36.0
aa1216c Merge pull request #9422 from webpack/feature/dot-dot-dot-merge
b3ec775 improve merging of resolve and parsing options
53a5ae2 Merge pull request #9419 from vankop/remove-valid-jsdoc-rule
ab75240 Merge pull request #9413 from webpack/dependabot/npm_and_yarn/ajv-6.10.2
0bdabf4 Merge pull request #9418 from webpack/dependabot/npm_and_yarn/eslint-plugin-jsdoc-15.5.2
f207cdc remove valid jsdoc rule in favour of eslint-plugin-jsdoc
31333a6 chore(deps-dev): bump eslint-plugin-jsdoc from 15.3.9 to 15.5.2
036adf0 Merge pull request #9417 from webpack/dependabot/npm_and_yarn/eslint-plugin-jest-22.8.0
37d4480 Merge pull request #9411 from webpack/dependabot/npm_and_yarn/simple-git-1.121.0
ce2a183 chore(deps-dev): bump eslint-plugin-jest from 22.7.2 to 22.8.0
0beeb7e Merge pull request #9391 from vankop/create-hash-typescript
bf1a24a #9391 resolve super call discussion
bd7d95b #9391 resolve discussions, AbstractMethodError
4190638 chore(deps): bump ajv from 6.10.1 to 6.10.2

There are 42 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of react-redux is breaking the build 🚨

The devDependency react-redux was updated from `6.0.0` to `6.0.1`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-redux is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Release Notes for v6.0.1

This is a minor release with support for react-hot-loader and a few small bug fixes for edge cases.

While you're here, please stop by #1177 to see our roadmap for the next versions of React Redux. We are aware that performance is not so hot in 6.0. Short version: We put too much traffic on React's context API, which isn't really designed for high levels of reads and writes. We're looking to reduce that load and get performance back on track in a minor release, so there won't be backwards compatibility concerns. We have a new extensive benchmark suite to keep us on track and ensure we're not regressing on speed in the future.

And yes, we know about Hooks. Check out #1179.

Changes

Fix for circular component object structures, such as Emotion styled components. (#1122 by @Andarist)
Minor optimization: remove conditional (#1131 by @ericanderson)
Ensure that component context prop really contains a React context (#1134 by @casdevs)
react-hot-loader compatibility (#1168/#1137 by @theKashey)
Upgrade to react-is v16.7.0 (#1174 by @nobezawa)

Commits

The new version differs by 35 commits.

162b81a 6.0.1
d8a7ab5 Update build deps. Add React 16.8 tests.
6ad2b55 Remove --save option as it isn't required anymore (#1193)
fac9ad1 Update Provider.md and quick-start.md (#1182)
9bf2375 Update Provider.md
fcd5ed8 Update Provider.md
c198249 Update react-router usage example (#1180)
ab77450 Upgrade to react-is v16.7.0 (#1174)
0bf4e1f Remove duplicate line in connect api documents (#1173)
6e0a106 Updated: Support React-Hot-Loader compatibility (#1168)
63af52f Update accessing-store.md (#1163)
5199d9d Ensure that component prop 'context' really contains a React context … (#1134)
e7661b3 Fix spacing issues (#1153)
75b90f9 Add / change docs about v6 (#1148)
5088345 Add connect() API doc (#1140)

There are 35 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

[Documentation] Improve visibility of v4

We should add this in our sections:

  {
     name: 'V4 Components',
     external: true,
     href: 'https://bootstrap-styled.github.io/v4'
   }

This will create a link to the v4 components.

Currently we need to read the ecosystem.

[Feature Request] withWidth HoC to retrieve current media breakpoint within Components

bootstrap-styled

Provide a way to know the current media break point in javascript within components.

Issue Type

Feature

Description

We are missing a way to know the current breakpoint within a component, withBreakpoint/withWidth.

It will use the feature from #5, (#5 is just about logging, but It will require a utility function to know the currentWidth and to know the currentBreakpoint

This ticket consist of adding :

withBreakpoint: inject props.breakpoint (ex: sm)
MUI example of widthWidth: https://material-ui.com/layout/breakpoints/#withwidth

related issues

An in-range update of styled-components is breaking the build 🚨

The devDependency styled-components was updated from `4.2.0` to `4.2.1`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

styled-components is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Monorepo using Lerna?

Issue Type

Description

Right now, it's really hard to fork and modify bootstrap-styled because of all the packages. As an example, @bootstrap-styled/provider uses bootstrap-styled, @bootstrap-styled/css-utils, and @bootstrap-styled/css-mixins. Not only does it make it hard to customize but it also makes submit improvements because they happen in a number of different repositories.

Using Lerna would allow bootstrap-styled to move all of the relevant packages into a single repo. Users could then take the entire set of packages at once, modify them and use them for their own needs or submit the changes back.

An in-range update of babel-plugin-add-module-exports is breaking the build 🚨

The devDependency babel-plugin-add-module-exports was updated from `1.0.0` to `1.0.1`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

babel-plugin-add-module-exports is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Commits

The new version differs by 5 commits.

38e2e68 v1.0.1
df47a0a [patch] Add module.exports to files using es3 member literals
e8e5be0 docs: tweaks [ci skip]
d0001d5 docs(README): add webpack notes(refs #68) & tweaks [ci skip]
753d945 chore: tweak postversion script [ci skip]

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of @rollup-umd/documentation is breaking the build 🚨

The devDependency @rollup-umd/documentation was updated from `1.2.0` to `1.3.0`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Release Notes for v1.3.0

1.3.0 (2018-12-16)

Features

greenkeeper: Added greenkeeper and updated all dependencies (d84f159)

Commits

The new version differs by 11 commits.

d8234a6 chore(release): 1.3.0 [skip ci]
bf13bed Merge pull request #18 from rollup-umd/dev
8f7b203 build(sonar): configuring sonar report path
9de3733 Merge pull request #17 from rollup-umd/dev
70020b9 build(dependencies): fix conflix in package.json
025984c Merge pull request #15 from rollup-umd/dev
7d93127 Merge branch 'dev' of github.com:rollup-umd/documentation into dev
d84f159 feat(greenkeeper): Added greenkeeper and updated all dependencies
557b06e Merge pull request #14 from rollup-umd/greenkeeper/initial
ade1c2e docs(readme): add Greenkeeper badge
d94fea3 chore(package): update dependencies

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

[RFC] @bootstrap-styled/theme-analyzer

@bootstrap-styled/analyze-theme

@bootstrap-styled/theme-analyzer is in charge of analyzing theme and compare theme.

Issue Type

Feature

Description

It gives information such as :

percentage of original bootstrap variables unmodified
percentage of original bootstrap variables modified
names of scoped themes in the themes
percentage of variables edited between one existing theme and another theme
percentage of two themes of being compatible
percentage of variables edited in common
the difference of variables edited between two themes
comparison of scoped used

It is useful for :

offering theme with chance of compatibility
@bootstrap-styled/theme-customizer to show the % of edition of a theme while a new theme.
makeTheme can use these data to adopt a strategy for building theme (futur)

Versions

Node/NPM: 11/6
Bootstrap Styled: 2.0.6

An in-range update of @bootstrap-styled/css-utils is breaking the build 🚨

The dependency @bootstrap-styled/css-utils was updated from `1.3.3` to `1.4.0`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Release Notes for v1.4.0

1.4.0 (2019-12-02)

Features

utilities: added utilities api (next version will be breaking change due to removed old utilities) (52a4c03)

Commits

The new version differs by 3 commits.

f353cbf chore(release): 1.4.0 [skip ci]
9ba511e Merge pull request #49 from bootstrap-styled/dev
52a4c03 feat(utilities): added utilities api (next version will be breaking change due to removed old utilities)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

[RFC] Create and use @bootstrap-styled/persist for persistent data

@bootstrap-styled/persist

Persistency will allow people of memorizing theme locally using localStorage.

Meta data can be setten using key at the root of the theme that start with _.

We will recognize persistent theme with _persist: true

This plugin is useful for Bootstrap Styled ecosystem for designing tools such as @bootstrap-styled/theme-customizer

Issue Type

Feature

Description

As @bootstrap-styled/redux is for active theme and themes, @bootstrap-styled/saga for async themes stored in redux.

This plugin should see a new @bootstrap-styled/persist for persistent themes load/save in localStorage.

Draft

actions

readTheme: read active persistent theme
readThemes: read all persistent theme
saveTheme: save 1 persistent theme
editTheme: edit 1 persistent theme
deleteTheme: delete 1 persistent theme
deleteThemes: delete 1 persistent theme

selectors

In this draft version, the selectors for reading the localStorage or not useful, if the plugin is installed, it can automatically load the theme into the store.['redux.bs'].theme.

The single source of truth is the redux store, what is saved in localStorage is a copy used only for boot.

How does it work?

The ConnectedBootstrapProvider from @bootstrap-styled/redux is used for storing in redux theme and activeTheme from localStorage.

It will be stored in bs.redux.

The single source of truth is @bootstrap-styled/redux reducer, the job done by @bootstrap-styled/persist is to :

boot persistent active theme into store.['redux.bs'].theme and persistent themes store.['redux.bs'].themes using a merge.
give actions for saving persistent (listed up there)
theme added to store.['redux.bs'].themes must contain a meta key _persist: true so we can filter the list.

[RFC][Feature Proposal] Use theme['$grid-breakpoints'] in JSX

We are missing one component like this one :

https://github.com/dragma/styled-bootstrap-grid

Issue Type

Feature

Description

This component will be wrapper with withTheme in order to access theme['$grid-breakpoint'].

This will permit to use media query within JSX.

related issues

Prop 'className' did not match when using SSR

bootstrap-styled

Before opening a new issue, please take a moment to review our community guidelines to make the contribution process easy and effective for everyone involved.

Before opening a new issue, you may find an answer in already closed issues:
https://github.com/bootstrap-styled/bootstrap-styled/issues?q=is%3Aissue+is%3Aclosed

Issue Type

Description

When using server side rendering, there are warnings about styled-components' classNames not matching. Oddly enough, if you add any more bootstrap-styled components you don't get additional messages.

This causes some very odd reconciliation issues sometimes (this is harder to reproduce)

Steps to reproduce

https://codesandbox.io/s/objective-sanderson-0ue7x

I've attached a minimal reproduction case using next.js on codesandbox.

It's using babel-plugin-styled-components as not to have these issues (ssr is set to default, true
-- also tried explicitly setting to true)
styled-components is configured as indicated here
This does not happen with other libraries, or other components styled via styled-components

Versions

Node/NPM:10.16.3/6.9.0
OS: Ubuntu 64bit
bootstrap-styled: ^4.4.0 (resolved to 4.4.1)

More Example For Drawer - v4

Hi,

Is it possible to provide more examples of Drawer? I would like to implement a similar thing as the official page has. I inspected it and it actually is a Sidebar. Is it implemented with <Drawer /> as well?

[Bug] Card having wrong props in defaultProps and is missing these props in makeOriginal

Card having wrong props in documentation

The props table in Card documentation is displaying the following props:

$card-margin-y-halved: string
$card-margin-x-halved: string

Issue Type

Description

The makeTheme is not creating these variables in the theme.

It is existing and used in Card.js , but the makeOriginal in bootstrap-styled does not set the value in it + default props are wrong.

We should have one single main theme, having two theme is really confusing for any possible resolution.

Related issues

[Discussion] How to support twbs/bootstrap v4 change while adding more variables?

How to maitain and improve v4 in a consistent way?

Current version of twitter bootstrap is 4.1.3.

Regarding css-mixins and the change issues #50 represent, we can compare both version:

We noticed:

removed code un button.scss
added code un button.scss
change code un button.scss

Since we implement a bit of change (did we ?), we need to have a way to maintain v4 without worrying of adding/removing code.

So far, I have identified one type of modification we did since v4 port:

extra variables for components

We should keep the v4 upgrade procedure simple.

This is the reason why just converting scss to css-injs` as a robotique task is the best.

If our main exported component is having extra variables for components, it should do as example for Button.js:

import style from 'styled-components`;
import ButtonOriginal from './ButtonOriginal';
export default styled(ButtonOriginal)`
  // extra base variables
`;

Now if we keep adding extra variables for having more possible customization than bootstrap, we should provide an extended mode:

import style from 'styled-components`;
import Button from '@bootstrap-styled/v4/lib/Button/Extend';

and in Extend.js

import style from 'styled-components`;
import ButtonOriginal from '../ButtonOriginal';
export default styled(ButtonOriginal)`
  // all possible css values that accept every variables
`;

This would preserve scope for changes.

The probleme for developers working on @bootstrap-styled/v4 is to follow twbs/bootstrap and implement / maintain their changes easely.

We need to state what degree of changes we have implemented until now. @santaclauze

If we autorise change now, or bloc change now, it's inconveniant.

[Doc] Add withWidth to documentation

Doc withWidth

Currently we using a similar withWidth than materialui: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/withWidth/withWidth.js

This HoC will inject to component props the width with values taken from the theme['$grid-breakpoints'] and default theme.

Issue Type

Description

Looking out our doc, I completely failed to add this to documentation.

This ticket will be close when the documentation will be updated.

An in-range update of @bootstrap-styled/color is breaking the build 🚨

The dependency @bootstrap-styled/color was updated from `1.0.8` to `1.0.9`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@bootstrap-styled/color is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Release Notes for v1.0.9

1.0.9 (2018-12-16)

Bug Fixes

greenkeeper: fix sonar running on greenkeeper test (450f113)

Commits

The new version differs by 3 commits.

fc27586 chore(release): 1.0.9 [skip ci]
851c34a Merge pull request #14 from bootstrap-styled/dev
450f113 fix(greenkeeper): fix sonar running on greenkeeper test

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Override colors and brands value is not working

bootstrap-styled

There is a problem with changing theme variables at same time, changing these two variables not working:

{
  '$brand-danger': 'green',
  '$green': '#FFF',
}

Issue Type

Steps to reproduce

Import BootstrapProvider to _app.js
Inject theme custom config to this provider:

<Provider store={store}>
  <BootstrapProvider theme={myTheme}>
          <ResetStyledComponent />
          <Component {...pageProps} />
  </BootstrapProvider>
</Provider>

Add the following config object to myTheme:

const myTheme = {
  '$brand-danger': 'green',
  '$green': '#FFF'
};

Add Button component to app
<Button color={'danger'}>Click</Button>
Run the app

Expected

It should change color of danger buttons to white, but there is green color still there.

Tested Things

I've test it with makeTheme function but the problem still exists:

const makedTheme = makeTheme(myTheme);
  <BootstrapProvider theme={makedTheme}>
          <ResetStyledComponent />
          <Component {...pageProps} />
  </BootstrapProvider>

Suggestions

I think the problem is because of '$brand-danger': 'green' config in theme object that changes v['green'] to just 'green', so changing '$green' after that not working.
So if we could set '$brand-danger' to $green or v['green'] maybe this problem would be resolved.

Versions

Node/NPM: v13.0.1/6.12.0
OS: Windows 10
bootstrap-styled: 2.7.2

[Doc] Write how to use tether props

In a situation where I have a dropdown in the right part of the navbar, I have tried to fix using the tether props the <DropdownToggle />:

               <NavDropdown
                  isOpen={localeIsOpen}
                  toggle={() => this.setState({ localeIsOpen: !localeIsOpen })}
                >
                  <DropdownToggle
                    tether={{
                      attachment: 'top right',
                      targetAttachment: 'bottom left'
                    }}
                    caret
                    color="link"
                  >
                    English
                  </DropdownToggle>
                  <DropdownMenu>
                    <DropdownItem disabled>English</DropdownItem>
                    <DropdownItem>Français</DropdownItem>
                    <DropdownItem>Deutsch</DropdownItem>
                  </DropdownMenu>
                </NavDropdown>

This had no effect.

This issue consists of writing the tether props documentation.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

[Doc] restore @bootstrap-styled/navigation-bar demo documentation pages

As in the title

An in-range update of @semantic-release/github is breaking the build 🚨

The devDependency @semantic-release/github was updated from `5.2.7` to `5.2.8`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@semantic-release/github is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Release Notes for v5.2.8

5.2.8 (2018-12-26)

Bug Fixes

package: update aggregate-error to version 2.0.0 (d65092f)

Commits

The new version differs by 2 commits.

d65092f fix(package): update aggregate-error to version 2.0.0
3b4daf9 build: remove unnecessary docker service in Travis

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of @bootstrap-styled/utils is breaking the build 🚨

The dependency @bootstrap-styled/utils was updated from `1.7.0` to `1.7.1`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@bootstrap-styled/utils is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Release Notes for v1.7.1

1.7.1 (2018-12-16)

Bug Fixes

dependencies: updated babel dependencies (a89fb41)

Commits

The new version differs by 4 commits.

6c5c236 chore(release): 1.7.1 [skip ci]
5169c70 Merge pull request #11 from bootstrap-styled/dev
750c954 ci(greenkeeper): fix greenkeeper using sonarcloud
a89fb41 fix(dependencies): updated babel dependencies

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

bootstrap-styled / bootstrap-styled Goto Github PK

bootstrap-styled's Introduction

Table of Contents

Why ?

How ?

Documentation

Contributing

License MIT

bootstrap-styled's People

Contributors

Stargazers

Watchers

Forkers

bootstrap-styled's Issues

Add logging feature to grid breakpoint changes

Issue Type

Description

related issues

Bootstrap Styled

Bootstrap 4 Original feature

Related issues

Description

Tag props generates warnings

Issue Type

Description

Steps to reproduce

List is not listing by default

Issue Type

Description

Steps to reproduce

Versions

The devDependency eslint-plugin-import was updated from 2.16.0 to 2.17.0.

@bootstrap-styled/theme-server

Issue Type

Description

Versions

bootstrap-styled

Issue Type

Description

Steps to reproduce

Versions

The devDependency eslint-plugin-react was updated from 7.18.0 to 7.18.1.

@bootstrap-styled/animation demo panel

Issue Type

Description

Versions

The dependency @bootstrap-styled/css-utils was updated from 1.2.0 to 1.2.1.

1.2.1 (2018-12-16)

Bug Fixes

The devDependency eslint-plugin-react was updated from 7.14.0 to 7.14.1.

Fixed

Cards shadows

Issue Type

Proposition

Versions

bootstrap-styled Cards

Issue Type

Description

Steps to reproduce

proposed solution

Versions

Issue Type

Description

Steps to reproduce

Versions

The devDependency @bootstrap-styled/documentation was updated from 1.1.1 to 1.2.0.

1.2.0 (2018-12-16)

Features

There have been updates to the enzyme monorepo:

bootstrap-styled

Issue Type

Steps to reproduce

Versions

The devDependency rollup was updated from 1.9.2 to 1.9.3.

Bug Fixes

Pull Requests

Issue Type

Description

The devDependency @rollup-umd/documentation was updated from 1.3.14 to 1.3.15.

1.3.15 (2019-02-25)

The devDependency eslint-plugin-import was updated from `2.16.0` to `2.17.0`.

The devDependency eslint-plugin-react was updated from `7.18.0` to `7.18.1`.

The dependency @bootstrap-styled/css-utils was updated from `1.2.0` to `1.2.1`.

The devDependency eslint-plugin-react was updated from `7.14.0` to `7.14.1`.

The devDependency @bootstrap-styled/documentation was updated from `1.1.1` to `1.2.0`.

The devDependency rollup was updated from `1.9.2` to `1.9.3`.

The devDependency @rollup-umd/documentation was updated from `1.3.14` to `1.3.15`.

The devDependency webpack was updated from `4.35.3` to `4.36.0`.

The devDependency react-redux was updated from `6.0.0` to `6.0.1`.

The devDependency styled-components was updated from `4.2.0` to `4.2.1`.

The devDependency babel-plugin-add-module-exports was updated from `1.0.0` to `1.0.1`.

The devDependency @rollup-umd/documentation was updated from `1.2.0` to `1.3.0`.

The dependency @bootstrap-styled/css-utils was updated from `1.3.3` to `1.4.0`.