Ant-design: [email protected]

Updated.

Updated.

https://github.com/ant-design/ant-design/issues/5140 can be a editable playground.

Maybe a bigger default font size, following our designer's plan.

Refactor cloneElement to context?

1. Menu
2. Tabs

reopen #1473 ?

I still hope for more robust built-in i18n support https://github.com/ant-design/ant-design/issues/5554#issuecomment-290372828

Improve and perfect Component ts definition`s comment?

What about tools of 2->3, or even 1->3?

@yesmeck this https://github.com/ant-design/ant-design/issues/5570#issuecomment-290622803 means that we need to give up Tabs.TabPane[key] and Menu.Item[key]...

I still hope for more robust built-in i18n support #5554 (comment)

@plandem I am evaluating, let's keep discussing in that issue.

Improve and perfect Component ts definition`s comment?

@infeng this is why I want to re-write demo in TypeScript, so that we can notice issues in definition https://github.com/ant-design/ant-design/issues/5390

What about tools of 2->3, or even 1->3?

Yep, we still need to provide tools like https://github.com/ant-design/ant-design/issues/3759#issuecomment-272353773 , though it is not a perfect solution

@sorrycc what do you think about webpack@2?

Any progress about rich text editor? #1083

https://github.com/MicheleBertoli/css-in-js

Editor may not in our recently plan for now.

ThemeProvider should be discussed in https://github.com/ant-design/ant-design/issues/5656

But I am not sure if we have time to introduce it into [email protected].

Add new feature for Chart
Such as Pie,hisgram etc.

Add new feature for Chart
I'm against it. It's a different class of components.

If you want charts from same team, you can try this one:
https://antv.alipay.com/index.html

The one component missing from antd that I find myself implementing again and again in all projects is an off-screen sidebar.

react-sidebar is a nice component, but it breaks everything having to do with scrolling on the page, so it is pretty useless. An integrated sidebar, preferrably with swipe support on touch devices would be my biggest wish for 3.0!

@JesperWe I think what you need is Layout.Sider

@benjycui Actually I haven't looked at the Sider for a few months, I see it has a custom trigger since 2.6, which makes it more useful than before. However it still squeezes the content column to become narrow when it appears, so it is not usable as a sidebar.

But it could be extended to work like a sidebar with some new props:

• cover: true to make it appear on top of the page content instead of squeezing it.
• mask: true to show a mask over the not-covered part of the page when Sider is on top.
• maskCloseable: true to make it collapse when clicked outside.

and finally in a dream world

• swipeable: true to better support touch devices (but since you are probably thinking of antd as a desktop thing, this could be achieved outside of antd too).

@benjycui @JesperWe In the Layout.Sider demo, the content get squeezed (which is bad) when Sider opens in mobile.

Is it possible to push the content to the right as well? Or lay the Sider on top of content?

Yet another breaking change I want to do in next major version, and want you to provide advice: https://github.com/ant-design/ant-design/issues/6139

@JesperWe so, what you need is some thing like Drawer.

And we should not discuss details of features here, just open a new issue to discuss.

@benjycui Ok so I rephrase my 3.0 dream :-) : Something like Drawer integrated into antd (Because adding antd-mobile/Drawer makes the bundle much bigger and adds lots of unwanted react-native stuff)

Compare results and consider rollup as library packer.

Here are some thoughts:
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

Compare results and consider rollup as library packer.

We can do this in 2.x, for developers will not feel any changes.

And you can open a new issue to discuss this idea @plandem

Try to replace less with https://github.com/styled-components/styled-components

About styled-components, i have too problems:

• the autoprefixer library may not very reliable compare to postcss https://github.com/styled-components/styled-components/blob/master/src/utils/autoprefix.js#L6. Or we can say, once pick css-in-js, we will lose convenience of post-css plugin system, such as px-to-rem?
• we have to remain whole current css classname for compatibility, while styled-components will generated it's own classname for style, it will be redundancy and hard to maintain?

That is why try existed, compatibility is a big problem we have to consider.

we have to remain whole current css classname for compatibility, while styled-components will generated it's own classname for style, it will be redundancy and hard to maintain?

Actually, this is not an issue. Current CSS classnames are not just for compatibility, but selectors which we can use in test(e.g. enzyme). So, we must keep them.

@paranoidjk @afc163 @benjycui

Hiya, I'm one of the styled-components core-contributors and found this thread due to an opened issue on our repo (see above), that informed me that this lib doesn't support SC. By chance I then found this conversation :wink: – Ok, context aside now

the autoprefixer library may not very reliable compare to postcss

We've carefully chosen stylis and are closely working together with @thysultan, who develops it. We wouldn't have chosen it, if it wasn't a worthy replacement of PostCSS and the few issues that it had (a couple of missing prefixes in v3), were resolved very quickly. The v2 itself has been in the making for a few months btw, and is now finally out. We can definitely vouch on that part. Let this implementation detail be our worry, if you'd go with SC :smile:

