ant-design/docs/blog/happy-work.en-US.md

title	date	author
Happy Work Theme	2023-08-04	zombieJ

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):

import { HappyProvider } from '@ant-design/happy-work-theme';

export default () => (
  <HappyProvider>
    <Button />
  </HappyProvider>
);

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:

• 
• 
• 
• 

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:

// 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:

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

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:

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.