diff --git a/change/@ni-nimble-components-961874d3-9456-4e57-b9c6-f49f80c38843.json b/change/@ni-nimble-components-961874d3-9456-4e57-b9c6-f49f80c38843.json new file mode 100644 index 0000000000..62c6cc5e68 --- /dev/null +++ b/change/@ni-nimble-components-961874d3-9456-4e57-b9c6-f49f80c38843.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update internal spacing between elements within the nimble-text-field", + "packageName": "@ni/nimble-components", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/nimble-components/src/text-field/styles.ts b/packages/nimble-components/src/text-field/styles.ts index 68f76650e3..d9452d71d9 100644 --- a/packages/nimble-components/src/text-field/styles.ts +++ b/packages/nimble-components/src/text-field/styles.ts @@ -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'; @@ -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 { @@ -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(*) { @@ -168,6 +170,7 @@ export const styles = css` [part='end']::after { content: ''; position: absolute; + margin-left: calc(-1 * (${borderWidth} + ${smallPadding})); bottom: calc(-1 * ${borderWidth}); width: 0px; height: 0px; @@ -250,6 +253,7 @@ export const styles = css` .root { border-width: ${borderWidth}; padding: 0; + padding-left: ${smallPadding}; } ` ), diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js index 350b61be46..76bea5bd30 100644 --- a/packages/storybook/.storybook/preview.js +++ b/packages/storybook/.storybook/preview.js @@ -105,5 +105,5 @@ configureActions({ depth: 1 }); -// Update the GUID on this line to trigger a turbosnap full rebuild: 35fca962-ed23-4476-979e-094c9a0b48f4 +// Update the GUID on this line to trigger a turbosnap full rebuild: 1c1078d9-af89-4624-93d1-7e2639a09ea9 // See https://www.chromatic.com/docs/turbosnap/#full-rebuilds