chore : prettier code (#29123)

* style: prettier code

* update

* Update index.less

components/breadcrumb/demo/router-4.md

@@ -83,13 +83,13 @@ ReactDOM.render(
 }
 .demo-nav {
   height: 30px;
-  line-height: 30px;
   margin-bottom: 16px;
+  line-height: 30px;
   background: #f8f8f8;
 }
 .demo-nav a {
-  line-height: 30px;
   padding: 0 8px;
+  line-height: 30px;
 }
 .app-list {
   margin-top: 16px;

components/button/demo/ghost.md

@@ -32,7 +32,7 @@ ReactDOM.render(
 
 ```css
 .site-button-ghost-wrapper {
-  background: rgb(190, 200, 200);
   padding: 26px 16px 16px;
+  background: rgb(190, 200, 200);
 }
 ```

components/calendar/demo/notice-calendar.md

@@ -84,20 +84,20 @@ ReactDOM.render(
 
 ```css
 .events {
-  list-style: none;
   margin: 0;
   padding: 0;
+  list-style: none;
 }
 .events .ant-badge-status {
-  overflow: hidden;
-  white-space: nowrap;
   width: 100%;
-  text-overflow: ellipsis;
+  overflow: hidden;
   font-size: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .notes-month {
-  text-align: center;
   font-size: 28px;
+  text-align: center;
 }
 .notes-month section {
   font-size: 28px;

components/carousel/style/index.less

@@ -10,9 +10,9 @@
     position: relative;
     display: block;
     box-sizing: border-box;
-    -webkit-touch-callout: none;
     -ms-touch-action: pan-y;
     touch-action: pan-y;
+    -webkit-touch-callout: none;
     -webkit-tap-highlight-color: transparent;
   }
 

components/collapse/demo/custom.md

@@ -49,11 +49,11 @@ ReactDOM.render(
 ```css
 [data-theme='compact'] .site-collapse-custom-collapse .site-collapse-custom-panel,
 .site-collapse-custom-collapse .site-collapse-custom-panel {
-  background: #f7f7f7;
-  border-radius: 2px;
   margin-bottom: 24px;
-  border: 0px;
   overflow: hidden;
+  background: #f7f7f7;
+  border: 0px;
+  border-radius: 2px;
 }
 ```
 

components/config-provider/demo/locale.md

@@ -176,8 +176,8 @@ ReactDOM.render(<App />, mountNode);
 }
 
 .locale-components {
-  border-top: 1px solid #d9d9d9;
   padding-top: 16px;
+  border-top: 1px solid #d9d9d9;
 }
 
 .code-box-demo .example {

components/drawer/demo/form-in-drawer.md

@@ -172,9 +172,9 @@ ReactDOM.render(<DrawerForm />, mountNode);
   bottom: 0px;
   width: 100%;
   padding: 10px 16px;
-  border-top: 1px solid #e9e9e9;
-  background: #fff;
   text-align: right;
+  background: #fff;
+  border-top: 1px solid #e9e9e9;
 }
 ```
 

components/dropdown/demo/context-menu.md

@@ -43,8 +43,8 @@ ReactDOM.render(
 
 ```css
 .site-dropdown-context-menu {
-  background: #f7f7f7;
   color: #777;
+  background: #f7f7f7;
 }
 ```
 

components/empty/style/index.less

@@ -52,8 +52,8 @@
   // not support the definition because the less variables have no meaning
   & when (@theme = dark) {
     &-ellipse {
-      fill-opacity: 0.08;
       fill: @white;
+      fill-opacity: 0.08;
     }
     &-path {
       &-1 {
@@ -78,8 +78,8 @@
   }
   & when not (@theme = dark) {
     &-ellipse {
-      fill-opacity: 0.8;
       fill: #f5f5f5;
+      fill-opacity: 0.8;
     }
     &-path {
       &-1 {

components/form/demo/dynamic-form-item.md

@@ -122,12 +122,12 @@ ReactDOM.render(<DynamicFieldSet />, mountNode);
 
 ```css
 .dynamic-delete-button {
-  margin: 0 8px;
-  cursor: pointer;
   position: relative;
   top: 4px;
-  font-size: 24px;
+  margin: 0 8px;
   color: #999;
+  font-size: 24px;
+  cursor: pointer;
   transition: all 0.3s;
 }
 .dynamic-delete-button:hover {

components/form/style/index.less

@@ -129,9 +129,9 @@
 
       // Optional mark
       .@{form-item-prefix-cls}-tooltip {
+        color: @text-color-secondary;
         writing-mode: horizontal-tb;
         margin-inline-start: @margin-xss;
-        color: @text-color-secondary;
       }
 
       &::after {

components/image/PreviewGroup.tsx

@@ -26,13 +26,7 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
 }) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('image-preview', customizePrefixCls);
-  return (
+  return <RcImage.PreviewGroup previewPrefixCls={prefixCls} icons={icons} {...props} />;
-    <RcImage.PreviewGroup
-      previewPrefixCls={prefixCls}
-      icons={icons}
-      {...props}
-    />
-  );
 };
 
 export default InternalPreviewGroup;

components/image/demo/preview-mask.md

@@ -42,8 +42,8 @@ ReactDOM.render(<ImageDemo />, mountNode);
 
 ```css
 .customize-mask {
-  opacity: 1;
   font-size: 20px;
+  opacity: 1;
 }
 .customize-mask .anticon {
   font-size: 32px;

components/layout/demo/custom-trigger-debug.md

@@ -88,9 +88,9 @@ ReactDOM.render(<SiderDemo />, mountNode);
 
 ```css
 #components-layout-demo-custom-trigger .trigger {
+  padding: 0 24px;
   font-size: 18px;
   line-height: 64px;
-  padding: 0 24px;
   cursor: pointer;
   transition: color 0.3s;
 }

components/layout/demo/custom-trigger.md

@@ -81,9 +81,9 @@ ReactDOM.render(<SiderDemo />, mountNode);
 
 ```css
 #components-layout-demo-custom-trigger .trigger {
+  padding: 0 24px;
   font-size: 18px;
   line-height: 64px;
-  padding: 0 24px;
   cursor: pointer;
   transition: color 0.3s;
 }
@@ -94,8 +94,8 @@ ReactDOM.render(<SiderDemo />, mountNode);
 
 #components-layout-demo-custom-trigger .logo {
   height: 32px;
-  background: rgba(255, 255, 255, 0.3);
   margin: 16px;
+  background: rgba(255, 255, 255, 0.3);
 }
 
 .site-layout .site-layout-background {

components/layout/demo/fixed-sider.md

@@ -178,8 +178,8 @@ ReactDOM.render(
 ```css
 #components-layout-demo-fixed-sider .logo {
   height: 32px;
-  background: rgba(255, 255, 255, 0.2);
   margin: 16px;
+  background: rgba(255, 255, 255, 0.2);
 }
 .site-layout .site-layout-background {
   background: #fff;

components/layout/demo/fixed.md

@@ -47,11 +47,11 @@ ReactDOM.render(
 
 ```css
 #components-layout-demo-fixed .logo {
+  float: left;
   width: 120px;
   height: 31px;
-  background: rgba(255, 255, 255, 0.2);
   margin: 16px 24px 16px 0;
-  float: left;
+  background: rgba(255, 255, 255, 0.2);
 }
 .site-layout .site-layout-background {
   background: #fff;

components/layout/demo/responsive.md

@@ -68,8 +68,8 @@ ReactDOM.render(
 ```css
 #components-layout-demo-responsive .logo {
   height: 32px;
-  background: rgba(255, 255, 255, 0.2);
   margin: 16px;
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .site-layout-sub-header-background {

components/list/demo/infinite-load.md

@@ -112,11 +112,11 @@ ReactDOM.render(<InfiniteListExample />, mountNode);
 
 ```css
 .demo-infinite-container {
+  height: 300px;
+  padding: 8px 24px;
+  overflow: auto;
   border: 1px solid #e8e8e8;
   border-radius: 4px;
-  overflow: auto;
-  padding: 8px 24px;
-  height: 300px;
 }
 .demo-loading-container {
   position: absolute;

components/page-header/demo/content.md

@@ -149,9 +149,9 @@ ReactDOM.render(
 
 ```css
 #components-page-header-demo-content .image {
-  margin: 0 0 0 60px;
   display: flex;
   align-items: center;
+  margin: 0 0 0 60px;
 }
 
 #components-page-header-demo-content .ant-page-header-rtl .image {
@@ -159,8 +159,8 @@ ReactDOM.render(
 }
 
 #components-page-header-demo-content .example-link {
-  line-height: 24px;
   margin-right: 16px;
+  line-height: 24px;
 }
 [data-theme='compact'] #components-page-header-demo-content .example-link {
   line-height: 20px;

components/page-header/demo/ghost.md

@@ -50,7 +50,7 @@ ReactDOM.render(
 
 ```css
 .site-page-header-ghost-wrapper {
-  background-color: #f5f5f5;
   padding: 24px;
+  background-color: #f5f5f5;
 }
 ```

components/select/style/multiple.less

@@ -72,10 +72,7 @@
 
       height: @select-multiple-item-height;
       margin-top: @select-multiple-item-spacing-half;
-      margin-inline-end: @input-padding-vertical-base;
       margin-bottom: @select-multiple-item-spacing-half;
-      padding-inline-start: @padding-xs;
-      padding-inline-end: (@padding-xs / 2);
       line-height: @select-multiple-item-height - @select-multiple-item-border-width * 2;
       background: @select-selection-item-bg;
       border: 1px solid @select-selection-item-border-color;
@@ -83,6 +80,9 @@
       cursor: default;
       transition: font-size 0.3s, line-height 0.3s, height 0.3s;
       user-select: none;
+      margin-inline-end: @input-padding-vertical-base;
+      padding-inline-start: @padding-xs;
+      padding-inline-end: (@padding-xs / 2);
 
       .@{select-prefix-cls}-disabled& {
         color: @select-multiple-item-disabled-color;

components/slider/demo/icon-slider.md

@@ -56,9 +56,9 @@ ReactDOM.render(<IconSlider min={0} max={20} />, mountNode);
   top: -2px;
   width: 16px;
   height: 16px;
-  line-height: 1;
-  font-size: 16px;
   color: rgba(0, 0, 0, 0.25);
+  font-size: 16px;
+  line-height: 1;
 }
 
 .icon-wrapper .icon-wrapper-active {

components/slider/index.en-US.md

@@ -37,9 +37,9 @@ To input a value in a range.
 
 ### range
 
-| Property | Description | Type | Default | Version |
+| Property       | Description                     | Type    | Default | Version |
-| --- | --- | --- | --- | --- |
+| -------------- | ------------------------------- | ------- | ------- | ------- |
-| draggableTrack | Whether range track can be drag | boolean | false | 4.10.0 |
+| draggableTrack | Whether range track can be drag | boolean | false   | 4.10.0  |
 
 ## Methods
 

components/slider/index.tsx

@@ -145,13 +145,13 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
     if (direction === 'rtl' && !restProps.vertical) {
       restProps.reverse = !restProps.reverse;
     }
-  
+
     // extrack draggableTrack from range={{ ... }}
     let draggableTrack: boolean | undefined;
     if (typeof range === 'object') {
       draggableTrack = range.draggableTrack;
     }
-  
+
     if (range) {
       return (
         <RcRange

components/slider/index.zh-CN.md

@@ -38,9 +38,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
 
 ### range
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| 参数           | 说明                 | 类型    | 默认值 | 版本   |
-| --- | --- | --- | --- | --- |
+| -------------- | -------------------- | ------- | ------ | ------ |
-| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | 4.10.0 |
+| draggableTrack | 范围刻度是否可被拖拽 | boolean | false  | 4.10.0 |
 
 ## 方法
 

components/space/demo/align.md

@@ -54,14 +54,14 @@ ReactDOM.render(
 ```css
 .space-align-container {
   display: flex;
-  align-item: flex-start;
   flex-wrap: wrap;
+  align-item: flex-start;
 }
 .space-align-block {
-  margin: 8px 4px;
-  border: 1px solid #40a9ff;
-  padding: 4px;
   flex: none;
+  margin: 8px 4px;
+  padding: 4px;
+  border: 1px solid #40a9ff;
 }
 .space-align-block .mock-block {
   display: inline-block;

components/spin/demo/inside.md

@@ -26,12 +26,12 @@ ReactDOM.render(
 
 ```css
 .example {
+  margin: 20px 0;
+  margin-bottom: 20px;
+  padding: 30px 50px;
   text-align: center;
   background: rgba(0, 0, 0, 0.05);
   border-radius: 4px;
-  margin-bottom: 20px;
-  padding: 30px 50px;
-  margin: 20px 0;
 }
 ```
 

components/statistic/demo/card.md

@@ -52,8 +52,8 @@ ReactDOM.render(
 
 ```css
 .site-statistic-demo-card {
-  background: #ececec;
   padding: 30px;
+  background: #ececec;
 }
 ```
 

components/steps/demo/step-next.md

@@ -78,13 +78,13 @@ ReactDOM.render(<App />, mountNode);
 
 ```css
 .steps-content {
+  min-height: 200px;
   margin-top: 16px;
+  padding-top: 80px;
+  text-align: center;
+  background-color: #fafafa;
   border: 1px dashed #e9e9e9;
   border-radius: 2px;
-  background-color: #fafafa;
-  min-height: 200px;
-  text-align: center;
-  padding-top: 80px;
 }
 
 .steps-action {

components/table/__tests__/Table.pagination.test.js

@@ -239,8 +239,8 @@ describe('Table.pagination', () => {
   });
 
   /**
-   * `pagination` is not designed to accept `true` value, but in practice, many people assign `true`
+   * `pagination` is not designed to accept `true` value, but in practice, many people assign
-   * to `pagination`, since they misunderstand that `pagination` can accept a boolean value.
+   * `true` to `pagination`, since they misunderstand that `pagination` can accept a boolean value.
    */
   it('Accepts pagination as true', () => {
     const wrapper = mount(createTable({ pagination: true }));

components/table/demo/edit-cell.md

@@ -264,9 +264,9 @@ ReactDOM.render(<EditableTable />, mountNode);
 }
 
 .editable-row:hover .editable-cell-value-wrap {
+  padding: 4px 11px;
   border: 1px solid #d9d9d9;
   border-radius: 4px;
-  padding: 4px 11px;
 }
 
 [data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {

components/tabs/demo/card-top.md

@@ -51,34 +51,34 @@ ReactDOM.render(
   margin-top: -16px;
 }
 .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
-  background: #fff;
   padding: 16px;
+  background: #fff;
 }
 .card-container > .ant-tabs-card > .ant-tabs-nav::before {
   display: none;
 }
 .card-container > .ant-tabs-card .ant-tabs-tab,
 [data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab {
-  border-color: transparent;
   background: transparent;
+  border-color: transparent;
 }
 .card-container > .ant-tabs-card .ant-tabs-tab-active,
 [data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
-  border-color: #fff;
   background: #fff;
+  border-color: #fff;
 }
 #components-tabs-demo-card-top .code-box-demo {
-  background: #f5f5f5;
-  overflow: hidden;
   padding: 24px;
+  overflow: hidden;
+  background: #f5f5f5;
 }
 [data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-content {
   height: 120px;
   margin-top: -8px;
 }
 [data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab {
-  border-color: transparent;
   background: transparent;
+  border-color: transparent;
 }
 [data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
   background: #000;
@@ -87,7 +87,7 @@ ReactDOM.render(
   background: #141414;
 }
 [data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
-  border-color: #141414;
   background: #141414;
+  border-color: #141414;
 }
 ```

components/typography/style/index.less

@@ -273,10 +273,10 @@
 
   &-ellipsis-multiple-line {
     display: -webkit-box;
+    overflow: hidden;
     -webkit-line-clamp: 3;
     /*! autoprefixer: ignore next */
     -webkit-box-orient: vertical;
-    overflow: hidden;
   }
 }
 

site/theme/static/dark.less

@@ -10,9 +10,9 @@
   select:-webkit-autofill:hover,
   select:-webkit-autofill:focus {
     border: 1px solid @border-color-base;
-    -webkit-text-fill-color: @text-color;
     box-shadow: none;
     transition: background-color 5000s ease-in-out 0s;
+    -webkit-text-fill-color: @text-color;
   }
 
   #header {

tests/shared/demoTest.ts

@@ -10,10 +10,9 @@ const USE_REPLACEMENT = false;
 const testDist = process.env.LIB_DIR === 'dist';
 
 /**
- * Rc component will generate id for aria usage.
+ * Rc component will generate id for aria usage. It's created as `test-uuid` when env === 'test'.
- *     It's created as `test-uuid` when env === 'test'.
+ * Or `f7fa7a3c-a675-47bc-912e-0c45fb6a74d9`(randomly) when not test env. So we need hack of this
- *     Or `f7fa7a3c-a675-47bc-912e-0c45fb6a74d9`(randomly) when not test env.
+ * to modify the `aria-controls`.
- *     So we need hack of this to modify the `aria-controls`.
  */
 function ariaConvert(wrapper: CheerIO) {
   if (!testDist || !USE_REPLACEMENT) return wrapper;