smooth-code / smooth-ui Goto Github PK

🐛 Bug Report

When using @smooth-ui/core-sc with TypeScript (v 9.0.1), one cannot add an offset to a Col in a Row in a Grid.

To Reproduce

Steps to reproduce the behavior:

• Create a TypeScript project with TSLint
• Install @smooth-ui/core-sc version 9.0.1
• Create a simple component with Grid, Row, Col
• Try to set property oxs or related to any value
• TSLint highlights a TS2322 error.

Expected behavior

According to documentation an JavaScript implementation, Col should have offset properties.

Possible fix

The JS properties are defined here:

The TS definition of ColProps is here:

Resizing textarea is a pain! https://news.ycombinator.com/item?id=17173476

Hello, It seems that overriding fontFamily's theme doesn't change the some of components font family for me.

const customTheme = {
  ...theme,
  fontFamily: 'Consolas',
}

<ThemeProvider theme={customTheme}>
      <React.Fragment>
        <GlobalStyle />
        <Typography variant="h1">I'm consolas</Typography>
        <Typography as="span">I'm font set in global</Typography>
        <Button>Still font set in global</Button>
      </React.Fragment>
</ThemeProvider>

I'm working on making my site 100% accessible for screen readers.

How can I pass aria-* property to elements like input or button ?

When adding a new color to a theme, it's not possible to use it in props like backgroundColor. Using it with the variant prop or inside the th() function with styled seems to work fine.

Did I hit a bug or is there a reason for this behavior?

Example: https://codesandbox.io/s/ql452yrz7j

Hi guys,

I'm currently actively looking into different React UI frameworks and I love the common pattern between Smooth UI, Reakit and Rebass of using primitive components and "systems".
My problem is that I'm having issues to choose which one to use!

