From dad8cfce8e1321f61b0b8052898d78b8e6bca34a Mon Sep 17 00:00:00 2001 From: Anurag Hazra Date: Thu, 4 Apr 2024 11:41:49 +0530 Subject: [PATCH 01/10] chore: update component status table (#2110) --- packages/blade/src/utils/storybook/componentStatusData.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/utils/storybook/componentStatusData.ts b/packages/blade/src/utils/storybook/componentStatusData.ts index a4c8ed650d3..0a4843b8590 100644 --- a/packages/blade/src/utils/storybook/componentStatusData.ts +++ b/packages/blade/src/utils/storybook/componentStatusData.ts @@ -465,8 +465,11 @@ const componentData: ComponentStatusDataType = [ description: 'ButtonGroup component can be used to group related buttons.', }, { - name: 'MobileNumberInput', - status: 'in-development', + name: 'PhoneNumberInput', + status: 'released', + platform: 'web', + releasedIn: '11.10.0', + storybookLink: 'Components/Input/PhoneNumberInput', description: 'A phone number input is an input field that allow users to input phone numbers with a keyboard. It supports entering phone numbers from different geographic locations.', }, From ca8f7ec14f8d1cf8d1563980b1dddea863fcc94b Mon Sep 17 00:00:00 2001 From: rzpcibot Date: Thu, 4 Apr 2024 06:23:34 +0000 Subject: [PATCH 02/10] chore: update bundle size data [skip ci] --- packages/blade/baseBundleSizeStats.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/blade/baseBundleSizeStats.json b/packages/blade/baseBundleSizeStats.json index f0e79424562..c3d31897ccb 100644 --- a/packages/blade/baseBundleSizeStats.json +++ b/packages/blade/baseBundleSizeStats.json @@ -14,18 +14,18 @@ "loading": 0.577109375 }, { - "name": "ActionList, ActionListItem, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection", + "name": "Alert", "passed": true, - "size": 34780, + "size": 33726, "sizeLimit": 2000000, - "loading": 0.679296875 + "loading": 0.6587109375 }, { - "name": "Alert", + "name": "ActionList, ActionListItem, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection", "passed": true, - "size": 33726, + "size": 34780, "sizeLimit": 2000000, - "loading": 0.6587109375 + "loading": 0.679296875 }, { "name": "Amount", From 8c5231d4004a9fde71f1ad6de690f5aac9fa16ce Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Thu, 4 Apr 2024 12:42:12 +0530 Subject: [PATCH 03/10] feat: add large size in FileUpload component (#2108) --- .changeset/bright-berries-sort.md | 17 + .../components/FileUpload/FileUpload.web.tsx | 17 +- .../components/FileUpload/FileUploadItem.tsx | 15 +- .../StyledFileUploadItemWrapper.tsx | 11 +- .../FileUpload/StyledFileUploadWrapper.tsx | 11 +- .../__tests__/FileUpload.web.test.tsx | 19 + .../FileUpload.ssr.test.tsx.snap | 4 +- .../FileUpload.web.test.tsx.snap | 564 +++++++++++++++++- .../FileUpload/docs/FileUpload.stories.tsx | 9 +- .../components/FileUpload/fileUploadTokens.ts | 7 + .../blade/src/components/FileUpload/types.ts | 13 +- packages/blade/src/tokens/global/size.ts | 4 +- 12 files changed, 667 insertions(+), 24 deletions(-) create mode 100644 .changeset/bright-berries-sort.md diff --git a/.changeset/bright-berries-sort.md b/.changeset/bright-berries-sort.md new file mode 100644 index 00000000000..7235ba4284a --- /dev/null +++ b/.changeset/bright-berries-sort.md @@ -0,0 +1,17 @@ +--- +"@razorpay/blade": minor +--- + +feat: add large size in FileUpload component + +#### Usage + +```js + +``` diff --git a/packages/blade/src/components/FileUpload/FileUpload.web.tsx b/packages/blade/src/components/FileUpload/FileUpload.web.tsx index 54095e263fc..ac959c326fe 100644 --- a/packages/blade/src/components/FileUpload/FileUpload.web.tsx +++ b/packages/blade/src/components/FileUpload/FileUpload.web.tsx @@ -23,6 +23,7 @@ import { Text } from '~components/Typography'; import type { BladeElementRef } from '~utils/types'; import { getHintType } from '~components/Input/BaseInput/BaseInput'; import { makeAccessible } from '~utils/makeAccessible'; +import { formHintLeftLabelMarginLeft } from '~components/Input/BaseInput/baseInputTokens'; const _FileUpload: React.ForwardRefRenderFunction = ( { @@ -47,6 +48,7 @@ const _FileUpload: React.ForwardRefRenderFunction {label ? ( { const newFiles = selectedFiles.filter(({ id }) => id !== selectedFiles[0].id); setSelectedFiles(newFiles); @@ -305,14 +311,16 @@ const _FileUpload: React.ForwardRefRenderFunction )} - {/* the magic number 136 is basically max-width of label i.e 120 and then right margin i.e 16 which is the spacing between label and input field */} {willRenderHintText && ( ( { const newFiles = selectedFiles.filter(({ id }) => id !== file.id); setSelectedFiles(newFiles); diff --git a/packages/blade/src/components/FileUpload/FileUploadItem.tsx b/packages/blade/src/components/FileUpload/FileUploadItem.tsx index 1127c616478..e6d0dda0916 100644 --- a/packages/blade/src/components/FileUpload/FileUploadItem.tsx +++ b/packages/blade/src/components/FileUpload/FileUploadItem.tsx @@ -11,7 +11,13 @@ import { ProgressBar } from '~components/ProgressBar'; import isUndefined from '~utils/lodashButBetter/isUndefined'; const FileUploadItem = memo( - ({ file, onPreview, onRemove, onDismiss }: FileUploadItemProps): React.ReactElement => { + ({ + file, + onPreview, + onRemove, + onDismiss, + size: containerSize, + }: FileUploadItemProps): React.ReactElement => { const { name, size, uploadPercent, errorText, status } = file; const isUploading = status === 'uploading'; const sizeInKB = size / 1024; @@ -20,12 +26,17 @@ const FileUploadItem = memo( return ( - + diff --git a/packages/blade/src/components/FileUpload/StyledFileUploadItemWrapper.tsx b/packages/blade/src/components/FileUpload/StyledFileUploadItemWrapper.tsx index 8d7f9210908..7008c064d6f 100644 --- a/packages/blade/src/components/FileUpload/StyledFileUploadItemWrapper.tsx +++ b/packages/blade/src/components/FileUpload/StyledFileUploadItemWrapper.tsx @@ -1,14 +1,17 @@ import styled from 'styled-components'; import type { StyledFileUploadItemWrapperProps } from './types'; -import { fileUploadItemBackgroundColors, fileUploadMotionTokens } from './fileUploadTokens'; +import { + fileUploadItemBackgroundColors, + fileUploadMotionTokens, + fileUploadHeightTokens, +} from './fileUploadTokens'; import getIn from '~utils/lodashButBetter/get'; import BaseBox from '~components/Box/BaseBox'; import { makeMotionTime } from '~utils/makeMotionTime'; import { castWebType, makeSize } from '~utils'; -import { size } from '~tokens/global'; const StyledFileUploadItemWrapper = styled(BaseBox)( - ({ theme, status }) => { + ({ theme, status, size }) => { const easing = getIn(theme.motion, fileUploadMotionTokens.easing); const duration = castWebType( makeMotionTime(getIn(theme.motion, fileUploadMotionTokens.duration)), @@ -20,7 +23,7 @@ const StyledFileUploadItemWrapper = styled(BaseBox)( - ({ theme, isDisabled, isActive }) => { + ({ theme, isDisabled, isActive, size }) => { const easing = getIn(theme.motion, fileUploadMotionTokens.easing); const duration = castWebType( makeMotionTime(getIn(theme.motion, fileUploadMotionTokens.duration)), @@ -17,7 +20,7 @@ const StyledFileUploadWrapper = styled(BaseBox)( return { display: 'flex', borderStyle: 'dashed', - height: makeSize(size[56]), + height: makeSize(fileUploadHeightTokens[size]), width: '100%', transitionProperty: 'background-color', transitionTimingFunction: easing, diff --git a/packages/blade/src/components/FileUpload/__tests__/FileUpload.web.test.tsx b/packages/blade/src/components/FileUpload/__tests__/FileUpload.web.test.tsx index eb3744643e5..c9820708904 100644 --- a/packages/blade/src/components/FileUpload/__tests__/FileUpload.web.test.tsx +++ b/packages/blade/src/components/FileUpload/__tests__/FileUpload.web.test.tsx @@ -21,6 +21,24 @@ describe('', () => { expect(input).toHaveAttribute('name', 'single-file-upload-input'); }); + it('should render FileUpload with size="large"', () => { + const { container, getByText } = renderWithTheme( + , + ); + expect(container).toMatchSnapshot(); + const input = getByText('Drag files here or').closest('div')?.querySelector('input'); + expect(input).toHaveAttribute('type', 'file'); + expect(input).toHaveAttribute('accept', 'image/*'); + expect(input).toHaveAttribute('name', 'single-file-upload-input'); + }); + it('should set disabled state with isDisabled', () => { const { container, getByText } = renderWithTheme( ', () => { const input = getByText('Drag files here or').closest('div')?.querySelector('input'); expect(input).toBeDisabled(); }); + it('should set required state with isRequired', () => { const { getByText } = renderWithTheme( should render in SSR 1`] = `"

Upload GST certificate

, Upload .jpg, .jpeg, or .png file only

Upload .jpg, .jpeg, or .png file only
"`; +exports[` should render in SSR 1`] = `"

Upload GST certificate

, Upload .jpg, .jpeg, or .png file only

Upload .jpg, .jpeg, or .png file only
"`; exports[` should render in SSR 2`] = ` .c0.c0.c0.c0.c0 { @@ -470,7 +470,7 @@ exports[` should render in SSR 2`] = `