← All changes | modules/atomic-widgets/styles/style-schema.php +53 -132 4.0.8 → 3.32.0-dev3 View file →

		@@ -44,26 +44,25 @@
44	44	self::get_background_props(),
45	45	self::get_effects_props(),
46	46	self::get_layout_props(),
47	47	self::get_alignment_props(),
48		- self::get_special_props(),
49	48	);
50	49	}
51	50
52	51	private static function get_size_props() {
53	52	return [
54		- 'width' => Size_Prop_Type::make()->description( 'The width of the element' ),
55		- 'height' => Size_Prop_Type::make()->description( 'The height of the element' ),
56		- 'min-width' => Size_Prop_Type::make()->description( 'The minimum width of the element' ),
57		- 'min-height' => Size_Prop_Type::make()->description( 'The minimum height of the element' ),
58		- 'max-width' => Size_Prop_Type::make()->description( 'The maximum width of the element' ),
59		- 'max-height' => Size_Prop_Type::make()->description( 'The maximum height of the element' ),
	53	+ 'width' => Size_Prop_Type::make(),
	54	+ 'height' => Size_Prop_Type::make(),
	55	+ 'min-width' => Size_Prop_Type::make(),
	56	+ 'min-height' => Size_Prop_Type::make(),
	57	+ 'max-width' => Size_Prop_Type::make(),
	58	+ 'max-height' => Size_Prop_Type::make(),
60	59	'overflow' => String_Prop_Type::make()->enum( [
61	60	'visible',
62	61	'hidden',
63	62	'auto',
64		- ] )->description( 'The overflow CSS property. CSS values: visible, hidden, auto' ),
65		- 'aspect-ratio' => String_Prop_Type::make()->description( 'Equivalent to CSS aspect-ration property' ),
	63	+ ] ),
	64	+ 'aspect-ratio' => String_Prop_Type::make(),
66	65	'object-fit' => String_Prop_Type::make()->enum( [
67	66	'fill',
68	67	'cover',
69	68	'contain',
		@@ -68,9 +67,9 @@
68	67	'cover',
69	68	'contain',
70	69	'none',
71	70	'scale-down',
72		- ] )->description( 'The object-fit CSS. CSS values: fill, cover, contain, none, scale-down' ),
	71	+ ] ),
73	72	'object-position' => Union_Prop_Type::make()
74	73	->add_prop_type( String_Prop_Type::make()->enum( Position_Prop_Type::get_position_enum_values() ) )
75	74	->add_prop_type( Position_Prop_Type::make() )
76	75	->set_dependencies(
		@@ -96,15 +95,14 @@
96	95	'relative',
97	96	'absolute',
98	97	'fixed',
99	98	'sticky',
100		- ] )->description( 'The CSS position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).' ),
101		- 'inset-block-start' => Size_Prop_Type::make()->description( 'Size PropType for the inset-block-start CSS property' ),
102		- 'inset-inline-end' => Size_Prop_Type::make()->description( 'Size PropType for the inset-inline-end CSS property' ),
103		- 'inset-block-end' => Size_Prop_Type::make()->description( 'Size PropType for the inset-block-end CSS property' ),
104		- 'inset-inline-start' => Size_Prop_Type::make()->description( 'Size PropType for the inset-inline-start CSS property' ),
105		- 'z-index' => Number_Prop_Type::make()
106		- ->description( 'The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. It specifies the stack order of elements.' ),
	99	+ ] ),
	100	+ 'inset-block-start' => Size_Prop_Type::make(),
	101	+ 'inset-inline-end' => Size_Prop_Type::make(),
	102	+ 'inset-block-end' => Size_Prop_Type::make(),
	103	+ 'inset-inline-start' => Size_Prop_Type::make(),
	104	+ 'z-index' => Number_Prop_Type::make(),
107	105	'scroll-margin-top' => Size_Prop_Type::make()->units( Size_Constants::anchor_offset() ),
108	106	];
109	107	}
110	108
		@@ -109,9 +107,9 @@
