diff --git a/.github/workflows/blade-bundle-size.yml b/.github/workflows/blade-bundle-size.yml index 0ac87bfdc8f..d4d1e98af4e 100644 --- a/.github/workflows/blade-bundle-size.yml +++ b/.github/workflows/blade-bundle-size.yml @@ -22,11 +22,7 @@ jobs: uses: actions/setup-node@v4 with: node-version: 18.12.1 - # https://stackoverflow.com/a/73824182 - registry-url: "https://npm.pkg.github.com" - name: Setup Cache & Install Dependencies - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} uses: ./.github/actions/install-dependencies - name: Update Bundle Size Data run: yarn generate-bundle-size-info @@ -51,11 +47,7 @@ jobs: uses: actions/setup-node@v4 with: node-version: 18.12.1 - # https://stackoverflow.com/a/73824182 - registry-url: "https://npm.pkg.github.com" - name: Setup Cache & Install Dependencies - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} uses: ./.github/actions/install-dependencies - name: Build Blade React Production run: yarn run-s build:clean build:generate-types build:react-prod diff --git a/.github/workflows/blade-chromatic.yml b/.github/workflows/blade-chromatic.yml index 03d96be4bee..977f7451d24 100644 --- a/.github/workflows/blade-chromatic.yml +++ b/.github/workflows/blade-chromatic.yml @@ -18,11 +18,7 @@ jobs: uses: actions/setup-node@v3 with: node-version: 18.12.1 - # https://stackoverflow.com/a/73824182 - registry-url: "https://npm.pkg.github.com" - name: Setup Cache & Install Dependencies - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} uses: ./.github/actions/install-dependencies - name: Publish to Chromatic uses: chromaui/action@v1 diff --git a/.github/workflows/blade-interaction-tests.yml b/.github/workflows/blade-interaction-tests.yml index 8a4200138d7..e1553cca858 100644 --- a/.github/workflows/blade-interaction-tests.yml +++ b/.github/workflows/blade-interaction-tests.yml @@ -28,11 +28,7 @@ jobs: uses: actions/setup-node@v3 with: node-version: 18.12.1 - # https://stackoverflow.com/a/73824182 - registry-url: "https://npm.pkg.github.com" - name: Setup Cache & Install Dependencies - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} uses: ./.github/actions/install-dependencies - name: Run Interaction Tests run: | diff --git a/.github/workflows/blade-pr-title-check.yml b/.github/workflows/blade-pr-title-check.yml index fefdb4b8f21..7bcbc5f34e4 100644 --- a/.github/workflows/blade-pr-title-check.yml +++ b/.github/workflows/blade-pr-title-check.yml @@ -2,7 +2,7 @@ name: Blade PR Title Check on: pull_request_target: - types: [open, edited, synchronize] + types: [opened, edited, synchronize] concurrency: # cancel previously running workflows when a new workflow is re-run group: ${{ github.workflow }}-${{ github.ref }} diff --git a/.github/workflows/blade-tokens-upload.yml b/.github/workflows/blade-tokens-upload.yml index 8af157a5ab8..a9d3866e596 100644 --- a/.github/workflows/blade-tokens-upload.yml +++ b/.github/workflows/blade-tokens-upload.yml @@ -24,11 +24,7 @@ jobs: uses: actions/setup-node@v3 with: node-version: 18.12.1 - # https://stackoverflow.com/a/73824182 - registry-url: "https://npm.pkg.github.com" - name: Setup Cache & Install Dependencies - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} uses: ./.github/actions/install-dependencies - name: Upload Tokens working-directory: packages/blade diff --git a/.github/workflows/blade-validate.yml b/.github/workflows/blade-validate.yml index 7503e53f001..021d0793cf5 100644 --- a/.github/workflows/blade-validate.yml +++ b/.github/workflows/blade-validate.yml @@ -16,11 +16,7 @@ jobs: uses: actions/setup-node@v3 with: node-version: 18.12.1 - # https://stackoverflow.com/a/73824182 - registry-url: "https://npm.pkg.github.com" - name: Setup Cache & Install Dependencies - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} uses: ./.github/actions/install-dependencies - name: Build Blade run: yarn build @@ -45,11 +41,7 @@ jobs: uses: actions/setup-node@v3 with: node-version: 18.12.1 - # https://stackoverflow.com/a/73824182 - registry-url: "https://npm.pkg.github.com" - name: Setup Cache & Install Dependencies - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} uses: ./.github/actions/install-dependencies - name: Run Unit Tests run: yarn test diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 399776a3b5e..f3f7b8cfdf4 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -21,11 +21,7 @@ jobs: uses: actions/setup-node@v3 with: node-version: 18.12.1 - # https://stackoverflow.com/a/73824182 - registry-url: "https://npm.pkg.github.com" - name: Setup Cache & Install Dependencies - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} uses: ./.github/actions/install-dependencies - name: Create Release Pull Request & Publish packages id: changesets diff --git a/.npmrc b/.npmrc new file mode 100644 index 00000000000..f6573d967ed --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +@razorpay:registry=https://registry.npmjs.org/ diff --git a/package.json b/package.json index 412ebb600c8..c0318e64165 100644 --- a/package.json +++ b/package.json @@ -29,10 +29,7 @@ "@babel/eslint-parser": "7.21.8", "@changesets/cli": "2.24.1", "@types/jest": "26.0.23", - "@types/react": "17.0.4", - "@types/react-native": "0.64.4", - "@types/styled-components": "5.1.25", - "@types/styled-components-react-native": "5.1.3", + "@types/react": "18.2.24", "@typescript-eslint/eslint-plugin": "5.59.6", "@typescript-eslint/parser": "5.59.6", "@typescript-eslint/utils": "5.59.6", @@ -63,6 +60,10 @@ "stylelint-processor-styled-components": "1.10.0", "typescript": "4.8.2" }, + "resolutions": { + "@types/react": "18.2.24", + "@types/styled-components": "5.1.34" + }, "husky": { "hooks": { "pre-commit": "lint-staged" diff --git a/packages/blade/CHANGELOG.md b/packages/blade/CHANGELOG.md index 1408a0b52e5..0849bc4d223 100644 --- a/packages/blade/CHANGELOG.md +++ b/packages/blade/CHANGELOG.md @@ -1,5 +1,23 @@ # @razorpay/blade +## 11.11.0 + +### Minor Changes + +- 8c5231d4: feat: add large size in FileUpload component + + #### Usage + + ```js + + ``` + ## 11.10.0 ### Minor Changes diff --git a/packages/blade/baseBundleSizeStats.json b/packages/blade/baseBundleSizeStats.json index f0e79424562..f8261a0bbb3 100644 --- a/packages/blade/baseBundleSizeStats.json +++ b/packages/blade/baseBundleSizeStats.json @@ -2,358 +2,358 @@ { "name": "Base", "passed": true, - "size": 22182, + "size": 21951, "sizeLimit": 2000000, - "loading": 0.4332421875 + "loading": 0.42873046875 }, { "name": "Accordion, AccordionItemHeader, AccordionItemBody, AccordionItem", "passed": true, - "size": 29548, + "size": 29275, "sizeLimit": 2000000, - "loading": 0.577109375 + "loading": 0.57177734375 }, { "name": "ActionList, ActionListItem, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection", "passed": true, - "size": 34780, + "size": 34549, "sizeLimit": 2000000, - "loading": 0.679296875 + "loading": 0.67478515625 }, { "name": "Alert", "passed": true, - "size": 33726, + "size": 33524, "sizeLimit": 2000000, - "loading": 0.6587109375 + "loading": 0.654765625 }, { "name": "Amount", "passed": true, - "size": 23280, + "size": 23093, "sizeLimit": 2000000, - "loading": 0.4546875 + "loading": 0.45103515625 }, { "name": "Badge", "passed": true, - "size": 23001, + "size": 22811, "sizeLimit": 2000000, - "loading": 0.44923828125 + "loading": 0.44552734375 }, { "name": "BladeProvider", "passed": true, - "size": 23819, + "size": 23645, "sizeLimit": 2000000, - "loading": 0.46521484375 + "loading": 0.46181640625 }, { "name": "BottomSheet", "passed": true, - "size": 31674, + "size": 31406, "sizeLimit": 2000000, - "loading": 0.6186328125 + "loading": 0.6133984375 }, { "name": "Box", "passed": true, - "size": 22928, + "size": 22741, "sizeLimit": 2000000, - "loading": 0.4478125 + "loading": 0.44416015625 }, { "name": "Breadcrumb, BreadcrumbItem", "passed": true, - "size": 24727, + "size": 24527, "sizeLimit": 2000000, - "loading": 0.48294921875 + "loading": 0.47904296875 }, { "name": "ButtonGroup", "passed": true, - "size": 23324, + "size": 23130, "sizeLimit": 2000000, - "loading": 0.455546875 + "loading": 0.4517578125 }, { "name": "Card, CardBody, CardHeader, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderTrailing, CardFooter, CardFooterLeading, CardFooterTrailing", "passed": true, - "size": 31375, + "size": 31166, "sizeLimit": 2000000, - "loading": 0.61279296875 + "loading": 0.6087109375 }, { "name": "Carousel, CarouselItem", "passed": true, - "size": 29012, + "size": 28820, "sizeLimit": 2000000, - "loading": 0.566640625 + "loading": 0.562890625 }, { "name": "Checkbox", "passed": true, - "size": 28199, + "size": 27989, "sizeLimit": 2000000, - "loading": 0.55076171875 + "loading": 0.54666015625 }, { "name": "Chip, ChipGroup", "passed": true, - "size": 27536, + "size": 27334, "sizeLimit": 2000000, - "loading": 0.5378125 + "loading": 0.5338671875 }, { "name": "Collapsible, CollapsibleLink, CollapsibleButton, CollapsibleBody", "passed": true, - "size": 31647, + "size": 31435, "sizeLimit": 2000000, - "loading": 0.61810546875 + "loading": 0.61396484375 }, { "name": "Counter", "passed": true, - "size": 22953, + "size": 22772, "sizeLimit": 2000000, - "loading": 0.44830078125 + "loading": 0.444765625 }, { "name": "Divider", "passed": true, - "size": 22721, + "size": 22518, "sizeLimit": 2000000, - "loading": 0.44376953125 + "loading": 0.4398046875 }, { "name": "Drawer, DrawerBody, DrawerHeader", "passed": true, - "size": 38137, + "size": 38108, "sizeLimit": 2000000, - "loading": 0.74486328125 + "loading": 0.744296875 }, { "name": "Dropdown, DropdownOverlay, DropdownButton, DropdownLink, DropdownFooter, DropdownHeader", "passed": true, - "size": 44942, + "size": 44998, "sizeLimit": 2000000, - "loading": 0.8777734375 + "loading": 0.8788671875 }, { "name": "FileUpload", "passed": true, - "size": 35600, + "size": 35465, "sizeLimit": 2000000, - "loading": 0.6953125 + "loading": 0.69267578125 }, { "name": "Indicator", "passed": true, - "size": 23093, + "size": 22916, "sizeLimit": 2000000, - "loading": 0.45103515625 + "loading": 0.447578125 }, { "name": "List, ListItem, ListItemLink, ListItemCode, ListItemText", "passed": true, - "size": 27256, + "size": 27067, "sizeLimit": 2000000, - "loading": 0.53234375 + "loading": 0.52865234375 }, { "name": "Modal", "passed": true, - "size": 34766, + "size": 34792, "sizeLimit": 2000000, - "loading": 0.6790234375 + "loading": 0.67953125 }, { "name": "Popover, PopoverInteractiveWrapper", "passed": true, - "size": 42508, + "size": 42600, "sizeLimit": 2000000, - "loading": 0.830234375 + "loading": 0.83203125 }, { "name": "ProgressBar", "passed": true, - "size": 23878, + "size": 23685, "sizeLimit": 2000000, - "loading": 0.4663671875 + "loading": 0.46259765625 }, { "name": "Radio", "passed": true, - "size": 26952, + "size": 26711, "sizeLimit": 2000000, - "loading": 0.52640625 + "loading": 0.52169921875 }, { "name": "Skeleton", "passed": true, - "size": 22964, + "size": 22755, "sizeLimit": 2000000, - "loading": 0.448515625 + "loading": 0.44443359375 }, { "name": "SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourStep", "passed": true, - "size": 50515, + "size": 50519, "sizeLimit": 2000000, - "loading": 0.98662109375 + "loading": 0.98669921875 }, { "name": "Switch", "passed": true, - "size": 26724, + "size": 26497, "sizeLimit": 2000000, - "loading": 0.521953125 + "loading": 0.51751953125 }, { "name": "Table, TableHeader, TableHeaderCell, TableHeaderRow, TableBody, TableCell, TableRow, TableFooter, TableFooterCell, TableFooterRow, TablePagination, TableToolbar, TableToolbarActions", "passed": true, - "size": 73872, + "size": 73865, "sizeLimit": 2000000, - "loading": 1.4428125 + "loading": 1.44267578125 }, { "name": "Tabs, TabItem, TabList, TabPanel", "passed": true, - "size": 28786, + "size": 28603, "sizeLimit": 2000000, - "loading": 0.5622265625 + "loading": 0.55865234375 }, { "name": "Tag", "passed": true, - "size": 25626, + "size": 25430, "sizeLimit": 2000000, - "loading": 0.5005078125 + "loading": 0.4966796875 }, { "name": "ToastContainer, useToast", "passed": true, - "size": 34945, + "size": 34744, "sizeLimit": 2000000, - "loading": 0.68251953125 + "loading": 0.67859375 }, { "name": "Tooltip, TooltipInteractiveWrapper", "passed": true, - "size": 37377, + "size": 37441, "sizeLimit": 2000000, - "loading": 0.73001953125 + "loading": 0.73126953125 }, { "name": "Button", "passed": true, - "size": 28171, + "size": 27956, "sizeLimit": 2000000, - "loading": 0.55021484375 + "loading": 0.546015625 }, { "name": "IconButton", "passed": true, - "size": 22968, + "size": 22760, "sizeLimit": 2000000, - "loading": 0.44859375 + "loading": 0.44453125 }, { "name": "CheckboxGroup", "passed": true, - "size": 26358, + "size": 26153, "sizeLimit": 2000000, - "loading": 0.5148046875 + "loading": 0.51080078125 }, { "name": "SelectInput, AutoComplete", "passed": true, - "size": 40869, + "size": 40660, "sizeLimit": 2000000, - "loading": 0.79822265625 + "loading": 0.794140625 }, { "name": "OTPInput", "passed": true, - "size": 34988, + "size": 34772, "sizeLimit": 2000000, - "loading": 0.683359375 + "loading": 0.679140625 }, { "name": "PasswordInput", "passed": true, - "size": 36917, + "size": 36711, "sizeLimit": 2000000, - "loading": 0.72103515625 + "loading": 0.71701171875 }, { "name": "PhoneNumberInput", "passed": true, - "size": 70548, + "size": 70507, "sizeLimit": 2000000, - "loading": 1.377890625 + "loading": 1.37708984375 }, { "name": "TextArea", "passed": true, - "size": 35276, + "size": 35052, "sizeLimit": 2000000, - "loading": 0.688984375 + "loading": 0.684609375 }, { "name": "TextInput", "passed": true, - "size": 36917, + "size": 36694, "sizeLimit": 2000000, - "loading": 0.72103515625 + "loading": 0.7166796875 }, { "name": "Link", "passed": true, - "size": 24297, + "size": 24104, "sizeLimit": 2000000, - "loading": 0.47455078125 + "loading": 0.47078125 }, { "name": "RadioGroup", "passed": true, - "size": 26313, + "size": 26121, "sizeLimit": 2000000, - "loading": 0.51392578125 + "loading": 0.51017578125 }, { "name": "Spinner", "passed": true, - "size": 24112, + "size": 23901, "sizeLimit": 2000000, - "loading": 0.4709375 + "loading": 0.46681640625 }, { "name": "Code", "passed": true, - "size": 22791, + "size": 22596, "sizeLimit": 2000000, - "loading": 0.44513671875 + "loading": 0.441328125 }, { "name": "Display", "passed": true, - "size": 22687, + "size": 22495, "sizeLimit": 2000000, - "loading": 0.44310546875 + "loading": 0.43935546875 }, { "name": "Heading, getHeadingProps", "passed": true, - "size": 22632, + "size": 22437, "sizeLimit": 2000000, - "loading": 0.44203125 + "loading": 0.43822265625 }, { "name": "Text", "passed": true, - "size": 22184, + "size": 21954, "sizeLimit": 2000000, - "loading": 0.43328125 + "loading": 0.4287890625 } ] diff --git a/packages/blade/package.json b/packages/blade/package.json index f4a4192e553..a74a53d068d 100644 --- a/packages/blade/package.json +++ b/packages/blade/package.json @@ -1,7 +1,7 @@ { "name": "@razorpay/blade", "description": "The Design System that powers Razorpay", - "version": "11.10.0", + "version": "11.11.0", "license": "MIT", "engines": { "node": ">=18.12.1" @@ -208,10 +208,10 @@ "@types/jest-axe": "3.5.5", "@types/jscodeshift": "0.11.6", "@types/jsdom": "20.0.1", - "@types/react": "17.0.38", + "@types/react": "18.2.24", "@types/react-native": "0.72.2", "@types/react-test-renderer": "17.0.1", - "@types/styled-components": "5.1.25", + "@types/styled-components": "5.1.34", "@types/styled-components-react-native": "5.1.3", "@types/tinycolor2": "1.4.3", "@types/react-router-dom": "5.3.3", @@ -250,7 +250,7 @@ "react-native": "0.72.3", "react-native-gesture-handler": "2.9.0", "react-native-reanimated": "3.4.2", - "react-native-svg": "12.3.0", + "react-native-svg": "15.1.0", "react-scripts": "5.0.1", "react-test-renderer": "18.2.0", "rollup": "3.28.1", @@ -271,7 +271,7 @@ "react-native-safe-area-context": "3.4.1", "ttypescript": "1.5.15", "typescript": "4.9", - "typescript-transform-paths": "3.4.6", + "typescript-transform-paths": "3.4.7", "@types/body-scroll-lock": "3.1.0", "ramda": "0.29.1", "@razorpay/i18nify-js": "1.8.0", @@ -306,6 +306,8 @@ "@storybook/**/react": "18.2.0", "react-dom": "18.2.0", "react": "18.2.0", + "@types/react": "18.2.24", + "@types/styled-components": "5.1.34", "styled-components": "^5" } } diff --git a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.native.test.tsx.snap b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.native.test.tsx.snap index 16fc4753dfb..b6ee91fd214 100644 --- a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.native.test.tsx.snap +++ b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.native.test.tsx.snap @@ -357,7 +357,12 @@ exports[` should render 1`] = ` should render 1`] = ` should render 1`] = ` should render 1`] = ` should render 1`] = ` should render 1`] = ` should render deprecated API 1`] = ` should render deprecated API 1`] = ` should render deprecated API 1`] = ` ( ({ sectionData, actionListItemWrapperRole, isMultiSelectable, isInBottomSheet }, ref) => { const { footerHeight, setContentHeight } = useBottomSheetContext(); - const renderActionListItem = React.useCallback(({ item }) => { + const renderActionListItem = React.useCallback(({ item }: any) => { return ; }, []); - const renderActionListSectionHeader = React.useCallback(({ section: { title } }) => { + const renderActionListSectionHeader = React.useCallback(({ section: { title } }: any) => { if (!title) return null; return ; }, []); const renderActionListSectionDivider = React.useCallback( - ({ section: { title, hideDivider } }) => { + ({ section: { title, hideDivider } }: any) => { if (!title) return null; if (hideDivider) return null; return ; diff --git a/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.native.test.tsx.snap b/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.native.test.tsx.snap index d5d15c39c94..e000a20cdc6 100644 --- a/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.native.test.tsx.snap +++ b/packages/blade/src/components/Alert/__tests__/__snapshots__/Alert.native.test.tsx.snap @@ -103,7 +103,12 @@ exports[` should render 1`] = ` > should render 1`] = ` /> should render 1`] = ` should render 1`] = ` > should render positive color and full width 1`] = ` > should render positive color and full width 1`] = ` /> should render positive color and full width 1`] = ` should render positive color and full width 1`] = ` > should render positive color and full width 2`] = ` > should render positive color and full width 2`] = ` /> should render positive color and full width 2`] = ` should render positive color and full width 2`] = ` > should render Badge with Icon 1`] = ` > should render Badge with Icon 1`] = ` /> should render Badge with Icon 1`] = ` { + (props: any): React.ReactElement => { return ( { + (props: any): React.ReactElement => { return ; }, [bottomSheetZIndex], diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap index 95b94c4c79b..a034f359a75 100644 --- a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap +++ b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.native.test.tsx.snap @@ -1013,7 +1013,12 @@ exports[` should render Header/Footer/Body properly 1`] = ` > should render empty header 1`] = ` > = ({ motionDuration, motionEasing, children, isPressed }) => { const { theme } = useTheme(); const duration = getIn(theme.motion, motionDuration); diff --git a/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx b/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx index 03f931e786f..04e8b51ca5a 100644 --- a/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx +++ b/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx @@ -145,6 +145,7 @@ const _StyledBaseButton: React.ForwardRefRenderFunction + {/* @ts-expect-error */} {({ pressed }): React.ReactNode => { isPressed.value = pressed; return children; diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap index 46e568bf8fc..c3bb8296d5a 100644 --- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap +++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap @@ -548,7 +548,12 @@ exports[` should render button with icon with default iconPosition should render button with icon with left iconPosition 1` should render button with icon with right iconPosition 1 should render button with icon without text 1`] = ` should render loading button 1`] = ` > should render loading button 1`] = ` /> should render loading button 1`] = ` /> should render button with icon with default iconPosition 1`] should render button with icon with right iconPosition 1`] = should render 1`] = ` > should render a Card with Header 1`] = ` > should render a Card with Header 1`] = ` /> should render a Card with Header 1`] = ` should set error state with validationState 1`] = ` > should set error state with validationState 1`] = ` /> should set error state with validationState 1`] = ` should render chip with icon 1`] = ` > should render chip with icon 1`] = ` /> should render chip with icon 1`] = ` should render chip with icon 1`] = ` > should render chip with icon 1`] = ` /> should render chip with icon 1`] = ` should render with CollapsibleLink 1`] = ` should render dropdown 1`] = ` should render dropdown 1`] = ` width="16px" > should render dropdown 1`] = ` = ( { @@ -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`] = `