Add clipsToBounds and overflow modifiers. (#195)

Part of #51.

Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md

@@ -25,7 +25,7 @@ Tailwind utility | Slipstream modifier
 [Isolation](https://tailwindcss.com/docs/isolation) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Object Fit](https://tailwindcss.com/docs/object-fit) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Object Position](https://tailwindcss.com/docs/object-position) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
-[Overflow](https://tailwindcss.com/docs/overflow) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
+[Overflow](https://tailwindcss.com/docs/overflow) | ``View/overflow(_:condition:)``, ``View/overflow(_:axis:condition:)``
 [Overscroll Behavior](https://tailwindcss.com/docs/overscroll-behavior) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Position](https://tailwindcss.com/docs/position) | ``View/position(_:condition:)``
 [Top / Right / Bottom / Left](https://tailwindcss.com/docs/top-right-bottom-left) | ``View/placement(inset:condition:)``, ``View/placement(x:y:condition:)``, ``View/placement(left:right:top:bottom:condition:)``

Sources/Slipstream/Documentation.docc/TailwindCSS/Layout/Layout-Overflow.md

@@ -0,0 +1,14 @@
+# Overflow
+
+Utilities for controlling how a view handles content that is too large for the container.
+
+## Topics
+
+### Modifiers
+
+- ``View/overflow(_:condition:)``
+- ``View/overflow(_:axis:condition:)``
+
+### Supporting types
+
+- ``Overflow``

Sources/Slipstream/Documentation.docc/TailwindCSS/TailwindCSS-Utilities.md

@@ -9,6 +9,7 @@ Slipstream implementations of Tailwind CSS's utility classes.
 - ``Container``
 - <doc:Layout-Display>
 - <doc:Layout-Float>
+- <doc:Layout-Overflow>
 - <doc:Layout-Position>
 - <doc:Layout-Placement>
 

Sources/Slipstream/TailwindCSS/Layout/View+overflow.swift

@@ -0,0 +1,37 @@
+/// Constants that control how a view handles content that is too large for the container.
+///
+/// - SeeAlso: Tailwind CSS' [overflow](https://tailwindcss.com/docs/overflow) documentation.
+@available(iOS 17.0, macOS 14.0, *)
+public enum Overflow: String {
+  case auto
+  case hidden
+  case clip
+  case visible
+  case scroll
+}
+
+extension View {
+  /// Changes the clipping behavior of the modified view.
+  ///
+  /// - SeeAlso: Tailwind CSS' [overflow](https://tailwindcss.com/docs/overflow) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func overflow(_ overflow: Overflow, condition: Condition? = nil) -> some View {
+    return modifier(TailwindClassModifier(add: "overflow-" + overflow.rawValue, condition: condition))
+  }
+
+  /// Changes the clipping behavior of the modified view for a specific axis.
+  ///
+  /// - SeeAlso: Tailwind CSS' [overflow](https://tailwindcss.com/docs/overflow) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func overflow(_ overflow: Overflow, axis: Axis, condition: Condition? = nil) -> some View {
+    return modifier(TailwindClassModifier(add: "overflow-" + axis.rawValue + "-" + overflow.rawValue, condition: condition))
+  }
+
+  /// Enables clipping on the modified view.
+  ///
+  /// - SeeAlso: Tailwind CSS' [overflow](https://tailwindcss.com/docs/overflow) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func clipsToBounds(condition: Condition? = nil) -> some View {
+    return overflow(.hidden, condition: condition)
+  }
+}

Tests/SlipstreamTests/TailwindCSS/Layout/OverflowTests.swift

@@ -0,0 +1,32 @@
+import Testing
+import Slipstream
+
+struct OverflowTests {
+  @Test func options() throws {
+    try #expect(renderHTML(Div {}.overflow(.auto)) == #"<div class="overflow-auto"></div>"#)
+    try #expect(renderHTML(Div {}.overflow(.hidden)) == #"<div class="overflow-hidden"></div>"#)
+    try #expect(renderHTML(Div {}.overflow(.clip)) == #"<div class="overflow-clip"></div>"#)
+    try #expect(renderHTML(Div {}.overflow(.visible)) == #"<div class="overflow-visible"></div>"#)
+    try #expect(renderHTML(Div {}.overflow(.scroll)) == #"<div class="overflow-scroll"></div>"#)
+  }
+
+  @Test func xAxis() throws {
+    try #expect(renderHTML(Div {}.overflow(.auto, axis: .x)) == #"<div class="overflow-x-auto"></div>"#)
+    try #expect(renderHTML(Div {}.overflow(.hidden, axis: .x)) == #"<div class="overflow-x-hidden"></div>"#)
+    try #expect(renderHTML(Div {}.overflow(.clip, axis: .x)) == #"<div class="overflow-x-clip"></div>"#)
+    try #expect(renderHTML(Div {}.overflow(.visible, axis: .x)) == #"<div class="overflow-x-visible"></div>"#)
+    try #expect(renderHTML(Div {}.overflow(.scroll, axis: .x)) == #"<div class="overflow-x-scroll"></div>"#)
+  }
+
+  @Test func yAxis() throws {
+    try #expect(renderHTML(Div {}.overflow(.auto, axis: .y)) == #"<div class="overflow-y-auto"></div>"#)
+    try #expect(renderHTML(Div {}.overflow(.hidden, axis: .y)) == #"<div class="overflow-y-hidden"></div>"#)
+    try #expect(renderHTML(Div {}.overflow(.clip, axis: .y)) == #"<div class="overflow-y-clip"></div>"#)
+    try #expect(renderHTML(Div {}.overflow(.visible, axis: .y)) == #"<div class="overflow-y-visible"></div>"#)
+    try #expect(renderHTML(Div {}.overflow(.scroll, axis: .y)) == #"<div class="overflow-y-scroll"></div>"#)
+  }
+
+  @Test func clipsToBounds() throws {
+    try #expect(renderHTML(Div {}.clipsToBounds()) == #"<div class="overflow-hidden"></div>"#)
+  }
+}