109	107	}
110	108
111	109	private static function get_typography_props() {
112	110	return [
113		- 'font-family' => String_Prop_Type::make()->description( 'The font family of the text content.' ),
	111	+ 'font-family' => String_Prop_Type::make(),
114	112	'font-weight' => String_Prop_Type::make()->enum( [
115	113	'100',
116	114	'200',
117	115	'300',
		@@ -124,16 +122,14 @@
124	122	'normal',
125	123	'bold',
126	124	'bolder',
127	125	'lighter',
128		- ] )
129		- ->description( 'The weight (or boldness) of the font. Values should match css font-weight specifications.' ),
130		- 'font-size' => Size_Prop_Type::make()->units( Size_Constants::typography() )->description( 'The font size in Size PropType Format' ),
131		- 'color' => Color_Prop_Type::make()
132		- ->description( 'The text color, specified as a hex code, rgb(a), hsl(a), or a standard css color name.' ),
133		- 'letter-spacing' => Size_Prop_Type::make()->units( Size_Constants::typography() )->description( 'The spacing between letters in Size PropType format' ),
134		- 'word-spacing' => Size_Prop_Type::make()->units( Size_Constants::typography() )->description( 'The spacing between words in Size PropType format' ),
135		- 'column-count' => Number_Prop_Type::make()->description( 'The number of columns the text content should be divided into.' ),
	126	+ ] ),
	127	+ 'font-size' => Size_Prop_Type::make()->units( Size_Constants::typography() ),
	128	+ 'color' => Color_Prop_Type::make(),
	129	+ 'letter-spacing' => Size_Prop_Type::make()->units( Size_Constants::typography() ),
	130	+ 'word-spacing' => Size_Prop_Type::make()->units( Size_Constants::typography() ),
	131	+ 'column-count' => Number_Prop_Type::make(),
136	132	'column-gap' => Size_Prop_Type::make()
137	133	->set_dependencies(
138	134	Dependency_Manager::make()
139	135	->where( [
		@@ -142,36 +138,32 @@
142	138	'value' => 1,
143	139	] )
144	140	->get()
145	141	),
146		- 'line-height' => Size_Prop_Type::make()->units( Size_Constants::typography() )->description( 'The line height of the text content in Size PropType format' ),
	142	+ 'line-height' => Size_Prop_Type::make()->units( Size_Constants::typography() ),
147	143	'text-align' => String_Prop_Type::make()->enum( [
148	144	'start',
149	145	'center',
150	146	'end',
151	147	'justify',
152		- ] )
153		- ->description( 'The horizontal alignment of the text content. Allowed values: start, center, end, justify.' ),
	148	+ ] ),
154	149	'font-style' => String_Prop_Type::make()->enum( [
155	150	'normal',
156	151	'italic',
157	152	'oblique',
158		- ] )
159		- ->description( 'The font style of the text content. CSS values: normal, italic, oblique' ),
	153	+ ] ),
160	154	// TODO: validate text-decoration in more specific way [EDS-524]
161		- 'text-decoration' => String_Prop_Type::make()
162		- ->description( 'The text decoration style. CSS values like: none, underline, overline, line-through, blink, etc.' ),
	155	+ 'text-decoration' => String_Prop_Type::make(),
163	156	'text-transform' => String_Prop_Type::make()->enum( [
164	157	'none',
165	158	'capitalize',
166	159	'uppercase',
167	160	'lowercase',
168		- ] )
169		- ->description( 'Controls the capitalization of text. CSS values: none, capitalize, uppercase, lowercase' ),
	161	+ ] ),
170	162	'direction' => String_Prop_Type::make()->enum( [
171	163	'ltr',
172	164	'rtl',
173		- ] )->description( 'The text direction. CSS values: ltr (left to right), rtl (right to left)' ),
	165	+ ] ),
174	166	'stroke' => Stroke_Prop_Type::make(),
175	167	'all' => String_Prop_Type::make()->enum( [
176	168	'initial',
177	169	'inherit',
		@@ -177,13 +169,12 @@
177	169	'inherit',
178	170	'unset',
179	171	'revert',
180	172	'revert-layer',
181		- ] )->description( 'The all CSS property. CSS values: initial, inherit, unset, revert, revert-layer' ),
	173	+ ] ),
182	174	'cursor' => String_Prop_Type::make()->enum( [
183	175	'pointer',
184		- ] )
185		- ->description( 'The type of cursor to be displayed when pointing over the element. E.g., pointer.' ),
	176	+ ] ),
