Skip to content

Fiddle: update inputWrapper to not auto full width#237

Merged
krishan711 merged 1 commit into
mainfrom
inputw
Dec 11, 2025
Merged

Fiddle: update inputWrapper to not auto full width#237
krishan711 merged 1 commit into
mainfrom
inputw

Conversation

@krishan711
Copy link
Copy Markdown
Contributor

Description

Screenshots:

Checklist:

  • I have updated the CHANGELOG with a summary of my changes
  • I have updated the documentation accordingly

Copilot AI review requested due to automatic review settings December 11, 2025 09:52
@krishan711 krishan711 merged commit c091a64 into main Dec 11, 2025
8 checks passed
@krishan711 krishan711 deleted the inputw branch December 11, 2025 09:54
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 isFullWidth boolean 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 {
Copy link

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
&.full-width {
&.fullWidth {

Copilot uses AI. Check for mistakes.
<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('-') || []))}
Copy link

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
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('-') || []))}

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants