sui-components / sui-components Goto Github PK
View Code? Open in Web Editor NEWSUI Components
Home Page: https://sui-components.vercel.app/
License: MIT License
SUI Components
Home Page: https://sui-components.vercel.app/
License: MIT License
Describe the bug
In multi-selection mode, when a user selects a second option by clicking into the checkbox, the dropdown is closed
Steps to reproduce
1- open the demo of any component using Molecule/Select
2. Click on the dropdown to open the options list
3. Select the first option by clicking into the checkbox not any other part of the rectangle
4. Select a second option by clicking into the checkbox not any other part of the rectangle
Expected behavior
The option should just be selected and the list should remain still open.
Environment / Context
Additional info
This bug doesn't happen in the sui-components
studio
, but we have this bug in our demo and in production`
The component molecule/modal is preventing scroll when the content is smaller than the viewport, but in the scenario where the content in fact is smaller than viewport and a subcomponent needs scrolling it prevents it too. For example de districts from Barcelona in the next screenshot:
Could we disable preventing scrolling with a prop? 👍
Component CardSubscription
needs to update the readme after changes on #389.
Describe the issue
The headings and Wrappers of all demos are different, not only on styles, but sometimes the demos even don't have any Title at all (check buttons for instance)
Steps to reproduce
Expected behaviour
Environment / Context
Describe the bug
Tapping the system back button or clicking back button in desktop browsers and safari mobile are not closing opened modal. It just navigate back to previous url.
Expected behaviour
As a standard, it back button should close modal if it is open, if not navigate to previous history url.
See Material Design dialog behaviour specs: https://material.io/components/dialogs/#behavior
Environment / Context
When we use AtomSpinner component it shows a literal "Loading..." by default. Is it necessary?
AtomSpinner.defaultProps = {
delayed: false,
type: TYPES.SECTION,
loader: <SUILoader text="Loading..." />
}
If we want to remove this literal we must import AtomSpinner with a loader prop value without literal:
<AtomSpinner loader={<SUILoader />} />
Instead of this, it is not better remove this defaultProp and let developer choose?
The autoClose
is not working. Even thought if we specify or not a time (because it has a defaultProp
) it does not work
Describe the bug
When multiple Molecule/Select components exist on the same page, and the user clicks on one of them to open its dropdown, and the user clicks on a different Molecule/Select component to open a different dropdown, and clicks again on the former component, the last opened dropdown is not closed by its Molecule/Select.
Steps to reproduce
Single Selection / with Placeholder
dropdown componentWith different value and displayed text
dropdown componentSingle Selection / with Placeholder
dropdown componentExpected behaviour
The user would expect the dropdown to be closed on blur ie when the dropdown component has lost its focus.
Environment / Context
Additional info
Add any other context about the problem here.
AtomCard could be horizontal or vertical but it can't be responsive (vertical in mobile and horizontal in desktop).
In coches.net we need this functionality to create or vehicle component in order to decouple our core page "ads list"
It could be a "responsive" prop that adds a modifier class with a media query. Not compatible with "vertical" prop.
Is it possible to iterate AtomCard to add this functionality?
Describe the bug
The api section of the documentation of the Modal components is not working
Steps to reproduce
Expected behaviour
See the full api documentation of that components
This changes change the way of passing on change prop and breaks the compatibility
584a9b8#diff-e728f65de07b0424f16d0fc3b8cc34fdR40
Travis doesnt deploy the sui-components studio due to the tests is broken
https://travis-ci.org/SUI-Components/sui-components/builds/259742433
Describe the bug
To try out the SUI components, I've set up a little demo with create-react-app on Codesandbox.io:
https://codesandbox.io/s/adevinta-sui-0z6qj
So far, it is only supposed to show a couple of action buttons from the package @s-ui/react-atom-action-button.
I'm having trouble integrating the Sass theme in my main stylesheet. I did it like this:
styles.scss
@import '~@s-ui/theme/lib/index';
@import '~@s-ui/react-atom-action-button/lib/index';
.App {
font-family: sans-serif;
text-align: center;
}
When create-react-app tries to compile the stylesheet, it throws this error:
I've checked the code in node_modules, lib/utils is indeed a directory.
Steps to reproduce
Expected behaviour
I expect the import of the Sass theme and the ActionButton atom to work properly, so that the browser preview window shows the buttons.
Screenshots
See above
Environment / Context
Additional info
Using latest version of node-sass, 4.14.1. My first guess was this may be a compatibility issue with Sass, but version 3 throws the same error.
As you can see in this screenshot, the space between the arrow and tags is not following paper instructions: https://paper.dropbox.com/doc/SUI-Select-field--AdFfGox5wIQYtCb3dXIPPl1nAg-OrlQjuARbK4ZoPdMcSf7p#:uid=941948137847171033783004&h2=Visual
I need to specify a rel different to noopener
for a link with a href=mailto
, this is because target=_blank
in combination with rel=noopener
and href=mailto
doesn't work on Android browsers, it opens an empty tab instead of the email app
I found that the rel is hardcoded here
Is it possible to update the button to set a custom rel?
We have seen an error on using sui-atom-button in link mode with fullWidth enabled. The error is only show on build version (not linking) and once we use prop link and fullWidth together.
The error is that react says that we are passing a fullWidth property to a DOM element . In fact, we are passing it as we have a default linkFactory on our Button.js file that does a {...rest} passing the whole props to the tag.
This is the prop to be changed: https://github.com/SUI-Components/sui-components/blob/master/components/modal/basic/src/index.js#L145
Describe the bug
Navigating with the arrow keys through the items of a select, when we reach the second item, the select closes unexpectedly
Steps to reproduce
Expected behaviour
We need to be able to navigate through the select items using the arrow keys on the keyboard
Environment / Context
Additional info
The error can be identified in the next line of code, by seeing how from the second time we click on the down arrow key, the reference refsMoleculeSelectOptions.current
includes the items correctly, but when mapped, it returns a null
for each item
This component is huge and only hasa few Sass variables to fit too many scenarios.
The main issue I'm having is implementing the type='checkbox'
- Is tightly coupled to its other input types: 'radio', 'whatever..' regarding layout position, paddings, line-height, etc.. so it doesn't play well with its sibling SuiAtomLabel
component.
Proposal:
Should we consider splitting this component into at least 3 others:
If we do so well be able to create a better and more consistent Molecules to compose Labels and Inputs
Looking forward to get your feedback!
Describe the bug
The expected behavior of the Molecule/Select
component is to open the options when clicking the box. It doesn't happen in Firefox, it only opens the options when clicking the down arrow ⬇️ .
Steps to reproduce
Expected behaviour
When clicking the box, the dropdown should be opened as it happens in Chrome
Environment / Context
MoleculeDropdownList can have size prop and MoleculeSelect support it but only works if you set it as a single selection. It does not work for multi selection.
When the readOnly prop is sent the atom/input doesn't set a readOnly prop instead it set the disabled one. Is this the expected behavior?
disabled={disabled || readOnly}
Hi mates, since here in Schisbsted Spain we are migrating to a new advertising platform (AppNexus) it's clear that this component https://github.com/SUI-Components/sui-components/tree/master/components/ad/l makes no sense. Should we deprecate it or even develop it in order to make it "AppNexus compliant"?
Based on https://github.com/buildo/react-cookie-banner but simplified and without external dependencies.
Since we need to include html markup such as links in the molecule/notification content, we decided to move from "text" to "children" prop in this PR https://github.schibsted.io/scmspain/frontend-mt--lib-motor/pull/365
That means we should remove "text" prop in the next major release, delete .sui-MoleculeNotification-text
classname, and refactor innerWrapperClassName
func.
A solution is to set the default container as window instead of document.body
const AtomBackToTop = ({..., refContainer = window})
Description
AtomPopover
& AtomTooltip
are not working when any other component using the new React Context API inside is being rendered in the content
prop.
For example, if you use an AtomPopover
and you also set the content
prop (https://github.com/SUI-Components/sui-components/blob/master/components/atom/popover/src/index.js#L63) using a component that's wrapped by the SUIContext
(https://github.com/SUI-Components/sui/blob/master/packages/sui-react-context/src/index.js), your context props will be undefined
.
Posible solution
It seems that the 3rd party library (reactstrap
at version 6.3.0) we use for tooltips and popovers makes our components context is lost when used as its children prop. However the same library at 8.2.0 version works fine.
The Sui-Title component has a fixed class declaration and IMHO it should be composed via its className
props value. Like:
<h1 className={`${className}-title`}>{title}</h1>
If we do so we'll be able to re-use the same component multiple times in the same page without affecting one each other.
When a button is disabled, we expect to avoid following the link if the button is of link type. Instead of this, even when the layout is disabled, it still is a functional link.
As stated in Accesibility and inclusion guidelines, in its first rule: Every interactive element should be focusable.
sui-atom-input
component has the pseudoClass :focus
with all visuals disabled:.sui-AtomInput-input[type='radio']:focus,
.sui-AtomInput-input[type='checkbox']:focus {
border: 0;
box-shadow: none;
outline: 0 none;
}
Users are unable no navigate through form elements using tabIndex
due to this lack of visual feedback (functionality is not affected)
type=text
form:.sui-AtomInput-input:focus {
border: 1px solid #30832f;
box-shadow: 0 0 3px 0 #2b91c1;
outline: 0 none;
}
Thanks
Looks like something has been broken.
We need the alignment of the button to be independent of the alignment of the text.
It may be a good time to define 2 props to align both the text and the button in the component and not by inheritance.
<div style={{backgroundColor: '#fff', fontSize: 14, padding: 16, textAlign: 'right'}}>
<MoleculeCollapsible icon={icon} showText={showText} hideText={hideText} >
<Text/>
</MoleculeCollapsible>
</div>
Is your iteration request related to a problem?
Nowadays, the AtomTooltip
displays only in black color and as a developer I can't use the theme colors.
Describe the solution you'd like
Following the same as AtomButton
is developed, I'll create a new property color
to use one of the theme colors (primary, accent, neutral, success, alert and error).
Function prop onAnimationEnd is not being triggered
Right now we're applying a justify-content
property (https://github.com/SUI-Components/sui-components/blob/master/components/atom/button/src/index.scss#L177) to a Atom Button modifier (full width) because it was inherited from the "legacy" mixin that was also using a display: flex
property: https://github.com/SUI-Components/sui-theme/blob/master/src/components/_button.scss#L20. However at this moment the Atom Button styles define the component display behaviour as inline-block
, so the justify-content
I'm pretty sure it's not needed anymore, it's used text-align
instead.
Fort sure, it should be properly tested before doing this change.
The motivation of this Issue is allow rendering inline labels specially useful when input element is a checkbox. Currently we're creating lots of layout containers to avoid this behaviour.
The solution might be implementing a new prop as inline
containing 2 possible string values: left
or right
. If not present defaulted behaviour will be rendered so current component API won't be affected.
Describe the bug
href
prop of <Link>
should not receive a boolean value.
Steps to reproduce
Use a <Button >
with next props:
<Button link href="" disabled>Hello</Button>
View the console in the demo: https://codesandbox.io/s/exciting-leavitt-ww5oo
Expected behaviour
Shouldn't show warnings by console
**Bug found
https://github.com/SUI-Components/sui-components/blob/master/components/atom/button/src/Button.js#L20
I'm getting these errors when starting sui-components
w/ npm start
It look likes it has something to do w/ motos & coches theme
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/spinner/themes/motos.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/rating/icons/themes/motos.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/modal/gallery/themes/motos.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/modal/gallery/themes/coches.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/card/profile/themes/motos.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/card/profile/themes/coches.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/tag/themes/motos.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/tag/themes/coches.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/rating/icons/themes/coches.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/spinner/themes/coches.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/panel/themes/motos.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/panel/themes/coches.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/button/themes/motos.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/button/themes/coches.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/badge/themes/motos.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/badge/themes/coches.scss
Module build failed:
@function image-url($image, $url: $url-statics + 'images/') {
^
Undefined variable: "$url-statics".
in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
@ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
@ ./src/components/demo/fetch-styles.js
@ ./src/components/demo/index.js
@ ./src/routes.js
@ ./src/components/root/index.js
@ ./src/app.js
@ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
Current version in surge throws error:
Uncaught (in promise) TypeError: Cannot read property 'contextTypes' of undefined
https://sui-components.now.sh/workbench/list/masonry/demo does not work
Your playground has an error, please check:
ReferenceError: ListMasonry is not defined
Changes made by @davecarter here https://github.com/SUI-Components/sui-modal/pull/13/commits/3f165ab67ecf835f7cd1e39ffd188f0371de715e has to be migrated to the following repo https://github.com/SUI-Components/sui-components/tree/master/components/modal/basic.
Hi guys, terrific job 👍
I think It would be awesome if FormTextInput
provides some keyBoard Events like onKeyPress
. The only event provided so far is onChange
.
Or maybe a way to support all possible events supported by the native input.
Describe the bug
When we use the molecule/photoUploader
component inside a form and click on File Upload button, this fire a onSubmit
form action.
Steps to reproduce
molecule/photoUploader
component inside formonSubmit
form event has been firedExpected behaviour
When we click on File Upload button, We expect to not fire the onSubmit form action.
Environment / Context
Is your iteration request related to a problem?
As a developer, I would like that MoleculePhotoUploader could return the fileName when a new file is added.
Describe the solution you'd like
Currently, the MoleculePhotoUploader is building an object without the fileName and could be usefull to have it outside the component.
My solution is to expose outside the entire file to allow developers read file data (i.e. fileName, file size...).
Additional context
// Current object
[
{
blob: object,
url: string,
isNew: boolean,
isModified: boolean,
hasErrors: boolean
},
// ...
]
// New object
[
{
blob: object,
url: string,
isNew: boolean,
isModified: boolean,
hasErrors: boolean,
file: object
},
// ...
]
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.