fix(format/html): make element children break if attributes break

crates/biome_html_formatter/src/html/auxiliary/element.rs

@@ -103,9 +103,11 @@ impl FormatNodeRule<HtmlElement> for FormatHtmlElement {
             None
         };
 
+        let attr_group_id = f.group_id("element-attr-group-id");
         FormatNodeRule::fmt(
             &FormatHtmlOpeningElement::default().with_options(FormatHtmlOpeningElementOptions {
                 r_angle_is_borrowed: borrowed_r_angle.is_some(),
+                attr_group_id,
             }),
             &opening_element,
             f,
@@ -130,10 +132,16 @@ impl FormatNodeRule<HtmlElement> for FormatHtmlElement {
                 } => {
                     write!(
                         f,
-                        [best_fitting![
-                            format_args![flat_children],
-                            format_args![expanded_children]
-                        ]]
+                        [
+                            // If the attribute group breaks, prettier always breaks the children as well.
+                            &if_group_breaks(&expanded_children).with_group_id(Some(attr_group_id)),
+                            // Otherwise, we can do whatever fits best for the children.
+                            &if_group_fits_on_line(&best_fitting![
+                                format_args![flat_children],
+                                format_args![expanded_children]
+                            ])
+                            .with_group_id(Some(attr_group_id))
+                        ]
                     )?;
                 }
             }

crates/biome_html_formatter/src/html/auxiliary/opening_element.rs

@@ -1,5 +1,5 @@
 use crate::prelude::*;
-use biome_formatter::{write, FormatRuleWithOptions};
+use biome_formatter::{group_id::DebugGroupId, write, FormatRuleWithOptions};
 use biome_html_syntax::{HtmlOpeningElement, HtmlOpeningElementFields};
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatHtmlOpeningElement {
@@ -11,18 +11,23 @@ pub(crate) struct FormatHtmlOpeningElement {
     /// [FormatHtmlElementList]: crate::html::lists::element_list::FormatHtmlElementList
     /// [HtmlElementList]: biome_html_syntax::HtmlElementList
     r_angle_is_borrowed: bool,
+
+    attr_group_id: Option<DebugGroupId>,
 }
 
 pub(crate) struct FormatHtmlOpeningElementOptions {
     /// Whether or not the r_angle is borrowed, and therefore managed by a different formatter.
     pub r_angle_is_borrowed: bool,
+
+    pub attr_group_id: DebugGroupId,
 }
 
 impl FormatRuleWithOptions<HtmlOpeningElement> for FormatHtmlOpeningElement {
     type Options = FormatHtmlOpeningElementOptions;
 
     fn with_options(mut self, options: Self::Options) -> Self {
         self.r_angle_is_borrowed = options.r_angle_is_borrowed;
+        self.attr_group_id = Some(options.attr_group_id);
         self
     }
 }
@@ -39,7 +44,6 @@ impl FormatNodeRule<HtmlOpeningElement> for FormatHtmlOpeningElement {
         let bracket_same_line = f.options().bracket_same_line().value();
         write!(f, [l_angle_token.format(), name.format()])?;
 
-        let attr_group_id = f.group_id("element-attr-group-id");
         write!(
             f,
             [&group(&format_with(|f| {
@@ -58,7 +62,7 @@ impl FormatNodeRule<HtmlOpeningElement> for FormatHtmlOpeningElement {
                 }
                 Ok(())
             }))
-            .with_group_id(Some(attr_group_id))]
+            .with_group_id(self.attr_group_id)]
         )?;
 
         Ok(())

crates/biome_html_formatter/tests/specs/html/elements/bracket-same-line/element.html.snap

@@ -42,7 +42,9 @@ Indent script and style: false
 	style="color: red"
 	data-foo="bar"
 	data-bar="foo"
->hello world</div>
+>
+	hello world
+</div>
 ```
 
 ## Output 1
@@ -64,5 +66,7 @@ Indent script and style: false
 	class="world really-long-class-name another-really-long-class-name"
 	style="color: red"
 	data-foo="bar"
-	data-bar="foo">hello world</div>
+	data-bar="foo">
+	hello world
+</div>
 ```

crates/biome_html_formatter/tests/specs/html/elements/inline/tags-dont-hug-content-2.html.snap.new

@@ -0,0 +1,35 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+assertion_line: 211
+info: elements/inline/tags-dont-hug-content-2.html
+---
+# Input
+
+```html
+<b>
+	asdfasdf foo bar things much more longer things lorem ipsum or something idk i put pineapple in strombolis
+</b>
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Attribute Position: Auto
+Bracket same line: false
+Whitespace sensitivity: css
+Indent script and style: false
+-----
+
+```html
+<b></b>
+```

crates/biome_html_formatter/tests/specs/html/elements/inline/tags-dont-hug-content.html.snap.new

@@ -0,0 +1,33 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+assertion_line: 211
+info: elements/inline/tags-dont-hug-content.html
+---
+# Input
+
+```html
+<b> asdfasdf foo bar things much more longer things lorem ipsum or something idk i put pineapple in strombolis </b>
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Attribute Position: Auto
+Bracket same line: false
+Whitespace sensitivity: css
+Indent script and style: false
+-----
+
+```html
+<b></b>
+```

crates/biome_html_formatter/tests/specs/html/long-content.html.snap.new

@@ -0,0 +1,33 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+assertion_line: 211
+info: long-content.html
+---
+# Input
+
+```html
+<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus velit non justo tempus pretium. Praesent orci lorem, pellentesque sit amet ullamcorper sed, consectetur quis odio. In felis nulla, pellentesque a dolor eget, semper vestibulum nisi. Sed imperdiet dui a massa placerat ullamcorper. Praesent eleifend purus eget arcu faucibus, ac fringilla nulla aliquet. Aliquam id accumsan libero. Duis efficitur nisi quis massa mollis ultricies. Sed condimentum sit amet urna in cursus. Ut id tortor vestibulum, mollis enim sed, ornare ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut nec dapibus est. Maecenas orci purus, blandit eu faucibus eu, lacinia id turpis.</div>
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Attribute Position: Auto
+Bracket same line: false
+Whitespace sensitivity: css
+Indent script and style: false
+-----
+
+```html
+<div></div>
+```