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

fix: change field style colors when input is not editable #25991

Merged
merged 13 commits into from
Sep 13, 2023
Merged

fix: change field style colors when input is not editable #25991

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e86d9c8
fix: added cursor disabled and removed border bottom when input is no…
himanshuragi456 Aug 26, 2023
72f4dc4
fix: removed the disabled cursor
himanshuragi456 Aug 28, 2023
89c08a8
fix: avoid datepicker and update style of disabled input
himanshuragi456 Aug 29, 2023
4f3ee72
using props.disabled instead of isEditable
himanshuragi456 Aug 29, 2023
479cb53
Merge branch 'main' into issue25577-no-sign-indicating-disabled-fields
himanshuragi456 Aug 29, 2023
154a655
removed whitespace diff
himanshuragi456 Aug 30, 2023
3687cf9
fixed text supporting color for disabled input
himanshuragi456 Aug 30, 2023
6234eeb
fix: text color was not applying
himanshuragi456 Aug 30, 2023
4d15409
ios color fix
himanshuragi456 Sep 5, 2023
da10e26
fix text color in iOS mobile
himanshuragi456 Sep 5, 2023
2b0d1a2
comments and console warning fix
himanshuragi456 Sep 8, 2023
21cc293
border bottom width added
himanshuragi456 Sep 11, 2023
981c408
changed bg color variable
himanshuragi456 Sep 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/components/TextInput/BaseTextInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,6 +331,8 @@ function BaseTextInput(props) {

// Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight),
// Add disabled color theme when field is not editable.
props.disabled && styles.textInputDisabled,
]}
multiline={isMultiline}
maxLength={props.maxLength}
Expand Down
16 changes: 16 additions & 0 deletions src/styles/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -777,6 +777,22 @@ const styles = {
borderColor: themeColors.danger,
},

textInputDisabled: {
// Adding disabled color theme to indicate user that the field is not editable.
backgroundColor: themeColors.highlightBG,
borderBottomWidth: 2,
borderColor: themeColors.borderLighter,
// Adding browser specefic style to bring consistency between Safari and other platforms.
// Applying the Webkit styles only to browsers as it is not available in native.
...(Browser.getBrowser()
? {
WebkitTextFillColor: themeColors.textSupporting,
WebkitOpacity: 1,
}
: {}),
color: themeColors.textSupporting,
},

uploadReceiptView: (isSmallScreenWidth) => ({
borderRadius: variables.componentBorderRadiusLarge,
borderWidth: isSmallScreenWidth ? 0 : 2,
Expand Down