Skip to content

Commit dc825bb

Browse files
tsullivantsullivan
committed
Update validation
1 parent 86223bd commit dc825bb

File tree

3 files changed

+100
-5
lines changed

3 files changed

+100
-5
lines changed

‎packages/eui/src/components/flyout/__snapshots__/flyout.test.tsx.snap‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -943,6 +943,55 @@ exports[`EuiFlyout props size accepts custom number 1`] = `
943943
]
944944
`;
945945

946+
exports[`EuiFlyout props size fill is rendered 1`] = `
947+
[
948+
<div>
949+
<div
950+
data-focus-guard="true"
951+
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
952+
tabindex="0"
953+
/>
954+
<div
955+
data-focus-lock-disabled="false"
956+
>
957+
<div
958+
aria-describedby="generated-id"
959+
aria-modal="true"
960+
class="euiFlyout emotion-euiFlyout-l-fill-noMaxWidth-overlay-right-right"
961+
data-autofocus="true"
962+
role="dialog"
963+
tabindex="0"
964+
>
965+
<p
966+
class="emotion-euiScreenReaderOnly"
967+
id="generated-id"
968+
>
969+
You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
970+
</p>
971+
<button
972+
aria-label="Close this dialog"
973+
class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
974+
data-test-subj="euiFlyoutCloseButton"
975+
type="button"
976+
>
977+
<span
978+
aria-hidden="true"
979+
class="euiButtonIcon__icon"
980+
color="inherit"
981+
data-euiicon-type="cross"
982+
/>
983+
</button>
984+
</div>
985+
</div>
986+
<div
987+
data-focus-guard="true"
988+
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
989+
tabindex="0"
990+
/>
991+
</div>,
992+
]
993+
`;
994+
946995
exports[`EuiFlyout props size l is rendered 1`] = `
947996
[
948997
<div>

‎packages/eui/src/components/flyout/manager/validation.test.ts‎

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ describe('Flyout Size Validation', () => {
4444
expect(error).toEqual({
4545
type: 'INVALID_SIZE_TYPE',
4646
message:
47-
'Managed flyouts must use named sizes (s, m, l). Received: 100px',
47+
'Managed flyouts must use named sizes (s, m, l, fill). Received: 100px',
4848
flyoutId: 'test-id',
4949
level: 'main',
5050
size: '100px',
@@ -58,6 +58,10 @@ describe('Flyout Size Validation', () => {
5858
expect(validateSizeCombination('s', 'l')).toBeNull();
5959
expect(validateSizeCombination('m', 's')).toBeNull();
6060
expect(validateSizeCombination('m', 'l')).toBeNull();
61+
expect(validateSizeCombination('s', 'fill')).toBeNull();
62+
expect(validateSizeCombination('m', 'fill')).toBeNull();
63+
expect(validateSizeCombination('fill', 's')).toBeNull();
64+
expect(validateSizeCombination('fill', 'm')).toBeNull();
6165
});
6266

6367
it('should return error when parent and child are both m', () => {
@@ -69,6 +73,15 @@ describe('Flyout Size Validation', () => {
6973
});
7074
});
7175

76+
it('should return error when parent and child are both fill', () => {
77+
const error = validateSizeCombination('fill', 'fill');
78+
expect(error).toEqual({
79+
type: 'INVALID_SIZE_COMBINATION',
80+
message: 'Parent and child flyouts cannot both be size "fill"',
81+
size: 'fill',
82+
});
83+
});
84+
7285
it('should return error when parent is l and there is a child', () => {
7386
const error = validateSizeCombination('l', 's');
7487
expect(error).toEqual({
@@ -94,10 +107,17 @@ describe('Flyout Size Validation', () => {
94107
'Parent and child flyouts cannot both be size "m"'
95108
);
96109

97-
// Parent 'l' with child should fail
98-
const error2 = validateFlyoutSize('s', 'child-id', 'child', 'l');
110+
// Parent and child both 'fill' should fail
111+
const error2 = validateFlyoutSize('fill', 'child-id', 'child', 'fill');
99112
expect(error2?.type).toBe('INVALID_SIZE_COMBINATION');
100113
expect(error2?.message).toContain(
114+
'Parent and child flyouts cannot both be size "fill"'
115+
);
116+
117+
// Parent 'l' with child should fail
118+
const error3 = validateFlyoutSize('s', 'child-id', 'child', 'l');
119+
expect(error3?.type).toBe('INVALID_SIZE_COMBINATION');
120+
expect(error3?.message).toContain(
101121
'Parent flyouts cannot be size "l" when there is a child flyout'
102122
);
103123
});
@@ -106,6 +126,8 @@ describe('Flyout Size Validation', () => {
106126
expect(validateFlyoutSize('s', 'child-id', 'child', 'm')).toBeNull();
107127
expect(validateFlyoutSize('l', 'child-id', 'child', 'm')).toBeNull();
108128
expect(validateFlyoutSize('s', 'child-id', 'child', 's')).toBeNull();
129+
expect(validateFlyoutSize('fill', 'child-id', 'child', 'm')).toBeNull();
130+
expect(validateFlyoutSize('s', 'child-id', 'child', 'fill')).toBeNull();
109131
});
110132
});
111133

@@ -138,5 +160,18 @@ describe('Flyout Size Validation', () => {
138160
'EuiFlyout validation error: Parent and child flyouts cannot both be size "m"'
139161
);
140162
});
163+
164+
it('should create error message for invalid fill size combination', () => {
165+
const error: FlyoutSizeValidationError = {
166+
type: 'INVALID_SIZE_COMBINATION',
167+
message: 'Parent and child flyouts cannot both be size "fill"',
168+
size: 'fill',
169+
};
170+
171+
const message = createValidationErrorMessage(error);
172+
expect(message).toBe(
173+
'EuiFlyout validation error: Parent and child flyouts cannot both be size "fill"'
174+
);
175+
});
141176
});
142177
});

‎packages/eui/src/components/flyout/manager/validation.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ import { EuiFlyoutLevel } from './types';
1313

1414
/**
1515
* Business rules for flyout sizes:
16-
* - Managed flyouts should only accept "named" sizes (s, m, l)
16+
* - Managed flyouts should only accept "named" sizes (s, m, l, fill)
1717
* - Parent and child can't both be 'm'
18+
* - Parent and child can't both be 'fill'
1819
* - Parent can't be 'l' if there is a child
1920
*/
2021

@@ -42,9 +43,10 @@ export function validateManagedFlyoutSize(
4243
level: EuiFlyoutLevel
4344
): FlyoutSizeValidationError | null {
4445
if (!isNamedSize(size)) {
46+
const namedSizes = FLYOUT_SIZES.join(', ');
4547
return {
4648
type: 'INVALID_SIZE_TYPE',
47-
message: `Managed flyouts must use named sizes (s, m, l). Received: ${size}`,
49+
message: `Managed flyouts must use named sizes (${namedSizes}). Received: ${size}`,
4850
flyoutId,
4951
level,
5052
size: `${size}`,
@@ -69,6 +71,15 @@ export function validateSizeCombination(
6971
};
7072
}
7173

74+
// Parent and child can't both be 'fill'
75+
if (parentSize === 'fill' && childSize === 'fill') {
76+
return {
77+
type: 'INVALID_SIZE_COMBINATION',
78+
message: 'Parent and child flyouts cannot both be size "fill"',
79+
size: childSize,
80+
};
81+
}
82+
7283
// Parent can't be 'l' if there is a child
7384
if (parentSize === 'l') {
7485
return {

0 commit comments

Comments
 (0)