Repository navigation
feat(navigation-bar): public circle icon and button for custom bar actions #22
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
94080bc
feat(navigation-bar): public circle icon and button for custom bar ac…
optimisticcreator d156d9a
Merge remote-tracking branch 'origin/master' into feat/nav-circle-button
optimisticcreator 74d9d65
fix(navigation-bar): address review on the circle icon/button API
optimisticcreator 91b4f6f
fix(navigation-bar): single disabled look, menu press style, isolation
optimisticcreator bb7bb20
docs(navigation-bar): move the spacing note below the circle button e…
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| // | ||
| // Copyright © 2026 Dash Core Group. All rights reserved. | ||
| // | ||
| // Licensed under the MIT License (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // https://opensource.org/licenses/MIT | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| /// The one implementation of a navigation bar button: touch area, press and | ||
| /// disabled styling, accessibility label. `NavigationBarElement.button(action:)` | ||
| /// and `NavigationBarCircleButton` both render through it. | ||
| @available(iOS 14, macOS 11, *) | ||
| nonisolated struct NavigationBarButton<Label: View>: View { | ||
| private let accessibilityLabel: Text | ||
| private let action: () -> Void | ||
| private let label: Label | ||
|
|
||
| init( | ||
| accessibilityLabel: Text, | ||
| action: @escaping () -> Void, | ||
| @ViewBuilder label: () -> Label | ||
| ) { | ||
| self.accessibilityLabel = accessibilityLabel | ||
| self.action = action | ||
| self.label = label() | ||
| } | ||
|
|
||
| var body: some View { | ||
| Button(action: action) { | ||
| label.navigationBarTouchArea() | ||
| } | ||
| .buttonStyle(NavigationBarButtonStyle()) | ||
| .accessibilityLabel(accessibilityLabel) | ||
| } | ||
| } | ||
|
|
||
| @available(iOS 14, macOS 11, *) | ||
| extension View { | ||
| /// The bar's touch area: 44pt tall, and at least 44pt wide for hit | ||
| /// testing. The extra width is hit area only — the element keeps its | ||
| /// hug width in layout, so a 34pt circle stays aligned to the bar's | ||
| /// 20pt inset. | ||
| nonisolated func navigationBarTouchArea() -> some View { | ||
| frame(height: 44) | ||
| .contentShape(NavigationBarHitShape()) | ||
| } | ||
|
|
||
| /// Dims a bar element while it is disabled — the one place the bar's | ||
| /// disabled look is defined. | ||
| nonisolated func navigationBarDisabledDimming(_ isEnabled: Bool) -> some View { | ||
| opacity(isEnabled ? 1 : navigationBarDisabledOpacity) | ||
| } | ||
| } | ||
|
|
||
| /// Opacity of a disabled bar element (button, menu, `BottomSheet` close). | ||
| let navigationBarDisabledOpacity: Double = 0.35 | ||
|
|
||
| /// The element's frame, widened symmetrically to at least 44pt. | ||
| @available(iOS 14, macOS 11, *) | ||
| private struct NavigationBarHitShape: Shape { | ||
| func path(in rect: CGRect) -> Path { | ||
| let outset = max(0, (44 - rect.width) / 2) | ||
| return Path(rect.insetBy(dx: -outset, dy: 0)) | ||
| } | ||
| } | ||
|
|
||
| @available(iOS 14, macOS 11, *) | ||
| struct NavigationBarButtonStyle: ButtonStyle { | ||
| func makeBody(configuration: Configuration) -> some View { | ||
| NavigationBarButtonStyleBody(configuration: configuration) | ||
| } | ||
| } | ||
|
|
||
| /// A view, not inline in `makeBody`, so it can read `isEnabled`: a custom | ||
| /// `ButtonStyle` gets no automatic disabled dimming. | ||
| @available(iOS 14, macOS 11, *) | ||
| private struct NavigationBarButtonStyleBody: View { | ||
| let configuration: ButtonStyleConfiguration | ||
|
|
||
| @Environment(\.isEnabled) private var isEnabled | ||
|
|
||
| @ViewBuilder | ||
| var body: some View { | ||
| let content = configuration.label | ||
| .scaleEffect(configuration.isPressed ? 0.88 : 1) | ||
| .opacity(configuration.isPressed ? 0.7 : 1) | ||
| .navigationBarDisabledDimming(isEnabled) | ||
|
|
||
| if #available(iOS 15, macOS 12, *) { | ||
| content.animation(.easeInOut(duration: 0.12), value: configuration.isPressed) | ||
| } else { | ||
| content.animation(.easeInOut(duration: 0.12)) | ||
| } | ||
| } | ||
| } | ||
59 changes: 59 additions & 0 deletions
59
Sources/DashUIKit/Components/NavigationBarCircleButton.swift
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| // | ||
| // Copyright © 2026 Dash Core Group. All rights reserved. | ||
| // | ||
| // Licensed under the MIT License (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // https://opensource.org/licenses/MIT | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| /// A `NavigationBarCircleIcon` as a bar button, for an action the bar has no | ||
| /// bundled element for (refresh, …). Same touch area, press animation and | ||
| /// disabled dimming as `NavigationBarElement.button(action:)`. | ||
| /// | ||
| /// `accessibilityLabel` is a `Text`, so `Text("Refresh")` is looked up in the | ||
| /// host's string table like a SwiftUI `Button` title; pass | ||
| /// `Text(verbatim:)` for an already-localized string. | ||
| @available(iOS 14, macOS 11, *) | ||
| public struct NavigationBarCircleButton: View { | ||
| private let icon: DashIconSource | ||
| private let accessibilityLabel: Text | ||
| private let action: () -> Void | ||
|
|
||
| public init( | ||
| _ icon: DashIconSource, | ||
| accessibilityLabel: Text, | ||
| action: @escaping () -> Void | ||
| ) { | ||
| self.icon = icon | ||
| self.accessibilityLabel = accessibilityLabel | ||
| self.action = action | ||
| } | ||
|
|
||
| public var body: some View { | ||
| NavigationBarButton(accessibilityLabel: accessibilityLabel, action: action) { | ||
| NavigationBarCircleIcon(icon) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| #if DEBUG | ||
| @available(iOS 17, macOS 14, *) | ||
| #Preview("NavigationBarCircleButton") { | ||
| HStack(spacing: 10) { | ||
| NavigationBarCircleButton(.system("arrow.clockwise"), accessibilityLabel: Text("Refresh")) { } | ||
| NavigationBarCircleButton(.system("arrow.clockwise"), accessibilityLabel: Text("Refresh")) { } | ||
| .disabled(true) | ||
| } | ||
| .padding() | ||
| } | ||
| #endif |
84 changes: 84 additions & 0 deletions
84
Sources/DashUIKit/Components/NavigationBarCircleIcon.swift
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| // | ||
| // Copyright © 2026 Dash Core Group. All rights reserved. | ||
| // | ||
| // Licensed under the MIT License (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // https://opensource.org/licenses/MIT | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| /// The navigation bar's round element: an icon centred in a 34pt circle with a | ||
| /// 1.5pt `toolbarRoundBorder` stroke, tinted `toolbarRoundContent`. The whole | ||
| /// circle is its hit-testing shape. | ||
| /// | ||
| /// `NavigationBarElement.back`, `.close` and `.plus` draw through it. Use it | ||
| /// directly only to build something the bar doesn't ship — for a button use | ||
| /// `NavigationBarCircleButton`, for a menu `NavigationBarCircleMenu`. | ||
| /// | ||
| /// The icon is sized by the component: an SF Symbol (`.system`) is set in | ||
| /// `Font.dash.subheadMedium`; a `.custom` / `.uiImage` asset renders at its own | ||
| /// size, so it should be drawn for the circle (the bundled nav glyphs are). | ||
| @available(iOS 14, macOS 11, *) | ||
| public struct NavigationBarCircleIcon: View { | ||
| private let source: DashIconSource | ||
|
|
||
| public init(_ source: DashIconSource) { | ||
| self.source = source | ||
| } | ||
|
|
||
| public var body: some View { | ||
| NavigationBarCircleIconContent(source: source) | ||
| } | ||
| } | ||
|
|
||
| /// The drawing behind `NavigationBarCircleIcon`. `nonisolated` so the | ||
| /// nonisolated `NavigationBarElement.icon` can build it without the public | ||
| /// type committing to that isolation. | ||
| @available(iOS 14, macOS 11, *) | ||
| nonisolated struct NavigationBarCircleIconContent: View { | ||
| let source: DashIconSource | ||
|
|
||
| var body: some View { | ||
| glyph | ||
| .foregroundColor(.dash.toolbarRoundContent) | ||
| .frame(width: 34, height: 34) | ||
| .overlay( | ||
| Circle() | ||
| .strokeBorder(Color.dash.toolbarRoundBorder, lineWidth: 1.5) | ||
| ) | ||
| .contentShape(Circle()) | ||
| } | ||
|
|
||
| @ViewBuilder | ||
| private var glyph: some View { | ||
| switch source { | ||
| case .system: | ||
| Image(dash: source) | ||
| .font(Font.dash.subheadMedium) | ||
| case .custom, .uiImage: | ||
| Image(dash: source) | ||
| .fixedSize() | ||
| } | ||
| } | ||
| } | ||
|
|
||
| #if DEBUG | ||
| @available(iOS 17, macOS 14, *) | ||
| #Preview("NavigationBarCircleIcon") { | ||
| HStack(spacing: 10) { | ||
| NavigationBarCircleIcon(.custom(NavigationBarElement.back.rawValue, bundle: .module)) | ||
| NavigationBarCircleIcon(.system("arrow.clockwise")) | ||
| NavigationBarCircleIcon(.system("ellipsis")) | ||
| } | ||
| .padding() | ||
| } | ||
| #endif |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.