demo: update the css logical properties (#54475)

This commit is contained in:
lijianan
2025-07-25 18:19:37 +08:00
committed by GitHub
parent bc66f1d18c
commit ca06fb41c5
23 changed files with 46 additions and 46 deletions

View File

@@ -500,7 +500,7 @@ const Theme: React.FC = () => {
className={classNames(styles.transBg)}
selectedKeys={['Themes']}
openKeys={['Design']}
style={{ height: '100%', borderRight: 0 }}
style={{ height: '100%', borderInlineEnd: 0 }}
items={sideMenuItems}
expandIcon={false}
/>

View File

@@ -31,7 +31,7 @@ const useStyle = createStyles(({ token, css }) => {
align-items: center;
justify-content: center;
color: rgba(0, 0, 0, 0.88);
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-inline-end: 1px solid rgba(0, 0, 0, 0.1);
`,
colDark: css`

View File

@@ -18,7 +18,7 @@ const useStyle = createStyles(({ token }) => ({
position: relative;
`,
colWrap: css`
border-right: 1px solid ${token.colorBorderSecondary};
border-inline-end: 1px solid ${token.colorBorderSecondary};
display: flex;
justify-content: center;
align-items: center;

View File

@@ -20,7 +20,7 @@ export default () => {
.spinner-icon {
border-top-color: ${token.colorPrimary};
border-left-color: ${token.colorPrimary};
border-inline-start-color: ${token.colorPrimary};
}
}
`}

View File

@@ -66,7 +66,7 @@ export default () => {
float: none;
width: auto;
padding-bottom: 30px;
border-right: 0;
border-inline-end: 0;
}
.ant-row-rtl {

View File

@@ -1,4 +1,4 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`renders components/drawer/demo/basic-right.tsx extend context correctly 1`] = `
Array [
@@ -147,7 +147,7 @@ Array [
>
<div
aria-modal="true"
class="ant-drawer-content acss-1g5mw59"
class="ant-drawer-content acss-10412ne"
role="dialog"
style="box-shadow: -10px 0 10px #666;"
>
@@ -239,7 +239,7 @@ Array [
>
<div
aria-modal="true"
class="ant-drawer-content acss-1g5mw59"
class="ant-drawer-content acss-10412ne"
role="dialog"
style="box-shadow: -10px 0 10px #666;"
>

View File

@@ -17,7 +17,7 @@ const useStyle = createStyles(({ token }) => ({
color: token.colorPrimary,
},
'my-drawer-content': {
borderLeft: '2px dotted #333',
borderInlineStart: '2px dotted #333',
},
}));

View File

@@ -9702,7 +9702,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
class="ant-input ant-input-disabled ant-input-outlined site-input-split"
disabled=""
placeholder="~"
style="width: 30px; border-left: 0; border-right: 0; pointer-events: none;"
style="width: 30px; border-inline-start: 0; border-inline-end: 0; pointer-events: none;"
type="text"
value=""
/>

View File

@@ -1,4 +1,4 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`renders components/input/demo/addon.tsx correctly 1`] = `
<div
@@ -3381,7 +3381,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
class="ant-input ant-input-disabled ant-input-outlined site-input-split"
disabled=""
placeholder="~"
style="width:30px;border-left:0;border-right:0;pointer-events:none"
style="width:30px;border-inline-start:0;border-inline-end:0;pointer-events:none"
type="text"
value=""
/>

View File

@@ -12,20 +12,20 @@
}
.site-input-group-wrapper .site-input-right {
border-left-width: 0;
border-inline-start-width: 0;
}
.site-input-group-wrapper .site-input-right:hover,
.site-input-group-wrapper .site-input-right:focus {
border-left-width: 1px;
border-inline-start-width: 1px;
}
.site-input-group-wrapper .ant-input-rtl.site-input-right {
border-right-width: 0;
border-inline-end-width: 0;
}
.site-input-group-wrapper .ant-input-rtl.site-input-right:hover,
.site-input-group-wrapper .ant-input-rtl.site-input-right:focus {
border-right-width: 1px;
border-inline-end-width: 1px;
}
```

View File

@@ -136,8 +136,8 @@ const App: React.FC = () => (
className="site-input-split"
style={{
width: 30,
borderLeft: 0,
borderRight: 0,
borderInlineStart: 0,
borderInlineEnd: 0,
pointerEvents: 'none',
}}
placeholder="~"

View File

@@ -1,4 +1,4 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`renders components/layout/demo/basic.tsx extend context correctly 1`] = `
<div
@@ -182,7 +182,7 @@ exports[`renders components/layout/demo/component-token.tsx extend context corre
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
data-menu-list="true"
role="menu"
style="border-right: 0;"
style="border-inline-end: 0;"
tabindex="0"
>
<li
@@ -4605,7 +4605,7 @@ exports[`renders components/layout/demo/top-side-2.tsx extend context correctly
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
data-menu-list="true"
role="menu"
style="height: 100%; border-right: 0;"
style="height: 100%; border-inline-end: 0;"
tabindex="0"
>
<li

View File

@@ -1,4 +1,4 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`renders components/layout/demo/basic.tsx correctly 1`] = `
<div
@@ -180,7 +180,7 @@ exports[`renders components/layout/demo/component-token.tsx correctly 1`] = `
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
data-menu-list="true"
role="menu"
style="border-right:0"
style="border-inline-end:0"
tabindex="0"
>
<li
@@ -2552,7 +2552,7 @@ exports[`renders components/layout/demo/top-side-2.tsx correctly 1`] = `
class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
data-menu-list="true"
role="menu"
style="height:100%;border-right:0"
style="height:100%;border-inline-end:0"
tabindex="0"
>
<li

View File

@@ -66,7 +66,7 @@ const App: React.FC = () => {
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ borderRight: 0 }}
style={{ borderInlineEnd: 0 }}
items={items2}
/>
</Sider>

View File

@@ -52,7 +52,7 @@ const App: React.FC = () => {
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%', borderRight: 0 }}
style={{ height: '100%', borderInlineEnd: 0 }}
items={items2}
/>
</Sider>

View File

@@ -43,7 +43,7 @@ const App: React.FC = () => {
const modalStyles = {
header: {
borderLeft: `5px solid ${token.colorPrimary}`,
borderInlineStart: `5px solid ${token.colorPrimary}`,
borderRadius: 0,
paddingInlineStart: 5,
},

View File

@@ -1,4 +1,4 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`renders components/space/demo/align.tsx extend context correctly 1`] = `
<div
@@ -4817,7 +4817,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
class="ant-input ant-input-disabled ant-input-outlined site-input-split ant-input-compact-item"
disabled=""
placeholder="~"
style="width: 30px; border-left: 0; border-right: 0; pointer-events: none;"
style="width: 30px; border-inline-start: 0; border-inline-end: 0; pointer-events: none;"
type="text"
value=""
/>

View File

@@ -1,4 +1,4 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`renders components/space/demo/align.tsx correctly 1`] = `
<div
@@ -1409,7 +1409,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
class="ant-input ant-input-disabled ant-input-outlined site-input-split ant-input-compact-item"
disabled=""
placeholder="~"
style="width:30px;border-left:0;border-right:0;pointer-events:none"
style="width:30px;border-inline-start:0;border-inline-end:0;pointer-events:none"
type="text"
value=""
/>

View File

@@ -101,8 +101,8 @@ const App: React.FC = () => (
className="site-input-split"
style={{
width: 30,
borderLeft: 0,
borderRight: 0,
borderInlineStart: 0,
borderInlineEnd: 0,
pointerEvents: 'none',
}}
placeholder="~"

View File

@@ -44,18 +44,13 @@ interface DragIndexState {
const DragIndexContext = createContext<DragIndexState>({ active: -1, over: -1 });
const dragActiveStyle = (dragState: DragIndexState, id: string) => {
const { active, over, direction } = dragState;
const { active, over } = dragState;
// drag active style
let style: React.CSSProperties = {};
if (active && active === id) {
style = { backgroundColor: 'gray', opacity: 0.5 };
}
// dragover dashed style
else if (over && id === over && active !== over) {
style =
direction === 'right'
? { borderRight: '1px dashed gray' }
: { borderLeft: '1px dashed gray' };
} else if (over && id === over && active !== over) {
style = { borderInlineStart: '1px dashed gray' };
}
return style;
};

View File

@@ -1,4 +1,4 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`renders components/watermark/demo/basic.tsx extend context correctly 1`] = `
<div
@@ -54,7 +54,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
</div>
<form
class="ant-form ant-form-vertical"
style="width: 280px; flex-shrink: 0; border-left: 1px solid #eee; padding-inline-start: 16px;"
style="width: 280px; flex-shrink: 0; border-inline-start: 1px solid #eee; padding-inline-start: 16px;"
>
<div
class="ant-form-item"

View File

@@ -1,4 +1,4 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`renders components/watermark/demo/basic.tsx correctly 1`] = `
<div
@@ -46,7 +46,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
</div>
<form
class="ant-form ant-form-vertical"
style="width:280px;flex-shrink:0;border-left:1px solid #eee;padding-inline-start:16px"
style="width:280px;flex-shrink:0;border-inline-start:1px solid #eee;padding-inline-start:16px"
>
<div
class="ant-form-item"

View File

@@ -73,7 +73,12 @@ const App: React.FC = () => {
/>
</Watermark>
<Form
style={{ width: 280, flexShrink: 0, borderLeft: '1px solid #eee', paddingInlineStart: 16 }}
style={{
width: 280,
flexShrink: 0,
borderInlineStart: '1px solid #eee',
paddingInlineStart: 16,
}}
form={form}
layout="vertical"
initialValues={config}