186	177	];
187	178	}
188	179
189	180	private static function get_spacing_props() {
		@@ -189,20 +180,12 @@
189	180	private static function get_spacing_props() {
190	181	return [
191	182	'padding' => Union_Prop_Type::make()
192	183	->add_prop_type( Dimensions_Prop_Type::make_with_units( Size_Constants::spacing() ) )
193		- ->add_prop_type(
194		- Size_Prop_Type::make()
195		- ->units( Size_Constants::spacing() )
196		- ->description( 'Padding css in Size PropType format' )
197		- ),
	184	+ ->add_prop_type( Size_Prop_Type::make()->units( Size_Constants::spacing() ) ),
198	185	'margin' => Union_Prop_Type::make()
199		- ->add_prop_type( Dimensions_Prop_Type::make_with_units( Size_Constants::spacing_margin() ) )
200		- ->add_prop_type(
201		- Size_Prop_Type::make()
202		- ->units( Size_Constants::spacing_margin() )
203		- ->description( 'Margin css in Size PropType format' )
204		- ),
	186	+ ->add_prop_type( Dimensions_Prop_Type::make() )
	187	+ ->add_prop_type( Size_Prop_Type::make() ),
205	188	];
206	189	}
207	190
208	191	private static function get_border_props() {
		@@ -207,14 +190,14 @@
207	190
208	191	private static function get_border_props() {
209	192	return [
210	193	'border-radius' => Union_Prop_Type::make()
211		- ->add_prop_type( Border_Radius_Prop_Type::make() )
212		- ->add_prop_type( Size_Prop_Type::make()->units( Size_Constants::border() ) ),
	194	+ ->add_prop_type( Size_Prop_Type::make()->units( Size_Constants::border() ) )
	195	+ ->add_prop_type( Border_Radius_Prop_Type::make() ),
213	196	'border-width' => Union_Prop_Type::make()
214		- ->add_prop_type( Border_Width_Prop_Type::make() )
215		- ->add_prop_type( Size_Prop_Type::make()->units( Size_Constants::border() ) ),
216		- 'border-color' => Color_Prop_Type::make()->description( 'The border color, specified as a hex code, rgb(a), hsl(a), or a standard css color name.' ),
	197	+ ->add_prop_type( Size_Prop_Type::make()->units( Size_Constants::border() ) )
	198	+ ->add_prop_type( Border_Width_Prop_Type::make() ),
	199	+ 'border-color' => Color_Prop_Type::make(),
217	200	'border-style' => String_Prop_Type::make()->enum( [
218	201	'none',
219	202	'hidden',
220	203	'dotted',
		@@ -224,28 +207,9 @@
224	207	'groove',
225	208	'ridge',
226	209	'inset',
227	210	'outset',
228		- ] )
229		- ->description( 'The border style in CSS values' ),
230		- 'outline-width' => Size_Prop_Type::make()
231		- ->units( Size_Constants::border() )
232		- ->description( 'The width of the outline in Size PropType format' ),
233		- 'outline-color' => Color_Prop_Type::make()->description( 'The color of the outline, specified as a hex code, rgb(a), hsl(a), or a standard css color name.' ),
234		- 'outline-style' => String_Prop_Type::make()->enum( [
235		- 'none',
236		- 'hidden',
237		- 'dotted',
238		- 'dashed',
239		- 'solid',
240		- 'double',
241		- 'groove',
242		- 'ridge',
243		- 'inset',
244		- 'outset',
245		- ] )->description( 'The outline style in CSS values' ),
246		- 'outline-offset' => Size_Prop_Type::make()->units( Size_Constants::border() )->description( 'The offset of the outline, specified as a length in Size PropType format' ),
247		-
	211	+ ] ),
248	212	];
249	213	}
250	214
251	215	private static function get_background_props() {
		@@ -252,9 +216,9 @@
252	216	// Background image overlay as an exception
253	217	$background_prop_type = Background_Prop_Type::make();
254	218	$bg_overlay_prop_type = $background_prop_type->get_shape_field( Background_Overlay_Prop_Type::get_key() );
255	219	$bg_image_overlay_prop_type = $bg_overlay_prop_type->get_item_type()->get_prop_type( Background_Image_Overlay_Prop_Type::get_key() );
256		- Dynamic_Prop_Types_Mapping::make()->get_extended_schema( $bg_image_overlay_prop_type->get_shape() );
	220	+ Dynamic_Prop_Types_Mapping::make()->get_modified_prop_types( $bg_image_overlay_prop_type->get_shape() );
257	221	return [
258	222	'background' => $background_prop_type,
259	223	];
260	224	}
		@@ -260,29 +224,10 @@
260	224	}
261	225
262	226	private static function get_effects_props() {
263	227	return [
264		- 'mix-blend-mode' => String_Prop_Type::make()->enum( [
265		- 'normal',
266		- 'multiply',
267		- 'screen',
268		- 'overlay',
269		- 'darken',
270		- 'lighten',
271		- 'color-dodge',
272		- 'saturation',
273		- 'color',
274		- 'difference',
275		- 'exclusion',
276		- 'hue',
277		- 'luminosity',
278		- 'soft-light',
279		- 'hard-light',
280		- 'color-burn',
281		- ] )->description( 'Applied as mix-blend mode css effect.' ),
282	228	'box-shadow' => Box_Shadow_Prop_Type::make(),
283	229	'opacity' => Size_Prop_Type::make()
284		- ->description( 'The opacity of the element, specified as a percentage between 0 (fully transparent) and 100 (fully opaque).' )
285	230	->units( Size_Constants::opacity() )
286	231	->default_unit( Size_Constants::UNIT_PERCENT ),
287	232	'filter' => Filter_Prop_Type::make(),
288	233	'backdrop-filter' => Backdrop_Filter_Prop_Type::make(),
		@@ -303,17 +248,15 @@
303	248	'inline-grid',
304	249	'flow-root',
305	250	'none',
306	251	'contents',
307		- ] )->description( 'The CSS display property defines the display behavior (the type of rendering box) of an element.' ),
308		- 'flex-direction' => String_Prop_Type::make()
309		- ->description( 'The direction of the contained items.' )
310		- ->enum( [
311		- 'row',
312		- 'row-reverse',
313		- 'column',
314		- 'column-reverse',
315		- ] ),
	252	+ ] ),
	253	+ 'flex-direction' => String_Prop_Type::make()->enum( [
	254	+ 'row',
	255	+ 'row-reverse',
	256	+ 'column',
	257	+ 'column-reverse',
	258	+ ] ),
