diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_large[chromium].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_large[chromium].png index 8714d50a09b..5fa46eb164a 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_large[chromium].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_large[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_large[firefox].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_large[firefox].png index 4ec530fc09c..3dd29ce1f0d 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_large[firefox].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_large[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_medium[firefox].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_medium[firefox].png index 93509f101bc..30ddd91c8c6 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_medium[firefox].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_medium[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[chromium].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[chromium].png index 0d50a3c0343..ffc843842d8 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[chromium].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[firefox].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[firefox].png index 67557dcf44d..8a83966faf8 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[firefox].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[webkit].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[webkit].png index a1ddf95a66f..436728307a6 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[webkit].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_none[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_small[webkit].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_small[webkit].png index 51a55014e51..816f621bee5 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_small[webkit].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_small[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[chromium].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[chromium].png new file mode 100644 index 00000000000..1d45dd3f137 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[firefox].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[firefox].png new file mode 100644 index 00000000000..65c2b1b1ecf Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[webkit].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[webkit].png new file mode 100644 index 00000000000..b8f8753757e Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xlarge[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[chromium].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[chromium].png new file mode 100644 index 00000000000..d62fc4fb992 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[firefox].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[firefox].png new file mode 100644 index 00000000000..d1d924eda19 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[webkit].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[webkit].png new file mode 100644 index 00000000000..cc68c0fd982 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xsmall[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[chromium].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[chromium].png new file mode 100644 index 00000000000..dbc0ff725ac Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[firefox].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[firefox].png new file mode 100644 index 00000000000..ac0bd95c59d Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[webkit].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[webkit].png new file mode 100644 index 00000000000..0b7d685f63b Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxlarge[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[chromium].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[chromium].png new file mode 100644 index 00000000000..772e5b00573 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[firefox].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[firefox].png new file mode 100644 index 00000000000..9545fcce7b4 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[webkit].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[webkit].png new file mode 100644 index 00000000000..24e3b70d0c8 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-column_gap_xxsmall[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[chromium].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[chromium].png index b38ca9d88db..aa613c97637 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[chromium].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[firefox].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[firefox].png index 86c5fcf2886..3cde4d8c769 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[firefox].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[webkit].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[webkit].png index 95169ec1171..e86a8acfa80 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[webkit].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-nested_one_level[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[chromium].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[chromium].png index 2c1b0f11987..298d0fab45b 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[chromium].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[firefox].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[firefox].png index 5b719387ad3..4e78a923c42 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[firefox].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[webkit].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[webkit].png index e5880b4fb51..89e22792ad1 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[webkit].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_bottom[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_center[chromium].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_center[chromium].png index 71624f0d3ce..ea5a945c68b 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_center[chromium].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_center[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_center[firefox].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_center[firefox].png index 8ddf7a78083..cf33a604b7b 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_center[firefox].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_center[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_center[webkit].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_center[webkit].png index eaa192a1704..8dcdee6f037 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_center[webkit].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_center[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_top[chromium].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_top[chromium].png index 0ffbfed4446..4e76198c821 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_top[chromium].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_top[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_top[firefox].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_top[firefox].png index c8a0f82d863..55bd4b34947 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_top[firefox].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_top[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_top[webkit].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_top[webkit].png index 73cf0a302ca..1fac4b87d18 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_top[webkit].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-vertical_alignment_top[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_fixed[chromium].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_fixed[chromium].png index 8717696b370..63f7b545f47 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_fixed[chromium].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_fixed[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_fixed[firefox].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_fixed[firefox].png index 8dbfec3c1f7..681c7506547 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_fixed[firefox].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_fixed[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_fixed[webkit].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_fixed[webkit].png index 5e6318870b9..f13b63ef7ef 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_fixed[webkit].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_fixed[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_stretch[chromium].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_stretch[chromium].png index c9bcfe46195..5857364c66a 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_stretch[chromium].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_stretch[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_stretch[firefox].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_stretch[firefox].png index 2dba4f4237d..c8f5c933641 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_stretch[firefox].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_stretch[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_stretch[webkit].png b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_stretch[webkit].png index 215184e9d8e..3a5e418e275 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_stretch[webkit].png and b/e2e_playwright/__snapshots__/linux/st_columns_test/st_columns-width_configuration_stretch[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-large[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-large[chromium].png index 7f848e7727f..8abaae79ef9 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-large[chromium].png and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-large[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-medium[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-medium[chromium].png index 720fceb3f83..c3ae569caf3 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-medium[chromium].png and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-medium[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-medium[firefox].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-medium[firefox].png index f41ce0401fc..343d1d55229 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-medium[firefox].png and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-medium[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-none[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-none[chromium].png index dac3b5939cd..80a7325784a 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-none[chromium].png and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-none[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-none[firefox].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-none[firefox].png index fe1addbfda3..a17d222c5b5 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-none[firefox].png and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-none[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-small[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-small[chromium].png index d4564387975..c67cd4c6efd 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-small[chromium].png and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-small[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-small[firefox].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-small[firefox].png index 1b363a59419..2f5cf916625 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-small[firefox].png and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-small[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xlarge[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xlarge[chromium].png new file mode 100644 index 00000000000..eb11405498a Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xlarge[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xlarge[firefox].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xlarge[firefox].png new file mode 100644 index 00000000000..bc8fb0245bf Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xlarge[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xlarge[webkit].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xlarge[webkit].png new file mode 100644 index 00000000000..1b45167b8d4 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xlarge[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xsmall[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xsmall[chromium].png new file mode 100644 index 00000000000..9ef2dddd65f Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xsmall[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xsmall[firefox].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xsmall[firefox].png new file mode 100644 index 00000000000..a801639b9b6 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xsmall[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xsmall[webkit].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xsmall[webkit].png new file mode 100644 index 00000000000..69ffc23cd54 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xsmall[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[chromium].png new file mode 100644 index 00000000000..e234580d07d Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[firefox].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[firefox].png new file mode 100644 index 00000000000..e90eb530301 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[webkit].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[webkit].png new file mode 100644 index 00000000000..ae771733a5e Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxlarge[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[chromium].png new file mode 100644 index 00000000000..3d5061a2e83 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[firefox].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[firefox].png new file mode 100644 index 00000000000..692bf4fb558 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[webkit].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[webkit].png new file mode 100644 index 00000000000..47f864791e8 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-horizontal-gap-xxsmall[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-large[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-large[chromium].png index 895ed387616..1d97ebbf49d 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-large[chromium].png and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-large[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-large[firefox].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-large[firefox].png index fba87795bd3..0ab099b05fa 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-large[firefox].png and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-large[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-medium[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-medium[chromium].png index cc054d4e793..83c88dd2f8f 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-medium[chromium].png and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-medium[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-small[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-small[chromium].png index 53b8c0515ff..93d21b7db53 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-small[chromium].png and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-small[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-small[firefox].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-small[firefox].png index bdaf3a1fb70..6cd972b2787 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-small[firefox].png and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-small[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xlarge[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xlarge[chromium].png new file mode 100644 index 00000000000..3d496d33986 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xlarge[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xlarge[firefox].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xlarge[firefox].png new file mode 100644 index 00000000000..783244ad814 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xlarge[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xlarge[webkit].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xlarge[webkit].png new file mode 100644 index 00000000000..d3cbcc18446 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xlarge[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xsmall[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xsmall[chromium].png new file mode 100644 index 00000000000..19cdf0b6e9f Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xsmall[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xsmall[firefox].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xsmall[firefox].png new file mode 100644 index 00000000000..0b2b282c74f Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xsmall[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xsmall[webkit].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xsmall[webkit].png new file mode 100644 index 00000000000..b9cd559e8c8 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xsmall[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[chromium].png new file mode 100644 index 00000000000..e7e8cbed129 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[firefox].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[firefox].png new file mode 100644 index 00000000000..ec923b48692 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[webkit].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[webkit].png new file mode 100644 index 00000000000..6d82e78109d Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxlarge[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[chromium].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[chromium].png new file mode 100644 index 00000000000..943498ca6c5 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[firefox].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[firefox].png new file mode 100644 index 00000000000..5fd437bd401 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[webkit].png b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[webkit].png new file mode 100644 index 00000000000..5215c3dc454 Binary files /dev/null and b/e2e_playwright/__snapshots__/linux/st_layouts_container_gap_size_test/st_layouts_container_gap_size-container-vertical-gap-xxsmall[webkit].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_space_test/st_space_horizontal_container[chromium].png b/e2e_playwright/__snapshots__/linux/st_space_test/st_space_horizontal_container[chromium].png index e640e0cdd6c..e620a515a17 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_space_test/st_space_horizontal_container[chromium].png and b/e2e_playwright/__snapshots__/linux/st_space_test/st_space_horizontal_container[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_space_test/st_space_horizontal_container[firefox].png b/e2e_playwright/__snapshots__/linux/st_space_test/st_space_horizontal_container[firefox].png index b93c3c10506..f9abfdbdaa5 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_space_test/st_space_horizontal_container[firefox].png and b/e2e_playwright/__snapshots__/linux/st_space_test/st_space_horizontal_container[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_space_test/st_space_nested_containers[chromium].png b/e2e_playwright/__snapshots__/linux/st_space_test/st_space_nested_containers[chromium].png index 051eabf4d2e..46348b70bf9 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_space_test/st_space_nested_containers[chromium].png and b/e2e_playwright/__snapshots__/linux/st_space_test/st_space_nested_containers[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_space_test/st_space_nested_containers[firefox].png b/e2e_playwright/__snapshots__/linux/st_space_test/st_space_nested_containers[firefox].png index b3ab6153472..910c82fea25 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_space_test/st_space_nested_containers[firefox].png and b/e2e_playwright/__snapshots__/linux/st_space_test/st_space_nested_containers[firefox].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_space_test/st_space_vertical_container_stretch[chromium].png b/e2e_playwright/__snapshots__/linux/st_space_test/st_space_vertical_container_stretch[chromium].png index a3b6540525a..3a0e13f8bab 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_space_test/st_space_vertical_container_stretch[chromium].png and b/e2e_playwright/__snapshots__/linux/st_space_test/st_space_vertical_container_stretch[chromium].png differ diff --git a/e2e_playwright/__snapshots__/linux/st_space_test/st_space_vertical_container_stretch[firefox].png b/e2e_playwright/__snapshots__/linux/st_space_test/st_space_vertical_container_stretch[firefox].png index bf97598756a..cc804782cbd 100644 Binary files a/e2e_playwright/__snapshots__/linux/st_space_test/st_space_vertical_container_stretch[firefox].png and b/e2e_playwright/__snapshots__/linux/st_space_test/st_space_vertical_container_stretch[firefox].png differ diff --git a/e2e_playwright/st_columns.py b/e2e_playwright/st_columns.py index 8532f425960..a26286dd923 100644 --- a/e2e_playwright/st_columns.py +++ b/e2e_playwright/st_columns.py @@ -14,11 +14,16 @@ from __future__ import annotations +from typing import TYPE_CHECKING, cast + import numpy as np import numpy.typing as npt import streamlit as st +if TYPE_CHECKING: + from streamlit.elements.lib.layout_utils import Gap + LOREM_IPSUM = ( "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor " "incididunt ut labore et dolore magna aliqua." @@ -53,29 +58,28 @@ c.image(BLACK_IMG) # Various column gaps -with st.expander("Column gap small", expanded=True): - c4, c5, c6 = st.columns(3, gap="small") - c4.image(BLACK_IMG) - c5.image(BLACK_IMG) - c6.image(BLACK_IMG) - -with st.expander("Column gap medium", expanded=True): - c7, c8, c9 = st.columns(3, gap="medium") - c7.image(BLACK_IMG) - c8.image(BLACK_IMG) - c9.image(BLACK_IMG) - -with st.expander("Column gap large", expanded=True): - c10, c11, c12 = st.columns(3, gap="large") - c10.image(BLACK_IMG) - c11.image(BLACK_IMG) - c12.image(BLACK_IMG) - -with st.expander("Column gap none", expanded=True): - c13, c14, c15 = st.columns(3, gap=None) - c13.image(BLACK_IMG) - c14.image(BLACK_IMG) - c15.image(BLACK_IMG) + +GAPS = cast( + "list[Gap|None]", + [ + None, + "xxsmall", + "xsmall", + "small", + "medium", + "large", + "xlarge", + "xxlarge", + ], +) + +for gap in GAPS: + gap_name = str(gap).lower() + + with st.expander(f"Column gap {gap_name}", expanded=True): + cols = st.columns(3, gap=gap) + for col in cols: + col.image(BLACK_IMG) with st.expander("Nested columns - one level", expanded=True): col1, col2 = st.columns(2) diff --git a/e2e_playwright/st_columns_test.py b/e2e_playwright/st_columns_test.py index 57aeea1111c..6f37a393db2 100644 --- a/e2e_playwright/st_columns_test.py +++ b/e2e_playwright/st_columns_test.py @@ -65,58 +65,34 @@ def test_columns_with_border(app: Page, assert_snapshot: ImageCompareFunction): assert_snapshot(column_container, name="st_columns-with_border") -def test_column_gap_small_is_correctly_applied( +def test_column_gap_is_correctly_applied( app: Page, assert_snapshot: ImageCompareFunction ): - """Test that the small column gap is correctly applied.""" - column_gap_small = ( - get_expander(app, "Column gap small").get_by_test_id("stHorizontalBlock").nth(0) - ) - # We use regex here since some browsers may resolve this to two numbers: - expect(column_gap_small).to_have_css("gap", re.compile("16px")) - column_gap_small.scroll_into_view_if_needed() - assert_snapshot(column_gap_small, name="st_columns-column_gap_small") - - -def test_column_gap_medium_is_correctly_applied( - app: Page, assert_snapshot: ImageCompareFunction -): - """Test that the medium column gap is correctly applied.""" - column_gap_medium = ( - get_expander(app, "Column gap medium") - .get_by_test_id("stHorizontalBlock") - .nth(0) - ) - # We use regex here since some browsers may resolve this to two numbers: - expect(column_gap_medium).to_have_css("gap", re.compile("32px")) - column_gap_medium.scroll_into_view_if_needed() - assert_snapshot(column_gap_medium, name="st_columns-column_gap_medium") - - -def test_column_gap_large_is_correctly_applied( - app: Page, assert_snapshot: ImageCompareFunction -): - """Test that the large column gap is correctly applied.""" - column_gap_large = ( - get_expander(app, "Column gap large").get_by_test_id("stHorizontalBlock").nth(0) - ) - # We use regex here since some browsers may resolve this to two numbers: - expect(column_gap_large).to_have_css("gap", re.compile("64px")) - column_gap_large.scroll_into_view_if_needed() - assert_snapshot(column_gap_large, name="st_columns-column_gap_large") - - -def test_column_gap_none_is_correctly_applied( - app: Page, assert_snapshot: ImageCompareFunction -): - """Test that the none column gap is correctly applied.""" - column_gap_none = ( - get_expander(app, "Column gap none").get_by_test_id("stHorizontalBlock").nth(0) - ) - # We use regex here since some browsers may resolve this to two numbers: - expect(column_gap_none).to_have_css("gap", re.compile("0px")) - column_gap_none.scroll_into_view_if_needed() - assert_snapshot(column_gap_none, name="st_columns-column_gap_none") + """Test that the different-sized column gaps are correctly applied.""" + + gaps = [ + (None, "0"), + ("xxsmall", "4px"), + ("xsmall", "8px"), + ("small", "16px"), + ("medium", "32px"), + ("large", "64px"), + ("xlarge", "96px"), + ("xxlarge", "128px"), + ] + + for gap, gap_value in gaps: + gap_name = str(gap).lower() + + column_gap = ( + get_expander(app, f"Column gap {gap_name}") + .get_by_test_id("stHorizontalBlock") + .nth(0) + ) + # We use regex here since some browsers may resolve this to two numbers: + expect(column_gap).to_have_css("gap", re.compile(gap_value)) + column_gap.scroll_into_view_if_needed() + assert_snapshot(column_gap, name=f"st_columns-column_gap_{gap_name}") def test_one_level_nesting_works_correctly( diff --git a/e2e_playwright/st_layouts_container_gap_size.py b/e2e_playwright/st_layouts_container_gap_size.py index 02268431e5d..9d0fca1553b 100644 --- a/e2e_playwright/st_layouts_container_gap_size.py +++ b/e2e_playwright/st_layouts_container_gap_size.py @@ -12,160 +12,73 @@ # See the License for the specific language governing permissions and # limitations under the License. -import streamlit as st +from __future__ import annotations -with st.container( - border=True, - gap="small", - horizontal=True, - key="container-horizontal-gap-small", -): - st.html( - '
One
', - width="stretch", - ) - st.html( - '
Two
', - width="stretch", - ) - st.html( - '
Three
', - width="stretch", - ) - st.html( - '
Four
', - width="stretch", - ) +from typing import TYPE_CHECKING, cast -with st.container( - border=True, - gap="medium", - horizontal=True, - key="container-horizontal-gap-medium", -): - st.html( - '
One
', - width="stretch", - ) - st.html( - '
Two
', - width="stretch", - ) - st.html( - '
Three
', - width="stretch", - ) - st.html( - '
Four
', - width="stretch", - ) +import streamlit as st -with st.container( - border=True, - gap="large", - horizontal=True, - key="container-horizontal-gap-large", -): - st.html( - '
One
', - width="stretch", - ) - st.html( - '
Two
', - width="stretch", - ) - st.html( - '
Three
', - width="stretch", - ) - st.html( - '
Four
', - width="stretch", - ) +if TYPE_CHECKING: + from streamlit.elements.lib.layout_utils import Gap -with st.container( - border=True, - gap=None, - horizontal=True, - key="container-horizontal-gap-none", -): - st.html( - '
One
', - width="stretch", - ) - st.html( - '
Two
', - width="stretch", - ) - st.html( - '
Three
', - width="stretch", - ) - st.html( - '
Four
', - width="stretch", - ) +GAPS = cast( + "list[Gap | None]", + [ + None, + "xxsmall", + "xsmall", + "small", + "medium", + "large", + "xlarge", + "xxlarge", + ], +) -with st.container( - border=True, gap="small", horizontal=False, key="container-vertical-gap-small" -): - st.html( - '
One
', - width="stretch", - ) - st.html( - '
Two
', - width="stretch", - ) - st.html( - '
Three
', - width="stretch", - ) +for gap in GAPS: + gap_name = str(gap).lower() -with st.container( - border=True, gap="medium", horizontal=False, key="container-vertical-gap-medium" -): - st.html( - '
One
', - width="stretch", - ) - st.html( - '
Two
', - width="stretch", - ) - st.html( - '
Three
', - width="stretch", - ) + with st.container( + border=True, + gap=gap, + horizontal=True, + key=f"container-horizontal-gap-{gap_name}", + ): + st.html( + '
One
', + width="stretch", + ) + st.html( + '
Two
', + width="stretch", + ) + st.html( + '
Three
', + width="stretch", + ) + st.html( + '
Four
', + width="stretch", + ) -with st.container( - border=True, gap="large", horizontal=False, key="container-vertical-gap-large" -): - st.html( - '
One
', - width="stretch", - ) - st.html( - '
Two
', - width="stretch", - ) - st.html( - '
Three
', - width="stretch", - ) +for gap in GAPS: + gap_name = str(gap).lower() -with st.container( - border=True, gap=None, horizontal=False, key="container-vertical-gap-none" -): - st.html( - '
One
', - width="stretch", - ) - st.html( - '
Two
', - width="stretch", - ) - st.html( - '
Three
', - width="stretch", - ) + with st.container( + border=True, + gap=gap, + horizontal=False, + key=f"container-vertical-gap-{gap_name}", + ): + st.html( + '
One
', + width="stretch", + ) + st.html( + '
Two
', + width="stretch", + ) + st.html( + '
Three
', + width="stretch", + ) diff --git a/e2e_playwright/st_layouts_container_gap_size_test.py b/e2e_playwright/st_layouts_container_gap_size_test.py index a55afa8e43c..23729ed41b9 100644 --- a/e2e_playwright/st_layouts_container_gap_size_test.py +++ b/e2e_playwright/st_layouts_container_gap_size_test.py @@ -17,20 +17,28 @@ from e2e_playwright.conftest import ImageCompareFunction from e2e_playwright.shared.app_utils import get_element_by_key -CONTAINER_KEYS = [ - "container-horizontal-gap-small", - "container-horizontal-gap-medium", - "container-horizontal-gap-large", - "container-horizontal-gap-none", - "container-vertical-gap-small", - "container-vertical-gap-medium", - "container-vertical-gap-large", - "container-vertical-gap-none", +GAPS = [ + None, + "xxsmall", + "xsmall", + "small", + "medium", + "large", + "xlarge", + "xxlarge", ] def test_layouts_container_gap_size(app: Page, assert_snapshot: ImageCompareFunction): """Snapshot test for each top-level container in st_layouts_container_gap_size.py.""" - for key in CONTAINER_KEYS: - locator = get_element_by_key(app, key) - assert_snapshot(locator, name=f"st_layouts_container_gap_size-{key}") + for gap in GAPS: + gap_name = str(gap).lower() + + container_keys = [ + f"container-horizontal-gap-{gap_name}", + f"container-vertical-gap-{gap_name}", + ] + + for key in container_keys: + locator = get_element_by_key(app, key) + assert_snapshot(locator, name=f"st_layouts_container_gap_size-{key}") diff --git a/e2e_playwright/st_space.py b/e2e_playwright/st_space.py index 1fa6a01af67..3bf0dbbd2e3 100644 --- a/e2e_playwright/st_space.py +++ b/e2e_playwright/st_space.py @@ -12,17 +12,35 @@ # See the License for the specific language governing permissions and # limitations under the License. +from __future__ import annotations + +from typing import TYPE_CHECKING, cast + import streamlit as st -st.write("Tests Outside of Containers") -st.space("small") -st.write("After small space") +if TYPE_CHECKING: + from streamlit.elements.lib.layout_utils import Gap -st.space("medium") -st.write("After medium space") +SPACES = cast( + "list[Gap]", + [ + "xxsmall", + "xsmall", + "small", + "medium", + "large", + "xlarge", + "xxlarge", + ], +) + +st.write("Tests Outside of Containers") -st.space("large") -st.write("After large space") +for space_names in SPACES: + with st.expander(f"Space set to {space_names}", expanded=True): + st.button(f"Before {space_names} space") + st.space(space_names) + st.button(f"After {space_names} space") st.divider() diff --git a/e2e_playwright/st_space_test.py b/e2e_playwright/st_space_test.py index c6e9bcf6c15..e53ba97f819 100644 --- a/e2e_playwright/st_space_test.py +++ b/e2e_playwright/st_space_test.py @@ -12,7 +12,9 @@ # See the License for the specific language governing permissions and # limitations under the License. -from playwright.sync_api import Page, expect +from collections.abc import Callable + +from playwright.sync_api import Locator, Page, expect from e2e_playwright.conftest import ImageCompareFunction, wait_until from e2e_playwright.shared.app_utils import get_element_by_key @@ -28,30 +30,22 @@ def test_space_elements_exist(app: Page): first_space = space_elements.first expect(first_space).to_have_text("") - # Check the first three space elements (in vertical layout, so height should be set) - # First space: st.space("small") = 0.75rem = 12px height (default size) - first_space = space_elements.nth(0) - wait_until( - app, - lambda: (bbox := first_space.bounding_box()) is not None - and int(bbox["height"]) == 12, # 0.75rem * 16px = 12px - ) + heights_em = [0.25, 0.5, 0.75, 2.5, 4.25, 6, 8] - # Second space: st.space("medium") = 2.5rem = 40px height - second_space = space_elements.nth(1) - wait_until( - app, - lambda: (bbox := second_space.bounding_box()) is not None - and int(bbox["height"]) == 40, # 2.5rem * 16px = 40px - ) + # Check the first space elements (in vertical layout, so height should + # be set) - # Third space: st.space("large") = 4.25rem = 68px height - third_space = space_elements.nth(2) - wait_until( - app, - lambda: (bbox := third_space.bounding_box()) is not None - and int(bbox["height"]) == 68, # 4.25rem * 16px = 68px - ) + def wait_condition(space: Locator, height_px: int) -> Callable[[], bool]: + return ( + lambda: (bbox := space.bounding_box()) is not None + and int(bbox["height"]) == height_px + ) + + for i, height_em in enumerate(heights_em): + height_px = round(height_em * 16) + space = space_elements.nth(i) + + wait_until(app, wait_condition(space, height_px)) def test_horizontal_container_spacing(app: Page, assert_snapshot: ImageCompareFunction): diff --git a/frontend/lib/src/components/core/Block/Block.test.tsx b/frontend/lib/src/components/core/Block/Block.test.tsx index 088adf38a73..f4565e5cf03 100644 --- a/frontend/lib/src/components/core/Block/Block.test.tsx +++ b/frontend/lib/src/components/core/Block/Block.test.tsx @@ -219,6 +219,16 @@ describe("FlexBoxContainer layout props", () => { }) it.each([ + [ + "gap: xxsmall", + { gapConfig: { gapSize: streamlit.GapSize.XXSMALL } }, + "gap: 0.25rem;", + ], + [ + "gap: xsmall", + { gapConfig: { gapSize: streamlit.GapSize.XSMALL } }, + "gap: 0.5rem;", + ], [ "gap: small", { gapConfig: { gapSize: streamlit.GapSize.SMALL } }, @@ -234,6 +244,16 @@ describe("FlexBoxContainer layout props", () => { { gapConfig: { gapSize: streamlit.GapSize.LARGE } }, "gap: 4rem;", ], + [ + "gap: xlarge", + { gapConfig: { gapSize: streamlit.GapSize.XLARGE } }, + "gap: 6rem;", + ], + [ + "gap: xxlarge", + { gapConfig: { gapSize: streamlit.GapSize.XXLARGE } }, + "gap: 8rem;", + ], [ "gap: none", { gapConfig: { gapSize: streamlit.GapSize.NONE } }, diff --git a/frontend/lib/src/components/core/Block/styled-components.ts b/frontend/lib/src/components/core/Block/styled-components.ts index 7b00f1fbaa8..9f23790156e 100644 --- a/frontend/lib/src/components/core/Block/styled-components.ts +++ b/frontend/lib/src/components/core/Block/styled-components.ts @@ -28,15 +28,26 @@ function translateGapWidth( gap: streamlit.GapSize | undefined, theme: EmotionTheme ): string { - let gapWidth = theme.spacing.lg - if (gap === streamlit.GapSize.MEDIUM) { - gapWidth = theme.spacing.threeXL - } else if (gap === streamlit.GapSize.LARGE) { - gapWidth = theme.spacing.fourXL - } else if (gap === streamlit.GapSize.NONE) { - gapWidth = theme.spacing.none + switch (gap) { + case streamlit.GapSize.XXSMALL: + return theme.spacing.twoXS + case streamlit.GapSize.XSMALL: + return theme.spacing.sm + case streamlit.GapSize.SMALL: + return theme.spacing.lg + case streamlit.GapSize.MEDIUM: + return theme.spacing.threeXL + case streamlit.GapSize.LARGE: + return theme.spacing.fourXL + case streamlit.GapSize.XLARGE: + return theme.spacing.fiveXL + case streamlit.GapSize.XXLARGE: + return theme.spacing.sixXL + case streamlit.GapSize.NONE: + return theme.spacing.none + default: + return theme.spacing.lg } - return gapWidth } export interface StyledElementContainerProps { diff --git a/frontend/lib/src/theme/primitives/spacing.ts b/frontend/lib/src/theme/primitives/spacing.ts index bc90cc39913..6761793f47d 100644 --- a/frontend/lib/src/theme/primitives/spacing.ts +++ b/frontend/lib/src/theme/primitives/spacing.ts @@ -27,4 +27,6 @@ export const spacing = { twoXL: "1.5rem", // 24px threeXL: "2rem", // 32px fourXL: "4rem", // 64px + fiveXL: "6rem", // 96px + sixXL: "8rem", // 128px } diff --git a/lib/streamlit/elements/layouts.py b/lib/streamlit/elements/layouts.py index 0b0154d8faf..4bf13a8eec0 100644 --- a/lib/streamlit/elements/layouts.py +++ b/lib/streamlit/elements/layouts.py @@ -167,13 +167,17 @@ class name prefixed with ``st-key-``. When ``horizontal`` is ``True``, ``"distribute"`` aligns the elements the same as ``"top"``. - gap : "small", "medium", "large", or None + gap : "xxsmall", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", or None The minimum gap size between the elements inside the container. This can be one of the following: + - ``"xxsmall"``: 0.25rem gap between the elements. + - ``"xsmall"``: 0.5rem gap between the elements. - ``"small"`` (default): 1rem gap between the elements. - ``"medium"``: 2rem gap between the elements. - ``"large"``: 4rem gap between the elements. + - ``"xlarge"``: 6rem gap between the elements. + - ``"xxlarge"``: 8rem gap between the elements. - ``None``: No gap between the elements. The rem unit is relative to the ``theme.baseFontSize`` @@ -364,13 +368,17 @@ def columns( Or ``[1, 2, 3]`` creates three columns where the second one is two times the width of the first one, and the third one is three times that width. - gap : "small", "medium", "large", or None + gap : "xxsmall", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", or None The size of the gap between the columns. This can be one of the following: + - ``"xxsmall"``: 0.25rem gap between the columns. + - ``"xsmall"``: 0.5rem gap between the columns. - ``"small"`` (default): 1rem gap between the columns. - ``"medium"``: 2rem gap between the columns. - ``"large"``: 4rem gap between the columns. + - ``"xlarge"``: 6rem gap between the columns. + - ``"xxlarge"``: 8rem gap between the columns. - ``None``: No gap between the columns. The rem unit is relative to the ``theme.baseFontSize`` diff --git a/lib/streamlit/elements/lib/layout_utils.py b/lib/streamlit/elements/lib/layout_utils.py index df395d482f9..18deeb53ab3 100644 --- a/lib/streamlit/elements/lib/layout_utils.py +++ b/lib/streamlit/elements/lib/layout_utils.py @@ -35,8 +35,15 @@ Width: TypeAlias = int | Literal["stretch", "content"] HeightWithoutContent: TypeAlias = int | Literal["stretch"] Height: TypeAlias = int | Literal["stretch", "content"] -SpaceSize: TypeAlias = int | Literal["stretch", "small", "medium", "large"] -Gap: TypeAlias = Literal["small", "medium", "large"] +SpaceSize: TypeAlias = ( + int + | Literal[ + "stretch", "xxsmall", "xsmall", "small", "medium", "large", "xlarge", "xxlarge" + ] +) +Gap: TypeAlias = Literal[ + "xxsmall", "xsmall", "small", "medium", "large", "xlarge", "xxlarge" +] HorizontalAlignment: TypeAlias = Literal["left", "center", "right", "distribute"] VerticalAlignment: TypeAlias = Literal["top", "center", "bottom", "distribute"] TextAlignment: TypeAlias = Literal["left", "center", "right", "justify"] @@ -45,9 +52,13 @@ # If changing these, also check streamlit/frontend/lib/src/theme/primitives/sizes.ts # to ensure sizes are kept in sync. SIZE_TO_REM_MAPPING = { + "xxsmall": 0.25, # Aligns with gap "xxsmall" (4px) + "xsmall": 0.5, # Aligns with gap "xsmall" (8px) "small": 0.75, # Height of widget label minus gap "medium": 2.5, # Height of button/input field "large": 4.25, # Height of large widget without label + "xlarge": 6, # Aligns with gap "xlarge" (96px) + "xxlarge": 8, # Aligns with gap "xxlarge" (128px) } @@ -147,7 +158,16 @@ def validate_space_size(size: SpaceSize) -> None: raise StreamlitInvalidSizeError(size) if isinstance(size, str): - valid_strings = ["stretch", "small", "medium", "large"] + valid_strings = [ + "stretch", + "xxsmall", + "xsmall", + "small", + "medium", + "large", + "xlarge", + "xxlarge", + ] if size not in valid_strings: raise StreamlitInvalidSizeError(size) elif isinstance(size, int) and size <= 0: @@ -183,9 +203,13 @@ def get_height_config(height: Height | SpaceSize) -> HeightConfig: def get_gap_size(gap: str | None, element_type: str) -> GapSize.ValueType: """Convert a gap string or None to a GapSize proto value.""" gap_mapping = { + "xxsmall": GapSize.XXSMALL, + "xsmall": GapSize.XSMALL, "small": GapSize.SMALL, "medium": GapSize.MEDIUM, "large": GapSize.LARGE, + "xlarge": GapSize.XLARGE, + "xxlarge": GapSize.XXLARGE, } if isinstance(gap, str): diff --git a/lib/streamlit/elements/space.py b/lib/streamlit/elements/space.py index 20c9751472a..63413110c8f 100644 --- a/lib/streamlit/elements/space.py +++ b/lib/streamlit/elements/space.py @@ -42,15 +42,23 @@ def space( Parameters ---------- - size : "small", "medium", "large", "stretch", or int + size : "xxsmall", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", "stretch", or int The size of the space. This can be one of the following values: + - ``"xxsmall"``: 0.25rem, matching the ``"xxsmall"`` gap in + ``st.container`` and ``st.columns``. + - ``"xsmall"``: 0.5rem, matching the ``"xsmall"`` gap in + ``st.container`` and ``st.columns``. - ``"small"`` (default): 0.75rem, which is the height of a widget label. This is useful for aligning buttons with labeled widgets. - ``"medium"``: 2.5rem, which is the height of a button or (unlabeled) input field. - ``"large"``: 4.25rem, which is the height of a labeled input - field or unlabeled media widget, like `st.file_uploader`. + field or unlabeled media widget, like ``st.file_uploader``. + - ``"xlarge"``: 6rem, matching the ``"xlarge"`` gap in + ``st.container`` and ``st.columns``. + - ``"xxlarge"``: 8rem, matching the ``"xxlarge"`` gap in + ``st.container`` and ``st.columns``. - ``"stretch"``: Expands to fill remaining space in the container. - An integer: Fixed size in pixels. diff --git a/lib/streamlit/errors.py b/lib/streamlit/errors.py index db9ffed5211..2d3af967710 100644 --- a/lib/streamlit/errors.py +++ b/lib/streamlit/errors.py @@ -265,7 +265,9 @@ class StreamlitInvalidColumnGapError(LocalizableStreamlitException): def __init__(self, gap: str, element_type: str) -> None: super().__init__( - 'The `gap` argument to `{element_type}` must be `"small"`, `"medium"`, `"large"`, or `"none"`. \n' + 'The `gap` argument to `{element_type}` must be `"xxsmall"`, ' + '`"xsmall"`, `"small"`, `"medium"`, `"large"`, `"xlarge"`, ' + '`"xxlarge"`, or `"none"`. \n' "The argument passed was {gap}.", gap=gap, element_type=element_type, diff --git a/lib/tests/streamlit/elements/lib/layout_utils_test.py b/lib/tests/streamlit/elements/lib/layout_utils_test.py index ba84ba6c576..4fef2182334 100644 --- a/lib/tests/streamlit/elements/lib/layout_utils_test.py +++ b/lib/tests/streamlit/elements/lib/layout_utils_test.py @@ -291,9 +291,13 @@ def test_get_align(self, align: str, expected) -> None: @parameterized.expand( [ + ("xxsmall",), + ("xsmall",), ("small",), ("medium",), ("large",), + ("xlarge",), + ("xxlarge",), ("stretch",), (1,), (100,), @@ -322,9 +326,13 @@ def test_validate_size_invalid(self, size: any): @parameterized.expand( [ + ("xxsmall", 0.25), + ("xsmall", 0.5), ("small", 0.75), ("medium", 2.5), ("large", 4.25), + ("xlarge", 6), + ("xxlarge", 8), ] ) def test_get_width_config_rem(self, size: str, expected_rem: float): @@ -338,9 +346,13 @@ def test_get_width_config_rem(self, size: str, expected_rem: float): @parameterized.expand( [ + ("xxsmall", 0.25), + ("xsmall", 0.5), ("small", 0.75), ("medium", 2.5), ("large", 4.25), + ("xlarge", 6), + ("xxlarge", 8), ] ) def test_get_height_config_rem(self, size: str, expected_rem: float): diff --git a/lib/tests/streamlit/elements/space_test.py b/lib/tests/streamlit/elements/space_test.py index 18fdad6535b..67da52a1ff2 100644 --- a/lib/tests/streamlit/elements/space_test.py +++ b/lib/tests/streamlit/elements/space_test.py @@ -35,9 +35,13 @@ def test_space_default(self): @parameterized.expand( [ + ("xxsmall", 0.25), + ("xsmall", 0.5), ("small", 0.75), ("medium", 2.5), ("large", 4.25), + ("xlarge", 6), + ("xxlarge", 8), ] ) def test_space_rem_sizes(self, size_name, expected_rem): diff --git a/proto/streamlit/proto/GapSize.proto b/proto/streamlit/proto/GapSize.proto index 2502fd5a3fe..bf4ea8b78b8 100644 --- a/proto/streamlit/proto/GapSize.proto +++ b/proto/streamlit/proto/GapSize.proto @@ -27,6 +27,10 @@ enum GapSize { MEDIUM = 2; LARGE = 3; NONE = 4; + XXSMALL = 5; + XSMALL = 6; + XLARGE = 7; + XXLARGE = 8; } message GapConfig {