Skip to content

Commit

Permalink
refactor(ui-select,ui-text-input): better way to handle padding
Browse files Browse the repository at this point in the history
  • Loading branch information
matyasf committed Dec 6, 2024
1 parent 42a9d9b commit a3ce97e
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 10 deletions.
8 changes: 6 additions & 2 deletions packages/ui-select/src/Select/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -850,7 +850,9 @@ To mark an option as "highlighted", use the option's `isHighlighted` prop. Note
{this.getOptionById(id).label}
</AccessibleContent>
}
margin={index > 0 ? 'xxx-small 0 xxx-small xx-small' : 'xxx-small 0'}
margin={
index > 0 ? 'xxx-small xx-small xxx-small 0' : '0 xx-small 0 0'
}
onClick={(e) => this.dismissTag(e, id)}
/>
))
Expand Down Expand Up @@ -1079,7 +1081,9 @@ To mark an option as "highlighted", use the option's `isHighlighted` prop. Note
{this.getOptionById(id).label}
</AccessibleContent>
}
margin={index > 0 ? 'xxx-small 0 xxx-small xx-small' : 'xxx-small 0'}
margin={
index > 0 ? 'xxx-small xx-small xxx-small 0' : '0 xx-small 0 0'
}
onClick={(e) => dismissTag(e, id)}
/>
))
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-text-input/src/TextInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,8 @@ class TextInput extends Component<TextInputProps, TextInputState> {
disabled: interaction === 'disabled',
invalid: this.invalid,
focused: hasFocus,
afterElementHasWidth
afterElementHasWidth: afterElementHasWidth,
beforeElementExists: this.props.renderBeforeInput != undefined
}
}

Expand Down Expand Up @@ -350,7 +351,6 @@ class TextInput extends Component<TextInputProps, TextInputState> {
<span css={styles?.facade}>
{renderBeforeOrAfter ? (
<span css={styles?.layout}>
{beforeElement && <div css={styles?.beforePadding}></div>}
{beforeElement}
{/* The input and content after input should not wrap,
so they're in their own flex container */}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-text-input/src/TextInput/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,6 @@ type TextInputStyle = ComponentStyle<
| 'textInput'
| 'facade'
| 'layout'
| 'beforePadding'
| 'afterElement'
| 'requiredInvalid'
| 'inputLayout'
Expand Down Expand Up @@ -261,6 +260,7 @@ type TextInputStyleProps = {
invalid: boolean
focused: TextInputState['hasFocus']
afterElementHasWidth: TextInputState['afterElementHasWidth']
beforeElementExists: boolean
}

export type {
Expand Down
14 changes: 9 additions & 5 deletions packages/ui-text-input/src/TextInput/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,13 @@ const generateStyle = (
state: TextInputStyleProps
): TextInputStyle => {
const { size, textAlign, shouldNotWrap } = props
const { disabled, invalid, focused, afterElementHasWidth } = state
const {
disabled,
invalid,
focused,
afterElementHasWidth,
beforeElementExists
} = state

const sizeVariants = {
small: {
Expand Down Expand Up @@ -191,10 +197,8 @@ const generateStyle = (
alignItems: 'center',
justifyContent: 'flex-start',
flexDirection: 'row',
...(!shouldNotWrap && { flexWrap: 'wrap' })
},
beforePadding: {
paddingInlineStart: componentTheme.padding
...(!shouldNotWrap && { flexWrap: 'wrap' }),
...(beforeElementExists && { paddingInlineStart: componentTheme.padding })
},
inputLayout: {
label: 'textInput__inputLayout',
Expand Down

0 comments on commit a3ce97e

Please sign in to comment.