From ea918e602f0eb6008ce90e68bb5b7cd68fc2dce4 Mon Sep 17 00:00:00 2001
From: Jeff Verkoeyen <jverkoey@gmail.com>
Date: Sat, 14 Sep 2024 22:17:53 -0700
Subject: [PATCH] Add clipsToBounds and overflow modifiers.

Part of https://github.com/jverkoey/slipstream/issues/51.
---
 .../SlipstreamForTailwindCSSDevelopers.md     |  2 +-
 .../TailwindCSS/Layout/Layout-Overflow.md     | 14 +++++++
 .../TailwindCSS/TailwindCSS-Utilities.md      |  1 +
 .../TailwindCSS/Layout/View+overflow.swift    | 37 +++++++++++++++++++
 .../TailwindCSS/Layout/OverflowTests.swift    | 32 ++++++++++++++++
 5 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 Sources/Slipstream/Documentation.docc/TailwindCSS/Layout/Layout-Overflow.md
 create mode 100644 Sources/Slipstream/TailwindCSS/Layout/View+overflow.swift
 create mode 100644 Tests/SlipstreamTests/TailwindCSS/Layout/OverflowTests.swift

diff --git a/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md b/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md
index 4a82565..687b695 100644
--- a/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md
+++ b/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:)``
diff --git a/Sources/Slipstream/Documentation.docc/TailwindCSS/Layout/Layout-Overflow.md b/Sources/Slipstream/Documentation.docc/TailwindCSS/Layout/Layout-Overflow.md
new file mode 100644
index 0000000..e10af85
--- /dev/null
+++ b/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``
diff --git a/Sources/Slipstream/Documentation.docc/TailwindCSS/TailwindCSS-Utilities.md b/Sources/Slipstream/Documentation.docc/TailwindCSS/TailwindCSS-Utilities.md
index 9437108..37f43fd 100644
--- a/Sources/Slipstream/Documentation.docc/TailwindCSS/TailwindCSS-Utilities.md
+++ b/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>
 
diff --git a/Sources/Slipstream/TailwindCSS/Layout/View+overflow.swift b/Sources/Slipstream/TailwindCSS/Layout/View+overflow.swift
new file mode 100644
index 0000000..c301d55
--- /dev/null
+++ b/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)
+  }
+}
diff --git a/Tests/SlipstreamTests/TailwindCSS/Layout/OverflowTests.swift b/Tests/SlipstreamTests/TailwindCSS/Layout/OverflowTests.swift
new file mode 100644
index 0000000..5126bd9
--- /dev/null
+++ b/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>"#)
+  }
+}