Skip to content

Commit 926046d

Browse files
authored
Update rounded_corner.md
1 parent d51e6de commit 926046d

File tree

1 file changed

+0
-44
lines changed

1 file changed

+0
-44
lines changed
Lines changed: 0 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,3 @@
11
**`False`** For a square finish.
22

33
**`True`** For a finish with rounded corner. To be favored in more emotional, immersive contexts or those tied to specific visual identities. For standard or business-oriented journeys, keep the default corners. This evolution addresses the need for flexibility in adapting the design to certain brand contexts.
4-
5-
### Do & don'ts
6-
7-
**Do:** Use rounded corners consistently with other form elements in your design system to maintain visual harmony
8-
**Don't:** Apply rounded corners to quantity inputs while using square corners on adjacent buttons or fields
9-
10-
**Do:** Reserve rounded corners for consumer-facing or lifestyle brand interfaces where softer aesthetics align with brand identity
11-
**Don't:** Use rounded corners in enterprise or data-heavy applications where sharp edges convey precision
12-
13-
**Do:** Consider rounded corners for mobile interfaces where they may improve perceived touch targets
14-
**Don't:** Assume rounded corners automatically improve usability—they are primarily a visual treatment
15-
16-
**Do:** Document your corner radius choice in design tokens for consistent application across components
17-
**Don't:** Mix corner radius values arbitrarily across different quantity input instances
18-
19-
**Do:** Test rounded corner variants with your specific button placement (trailing vs. split) to ensure visual balance
20-
**Don't:** Apply rounded corners without verifying they work well with increment/decrement button styling
21-
22-
---
23-
24-
### Input status
25-
26-
**`Empty`** The Empty state indicates that the quantity input is blank with no content or placeholder, a neutral starting point.
27-
28-
**`Empty (Placeholder)`** The Empty with Placeholder state provides a hint or guidance inside the field to suggest expected input.
29-
30-
**`Filled`** The Filled state shows that the user has entered valid content into the field, replacing any placeholder.
31-
32-
### Do & don'ts
33-
34-
**Do:** Set a sensible default value (typically 1) to reduce user effort and prevent empty submission errors
35-
**Don't:** Leave quantity inputs empty in e-commerce contexts where a zero value has no valid meaning
36-
37-
**Do:** Use placeholder text to indicate expected format when the field can be empty (e.g., "Enter quantity")
38-
**Don't:** Rely solely on placeholders for critical instructions—they disappear once users begin typing
39-
40-
**Do:** Ensure filled state styling provides clear feedback that user input has been captured
41-
**Don't:** Style filled and empty states identically, making it difficult to scan form completion status
42-
43-
**Do:** Preserve entered values when users navigate away and return to the form
44-
**Don't:** Reset quantity values unexpectedly, forcing users to re-enter their selections
45-
46-
**Do:** Validate and display the filled state immediately when users type valid numbers
47-
**Don't:** Delay visual confirmation of valid input, leaving users uncertain if their entry was accepted

0 commit comments

Comments
 (0)