Skip to content

Commit b4616f1

Browse files
cee-chencee-chen
committed
Append/prepend style fixes
- fix missing css`` on append class - fix missing border-radius on append/prepend nodes that was less perceptible because of background color
1 parent af5978b commit b4616f1

5 files changed

Lines changed: 13 additions & 7 deletions

File tree

‎packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png‎

1.49 KB
Loading

‎packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png‎

4.34 KB
Loading

‎packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
7474
class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
7575
>
7676
<div
77-
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
77+
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-appendOnly"
7878
style="--euiFormControlLeftIconsCount: 1;"
7979
>
8080
<div
@@ -131,7 +131,7 @@ exports[`EuiFieldPassword props dual dualToggleProps is rendered 1`] = `
131131
class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
132132
>
133133
<div
134-
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
134+
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-appendOnly"
135135
style="--euiFormControlLeftIconsCount: 1;"
136136
>
137137
<div
@@ -346,7 +346,7 @@ exports[`EuiFieldPassword props type dual is rendered 1`] = `
346346
class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
347347
>
348348
<div
349-
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
349+
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-appendOnly"
350350
style="--euiFormControlLeftIconsCount: 1;"
351351
>
352352
<div

‎packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,7 @@ exports[`EuiFormControlLayout props multiple appends are rendered 1`] = `
306306
class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
307307
>
308308
<div
309-
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
309+
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-appendOnly"
310310
/>
311311
<div
312312
class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
@@ -346,7 +346,7 @@ exports[`EuiFormControlLayout props one append node is rendered 1`] = `
346346
class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
347347
>
348348
<div
349-
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
349+
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-appendOnly"
350350
/>
351351
<div
352352
class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
@@ -363,7 +363,7 @@ exports[`EuiFormControlLayout props one append string is rendered 1`] = `
363363
class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
364364
>
365365
<div
366-
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
366+
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-appendOnly"
367367
/>
368368
<div
369369
class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"

‎packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const euiFormControlLayoutStyles = (euiThemeContext: UseEuiTheme) => {
8080
${logicalCSS('border-top-right-radius', 'inherit')}
8181
${logicalCSS('border-bottom-right-radius', 'inherit')}
8282
`,
83-
appendOnly: `
83+
appendOnly: css`
8484
${logicalCSS('border-top-left-radius', 'inherit')}
8585
${logicalCSS('border-bottom-left-radius', 'inherit')}
8686
`,
@@ -154,6 +154,9 @@ export const euiFormControlLayoutSideNodeStyles = (
154154
}
155155
`,
156156
append: css`
157+
${logicalCSS('border-top-right-radius', 'inherit')}
158+
${logicalCSS('border-bottom-right-radius', 'inherit')}
159+
157160
& > ${buttons}, & > * > ${buttons} {
158161
${logicalCSS('border-top-left-radius', 0)}
159162
${logicalCSS('border-bottom-left-radius', 0)}
@@ -166,6 +169,9 @@ export const euiFormControlLayoutSideNodeStyles = (
166169
}
167170
`,
168171
prepend: css`
172+
${logicalCSS('border-top-left-radius', 'inherit')}
173+
${logicalCSS('border-bottom-left-radius', 'inherit')}
174+
169175
& > ${buttons}, & > * > ${buttons} {
170176
${logicalCSS('border-top-right-radius', 0)}
171177
${logicalCSS('border-bottom-right-radius', 0)}

0 commit comments

Comments
 (0)