Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Text field error spacing #2399

Merged
merged 14 commits into from
Sep 26, 2024
Merged

Text field error spacing #2399

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
7a7da1d
Update spacing in text field
mollykreis Sep 17, 2024
f250b99
Change files
mollykreis Sep 17, 2024
c5cab74
don't change the left padding
mollykreis Sep 18, 2024
4192b33
fix full-bleed
mollykreis Sep 18, 2024
62b11cb
fix spacing between start icon and input when full-bleed
mollykreis Sep 19, 2024
e1020b5
Merge branch 'main' into text-field-error-spacing
mollykreis Sep 19, 2024
52a7bce
Fix outline appearance
mollykreis Sep 19, 2024
5d3f59e
fix clipping of underline when hovered
mollykreis Sep 20, 2024
5755841
make error icon 4px from border instead of 4px from edge of control
mollykreis Sep 23, 2024
6290332
Merge branch 'main' into text-field-error-spacing
mollykreis Sep 26, 2024
8aee5f6
Merge branch 'main' into text-field-error-spacing
rajsite Sep 26, 2024
e121a55
poke chromatic to rerun tests
mollykreis Sep 26, 2024
b5e265c
Update preview.js
mollykreis Sep 26, 2024
cb56b62
try again
mollykreis Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@ni-nimble-components-961874d3-9456-4e57-b9c6-f49f80c38843.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
mollykreis marked this conversation as resolved.
Show resolved Hide resolved
"comment": "Update internal spacing between elements within the nimble-text-field",
"packageName": "@ni/nimble-components",
"email": "20542556+mollykreis@users.noreply.github.com",
"dependentChangeType": "patch"
}
8 changes: 6 additions & 2 deletions packages/nimble-components/src/text-field/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
bodyFont,
controlLabelFontColor,
controlLabelDisabledFontColor,
mediumPadding
smallPadding
} from '../theme-provider/design-tokens';
import { appearanceBehavior } from '../utilities/style/appearance';
import { TextFieldAppearance } from './types';
Expand Down Expand Up @@ -61,8 +61,9 @@ export const styles = css`
align-items: center;
justify-content: center;
border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
gap: ${mediumPadding};
gap: ${smallPadding};
padding: ${borderWidth};
padding-left: calc(${borderWidth} + ${smallPadding});
}

:host([readonly]) .root {
Expand Down Expand Up @@ -117,6 +118,7 @@ export const styles = css`
slot[name='start']::slotted(*) {
flex: none;
opacity: 0.6;
margin-right: ${smallPadding};
}

:host([disabled]) slot[name='start']::slotted(*) {
Expand Down Expand Up @@ -168,6 +170,7 @@ export const styles = css`
[part='end']::after {
content: '';
position: absolute;
margin-left: calc(-1 * (${borderWidth} + ${smallPadding}));
mollykreis marked this conversation as resolved.
Show resolved Hide resolved
bottom: calc(-1 * ${borderWidth});
width: 0px;
height: 0px;
Expand Down Expand Up @@ -250,6 +253,7 @@ export const styles = css`
.root {
border-width: ${borderWidth};
padding: 0;
padding-left: ${smallPadding};
}
`
),
Expand Down