profile
viewpoint

yuriybelike/chakra-ui 0

⚡️Simple, Modular & Accessible UI Components for your React Applications

startedremorses/storyboards

started time in 3 days

issue commentNDISCOVER/Exo-2.0

Is supporting CSS `font-variant-numeric: tabular-nums;` feasible?

You're right, I was using Google Fonts which appears to not have support for this ATM. Thanks!

yuriybelike

comment created time in 5 days

issue openedNDISCOVER/Exo-2.0

Is supporting CSS `font-variant-numeric: tabular-nums;` feasible?

I'd like to have the option to align the numbers by making them all have the same width.

Is is feasible/technically possible to add this feature to the font?

https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric

created time in 5 days

startedreact-cosmos/react-cosmos

started time in 7 days

issue openedsystem-ui/theme-ui

Type [...] is missing the following properties from type Pick<ButtonHTMLAttributes,[...]: css, sx TS2739

Describe the bug When consuming this component:

type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">;

const Button = React.forwardRef<HTMLButtonElement, Props>((props) => {
  return <button {...props} />
});

resulting in type (as reported by VS Code on hover & by inspecting the compiled d.ts):

const Button: React.ForwardRefExoticComponent<
  Pick<
    ButtonHTMLAttributes<HTMLButtonElement>,
    | "autoFocus"
    | "disabled"
    | "form"
    | "formAction"
    | "formEncType"
    | "formMethod"
    | ... 259 more ...
    | "sx"
  > &
    React.RefAttributes<...>
>;

from another Theme UI-agnostic project it encounters the following type error:

Type '{ children: string; type: "submit"; }' is missing the following properties from type 'Pick<ButtonHTMLAttributes<HTMLButtonElement>, "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | ... 258 more ... | "sx">': css, sx TS2739

To Reproduce

  1. Clone https://github.com/yuriybelike/repro__theme-ui__css_sx_props
  2. On components-library, run npm i
  3. On consumer, run npm i
  4. On consumer – in order to see the TypeScript error – either:
    • open "src/App.tsx" on VS Code
    • run npm run start

Expected behavior

Consumer isn't affected by Theme UI related types on primitive JSX elements like <button>

Additional context

  • I was unable to reproduce the issue when removing Omit<> or forwardRef()
  • I understand this is partially TypeScript's issue, as it converts Omit<> into Pick<>
  • I've used tsdx for the library scaffolding, but I don't think it is related, as my original project is using create-react-library
  • On my original project the issue was still reproducible on TypeScript v3.8.3

Workaround

You can just omit both props like

type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className" | "css" | "sx">;

but I find it far from ideal having to account for Theme UI specific props on such a primitive type as it is ButtonHTMLAttributes

created time in 8 days

push eventyuriybelike/repro__theme-ui__css_sx_props

Yuriy

commit sha 5641579db2b7678aab3836b56665e8c00da693b0

type submit isn't relevant

view details

push time in 8 days

push eventyuriybelike/repro__theme-ui__css_sx_props

Yuriy

commit sha 39cfbdd629ca73e35ccc7fbfe55aad1998e17ccb

Theme UI pragma isn't relevant either

view details

push time in 8 days

push eventyuriybelike/repro__theme-ui__css_sx_props

Yuriy

commit sha 11fb9d7052b83e8e4cdc5dad6e42b4a5f49ff221

Custom props aren't needed & same with `: Props` type

view details

push time in 8 days

create barnchyuriybelike/repro__theme-ui__css_sx_props

branch : master

created branch time in 8 days

created repositoryyuriybelike/repro__theme-ui__css_sx_props

created time in 8 days

startedohansemmanuel/react-hooks-cheatsheet

started time in 25 days

fork yuriybelike/mdx

JSX in Markdown for ambitious projects

https://mdxjs.com

fork in a month

startedFormidableLabs/victory

started time in a month

pull request commentpopperjs/react-popper

feat: usePopper Hook

Is the demo's

// FIXME: we probably need some logic in the hook to detect when the provided elements are null

still applicable? I'm having some issues setting referenceElement to null in my code

FezVrasta

comment created time in a month

startedreact-spring/zustand

started time in 2 months

startedlewish/asciiflow2

started time in 2 months

startedatolye15/cra-recipe

started time in 2 months

issue openedDefinitelyTyped/DefinitelyTyped