The file you're pointing to is not in use and was deleted now btw, and is part of the old auto-prefixing with inline-style-prefixer. But even that is (and was for us) a very, very, very trusted solution through out the css-in-js community by @rofrischmann.

Or we can say, once pick css-in-js, we will lose convenience of post-css plugin system, such as px-to-rem?

Since in interpolations in our tagged template literals you can just use any JS, simple functions can replace all that stuff. We actually have a separate project called "polished" that is like the lodash for CSS-in-JS and comes with all mixins (i.e. helper functions) that you'd expect from SASS/LESS and the likes: https://polished.js.org

(We indeed neither use PostCSS anymore as mentioned above, nor have we supported its plugins btw)

we have to remain whole current css classname for compatibility, while styled-components will generated it's own classname for style, it will be redundancy and hard to maintain?

If you need to attach custom classnames, you can easily use our .attrs method, which allows you to attach additional props to a component. For example:

const ButtonLink = styled.a.attrs({
  className: 'your-custom-extra-classname'
})`
   ... // css and stuff
`

Some more goodies and features:

• You write just CSS (as you might already know), and the only additions are ampersands and nestedness
• There's no styles+component mapping
• Everything's a component
• You can write mixins/shared styles with our css helper

I'm here if you need more help. If you need some more info though, check out our new website :100: https://styled-components.com

@philpl @benjycui

Current CSS classnames are not just for compatibility, but selectors which we can use in test(e.g. enzyme). So, we must keep them.

Most of the class selectors in the tests look like they could be replaced with display name selectors instead. This isn't true for all tests, but it would get us most of the way there. I wouldn't mind taking this on.

One place styled-components could help is in customising the theme. It seems like it would give us more flexibility than the first approach and better optimisation than the second approach.

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

I second @philpl - PLEASE make styling a lot easier in Ant Design. Currently it's a real pain. styled-components is amazing.

I think we can solve this issue at the same time https://github.com/ant-design/ant-design/issues/4998 , if we refactor to styled-component.

P.S. This doesn't mean that styled-component can solve this issue, just because we can do this at the same time to reduce work.

Updated:

This is how I'm currently styling Ant Design in a React project. It's not the greatest, because we have to go through the _entire_ Ant Design library and style everything. I don't want to hassle with a LESS preprocessor in create-react-app, because it's kind of a pain.

// @flow

import { injectGlobal } from 'styled-components';
import Color from 'color';

/*
 * We'll start with just one theme for now. Define colors and other styles here.
 * More themes can be easily added later. Look in ./App.js to see where this
 * theme is actually used.
 */

const mainTheme = {
  primaryColor: Color('#fd3d57'),
  primaryTextColor: Color('#fff'),
};

const defaultTheme = mainTheme;

// Inject global styles - seems to be the only way to customize Ant Design
// PLEASE ADD STYLES IN ALPHABETICAL ORDER for everyone's sanity. Thanks.
injectGlobal`
  .ant-btn {
    &:hover {
      border-color: ${defaultTheme.primaryColor
        .lighten(0.2)
        .toString()} !important;
      color: ${defaultTheme.primaryColor.lighten(0.2).toString()} !important;
    }

    &:active {
      border-color: ${defaultTheme.primaryColor
        .darken(0.2)
        .toString()} !important;
      color: ${defaultTheme.primaryColor.darken(0.2).toString()} !important;
    }
  }

  .ant-btn-primary {
    background-color: ${defaultTheme.primaryColor.toString()} !important;
    border-color: ${defaultTheme.primaryColor.toString()} !important;
    color: ${defaultTheme.primaryTextColor.toString()} !important;

    &:hover {
      background-color: ${defaultTheme.primaryColor
        .lighten(0.2)
        .toString()} !important;
      border-color: ${defaultTheme.primaryColor
        .lighten(0.2)
        .toString()} !important;
      color: ${defaultTheme.primaryTextColor.toString()} !important;
    }

    &:active {
      background-color: ${defaultTheme.primaryColor
        .darken(0.2)
        .toString()} !important;
      border-color: ${defaultTheme.primaryColor
        .darken(0.2)
        .toString()} !important;
      color: ${defaultTheme.primaryTextColor.toString()} !important;
    }
  }

  .ant-btn-clicked:after {
    border: 0 solid ${defaultTheme.primaryColor.toString()} !important;
  }

  .ant-switch-checked {
    background-color: ${defaultTheme.primaryColor.toString()} !important;
    border-color: ${defaultTheme.primaryColor.toString()} !important;
  }
`;

export default defaultTheme;

If Ant Design were made compatible with styled-components, then we could just wrap the app with <ThemeProvider theme={primaryTheme}> and it would be styled accordingly.

I'd just like to throw fela by @rofrischmann in as an alternative to styled-components. Its more modular and faster. Its got a lot of features and a small footprint. Also, cloudflare decided to build their ui with it instead of styled-components.