316	259	'gap' => Union_Prop_Type::make()
317	260	->add_prop_type( Layout_Direction_Prop_Type::make() )
318	261	->add_prop_type( Size_Prop_Type::make()->units( Size_Constants::layout() ) ),
319	262	'flex-wrap' => String_Prop_Type::make()->enum( [
		@@ -319,9 +262,9 @@
319	262	'flex-wrap' => String_Prop_Type::make()->enum( [
320	263	'wrap',
321	264	'nowrap',
322	265	'wrap-reverse',
323		- ] )->description( 'Specifies whether the flex items should wrap or not. CSS values: wrap, nowrap, wrap-reverse' ),
	266	+ ] ),
324	267	'flex' => Flex_Prop_Type::make(),
325	268	];
326	269	}
327	270
		@@ -339,22 +282,9 @@
339	282	'space-between',
340	283	'space-around',
341	284	'space-evenly',
342	285	'stretch',
343		- ] )
344		- ->description( 'Defines how the browser distributes space between and around content items along the main-axis of a flex container. CSS values: center, start, end, flex-start, flex-end, left, right, normal, space-between, space-around, space-evenly, stretch' ),
345		- 'justify-items' => String_Prop_Type::make()->enum( [
346		- 'normal',
347		- 'stretch',
348		- 'center',
349		- 'start',
350		- 'end',
351		- 'flex-start',
352		- 'flex-end',
353		- 'left',
354		- 'right',
355		- 'anchor-center',
356		- ] )->description( 'Defines how the browser distributes space between and around content items along the inline axis of a grid container. CSS values: center, start, end, flex-start, flex-end, left, right' ),
	286	+ ] ),
357	287	'align-content' => String_Prop_Type::make()->enum( [
358	288	'center',
359	289	'start',
360	290	'end',
		@@ -360,10 +290,9 @@
360	290	'end',
361	291	'space-between',
362	292	'space-around',
363	293	'space-evenly',
364		- ] )
365		- ->description( 'Aligns a flex container\'s lines within when there is extra space in the cross-axis. CSS values: center, start, end, space-between, space-around, space-evenly' ),
	294	+ ] ),
366	295	'align-items' => String_Prop_Type::make()->enum( [
367	296	'normal',
368	297	'stretch',
369	298	'center',
		@@ -373,9 +302,9 @@
373	302	'flex-end',
374	303	'self-start',
375	304	'self-end',
376	305	'anchor-center',
377		- ] )->description( 'Defines the default behavior for how flex items are laid out along the cross axis on the current line. CSS values: normal, stretch, center, start, end, flex-start, flex-end, self-start, self-end, anchor-center' ),
	306	+ ] ),
378	307	'align-self' => String_Prop_Type::make()->enum( [
379	308	'auto',
380	309	'normal',
381	310	'center',
		@@ -389,17 +318,9 @@
389	318	'baseline',
390	319	'first baseline',
391	320	'last baseline',
392	321	'stretch',
393		- ] )->description( 'Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. CSS values: auto, normal, center, start, end, self-start, self-end, flex-start, flex-end, anchor-center, baseline, first baseline, last baseline, stretch' ),
394		- 'order' => Number_Prop_Type::make()->description( 'Specifies the order of the flex items. Items with lower order values are displayed first.' ),
395		- ];
396		- }
397		-
398		- private static function get_special_props() {
399		- return [
400		- 'content' => String_Prop_Type::make()->description( 'The string content for pseudo-element content property' ),
401		- 'appearance' => String_Prop_Type::make()->enum( [ 'none', 'auto' ] )->description( 'The appearance of the element. CSS values: none, auto' ),
402		- 'clip-path' => String_Prop_Type::make()->description( 'The clip-path CSS property defines a shape to be used as clipping region.' ),
	322	+ ] ),
	323	+ 'order' => Number_Prop_Type::make(),
403	324	];
404	325	}
405	326	}