Fiddle: update inputWrapper to not auto full width#237
Conversation
There was a problem hiding this comment.
Pull request overview
This PR modifies the InputWrapper component to make full-width behavior opt-in rather than the default. Previously, the component always had width: 100%, which is now controlled by a new isFullWidth prop (defaulting to false).
Key changes:
- Added
isFullWidthboolean prop to control width behavior - Moved
width: 100%from base styles to conditional CSS class - Updated className logic to apply width class conditionally
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/atoms/inputWrapper/component.tsx | Adds isFullWidth prop with false default and applies conditional class name |
| src/atoms/inputWrapper/styles.scss | Moves width: 100% from base to conditional full-width class |
| flex-direction: column; | ||
| width: 100%; | ||
|
|
||
| &.full-width { |
There was a problem hiding this comment.
The CSS class name 'full-width' uses kebab-case, which is inconsistent with the library's established naming convention. Other components (Button, IconButton, LinkBase, SelectableView) use camelCase 'fullWidth' for the same functionality. Please update to 'fullWidth' to maintain consistency.
| &.full-width { | |
| &.fullWidth { |
| <div | ||
| id={props.id} | ||
| className={getClassName(InputWrapper.displayName, className, props.messageText && 'message-showing', isFocussed && 'focus', !props.isEnabled && 'disabled', ...(variant?.split('-') || []))} | ||
| className={getClassName(InputWrapper.displayName, className, props.messageText && 'message-showing', isFocussed && 'focus', !props.isEnabled && 'disabled', isFullWidth && 'full-width', ...(variant?.split('-') || []))} |
There was a problem hiding this comment.
The CSS class name should be 'fullWidth' (camelCase) instead of 'full-width' (kebab-case) to match the library's established naming convention used in other components like Button, IconButton, LinkBase, and SelectableView.
| className={getClassName(InputWrapper.displayName, className, props.messageText && 'message-showing', isFocussed && 'focus', !props.isEnabled && 'disabled', isFullWidth && 'full-width', ...(variant?.split('-') || []))} | |
| className={getClassName(InputWrapper.displayName, className, props.messageText && 'message-showing', isFocussed && 'focus', !props.isEnabled && 'disabled', isFullWidth && 'fullWidth', ...(variant?.split('-') || []))} |
Description
Screenshots:
Checklist: