nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Update @vector-im/compound-web (#29641)

Browse Source 
* chore: update `@vector-im/compound-web`

* test: update snapshots
This commit is contained in:
Florian Duros
2025-04-02 12:09:18 +02:00
committed by GitHub
parent 637ba3222e
commit 82d93695a2
6 changed files with 239 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

306
test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

72
test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
View File

@@ -128,13 +128,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
class="mx_UserInfo_container"
>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
role="button"
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -146,13 +146,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Send message
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -165,14 +165,14 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
</svg>
</button>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26 _disabled_1x5l4_109"
class="_item_dyt4i_8 _interactive_dyt4i_26 _disabled_dyt4i_118"
data-kind="primary"
disabled=""
role="button"
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -184,13 +184,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Jump to read receipt
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -203,13 +203,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
</svg>
</button>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
role="button"
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -221,13 +221,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Share profile
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -244,13 +244,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
class="mx_UserInfo_container"
>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="critical"
role="button"
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -262,13 +262,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Ignore
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -422,13 +422,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
class="mx_UserInfo_container"
>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
role="button"
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -440,13 +440,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Send message
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -459,14 +459,14 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
</svg>
</button>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26 _disabled_1x5l4_109"
class="_item_dyt4i_8 _interactive_dyt4i_26 _disabled_dyt4i_118"
data-kind="primary"
disabled=""
role="button"
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -478,13 +478,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Jump to read receipt
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -497,13 +497,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
</svg>
</button>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
role="button"
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -515,13 +515,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Share profile
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -538,13 +538,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
class="mx_UserInfo_container"
>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="critical"
role="button"
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -556,13 +556,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Deactivate user
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -579,13 +579,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
class="mx_UserInfo_container"
>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="critical"
role="button"
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -597,13 +597,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Ignore
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"

48
test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
View File

@@ -196,7 +196,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
tabindex="-1"
>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@@ -205,7 +205,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -217,13 +217,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
View in timeline
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -236,7 +236,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
</svg>
</button>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@@ -245,7 +245,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -262,13 +262,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Unpin
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -281,7 +281,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
</svg>
</button>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@@ -290,7 +290,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -302,13 +302,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Forward
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -327,7 +327,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
role="separator"
/>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="critical"
data-orientation="vertical"
data-radix-collection-item=""
@@ -336,7 +336,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -348,13 +348,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Delete
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -387,7 +387,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
tabindex="-1"
>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@@ -396,7 +396,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -408,13 +408,13 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
View in timeline
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -427,7 +427,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
</svg>
</button>
<button
class="_item_1x5l4_8 _interactive_1x5l4_26"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@@ -436,7 +436,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
>
<svg
aria-hidden="true"
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
@@ -448,13 +448,13 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Forward
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"

40
test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
View File

@@ -26,7 +26,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
class="mx_ThreadsActivityCentre_rows"
>
<button
class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@@ -34,7 +34,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
tabindex="-1"
>
<div
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -48,13 +48,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
</span>
</div>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
This is a real highlight
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -74,7 +74,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
</div>
</button>
<button
class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@@ -82,7 +82,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
tabindex="-1"
>
<div
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -96,13 +96,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
</span>
</div>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
A notification
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -328,7 +328,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
class="mx_ThreadsActivityCentre_rows"
>
<button
class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@@ -336,7 +336,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
tabindex="-1"
>
<div
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -350,13 +350,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
</span>
</div>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
This is a third real highlight
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -376,7 +376,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
</div>
</button>
<button
class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@@ -384,7 +384,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
tabindex="-1"
>
<div
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -398,13 +398,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
</span>
</div>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
This is a real highlight
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@@ -424,7 +424,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
</div>
</button>
<button
class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@@ -432,7 +432,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
tabindex="-1"
>
<div
class="_icon_1x5l4_34"
class="_icon_dyt4i_50"
>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -446,13 +446,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
</span>
</div>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
This is a second real highlight
</span>
<svg
aria-hidden="true"
class="_nav-hint_1x5l4_50"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"