From what I see you solved some issues from Styled-System or chose different path (for example using an object for media queries instead of an array). I think that would be great to have this history written down somewhere.
I read the code and I think documenting it could also be really helpful for users to do their choice (for example this file is confusing to me but I'm sure there is a good reason for it).

That would be really helpful to have the short story behind the different design decisions done in this UI library!

Thanks!

Today, utilities are not documented, let's do it.

Styled Components v4 will support as, Smooth UI is already supporting component. To be aligned, we will deprecate component in favor of as.

styled-components/styled-components#1962

💥 Regression Report

Just migrated to 8.0 and see that values for padding (p, px, py ...) and margin (m, mx, my) of value 1 have value of 64px where value of 2 has 16px.

Examples:

pb: 1

pb: 2

Last working version

7.x

Stopped working in version: 8.0.0

To Reproduce

Add padding or margin with value of 1

Expected behavior

I would expect that p: 1 has a smaller value than p: 2

Actually modals are not accessible for severals reasons (see #25 and #26).

Reach UI makes a good work on a11y exploration, see https://ui.reach.tech/dialog.

Tried to open documentation with Chrome: https://smooth-ui.smooth-code.com/docs-components-textarea for example crashes, such as "typography" and "custom component" pages.

Result:

You have had styled-components, but I am confused why the classnames is be used?

🐛 Bug Report

Hello, thanks for developing Smooth UI! 👋

I am getting started using emotion + @smooth-ui/core-em + TypeScript, and I'm encountering this error:

ERROR in /path/to/node_modules/@smooth-ui/core-em/dist/index.d.ts(4,35):
TS2307: Cannot find module 'styled-components'.

To Reproduce

Steps to reproduce the behavior:

npm install @smooth-ui/core-em @emotion/core @emotion/styled emotion-theming typescript @types/react
echo "import { Button } from '@smooth-ui/core-em';" > index.ts
./node_modules/.bin/tsc index.ts

Output:

node_modules/@smooth-ui/core-em/dist/index.d.ts:4:35 - error TS2307: Cannot find module 'styled-components'.

4 import * as styledComponents from 'styled-components'
                                    ~~~~~~~~~~~~~~~~~~~


Found 1 error.

Expected behavior

No TypeScript error raised.

Link to repl or repo (highly encouraged)

(I hope the three repro steps above are enough. I can create a repo if needed.)

Run npx envinfo --system --binaries --npmPackages @smooth-ui/core-sc,@smooth-ui/core-em,styled-components,@emotion/core,@emotion/styled,emotion-theming --markdown --clipboard

Paste the results here:

npx: installed 1 in 1.82s

*** Clipboard option removed - use clipboardy or clipboard-cli directly ***


## System:
 - OS: macOS 10.14.2
 - CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
 - Memory: 714.46 MB / 16.00 GB
 - Shell: 2.7.1 - /usr/local/bin/fish
## Binaries:
 - Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
 - Yarn: 1.12.3 - /usr/local/bin/yarn
 - npm: 6.6.0 - ~/.nvm/versions/node/v10.13.0/bin/npm
## npmPackages:
 - @emotion/core: ^10.0.6 => 10.0.6
 - @emotion/styled: ^10.0.6 => 10.0.6
 - @smooth-ui/core-em: ^8.1.0 => 8.1.0
 - emotion-theming: ^10.0.6 => 10.0.6

As pointed in #72, we should document the browser compatibility on the website.

Actually, we rely on browsers supported by Styled Components or browsers supported by emotion (probably the same).

This issue consist by adding a new FAQ section on the website, same as Styled Components.

I seem to be unable to do the following:

gutter={{ xs: 10, lg: 20 }}

This would be useful when making responsive layouts, where I wouldn't want a gutter 40px total (on mobile for example). I haven't been able to dig through the code yet, but would this be possible to add?

Hello, I was wondering if you could clarify something about the documentation:

The way I got the global style to work correctly is by invoking globalStyle first:

injectGlobal(globalStyle())

Is this a mistake in the doc or is there something I a missing?

In any case, it seems that injectGlobal will be deprecated in styled-components v4:
https://www.styled-components.com/docs/api#injectglobal

The actual Select component accepts an object instead of accepting children.

Actual:

<Select option={['option1', 'option2']} />

Expected:

<Select>
  <Option value="option1">Option 1</Option>
  <Option value="option2">Option 2</Option>
</Select>

So, if I use <Select></Select>:

I get:

But if I use <Select options={[]}></Select> it works.

However, I think it's a bug.

Hi!

I've already find out how to handle it by reading your src code, so my issue is more like an advise than an issue itself.

Pls write somewhere that you're handling the refs with baseRef - as a styled-components user, I was trying to pass the innerRef prop.

Thanks!

Unless I've missed it somewhere, the documentation does not make it clear what browsers are fully supported by Smooth UI. If this exists in the current docs, can you please point me in the right direction? Thanks!

Hi there, awesome project.

I have a question. I am trying to put this in primary variant.

primary: linear-gradient(to right, #C06C84, #6C5B7B, #355C7D);

which seems not working. Maybe because it's using backgroundColor instead of background.

Recently in a discussion on Twitter, I discovered a new media query. Tweet from Luís Fetzner, Introduction to reduced motion media query.

I think removing transitions for users asking for it is very important. Time to do it!

https://smooth-ui.smooth-code.com/docs-components-typography

Under headings: "Six size of headings are available."

The 1-6 in h1-h6 are not sizes. They have nothing whatsoever to do with how the text is styled in the browser. That is the remit of CSS.

1-6 have to do with nesting. The top-level heading must be h1. Subsections of that article would use h2. If a subsection is further divided, those sub-subsections would use h3. Unless one is writing an academic paper, h4 to h6 will almost never be used.

This is an accessibility issue. For more than two decades people in the accessibility community have been patiently explaining that these headings are not about size, with little success. As smooth-ui appears to care very much about accessibility, perhaps you could update this documentation to reflect the true purpose of the h1 to h6 elements. All sizing should be by CSS, not by choice of HTML element. (An exception is small, which can be used to mean "fine print".)

💬 Questions and Help

I'm using smooth ui modal and get following error in the console whenever i open a modal in my app

React does not recognize the `__scTheme` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `__sctheme` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

What am I doing wrong 🤔?

Using emotion, .withComponent does not work well. Probably related to #29. The style is lost.

Modal dialog on mounting is setting overflow:hidden directly on body, and remove it on unmount.
Don't do that :)

Problems:

1. What if you have two modals? It will "unlock" scroll after the first unmount.
2. It will hide scroll bar on windows machines, casing content to "jump"
3. It does not work for mobile safari at all 😺

https://github.com/theKashey/react-scroll-locky will do the job

Since emotion css is faster than styled-components, I think you can get some performance by just switching to react-emotion.
If I am wrong please correct me.

Example on (codesandbox) https://codesandbox.io/s/6jk1nq0x8z. If try to resize the window col's won't fit as expected (On 'sm' breakpoint 2 rows, on 'md' 1 row).

Any "focused task" should trap focus inside, and not let it get out.

Right now:

1. It does not set a focus on modal content, keeping it on the button one clicked to open a modal
2. Does not prevent leaving modal. "tabbing-out" from it.
3. Lucky we - it closes modal on any action "outside"

https://github.com/theKashey/react-focus-lock will do the job :)

🐛 Bug Report

The dist has no exported member ThemeProvider

To Reproduce

Try import { ThemeProvider } from "@smooth-ui/core-sc"; in a .tsx file

Expected behavior

Typings for ThemeProvider to exist! 😄

Hey, thank you for this awesome design system.
I'm using styled-components in my app and just added the component to the top of my component tree. When I try to render any smooth-ui component, it fails with the error TypeError: props.theme[name] is not a function.
I tried to prevent styled components from passing the prop to the components but the problem still persisted.

import { Input as UntehmedInput } from 'smooth-ui';
const Input = styled(({ theme, ...rest }) => <UnthemedInput {...rest} />)``;

I'm using SSR styled-components with Next.js if this information helps. Below is the stacktrace.

TypeError: props.theme[name] is not a function
    at Server\src\node_modules\smooth-ui\dist\smooth-ui.cjs.js:248:29
    at Server\src\node_modules\styled-components\dist\styled-components.cjs.js:207:25
    at Array.reduce (<anonymous>)
    at flatten (Server\src\node_modules\styled-components\dist\styled-components.cjs.js:185:17)
    at ComponentStyle.generateAndInjectStyles (Server\src\node_modules\styled-components\dist\styled-components.cjs.js:2083:21)
    at StyledComponent.generateAndInjectStyles (Server\src\node_modules\styled-components\dist\styled-components.cjs.js:1767:38)
    at Server\src\node_modules\styled-components\dist\styled-components.cjs.js:1799:41
    at subscribe (Server\src\node_modules\styled-components\dist\styled-components.cjs.js:1525:5)
    at StyledComponent.componentWillMount (Server\src\node_modules\styled-components\dist\styled-components.cjs.js:1795:28)
    at processChild (Server\node_modules\react-dom\cjs\react-dom-server.node.development.js:2170:16)

💬 Questions and Help

In default theme I can add styling for inputs. I would be great if the styles applied to inputs also be applied to select items. Is there any option for setting background color for select in theme.js or I need to set it by the class names in global stylesheet ?

Would you be interested in having the Alert component updated to be dismissible?

If so, and I were to submit a PR, how would you like me to tackle it? My suggestion is:

• Update the component to accept a func prop called onDismiss.
• If this prop exists, an x would appear, on the right side of the box (within the box though).
• When clicked, the onDismiss prop would be called.

I'm happy to take on any advice.

Actually .extend doesn't have priority over other styles. It should have the same behaviour as with styled-components.

.x.x.x {
  /* Extended style */
}

hey
i copy this code from doc to my component

import {
    Box,
    Button,
    Checkbox,
    ControlFeedback,
    FormCheck,
    FormCheckLabel,
    FormGroup,
    Input,
    Label,
    Radio,
    RadioGroup,
    Select,
    Textarea,
    Typography
} from "@smooth-ui/core-sc";


<Textarea size="lg" placeholder="Large" />

and this return an input

<input class="sui-input kgmrda-0 fcwcRG" placeholder="Large">

how can i fix this?

First, thanks for the awesome style library!

I'd like to report an issue I encountered with this demo where Smooth UI is used with React final form. The issue is that the input fields already come with an error state and are displayed as red.

Tried to debug the issue on my own, but couldn't figure it out on my own.

Any thought on adding a slider component ? something similar to https://material-ui.com/lab/slider/

I'd be happy to contribute if there is a place for this type of component :)

Styled-components recently released the beta of version 4. They deprecated injectGlobal in the process. This also requires updating React and React-DOM dependencies to a version >=16.3. https://www.styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v4

Do TypeScript definitions exist for Smooth UI?

Why isn't smooth-ui using styled-system already? It seems like the effort is duplicated right now.
On top of that, styled-system comes with a pretty good theme specification.

Btw, I think you've done an amazing job so far with smooth-ui!

When I use the following Breakpoint

<Breakpoint down="sm">
Hello
</Breakpoint>

I get the following Warning in my console:

Warning: Failed prop type: Invalid prop `down` of value `sm` supplied to `createComponent__StyledComponent`, expected one of ["xs","md","lg","xl"].
...

Your three issue templates don't cover all the types of issues. For example, I want to raise an issue about a matter of accessibility and your documentation. There is no obvious way to do that, so I am forced to go outside your templates, which means that my issue may be closed without comment. It seems a bit Kafkaesque. Surely, there are more than three types of issues.

I'm trying to add a custom prop to Box (flexGrow). I would like flexGrow to inherit the benefits that other props have in smooth-ui system (in this case responsive behavior).
In styled system you would use https://github.com/jxnblk/styled-system/blob/master/docs/api.md#customize
Is there a way to extend Box to support the same?

Thanks!

Hello,

I updated the version of the package that shows the Form elements and it seems like there input overflow. Seems like they are longer than all the other elements and they overflow the parent

https://codesandbox.io/s/jjzvqzq31w

Am I doing something wrong here or is this a bug?

Website shows white page, and cosole says:
Uncaught SyntaxError: Unexpected token <
https://smooth-ui.smooth-code.com/mwg-internal/de5fs23hu73ds/progress?id=SUWYxL1NoKxQm3IssUgaeOHW2bppFpfdp1bONfXlbRw,

People doesn't know how to contribute on the project, see #73

I am trying to have a modal default to open but allow the user to dismiss the modal. When I use <Modal opened={true} the onClose onToggle(false) function does not close the modal. Passing defaultToggled with Toggler doesn't seem to effect the modal being opened. I was hoping I could pass defaultToggled={true} but that doesn't seem to be allowed.
Great project!

Without talking accessibility issues,
It is unclear whether the label (‘ON’ for example) is the current state, or the action.

The solution is to place the label outside the switch.