generated from bitwarden/template
-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
PM-16900: Update form card style for vault (#1291)
- Loading branch information
1 parent
497a0f9
commit 142b5e8
Showing
146 changed files
with
912 additions
and
340 deletions.
There are no files selected for viewing
This file contains 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
53 changes: 53 additions & 0 deletions
53
...rdenShared/UI/Platform/Application/Appearance/Styles/BitwardenBorderlessButtonStyle.swift
This file contains 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,53 @@ | ||
| import SwiftUI | ||
|
|
||
| // MARK: - BitwardenBorderlessButtonStyle | ||
|
|
||
| /// The style for a borderless button in this application. | ||
| /// | ||
| struct BitwardenBorderlessButtonStyle: ButtonStyle { | ||
| // MARK: Properties | ||
|
|
||
| /// A value indicating whether the button is currently enabled or disabled. | ||
| @Environment(\.isEnabled) var isEnabled: Bool | ||
|
|
||
| /// The color of the foreground elements, including text and template images. | ||
| var foregroundColor: Color { | ||
| isEnabled | ||
| ? Asset.Colors.buttonOutlinedForeground.swiftUIColor | ||
| : Asset.Colors.buttonOutlinedDisabledForeground.swiftUIColor | ||
| } | ||
|
|
||
| // MARK: ButtonStyle | ||
|
|
||
| func makeBody(configuration: Configuration) -> some View { | ||
| configuration.label | ||
| .foregroundStyle(foregroundColor) | ||
| .padding(.vertical, 14) | ||
| .styleGuide(.subheadlineSemibold) | ||
| .opacity(configuration.isPressed ? 0.5 : 1) | ||
| } | ||
| } | ||
|
|
||
| // MARK: ButtonStyle | ||
|
|
||
| extension ButtonStyle where Self == BitwardenBorderlessButtonStyle { | ||
| /// The style for a borderless button in this application. | ||
| /// | ||
| static var bitwardenBorderless: BitwardenBorderlessButtonStyle { | ||
| BitwardenBorderlessButtonStyle() | ||
| } | ||
| } | ||
|
|
||
| // MARK: Previews | ||
|
|
||
| #if DEBUG | ||
| #Preview() { | ||
| VStack { | ||
| Button("Bitwarden") {} | ||
|
|
||
| Button("Bitwarden") {} | ||
| .disabled(true) | ||
| } | ||
| .buttonStyle(.bitwardenBorderless) | ||
| } | ||
| #endif |
98 changes: 98 additions & 0 deletions
98
BitwardenShared/UI/Platform/Application/Appearance/Styles/ButtonStylesTests.swift
This file contains 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,98 @@ | ||
| import SnapshotTesting | ||
| import SwiftUI | ||
| import XCTest | ||
|
|
||
| @testable import BitwardenShared | ||
|
|
||
| final class ButtonStylesTests: BitwardenTestCase { | ||
| // MARK: Types | ||
|
|
||
| /// A view that displays all of the button styles for snapshotting. | ||
| struct ButtonStyles: View { | ||
| var body: some View { | ||
| HStack(alignment: .top, spacing: 20) { | ||
| VStack { | ||
| Group { | ||
| titleView("Primary") | ||
|
|
||
| Button("Enabled") {} | ||
| Button("Disabled") {} | ||
| .disabled(true) | ||
| } | ||
| .buttonStyle(.primary()) | ||
| } | ||
|
|
||
| VStack { | ||
| Group { | ||
| titleView("Primary Destructive") | ||
|
|
||
| Button("Enabled") {} | ||
| Button("Disabled") {} | ||
| .disabled(true) | ||
| } | ||
| .buttonStyle(.primary(isDestructive: true)) | ||
| } | ||
|
|
||
| VStack { | ||
| titleView("Secondary") | ||
|
|
||
| Button("Enabled") {} | ||
| Button("Disabled") {} | ||
| .disabled(true) | ||
| } | ||
| .buttonStyle(.secondary()) | ||
|
|
||
| VStack { | ||
| titleView("Borderless") | ||
|
|
||
| Button("Enabled") {} | ||
| Button("Disabled") {} | ||
| .disabled(true) | ||
| } | ||
| .buttonStyle(.bitwardenBorderless) | ||
|
|
||
| VStack { | ||
| titleView("Field Label Icon") | ||
|
|
||
| Button {} label: { | ||
| Label("Options", image: Asset.Images.cog16.swiftUIImage) | ||
| } | ||
| Button {} label: { | ||
| Label("Options", image: Asset.Images.cog16.swiftUIImage) | ||
| } | ||
| .disabled(true) | ||
| } | ||
| .buttonStyle(.fieldLabelIcon) | ||
|
|
||
| VStack { | ||
| titleView("Circle (FAB)") | ||
|
|
||
| Button {} label: { | ||
| Asset.Images.cog24.swiftUIImage | ||
| } | ||
| Button {} label: { | ||
| Asset.Images.cog24.swiftUIImage | ||
| } | ||
| .disabled(true) | ||
| } | ||
| .buttonStyle(CircleButtonStyle()) | ||
| } | ||
| .padding() | ||
| .frame(maxHeight: .infinity, alignment: .top) | ||
| } | ||
|
|
||
| func titleView(_ title: String) -> some View { | ||
| Text(title) | ||
| .styleGuide(.title3, weight: .bold) | ||
| .foregroundStyle(Asset.Colors.textPrimary.swiftUIColor) | ||
| } | ||
| } | ||
|
|
||
| // MARK: Tests | ||
|
|
||
| /// Render a snapshot of the app's button styles. | ||
| func test_snapshot_buttonStyles() { | ||
| let subject = ButtonStyles() | ||
| assertSnapshot(of: subject, as: .fixedSize(width: 1000, height: 300)) | ||
| } | ||
| } |
57 changes: 57 additions & 0 deletions
57
BitwardenShared/UI/Platform/Application/Appearance/Styles/FieldLabelIconButtonStyle.swift
This file contains 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,57 @@ | ||
| import SwiftUI | ||
|
|
||
| // MARK: - FieldLabelIconButtonStyle | ||
|
|
||
| /// The style for a button containing an icon displayed next to a label in a form field. | ||
| /// | ||
| struct FieldLabelIconButtonStyle: ButtonStyle { | ||
| // MARK: Properties | ||
|
|
||
| /// A value indicating whether the button is currently enabled or disabled. | ||
| @Environment(\.isEnabled) var isEnabled: Bool | ||
|
|
||
| /// The color of the foreground elements, including text and template images. | ||
| var foregroundColor: Color { | ||
| isEnabled | ||
| ? Asset.Colors.buttonOutlinedForeground.swiftUIColor | ||
| : Asset.Colors.buttonOutlinedDisabledForeground.swiftUIColor | ||
| } | ||
|
|
||
| // MARK: ButtonStyle | ||
|
|
||
| func makeBody(configuration: Configuration) -> some View { | ||
| configuration.label | ||
| .frame(width: 16, height: 16) | ||
| .foregroundColor(foregroundColor) | ||
| .opacity(configuration.isPressed ? 0.5 : 1) | ||
| .contentShape(Rectangle()) | ||
| } | ||
| } | ||
|
|
||
| // MARK: ButtonStyle | ||
|
|
||
| extension ButtonStyle where Self == FieldLabelIconButtonStyle { | ||
| /// The style for a field label icon button in this application. | ||
| /// | ||
| static var fieldLabelIcon: FieldLabelIconButtonStyle { | ||
| FieldLabelIconButtonStyle() | ||
| } | ||
| } | ||
|
|
||
| // MARK: Previews | ||
|
|
||
| #if DEBUG | ||
| #Preview() { | ||
| VStack { | ||
| Button {} label: { | ||
| Asset.Images.cog16.swiftUIImage | ||
| } | ||
|
|
||
| Button {} label: { | ||
| Asset.Images.cog16.swiftUIImage | ||
| } | ||
| .disabled(true) | ||
| } | ||
| .buttonStyle(.fieldLabelIcon) | ||
| } | ||
| #endif |
This file contains 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
Binary file added
BIN
+122 KB
...earance/Styles/__Snapshots__/ButtonStylesTests/test_snapshot_buttonStyles.1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions
17
BitwardenShared/UI/Platform/Application/Extensions/Label.swift
This file contains 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,17 @@ | ||
| import SwiftUI | ||
|
|
||
| extension Label { | ||
| /// Initialize a label with a title and image. | ||
| /// | ||
| /// - Parameters: | ||
| /// - title: The title of the label. | ||
| /// - image: The image to display in the label. | ||
| /// | ||
| init(_ title: String, image: Image) where Title == Text, Icon == Image { | ||
| self.init { | ||
| Text(title) | ||
| } icon: { | ||
| image | ||
| } | ||
| } | ||
| } |
16 changes: 16 additions & 0 deletions
16
...Shared/UI/Platform/Application/Support/Images.xcassets/Icons/cog16.imageset/Contents.json
This file contains 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,16 @@ | ||
| { | ||
| "images" : [ | ||
| { | ||
| "filename" : "cog16.pdf", | ||
| "idiom" : "universal" | ||
| } | ||
| ], | ||
| "info" : { | ||
| "author" : "xcode", | ||
| "version" : 1 | ||
| }, | ||
| "properties" : { | ||
| "preserves-vector-representation" : true, | ||
| "template-rendering-intent" : "template" | ||
| } | ||
| } |
Binary file added
BIN
+2.61 KB
...rdenShared/UI/Platform/Application/Support/Images.xcassets/Icons/cog16.imageset/cog16.pdf
Binary file not shown.
This file contains 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
Oops, something went wrong.