logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • CSS in v6
  • 👀 Visual Regression Testing
  • Why is it so hard to disable the date?
  • HOC Aggregate FieldItem
  • Line Ellipsis Calculation
  • 📢 v4 surpassed maintenance period
  • Type Util
  • A build ghost
  • Ant Design meets CSS Variables
  • Historical Debt of API
  • Stacked Notification
  • Color Models and Color Picker
  • Extends Theme
  • Virtual Table is here!
  • Happy Work Theme
  • Where is the dynamic style?
  • Suspense breaks styles
  • Bundle Size Optimization
  • Hi, GitHub Actions
  • To be what you see
  • Pain of static methods
  • SSR Static style export
  • Dependency troubleshooting
  • Contributor development maintenance guide
  • Repost: How to submit a riddle
  • Tooltip align update
  • Unnecessary Rerender
  • How to Grow as a Collaborator
  • Funny Modal hook BUG
  • about antd test library migration
  • Tree's check conduction
  • Some change on getContainer
  • Component-level CSS-in-JS
TL;DR
Customize Wave Effect
Wave component
ConfigProvider
One more thing

Happy Work Theme

2023-08-04
@zombieJ
contributors
  • Virtual Table is here!Where is the dynamic style?

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    In the v5 release announce, our design team mentioned that we will provide a happy work theme. This part of the work is still in progress, but we have made some progress and would like to share it with you here.

    TL;DR

    You can directly use @ant-design/happy-work-theme to switch theme effects (or continue reading to see what we have done):

    tsx
    import { HappyProvider } from '@ant-design/happy-work-theme';
    export default () => (
    <HappyProvider>
    <Button />
    </HappyProvider>
    );

    Happy Work Theme

    Customize Wave Effect

    There is a special design interaction in Ant Design, which is the click wave effect on some components. You can see them everywhere:

    • Button
    • Checkbox
    • Radio
    • Switch

    In the past major versions, this wave effect could not be modified. If developers want to turn it off, they even need to do some "magic code" to achieve it. So when the designer proposed a happy work theme, as a developer, we think this is a good time to make some changes.

    Wave component

    Wave effect is actually an component, which listens to the click event of the child component. Then add a box-shadow animation to generate a wave effect:

    tsx
    // Sample code.
    const Button = (
    <Wave>
    <button />
    </Wave>
    );

    In the early design (#40111), we hope that the wave customization ability belongs to part of the Design Token. But in this way, the Design Token will become a bit too complicated, from the original pure string | number type to string | number | Function<T>. From the API design point of view, Function<T> also has a bad smell, and if there are new customization requirements in the future, the type of Function will become more and more divergent. So #40111 stays in the Draft version forever.

    ConfigProvider

    Next, we choose to put it in ConfigProvider. ConfigProvider is a global configuration component, which can affect all child components. Its API has also included a lot of component configuration capabilities, so we only need to add a wave property:

    tsx
    <ConfigProvider wave={{ showEffect }}>
    <Button />
    </ConfigProvider>

    Customize Wave Effect

    Click to view ConfigProvider demo.

    showEffect method will tell you the DOM node that needs to generate the effect. This node has been encapsulated and will always correspond to the correct element (for example, Button is itself, and Radio will find the circle shape DOM from label). And tell you which component it is and which Design Token the current node belongs to:

    tsx
    type ShowEffect = (target: HTMLElement, info: { component: string; token: GlobalToken }) => void;

    Through Design Token, you can implement effects that conform to the current theme. For example, in the GIF at the beginning of the article, when the theme color changes, we can get the current theme color and add the corresponding effect.

    One more thing

    Happy work theme is still in progress, and we will gradually add more capabilities in subsequent versions. The HappyProvider provided by @ant-design/happy-work-theme currently replaces the wave effect through ConfigProvider. We plan that developers will not need to make additional changes in the future, and will gradually add more "happiness" through HappyProvider as the version iterates. Stay tuned.