[@types/theme-ui] SxStyleProp & Emotion's label

  • [x] I tried using the @types/theme-ui package and had problems.
  • [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
  • [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
  • [x] Mention the authors (see Definitions by: in index.d.ts) so they can respond.
    • Authors: @erikdstock @ifiokjr @sbardian @pomber @wKovacs64 @prateekkathal @hasparus @leocantthinkfoaname

I discovered that I can use Emotion's label property on sx:

/** @jsx jsx */
import { jsx } from "theme-ui";
import React from "react";

const Paragraph = ({
  children
}: {
  children: React.ReactNode;
}): JSX.Element => {
  return <p sx={{ label: "my-paragraph" }}>{children}</p>;
};

export { Paragraph };

It doesn't compile, but I can see it working as expected on Storybook (which ignores type errors).

TS2322: Type 'string' is not assignable to type 'SystemStyleObject'. Version: typescript 3.8.3

TS2322: Type '{ readonly label: "my-paragraph"; }' is not assignable to type 'SystemCssProperties | CSSPseudoSelectorProps | CSSSelectorObject | VariantProperty | UseThemeFunction | null | undefined'. Type '{ readonly label: "my-paragraph"; }' is not assignable to type 'CSSSelectorObject'. Property 'label' is incompatible with index signature. Type '"my-paragraph"' is not assignable to type 'SystemStyleObject'.

image

created time in 2 months

startedpopperjs/popper-core

started time in 2 months

startedpopperjs/react-popper

started time in 2 months

push eventyuriybelike/sb

yuriybelike

commit sha 766e1e743dbe673fbe28cf2fd5d84784505e3560

Add install step???

view details

push time in 2 months

push eventyuriybelike/sb

yuriybelike

commit sha ad7624f9eabadf52e25c8d8df51e4a9d8f6c9115

No token or yes token?!

view details

push time in 2 months

push eventyuriybelike/sb

yuriybelike

commit sha 85ba319fe9847babb88c2477ed7e3a2e9f248950

Attempt to fix Chromatic workflow

view details

push time in 2 months

push eventyuriybelike/sb

yuriybelike

commit sha 23637b89094a9a73fa35b08b09eba637dddea3a0

Rename blank.yml to chromatic.yml

view details

push time in 2 months

push eventyuriybelike/sb

yuriybelike

commit sha 2cee521281d74247c8cdebd9ce2ec43fbb03f9ac

Add Chromatic workflow

view details

push time in 2 months

PublicEvent

push eventyuriybelike/sb

Yuriy

commit sha be75ceaec37c0d9c6539ad96b40c9064f351cffc

Add visual change

view details

push time in 2 months

push eventyuriybelike/sb

Yuriy

commit sha 0edb8e4c8b78bb40e74b68feedfc019982c47cec

Add DOM-only change

view details

push time in 2 months

push eventyuriybelike/sb

Yuriy

commit sha 4f3cb2c5ff5fbd6d06fce042defca87c046ca03a

yarn add --dev chromatic

view details

Yuriy

commit sha feaf870f6c45c0e14f51b44fd6c237bf23aa772c

Update Button style

view details

push time in 2 months

push eventyuriybelike/sb

Yuriy

commit sha 54b94ef03b7251d1aa3a4faa09b4f11606ff34aa

Gitignore "storybook-static"

view details

push time in 2 months

startedurish/typewiz

started time in 2 months

startedangarvil-belike/scripetos

started time in 2 months

fork yuriybelike/chakra-ui

⚡️Simple, Modular & Accessible UI Components for your React Applications

https://chakra-ui.com

fork in 2 months

issue openedsystem-ui/theme-ui

Documented unreleased features in live docs

Describe the bug Some features are already documented in the live docs, but not present in the latest release.

To Reproduce Opacities example:

  1. Go to https://theme-ui.com/theme-spec#theme-scales
  2. Realize that you can use "opacities" theme property
  3. Use it in sx prop
  4. See that it doesn't work
  5. Realize that it is a feature added 2 days ago

Expected behavior Unreleased features aren't documented the same way as released ones (for example with a "Unreleased" badge, a version badge or the docs have a selector in order to choose a version a la https://angular.io/docs)

created time in 2 months

startedchakra-ui/chakra-ui

started time in 2 months

startedbenawad/destiny

started time in 2 months

startedafontcu/awesome-learning

started time in 3 months

starteddahlbyk/posh-git

started time in 3 months

more