Skip to content

[Feat]: #1466 Add disabled/placeholder styles for the main components #1815

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

Merged
merged 12 commits into from
Jul 1, 2025
Merged

[Feat]: #1466 Add disabled/placeholder styles for the main components #1815

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4cc299e
fix linter errrors
iamfaran Jun 26, 2025
2e0ec40
add button disabled styles
iamfaran Jun 26, 2025
ede27eb
add disabled styles for togglebtn
iamfaran Jun 26, 2025
59452d2
make a seperate section for disabled
iamfaran Jun 26, 2025
864a887
add disabled styles for toggled button
iamfaran Jun 26, 2025
56e71f6
add disabled input styles
iamfaran Jun 26, 2025
9ad28bb
remove border styles from disables
iamfaran Jun 26, 2025
3f516ab
add disable styles slider
iamfaran Jun 26, 2025
c9a8de4
add disabled styles on range slider fix
iamfaran Jun 26, 2025
c9cdee7
add placeholder styling for input
iamfaran Jun 26, 2025
54cc9b9
[Fix]: #1466 add disabled styles for the components / refactor
iamfaran Jun 27, 2025
b366ecb
[Fix]: #1466 add disabled/placeholder style for components
iamfaran Jun 27, 2025
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
Prev Previous commit
Next Next commit
remove border styles from disables
  • Loading branch information
@iamfaran
iamfaran committed Jun 26, 2025
commit 9ad28bb706d06eae0e9ef8176fa716f7e83969b9
3 changes: 0 additions & 3 deletions client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,6 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any
&.ant-btn-disabled {
color: ${disabledStyle?.disabledText || buttonStyle.text};
background: ${disabledStyle?.disabledBackground || buttonStyle.background};
border-color: ${
disabledStyle?.disabledBorder || buttonStyle.border
} !important;
cursor: not-allowed;
}
}
Expand Down
10 changes: 0 additions & 10 deletions client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,23 +133,13 @@ const InputNumber = styled(AntdInputNumber)<{
&.ant-input-number-disabled {
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
cursor: not-allowed;

.ant-input-number-input {
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
}

.ant-input-number-handler-wrap {
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;

.ant-input-number-handler span {
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
opacity: 0.3;
}
}
}
`;

Expand Down
1 change: 0 additions & 1 deletion client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ const InputStyle = styled(Input)<{
&.ant-input-disabled {
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
cursor: not-allowed;
}
`;
Expand Down
1 change: 0 additions & 1 deletion client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ const PasswordStyle = styled(InputPassword)<{
&.ant-input-disabled {
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
cursor: not-allowed;
}
`;
Expand Down
1 change: 0 additions & 1 deletion client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ const TextAreaStyled = styled(TextArea)<{
&.ant-input-disabled {
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
cursor: not-allowed;
}
`;
Expand Down
15 changes: 1 addition & 14 deletions client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -966,12 +966,7 @@ const DISABLED_BACKGROUND = {
color: SECOND_SURFACE_COLOR,
} as const;

const DISABLED_BORDER = {
name: "disabledBorder",
label: trans("style.disabledBorder"),
depName: "disabledBackground",
transformer: backgroundToBorder,
} as const;


const DISABLED_TEXT = {
name: "disabledText",
Expand All @@ -984,7 +979,6 @@ const DISABLED_TEXT = {
// Re-export for reuse in other components if needed
export const DISABLED_STYLE_FIELDS = [
DISABLED_BACKGROUND,
DISABLED_BORDER,
DISABLED_TEXT,
] as const;

Expand All @@ -995,12 +989,6 @@ const DISABLED_INPUT_BACKGROUND = {
color: SECOND_SURFACE_COLOR,
} as const;

const DISABLED_INPUT_BORDER = {
name: "disabledBorder",
label: trans("style.disabledBorder"),
depName: "disabledInputBackground",
transformer: backgroundToBorder,
} as const;

const DISABLED_INPUT_TEXT = {
name: "disabledText",
Expand All @@ -1013,7 +1001,6 @@ const DISABLED_INPUT_TEXT = {
// Re-export for reuse in textInput components
export const DISABLED_INPUT_STYLE_FIELDS = [
DISABLED_INPUT_BACKGROUND,
DISABLED_INPUT_BORDER,
DISABLED_INPUT_TEXT,
] as const;

Expand Down