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

InputWidth is not working in Textbox for "carbon-react": "106.6.5", #5234

Closed
1 task done
jayingale5727 opened this issue Jun 15, 2022 · 5 comments · Fixed by #5622
Closed
1 task done

InputWidth is not working in Textbox for "carbon-react": "106.6.5", #5234

jayingale5727 opened this issue Jun 15, 2022 · 5 comments · Fixed by #5622
Labels
Bug form On Backlog released textbox

Comments

@jayingale5727
Copy link

jayingale5727 commented Jun 15, 2022 •
edited by DipperTheDan
Loading

Current behaviour

Hi Team,

The inputwidth property is not supported in "carbon-react": "106.6.5" when using the new validation.

Expected behaviour

The Width of Textbox should be change with inputWidth property when using the new validation.

CodeSandbox or Storybook URL

https://codesandbox.io/s/withered-sun-vglx64?file=/src/index.js

JIRA Ticket (Sage Only)

SBS-33224

Suggested Solution

No response

Carbon Version

106.6.5

Design Tokens Version

No response

What browsers are you seeing the problem on?

Chrome

What Operating System are you seeing the problem on?

Windows

Anything else we should know?

No response

Confidentiality

  • I confirm there is no confidential or commercially sensitive information included.
@jayingale5727 jayingale5727 added Bug triage Triage Required labels Jun 15, 2022
@DipperTheDan
Copy link
Contributor

Hi @harpalsingh, I don't think we had a requirement for this previously but we have a team asking for the new validation message to be 100% width of a Form but have the input width a different size. Do you know if this is something coming in the near future or will it be new designs?

@mkrds mkrds added the Design System Review Required DS team to review changes label Jun 21, 2022
@ljemmo
Copy link
Contributor

ljemmo commented Jun 30, 2022

@DipperTheDan I've seen a few requests for this. It would be a variation/prop needed where can specify a fixed width override on the input field only where. By default though, the field width should be 100% the width of the wrapper that contains the label, hint text and error message.

See attached a similar solution that i've just added for date picker in our figma library.
https://user-images.githubusercontent.com/98600534/176719964-11d239ef-b22d-45a0-8ce2-f6c066e597d4.mov

On our end, i'll add a ticket for us to add to our figma library. However, does this unblock you for now?

@Parsium
Copy link
Contributor

Parsium commented Oct 25, 2022 •
edited
Loading

Awesome thanks for the update @ljemmo, I noticed the DS docs on Textbox has been updated now about custom widths. We'll create a ticket for this on our backlog.

@Parsium Parsium removed the Design System Review Required DS team to review changes label Oct 25, 2022
@Parsium
Copy link
Contributor

Parsium commented Oct 25, 2022

FE-5506

@Parsium Parsium added On Backlog and removed triage Triage Required labels Oct 25, 2022
tomdavies73 added a commit that referenced this issue Nov 18, 2022
@tomdavies73
feat(textbox): surface maxWidth prop on textbox and related components
e760e93 
surfaces the `maxWidth` prop on `Textbox`, `Decimal`, `GroupedCharacter`, `Number`, `Search`,
`MultiSelect`, `FilterableSelect` and `SimpleSelect` components to allow consumers to set max-width
on the input and to allow label and validation strings to exceed its width

fix #5494, fix #5234
@tomdavies73 tomdavies73 mentioned this issue Nov 18, 2022
Merged
12 tasks
tomdavies73 added a commit that referenced this issue Nov 18, 2022
@tomdavies73
feat(textbox): surface maxWidth prop on textbox and related components
d14a2e4 
surfaces the `maxWidth` prop on `Textbox`, `Decimal`, `GroupedCharacter`, `Number`, `Search`,
`MultiSelect`, `FilterableSelect` and `SimpleSelect` components to allow consumers to set max-width
on the input and to allow label and validation strings to exceed its width

fix #5494, fix #5234
tomdavies73 added a commit that referenced this issue Nov 18, 2022
@tomdavies73
feat(textbox): surface maxWidth prop on textbox and related components
5072a0b 
surfaces the `maxWidth` prop on `Textbox`, `Decimal`, `GroupedCharacter`, `Number`, `Search`,
`MultiSelect`, `FilterableSelect` and `SimpleSelect` components to allow consumers to set max-width
on the input and to allow label and validation strings to exceed its width

fix #5494, fix #5234
tomdavies73 added a commit that referenced this issue Nov 24, 2022
@tomdavies73
feat(textarea, textbox): surface maxWidth prop on components
0b3f4a4 
surfaces the `maxWidth` prop on `Textarea`, `Textbox`, `Decimal`, `GroupedCharacter`, `Number`, `Search`,
`MultiSelect`, `FilterableSelect` and `SimpleSelect` components to allow consumers to set max-width
on the input and to allow label and validation strings to exceed its width

fix #5494, fix #5234
tomdavies73 added a commit that referenced this issue Nov 25, 2022
@tomdavies73
feat(textarea, textbox): surface maxWidth prop on components
8c9d125 
surfaces the `maxWidth` prop on `Textarea`, `Textbox`, `Decimal`, `GroupedCharacter`, `Number`,
`Search`, `MultiSelect`, `FilterableSelect` and `SimpleSelect` components to allow consumers
to set max-width on the input and to allow label and validation strings to exceed its width

fix #5494, fix #5234
tomdavies73 added a commit that referenced this issue Dec 1, 2022
@tomdavies73
feat(textarea, textbox): surface maxWidth prop on components
21df556 
surfaces the `maxWidth` prop on `Textarea`, `Textbox`, `Decimal`, `GroupedCharacter`, `Number`,
`Search`, `MultiSelect`, `FilterableSelect` and `SimpleSelect` components to allow consumers
to set max-width on the input and to allow label and validation strings to exceed its width

fix #5494, fix #5234
tomdavies73 added a commit that referenced this issue Dec 2, 2022
@tomdavies73
feat(textarea, textbox): surface maxWidth prop on components
3df856c 
surfaces the `maxWidth` prop on `Textarea`, `Textbox`, `Decimal`, `GroupedCharacter`, `Number`,
`Search`, `MultiSelect`, `FilterableSelect` and `SimpleSelect` components to allow consumers
to set max-width on the input and to allow label and validation strings to exceed its width

fix #5494, fix #5234
tomdavies73 added a commit that referenced this issue Dec 2, 2022
@tomdavies73
feat(textarea, textbox): surface maxWidth prop on components
544a050 
surfaces the `maxWidth` prop on `Textarea`, `Textbox`, `Decimal`, `GroupedCharacter`, `Number`,
`Search`, `MultiSelect`, `FilterableSelect` and `SimpleSelect` components to allow consumers
to set max-width on the input and to allow label and validation strings to exceed its width

fix #5494, fix #5234
carbonci pushed a commit that referenced this issue Dec 2, 2022
@semantic-release-bot @carbonci
chore(release): 111.13.0
6dd3ede 
## [111.13.0](v111.12.7...v111.13.0) (2022-12-02)

### Features

* **textarea, textbox:** surface maxWidth prop on components ([544a050](544a050)), closes [#5494](#5494) [#5234](#5234)
@carbonci
Copy link
Collaborator

carbonci commented Dec 2, 2022

🎉 This issue has been resolved in version 111.13.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug form On Backlog released textbox
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(textarea, textbox): surface maxWidth prop on components FE-5506 Sage/carbon
6 participants
@Parsium @mkrds @DipperTheDan @carbonci @ljemmo @jayingale5727