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.

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

Adding of clear and cancel button in create preset form #8921

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from

Conversation

Rishith25
Copy link
Contributor

Proposed Changes

@ohcnetwork/care-fe-code-reviewers

Merge Checklist

  • Add specs that demonstrate bug / test a new feature.
  • Update product documentation.
  • Ensure that UI text is kept in I18n files.
  • Prep screenshot or demo video for changelog entry, and attach it to issue.
  • Request for Peer Reviews
  • Completion of QA

Screenshot 2024-10-24 223310

@Rishith25 Rishith25 requested a review from a team as a code owner October 24, 2024 17:19
Copy link

netlify bot commented Oct 24, 2024

Deploy Preview for care-ohc ready!

Name Link
🔨 Latest commit 20dbaf7
🔍 Latest deploy log https://app.netlify.com/sites/care-ohc/deploys/6720da2baedfcf000887883a
😎 Deploy Preview https://deploy-preview-8921--care-ohc.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Member

@bodhish bodhish left a comment

Choose a reason for hiding this comment

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

LGTM

Copy link
Member

@rithviknishad rithviknishad left a comment

Choose a reason for hiding this comment

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

LGTM; just curious why shadow was disabled for the cancel button


<div className="cui-form-button-group mt-4 flex w-full flex-col justify-end space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
<Cancel
shadow={false}
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
shadow={false}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done the changes. I thought to maintain a simpler and cleaner design.

@Rishith25
Copy link
Contributor Author

Rishith25 commented Oct 25, 2024

@rithviknishad Can you please assign 2 story points for this

@bodhish
Copy link
Member

bodhish commented Oct 27, 2024

@Rishith25 for minor changes we keep it to 1.

@nihal467
Copy link
Member

image

  • Reposition the clear button properly in the pop-up, rest looks good

@Rishith25
Copy link
Contributor Author

@nihal467 Done the changes of clear button alignment

/>
</div>

<div className="cui-form-button-group mt-4 flex w-full flex-col justify-end space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
<div className="cui-form-button-group mt-4 flex w-full flex-col justify-end space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
<div className="cui-form-button-group">

setCreatePreset(undefined);
setPresetName("");
}}
className="ml-0 w-full sm:ml-2 sm:w-auto"
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
className="ml-0 w-full sm:ml-2 sm:w-auto"

@@ -417,6 +429,7 @@ export default function ConfigureCamera(props: Props) {
cameraPresetsQuery.refetch();
}}
disabled={!presetName}
className="w-full sm:w-auto"
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
className="w-full sm:w-auto"

@@ -35,30 +36,47 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
const hasTrailing = !!(trailing || trailingFocused);
const hasIcon = hasLeading || hasTrailing;
const [showPassword, setShowPassword] = useState(false);
const isClear = props.isClear || false;
Copy link
Member

Choose a reason for hiding this comment

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

null/undefined is falsey, it's no-op when used in conditional statements.

Suggested change
const isClear = props.isClear || false;

Comment on lines 392 to 403
<div className="relative w-full">
<TextFormField
name="preset-name"
className="w-full py-4"
value={presetName}
onChange={({ value }) => setPresetName(value)}
errorClassName="hidden"
placeholder={t("preset_name_placeholder")}
suggestions={presetNameSuggestions}
isClear={true}
/>
</div>
Copy link
Member

Choose a reason for hiding this comment

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

why wrap in a div with relative class here? is this needed?

@@ -24,6 +24,7 @@ export type TextFormFieldProps = FormFieldBaseProps<string> &
trailingPadding?: string | undefined;
leadingPadding?: string | undefined;
suggestions?: string[];
isClear?: boolean;
Copy link
Member

Choose a reason for hiding this comment

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

isClear doesn't make sense. One may not understand what this prop does by simply reading it.

Suggested change
isClear?: boolean;
clearable?: boolean;

@Rishith25
Copy link
Contributor Author

@rithviknishad Changes are done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add a clear and cancel button in the preset pop-up of asset camera configuration page
5 participants