Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: Checkbox widget does not show an asterisk to indicate it's a required (#33814)

Browse Source 
Fixes #33444

/ok-to-test tags="@tag.Anvil"<!-- This is an auto-generated comment:
Cypress test results -->
> [!WARNING]
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9297202278>
> Commit: 895c87c82e1b55e4d604870c89512200c408ef41
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9297202278&attempt=1"
target="_blank">Click here!</a>
> It seems like **no tests ran** 😔. We are not able to recognize it,
please check workflow <a
href="https://github.com/appsmithorg/appsmith/actions/runs/9297202278"
target="_blank">here.</a>

<!-- end of auto-generated comment: Cypress test results  -->

---------

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
This commit is contained in:
Pawan Kumar 2024-05-30 13:51:39 +05:30 committed by GitHub
parent 699222c5ee
commit 01529c4db5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/client/packages/design-system/widgets/src/components/Checkbox/chromatic/Checkbox.chromatic.stories.tsx
View File

@ -28,9 +28,12 @@ export const LightMode: Story = {
</DataAttrWrapper>
</>
))}
<Checkbox defaultSelected isReadOnly isRequired>
<Checkbox defaultSelected isReadOnly>
Readonly
</Checkbox>
<Checkbox defaultSelected isRequired>
Is Required
</Checkbox>
</StoryGrid>
),
};

14
app/client/packages/design-system/widgets/src/components/Checkbox/src/Checkbox.tsx
View File

@ -25,7 +25,19 @@ const _Checkbox = (props: CheckboxProps, ref: HeadlessCheckboxRef) => {
inlineLabelStyles["inline-label"],
)}
>
{Boolean(children) && <Text>{children}</Text>}
{Boolean(children) && (
<>
<Text>{children}</Text>
{Boolean(props.isRequired) && (
<Text
color="negative"
data-inline-label-necessity-indicator-icon=""
>
*
</Text>
)}
</>
)}
</HeadlessCheckbox>
);
};

13
app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css
View File

@ -30,6 +30,11 @@
--checkbox-border-color: var(--color-bd-neutral-hover);
}
& [data-inline-label-necessity-indicator-icon] {
color: var(--color-fg-negative);
margin-inline-start: var(--inner-spacing-1);
}
/**
* ----------------------------------------------------------------------------
* LABEL POSITION
@ -86,10 +91,10 @@
}
/**
* ----------------------------------------------------------------------------
* ERROR ( INVALID )
*-----------------------------------------------------------------------------
*/
* ----------------------------------------------------------------------------
* ERROR ( INVALID )
*-----------------------------------------------------------------------------
*/
&[data-invalid] [data-icon] {
--checkbox-border-color: var(--color-bd-negative);
}

8
app/client/packages/design-system/widgets/src/components/Checkbox/stories/Checkbox.stories.tsx
View File

@ -64,3 +64,11 @@ export const CustomIcon: Story = {
</Flex>
),
};
export const IsRequired: Story = {
render: () => (
<Flex direction="column" gap="1rem" wrap="wrap">
<Checkbox isRequired>Required</Checkbox>
</Flex>
),
};

2
app/client/packages/design-system/widgets/src/styles/src/field.module.css
View File

@ -41,7 +41,7 @@
*/
& [data-field-necessity-indicator-icon] {
color: var(--color-fg-negative);
margin-left: var(--inner-spacing-1);
margin-inline-start: var(--inner-spacing-1);
}
/**