Whatever you guys decide, I'd be really happy to see antd use some css-in-js solution instead of less.

styled-components is a better choice for building modern, modular, scalable UI components.
most important, it can make component render independently without any external css file.
that make partial importing component with minimal required styles be possible.
hope [email protected] will use it.

https://github.com/ant-design/ant-design/tree/antd-3.0

@benjycui @yesmeck @ddcat1115 @RaoHai

cc @nikogu

add #4853 ?

add #4853 ?

It's difficult, for some components use key as part of API, we cannot fix this until we rename all the API's names. e.g.

key => id
expandedKeys => expandedIds
selectedKeys => selectedIds
....

It will be a breaking change, but such kind of breaking change can be resolve by antd-codemod.

We can keep discussing in #4853

Rewrite demo in TypeScript

Will demo be Typescript only or both JS and Typescript? I hope to keep both.

https://github.com/react-bootstrap/react-overlays/issues/188

Make sure rc-trigger works with React 16.

Is styled-components or a css-in-js solution of the maintainers/collaborators choice still an option?
I would love that and would like to help with refactoring :)

Too many works to migrate our less files to styled-components, I'm afraid we won't introduce styled-components in antd 3. But, since styled-components can apply styles to antd's component without intruding antd's code, so if someone interest in using styled-components with antd, here is a example https://github.com/yesmeck/styled-antd

@codepunkt @yesmeck would love to see examples of antd with glamorous

@yesmeck @afc163 how about going JSS for CSS-in-JS?
Do you think the advantages listed here could make it more feasible than styled components?

Perhaps it's more related to tooling ecosystem, but it could be a good idea to ensure that antd 3.0 works fine with babel 7.
Especially with babel typescript built-in generation planned in 7.0.
It could greatly simplify use of antd/typescript with create-react-app

Consider dropping support for IE6-8, maybe even all versions below IE11.

It will make the css file slimmer and faster to download. React doesnt even support IE below version 9 so .clearfix, -ms-filter etc can be safely removed.

ant already only officially supports IE9+

On Thu, Oct 12, 2017 at 7:58 AM, Andreas Cederström <
[email protected]> wrote:

Consider dropping support for IE6-8, maybe even all versions below IE11.

It will make the css file slimmer and faster to download. React doesnt
even support IE below version 9 so .clearfix, -ms-filter etc can be safely
removed.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/ant-design/ant-design/issues/5570#issuecomment-336107229,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADUIEIQi6tXJB0336SQrtMrMCIHfvjNuks5srf7pgaJpZM4MuJYf
.

Ok. Check antd.css (https://cdnjs.cloudflare.com/ajax/libs/antd/2.13.6/antd.css) contains some IE6-8 hacks that should be removed then.

Example:

  /* IE6-IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
  zoom: 1;

.clearfix {
  zoom: 1;
}

@andriijas I think it had been removed in antd-3.0, if you still see any hack, just PR to remove it, thanks.

I have a big issue with styled-components and antd form. When I wrap form components that are decorated with fieldDecorator to a wrapper that is styled with styled-components the form fields stop working. I don't really understand this issue but I have to wrap it to a <div> with inline styles to make it work. This is really anoying...

Week Selector!!!

@malekjaroslav that might be related to incorrect usage. Can you open an issue on the styled-components repo, so I can help you?

@benjycui What do you think of responsive helper in antd3.0? Something like this https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_display.scss in react

import { Utils } from "antd";
const { Display } = Utils;

const Foo = props => (
  <h1>
    My idiotic example header
    <Display xs="block" sm="inline" print="inline-block">my subheader is fantastic</Display>
  </h1>
);

const Zoo = props => (
  <h1>
    My idiotic example header
    <Display xs={{display: "block", className: ..}} sm="inline" print="hidden">my subheader is fantastic</Display>
  </h1>
);

I can make PR for initial if you need help but will need help with translating documentation etc.

@andriijas just use https://github.com/contra/react-responsive . We just add UI component which follow Ant Design Specification to antd. Anyway, thanks 😄

Yes, i saw it in ant-design-pro repository. I will make wrapper with breakpoints from antd.

Looking forward to this release!

Hello everyone, I've just released [email protected], See https://github.com/ant-design/ant-design/issues/8233

很期待新版本的发布，因为出来了才能开始用antd pro的组件。你们还打算月底出炉吗?

多谢你们提供了这么好的前端组件，你们已经超越谷歌的material

Really excited for this release as it is the blocker for starting to use the new antd pro components. Is expected release timeframe still end of November?

Thanks for providing such an awesome library. You guys are leaving Google's Material UI is the dust.

https://medium.com/ant-design/announcing-ant-design-3-0-70e3e65eca0c

Ant Design 3.0 released now! 🎉 🎉 🎉

+1 for styled-components/emotion/fela support in a future release.