From acf0c6f7b0ce2a1ffe2de9b135e81a396b0ec6da Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 6 May 2025 18:29:16 +0200 Subject: [PATCH 001/109] chore: sync main to beta (#5110) * ci: beta sync with main and releases (#5102) * ci: fix (#5103) * ci: change github action (#5106) * ci: fix sync github action (#5109) --------- Co-authored-by: Matthias Prost --- .github/workflows/sync-main-to-beta.yml | 53 +++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 .github/workflows/sync-main-to-beta.yml diff --git a/.github/workflows/sync-main-to-beta.yml b/.github/workflows/sync-main-to-beta.yml new file mode 100644 index 0000000000..48c2b7bc43 --- /dev/null +++ b/.github/workflows/sync-main-to-beta.yml @@ -0,0 +1,53 @@ +name: Sync Main to Beta + +on: + push: + branches: + - main + +permissions: + contents: write + pull-requests: write + +jobs: + sync-main-to-beta: + name: Sync Main to Beta + runs-on: ubuntu-latest + + steps: + - name: Checkout Repository + uses: actions/checkout@v4 + + - name: Check if Beta Branch Exists + id: check-beta + run: | + if git ls-remote --heads origin beta | grep -q beta; then + echo "Beta branch exists." + echo "exists=true" >> $GITHUB_ENV + else + echo "Beta branch does not exist. Exiting." + echo "exists=false" >> $GITHUB_ENV + fi + + - name: Exit if Beta Branch Does Not Exist + if: env.exists == 'false' + run: exit 0 + + - name: Set Git Identity + run: | + git config --global user.name 'Scaleway Bot' + git config --global user.email 'github@scaleway.com' + + - name: Fetch All Branches + run: git fetch --all + + - name: Opening pull request + id: pull + uses: tretuna/sync-branches@1.4.0 + with: + GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} + FROM_BRANCH: "main" + TO_BRANCH: "beta" + PULL_REQUEST_TITLE: "chore: sync main to beta" + PULL_REQUEST_BODY: "Beta needs to be updated to follow main. This PR is automatically opened as beta branch exists. Once the branch will be deleted the github action will not run anymore." + CONTENT_COMPARISON: true From 8fce1ffb77f02db756820c2877e24e5a7b8d8298 Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Tue, 6 May 2025 18:39:10 +0200 Subject: [PATCH 002/109] feat: beta 1 (#5058) * feat: beta 1 * ci: fix unit tests * fix: typecheck for all stories * ci: add changeset pre release file * fix: add changeset and fix stories * fix: unit tests --- .changeset/config.json | 2 +- .changeset/pre.json | 19 + .changeset/witty-rocks-play.md | 40 + packages/form/package.json | 1 + .../src/components/KeyValueField/index.tsx | 10 +- .../__snapshots__/index.test.tsx.snap | 72 +- .../Submit/__tests__/index.test.tsx | 9 - packages/form/src/components/Submit/index.tsx | 6 - packages/icons/package.json | 38 +- .../AiCategoryIcon.tsx | 0 .../ApplicationIntegrationCategoryIcon.tsx | 0 .../BaremetalCategoryIcon.tsx | 0 .../BillingCategoryIcon.tsx | 0 .../ComputeCategoryIcon.tsx | 0 .../ConsoleCategoryIcon.tsx | 0 .../ContainersCategoryIcon.tsx | 0 .../DatabaseCategoryIcon.tsx | 0 .../DatacenterCategoryIcon.tsx | 0 .../DedicatedServerCategoryIcon.tsx | 0 .../DevToolsCategoryIcon.tsx | 0 .../DocumentationCategoryIcon.tsx | 0 .../EnvironmentalFootprintCategoryIcon.tsx | 0 .../IotCategoryIcon.tsx | 0 .../LabsCategoryIcon.tsx | 0 .../ManagedServicesCategoryIcon.tsx | 0 .../NetworkCategoryIcon.tsx | 0 .../ObservabilityCategoryIcon.tsx | 0 .../PartnersCategoryIcon.tsx | 0 .../PinCategoryIcon.tsx | 0 .../SecurityCategoryIcon.tsx | 0 .../ServerlessCategoryIcon.tsx | 0 .../StorageCategoryIcon.tsx | 0 .../ToolsServicesCategoryIcon.tsx | 0 .../UseCaseCategoryIcon.tsx | 0 .../VpcCategoryIcon.tsx | 0 .../WebHostingCategoryIcon.tsx | 0 .../index.ts | 0 .../__stories__/Template.stories.tsx | 2 +- .../__stories__/index.stories.tsx | 2 +- .../src/components/CategoryIcon/index.ts | 2 +- packages/icons/src/components/Icon/Icon.tsx | 5 +- .../Icon/__generatedIcons__/AsteriskIcon.tsx | 24 - .../__generatedIcons__/CrossCircleIcon.tsx | 30 - .../CrossCircleOutlineIcon.tsx | 32 - .../__generatedIcons__/DragVariantIcon.tsx | 24 - .../AddressIcon.tsx | 0 .../AddressOutlineIcon.tsx | 0 .../AddressPlayIcon.tsx | 0 .../AdjustmentsHorizontalIcon.tsx | 0 .../AdjustmentsHorizontalOutlineIcon.tsx | 0 .../AlertCircleIcon.tsx | 0 .../AlertCircleOutlineIcon.tsx | 0 .../AnchorIcon.tsx | 0 .../ArrowDownIcon.tsx | 0 .../ArrowLeftBottomIcon.tsx | 0 .../ArrowLeftDoubleIcon.tsx | 0 .../ArrowLeftIcon.tsx | 0 .../ArrowRightBottomIcon.tsx | 0 .../ArrowRightDoubleIcon.tsx | 0 .../ArrowRightIcon.tsx | 0 .../ArrowUpIcon.tsx | 0 .../AttachIcon.tsx | 0 .../AutoFixIcon.tsx | 0 .../AutoFixOutlineIcon.tsx | 0 .../BoldIcon.tsx | 0 .../BookOpenOutlineIcon.tsx | 0 .../BookOpenOutlineOutlineIcon.tsx | 0 .../BullhornIcon.tsx | 0 .../BullhornOutlineIcon.tsx | 0 .../BurgerIcon.tsx | 0 .../CalculatorIcon.tsx | 0 .../CalculatorOutlineIcon.tsx | 0 .../CalendarRangeIcon.tsx | 0 .../CalendarRangeOutlineIcon.tsx | 0 .../CancelIcon.tsx | 0 .../ChatIcon.tsx | 0 .../ChatOutlineIcon.tsx | 0 .../CheckCircleIcon.tsx | 0 .../CheckCircleOutlineIcon.tsx | 0 .../CheckIcon.tsx | 0 .../ClockOutlineIcon.tsx | 0 .../ClockOutlineOutlineIcon.tsx | 0 .../CloseCircleOutlineIcon.tsx | 0 .../CloseIcon.tsx | 0 .../ConsoleIcon.tsx | 0 .../ConsoleOutlineIcon.tsx | 0 .../CopyContentIcon.tsx | 0 .../CredentialIcon.tsx | 0 .../CredentialOutlineIcon.tsx | 0 .../CreditCardIcon.tsx | 0 .../CreditCardOutlineIcon.tsx | 0 .../DatabaseIcon.tsx | 0 .../DatabaseOutlineIcon.tsx | 0 .../DeleteIcon.tsx | 0 .../DeleteOutlineIcon.tsx | 0 .../DetachIcon.tsx | 0 .../DocIcon.tsx | 0 .../DocOutlineIcon.tsx | 0 .../DotsHorizontalIcon.tsx | 0 .../DotsVerticalIcon.tsx | 0 .../DownloadIcon.tsx | 0 .../DragIcon.tsx | 0 .../EarthIcon.tsx | 0 .../EarthOutlineIcon.tsx | 0 .../EastIcon.tsx | 0 .../EastShortIcon.tsx | 0 .../EmailIcon.tsx | 0 .../EmailOutlineIcon.tsx | 0 .../EmailRemoveIcon.tsx | 0 .../EmailRemoveOutlineIcon.tsx | 0 .../EqualIcon.tsx | 0 .../EscapeIcon.tsx | 0 .../ExpandIcon.tsx | 0 .../ExpandMoreIcon.tsx | 0 .../EyeIcon.tsx | 0 .../EyeOffIcon.tsx | 0 .../EyeOffOutlineIcon.tsx | 0 .../EyeOutlineIcon.tsx | 0 .../FilterIcon.tsx | 0 .../FilterOutlineIcon.tsx | 0 .../FolderIcon.tsx | 0 .../FolderOutlineIcon.tsx | 0 .../GithubIcon.tsx | 0 .../HelpCircleIcon.tsx | 0 .../HelpCircleOutlineIcon.tsx | 0 .../IdIcon.tsx | 0 .../IdOutlineIcon.tsx | 0 .../InformationIcon.tsx | 0 .../InformationOutlineIcon.tsx | 0 .../InstagramIcon.tsx | 0 .../ItalicIcon.tsx | 0 .../LeafIcon.tsx | 0 .../LeafOutlineIcon.tsx | 0 .../LeftRightArrowIcon.tsx | 0 .../LightBulbIcon.tsx | 0 .../LightBulbOutlineIcon.tsx | 0 .../LinkedinIcon.tsx | 0 .../ListBulletIcon.tsx | 0 .../ListNumberIcon.tsx | 0 .../LockIcon.tsx | 0 .../LockOutlineIcon.tsx | 0 .../LogoutIcon.tsx | 0 .../MembersIcon.tsx | 0 .../MembersOutlineIcon.tsx | 0 .../MinusIcon.tsx | 0 .../MoonIcon.tsx | 0 .../MoonOutlineIcon.tsx | 0 .../MosaicIcon.tsx | 0 .../MosaicOutlineIcon.tsx | 0 .../NorthIcon.tsx | 0 .../NorthShortIcon.tsx | 0 .../NotificationIcon.tsx | 0 .../NotificationOutlineIcon.tsx | 0 .../OpenInNewIcon.tsx | 0 .../OrganizationIcon.tsx | 0 .../PartnerSpaceIcon.tsx | 0 .../Pen2Icon.tsx | 0 .../Pen2OutlineIcon.tsx | 0 .../PenIcon.tsx | 0 .../PenOutlineIcon.tsx | 0 .../PencilIcon.tsx | 0 .../PencilOutlineIcon.tsx | 0 .../PhoneIcon.tsx | 0 .../PhoneOutlineIcon.tsx | 0 .../PinIcon.tsx | 0 .../PinOutlineIcon.tsx | 0 .../PlayIcon.tsx | 0 .../PlayOutlineIcon.tsx | 0 .../PlusIcon.tsx | 0 .../PrivacyIcon.tsx | 0 .../PrivacyOutlineIcon.tsx | 0 .../ProfileIcon.tsx | 0 .../ProfileOutlineIcon.tsx | 0 .../ProgressCheckIcon.tsx | 0 .../RayEndArrowIcon.tsx | 0 .../RayStartArrowIcon.tsx | 0 .../RayStartEndIcon.tsx | 0 .../RayTopArrowIcon.tsx | 0 .../RebootIcon.tsx | 0 .../RestoreIcon.tsx | 0 .../RevokeIcon.tsx | 0 .../RocketIcon.tsx | 0 .../RocketOutlineIcon.tsx | 0 .../RssIcon.tsx | 0 .../SearchIcon.tsx | 0 .../SendIcon.tsx | 0 .../SendOutlineIcon.tsx | 0 .../SettingsIcon.tsx | 0 .../SettingsOutlineIcon.tsx | 0 .../SidebarIcon.tsx | 0 .../SidebarOutlineIcon.tsx | 0 .../SlackIcon.tsx | 0 .../SortIcon.tsx | 0 .../SouthIcon.tsx | 0 .../SouthShortIcon.tsx | 0 .../SparklesIcon.tsx | 0 .../SparklesOutlineIcon.tsx | 0 .../StarIcon.tsx | 0 .../StarOutlineIcon.tsx | 0 .../StopIcon.tsx | 0 .../StopOutlineIcon.tsx | 0 .../SunIcon.tsx | 0 .../SunOutlineIcon.tsx | 0 .../SupportIcon.tsx | 0 .../SupportOutlineIcon.tsx | 0 .../SwitchOrgaIcon.tsx | 0 .../ThumbsDownIcon.tsx | 0 .../ThumbsDownOutlineIcon.tsx | 0 .../ThumbsUpIcon.tsx | 0 .../ThumbsUpOutlineIcon.tsx | 0 .../TwitterIcon.tsx | 0 .../UnderlineIcon.tsx | 0 .../UnlockIcon.tsx | 0 .../UnlockOutlineIcon.tsx | 0 .../UnpinIcon.tsx | 0 .../UnpinOutlineIcon.tsx | 0 .../UploadIcon.tsx | 0 .../ViewIcon.tsx | 0 .../WeatherNightIcon.tsx | 0 .../WeatherNightOutlineIcon.tsx | 0 .../WestIcon.tsx | 0 .../WestShortIcon.tsx | 0 .../YoutubeIcon.tsx | 0 .../index.ts | 8 - .../Icon/__stories__/List.stories.tsx | 46 +- .../Icon/__stories__/Sentiment.stories.tsx | 2 +- .../Icon/__stories__/Size.stories.tsx | 2 +- .../Icon/__stories__/Template.stories.tsx | 2 +- .../Icon/__stories__/index.stories.tsx | 2 +- .../assets/default-outline/cross-circle.svg | 3 - .../assets/default-solid/cross-circle.svg | 3 - .../Icon/assets/default/asterisk.svg | 3 - .../Icon/assets/default/drag-variant.svg | 3 - .../assets/small-outline/cross-circle.svg | 3 - .../Icon/assets/small-solid/cross-circle.svg | 3 - .../components/Icon/assets/small/asterisk.svg | 3 - .../Icon/assets/small/drag-variant.svg | 3 - packages/icons/src/components/Icon/index.ts | 2 +- .../src/components/Icon/legacy/Icons.tsx | 381 ------ .../src/components/Icon/legacy/SmallIcons.tsx | 381 ------ .../src/components/Icon/legacy/index.tsx | 218 ---- .../BaaiLogo.tsx | 0 .../DeepseekLogo.tsx | 0 .../GithubLogo.tsx | 0 .../GmailLogo.tsx | 0 .../GoogleLogo.tsx | 0 .../HuggingFaceLogo.tsx | 0 .../KyutaiLogo.tsx | 0 .../MetaLogo.tsx | 0 .../MetabaseLogo.tsx | 0 .../MicrosoftLogo.tsx | 0 .../MistralLogo.tsx | 0 .../OutlookLogo.tsx | 0 .../PowerBiLogo.tsx | 0 .../QwenLogo.tsx | 0 .../TableauLogo.tsx | 0 .../index.ts | 0 .../Logo/__stories__/Sizes.stories.tsx | 2 +- .../Logo/__stories__/Template.stories.tsx | 2 +- .../Logo/__stories__/index.stories.tsx | 2 +- packages/icons/src/components/Logo/index.ts | 2 +- .../DocumentDbProductIcon.tsx | 50 - .../AbuseProductIcon.tsx | 0 .../AccountExperienceProductIcon.tsx | 0 .../AdditionalDiskProductIcon.tsx | 0 .../AdvancedSettingsProductIcon.tsx | 0 .../AnsibleProductIcon.tsx | 0 .../ApiGatewayProductIcon.tsx | 0 .../ApiKeyProductIcon.tsx | 0 .../ApiProductIcon.tsx | 0 .../AppleSiliconProductIcon.tsx | 0 .../ApplicationLibraryProductIcon.tsx | 0 .../ApplicationProductIcon.tsx | 0 .../AuditTrailProductIcon.tsx | 0 .../BackendsProductIcon.tsx | 0 .../BandwidthProductIcon.tsx | 0 .../BasicSupportProductIcon.tsx | 0 .../BillingProductIcon.tsx | 0 .../BlockStorageProductIcon.tsx | 0 .../CbProductIcon.tsx | 0 .../CdnProductIcon.tsx | 0 .../ChangelogProductIcon.tsx | 0 .../CliProductIcon.tsx | 0 .../CloudHostingProductIcon.tsx | 0 .../CockpitProductIcon.tsx | 0 .../ColdStorageProductIcon.tsx | 0 .../ConsoleProductIcon.tsx | 0 .../ContainersProductIcon.tsx | 0 .../CostManagerProductIcon.tsx | 0 .../DataWarehouseProductIcon.tsx | 0 .../DdosProductIcon.tsx | 0 .../DdxCoreServersProductIcon.tsx | 0 .../DdxProServersProductIcon.tsx | 0 .../DdxStartServersProductIcon.tsx | 0 .../DedibackupProductIcon.tsx | 0 .../DediboxProductIcon.tsx | 0 .../DedicatedControlPlaneProductIcon.tsx | 0 .../DedicatedServerProductIcon.tsx | 0 .../DeleteMarkerProductIcon.tsx | 0 .../DevicesProductIcon.tsx | 0 .../DirectConnectProductIcon.tsx | 0 .../DistributedDataLabProductIcon.tsx | 0 .../DnsProductIcon.tsx | 0 .../DocumentationProductIcon.tsx | 0 .../DomainsProductIcon.tsx | 0 .../EdgeServicesProductIcon.tsx | 0 .../ElasticMetalAluminiumProductIcon.tsx | 0 .../ElasticMetalBerylliumProductIcon.tsx | 0 .../ElasticMetalIridiumProductIcon.tsx | 0 .../ElasticMetalLithiumProductIcon.tsx | 0 .../ElasticMetalProductIcon.tsx | 0 .../ElasticMetalTitaniumProductIcon.tsx | 0 ...onmentalFootprintCalculatorProductIcon.tsx | 0 .../FileProductIcon.tsx | 0 .../FlexibleIpProductIcon.tsx | 0 .../FolderProductIcon.tsx | 0 .../FrontEndsProductIcon.tsx | 0 .../FunctionsProductIcon.tsx | 0 .../GenerativeApiProductIcon.tsx | 0 .../GoldSupportProductIcon.tsx | 0 .../GpuServersProductIcon.tsx | 0 .../HubNetworksProductIcon.tsx | 0 .../HubRoutesProductIcon.tsx | 0 .../IamProductIcon.tsx | 0 .../IconElasticMetalProductIcon.tsx | 0 .../IconSdkJsProductIcon.tsx | 0 .../IconSdkProductIcon.tsx | 0 .../ImagesProductIcon.tsx | 0 .../InferenceProductIcon.tsx | 0 .../InstanceCostOptimizedProductIcon.tsx | 0 .../InstanceEnterpriseProductIcon.tsx | 0 .../InstanceGpuProductIcon.tsx | 0 .../InstanceLearnProductIcon.tsx | 0 .../InstancePopProductIcon.tsx | 0 .../InstanceProductIcon.tsx | 0 .../InstanceScallingGroupsProductIcon.tsx | 0 .../InstanceWopProductIcon.tsx | 0 .../InterlinkProductIcon.tsx | 0 .../IotEdgeProductIcon.tsx | 0 .../IotProductIcon.tsx | 0 .../IpFailoverProductIcon.tsx | 0 .../IpamProductIcon.tsx | 0 .../IpfsNamingProductIcon.tsx | 0 .../IpfsProductIcon.tsx | 0 .../JeroProductIcon.tsx | 0 .../K8sKosmosProductIcon.tsx | 0 .../KmsProductIcon.tsx | 0 .../KubernetesProductIcon.tsx | 0 .../LbProductIcon.tsx | 0 .../LifeCycleRulesProductIcon.tsx | 0 .../MacMiniM2ProductIcon.tsx | 0 .../MacMiniM4ProductIcon.tsx | 0 .../MacMiniProductIcon.tsx | 0 .../ManagedSearchDatabaseProductIcon.tsx | 0 .../MongoDbProductIcon.tsx | 0 .../MonitoringProductIcon.tsx | 0 .../MultiUserProductIcon.tsx | 0 .../NabuProductIcon.tsx | 0 .../NatsProductIcon.tsx | 0 .../NetworkAclsProductIcon.tsx | 0 .../ObjectStorageProductIcon.tsx | 0 .../OsProductIcon.tsx | 0 .../PackerProductIcon.tsx | 0 .../PlacementGroupProductIcon.tsx | 0 .../PlatinumSupportProductIcon.tsx | 0 .../PolicyProductIcon.tsx | 0 .../PoolProductIcon.tsx | 0 .../PostgresqlMysqlProductIcon.tsx | 0 .../PrivateIpProductIcon.tsx | 0 .../PrivateNetworkProductIcon.tsx | 0 .../PublicGatewayProductIcon.tsx | 0 .../QaasProductIcon.tsx | 0 .../QuantumApplicationProductIcon.tsx | 0 .../QueueingProductIcon.tsx | 0 .../RabbitMqProductIcon.tsx | 0 .../RdbProductIcon.tsx | 0 .../RedisProductIcon.tsx | 0 .../RegistryProductIcon.tsx | 0 .../RocketProductIcon.tsx | 0 .../RouterProductIcon.tsx | 0 .../RpnProductIcon.tsx | 0 .../RpnSanProductIcon.tsx | 0 .../RpnV1ProductIcon.tsx | 0 .../RpnV2ProductIcon.tsx | 0 .../SavingPlanProductIcon.tsx | 0 .../SdkGoProductIcon.tsx | 0 .../SdkPythonProductIcon.tsx | 0 .../SecretManagerProductIcon.tsx | 0 .../SecurityGroupProductIcon.tsx | 0 .../SepaProductIcon.tsx | 0 .../ServerProductIcon.tsx | 0 .../ServerlessDbProductIcon.tsx | 0 .../ServerlessJobsProductIcon.tsx | 0 .../ServiceLevelProductIcon.tsx | 0 .../SilverSupportProductIcon.tsx | 0 .../SmsProductIcon.tsx | 0 .../SmtpProductIcon.tsx | 0 .../SnapshotsProductIcon.tsx | 0 .../SnsProductIcon.tsx | 0 .../SqsProductIcon.tsx | 0 .../SslCertificatesProductIcon.tsx | 0 .../StoreServersProductIcon.tsx | 0 .../SupportProductIcon.tsx | 0 .../TerraformProductIcon.tsx | 0 .../TransactionalEmailProductIcon.tsx | 0 .../TutorialProductIcon.tsx | 0 .../UserProductIcon.tsx | 0 .../VerifyCardProductIcon.tsx | 0 .../VideoProductIcon.tsx | 0 .../VolumeProductIcon.tsx | 0 .../VpcProductIcon.tsx | 0 .../VpnProductIcon.tsx | 0 .../VpsProServersProductIcon.tsx | 0 .../VpsServersProductIcon.tsx | 0 .../VpsStartServersProductIcon.tsx | 0 .../WafProductIcon.tsx | 0 .../WebPlatformProductIcon.tsx | 0 .../WebhostingProductIcon.tsx | 0 .../ZoneProductIcon.tsx | 0 .../index.ts | 2 - .../ProductIcon/__stories__/Sizes.stories.tsx | 2 +- .../__stories__/Template.stories.tsx | 2 +- .../__stories__/Variants.stories.tsx | 2 +- .../ProductIcon/__stories__/index.stories.tsx | 2 +- .../ProductIcon/assets/document-db.svg | 12 - .../icons/src/components/ProductIcon/index.ts | 2 +- packages/icons/src/deprecatedIcons.ts | 28 +- packages/icons/vite.config.ts | 4 - .../illustrations/src/__stories__/List.tsx | 22 +- .../__stories__/Examples.stories.tsx | 21 +- .../EstimateCost/Components/Item.tsx | 9 +- .../EstimateCost/EstimateCostContent.tsx | 7 +- .../EstimateCost/OverlayComponent.tsx | 5 +- .../__snapshots__/Item.test.tsx.snap | 388 ++---- .../__snapshots__/Region.test.tsx.snap | 40 +- .../__snapshots__/Regular.test.tsx.snap | 482 +++----- .../__snapshots__/Stepper.test.tsx.snap | 264 +---- .../__snapshots__/Strong.test.tsx.snap | 120 +- .../__snapshots__/Unit.test.tsx.snap | 552 +++------ .../__snapshots__/Zone.test.tsx.snap | 80 +- .../__snapshots__/index.test.tsx.snap | 1039 ++++++----------- .../components/Navigation/components/Item.tsx | 2 +- .../src/components/SteppedListCard/Step.tsx | 5 +- .../__stories__/OnClickHide.stories.tsx | 7 +- .../__snapshots__/index.test.tsx.snap | 26 +- .../ThemeGenerator/FormContent/index.tsx | 13 +- .../Tools/ThemeGenerator/ThemeResult/Demo.tsx | 22 +- .../ThemeGenerator/ThemeResult/index.tsx | 6 +- .../__stories__/Template.stories.tsx | 10 +- .../__snapshots__/index.test.tsx.snap | 17 +- packages/ui/src/components/Alert/index.tsx | 6 +- .../AvatarV2/__stories__/Examples.stories.tsx | 6 +- .../__stories__/Sentiment.stories.tsx | 9 +- .../AvatarV2/__stories__/Size.stories.tsx | 33 +- .../__snapshots__/index.test.tsx.snap | 352 ++---- .../AvatarV2/__tests__/index.test.tsx | 15 +- .../ui/src/components/AvatarV2/constants.ts | 8 - packages/ui/src/components/AvatarV2/index.tsx | 15 +- packages/ui/src/components/AvatarV2/types.ts | 11 +- .../__snapshots__/index.test.tsx.snap | 17 +- .../components/Badge/__tests__/index.test.tsx | 6 +- packages/ui/src/components/Badge/index.tsx | 12 +- .../__snapshots__/index.test.tsx.snap | 171 +-- packages/ui/src/components/Banner/index.tsx | 6 +- .../__stories__/AdvancedUsage.stories.tsx | 10 +- .../__stories__/Interactive.stories.tsx | 7 +- .../__stories__/OnClick.stories.tsx | 3 +- .../Bullet/__stories__/Playground.stories.tsx | 2 +- .../Bullet/__stories__/Sentiments.stories.tsx | 9 +- .../Bullet/__stories__/Sizes.stories.tsx | 4 +- .../Bullet/__stories__/Text.stories.tsx | 2 +- .../Bullet/__stories__/Tooltip.stories.tsx | 2 +- .../__snapshots__/index.test.tsx.snap | 30 +- .../Bullet/__tests__/index.test.tsx | 13 +- packages/ui/src/components/Bullet/index.tsx | 19 +- .../Button/__stories__/Size.stories.tsx | 4 +- .../__snapshots__/index.test.tsx.snap | 130 +-- .../Button/__tests__/index.test.tsx | 22 +- packages/ui/src/components/Button/index.tsx | 113 +- .../Card/__stories__/Active.stories.tsx | 19 +- packages/ui/src/components/Checkbox/index.tsx | 7 +- .../ui/src/components/CheckboxGroup/index.tsx | 9 +- .../__snapshots__/index.test.tsx.snap | 193 +-- .../ui/src/components/CopyButton/index.tsx | 3 +- .../__snapshots__/index.test.tsx.snap | 152 +-- .../DateInput/components/CalendarContent.tsx | 11 +- packages/ui/src/components/Dialog/index.tsx | 14 +- .../__snapshots__/index.test.tsx.snap | 29 +- .../__stories__/EmptyList.stories.tsx | 4 +- .../__stories__/Playground.stories.tsx | 4 +- .../__snapshots__/index.test.tsx.snap | 10 +- .../__stories__/Controlled.stories.tsx | 4 +- .../__stories__/MinHeight.stories.tsx | 4 +- .../__stories__/NestedExpandable.stories.tsx | 7 +- .../__stories__/NoAnimations.stories.tsx | 4 +- .../__stories__/Header.stories.tsx | 14 +- .../__snapshots__/index.test.tsx.snap | 134 +-- .../ui/src/components/GlobalAlert/index.tsx | 6 +- .../__snapshots__/index.test.tsx.snap | 42 +- packages/ui/src/components/Link/index.tsx | 4 +- packages/ui/src/components/List/Row.tsx | 6 +- .../List/__stories__/Example.stories.tsx | 4 +- .../HighlightAnimation.stories.tsx | 11 +- .../Menu/__stories__/Template.stories.tsx | 10 +- .../MenuV2/__stories__/Searchable.stories.tsx | 10 +- .../MenuV2/__stories__/Template.stories.tsx | 10 +- .../ui/src/components/Modal/ModalContent.tsx | 6 +- .../__snapshots__/index.test.tsx.snap | 29 +- .../__snapshots__/index.test.tsx.snap | 15 +- .../ui/src/components/Notification/index.tsx | 6 +- .../__snapshots__/index.test.tsx.snap | 532 +++++---- .../ui/src/components/NumberInput/index.tsx | 10 +- .../__snapshots__/index.test.tsx.snap | 390 ++----- .../ui/src/components/NumberInputV2/index.tsx | 11 +- .../Pagination/PaginationButtons.tsx | 11 +- .../__snapshots__/index.test.tsx.snap | 158 +-- .../Popover/__stories__/Template.stories.tsx | 2 +- packages/ui/src/components/Popover/index.tsx | 6 +- .../ui/src/components/RadioGroup/index.tsx | 9 +- .../__stories__/EmptyState.stories.tsx | 10 +- .../components/SelectInputV2/SelectBar.tsx | 6 +- .../SelectInputV2/__stories__/resources.tsx | 3 +- .../components/SelectableCardGroup/index.tsx | 9 +- .../__snapshots__/index.test.tsx.snap | 68 +- .../Separator/__tests__/index.test.tsx | 19 +- .../ui/src/components/Separator/index.tsx | 11 +- .../__snapshots__/index.test.tsx.snap | 294 ++--- .../__stories__/BulletIcon.stories.tsx | 24 + .../__stories__/ComplexChildren.stories.tsx | 44 + .../StepList/__stories__/Disabled.stories.tsx | 23 + .../__stories__/Playground.stories.tsx | 3 + .../__stories__/Sentiment.stories.tsx | 23 + .../StepList/__stories__/Sizes.stories.tsx | 28 + .../StepList/__stories__/Template.stories.tsx | 11 + .../StepList/__stories__/index.stories.tsx | 145 +-- .../__snapshots__/index.test.tsx.snap | 52 +- .../StepList/__tests__/index.test.tsx | 22 +- packages/ui/src/components/StepList/index.tsx | 25 +- packages/ui/src/components/Stepper/Step.tsx | 11 +- .../__snapshots__/index.test.tsx.snap | 232 ++-- packages/ui/src/components/Table/Row.tsx | 6 +- .../HighlightAnimation.stories.tsx | 11 +- .../Table/__stories__/WithMenu.stories.tsx | 10 +- .../__snapshots__/index.test.tsx.snap | 74 +- .../components/Tag/__tests__/index.test.tsx | 8 +- packages/ui/src/components/Tag/index.tsx | 33 +- .../__snapshots__/index.test.tsx.snap | 52 +- packages/ui/src/components/TagInput/index.tsx | 15 +- .../TagList/__stories__/Icons.stories.tsx | 7 +- packages/ui/src/components/TagList/index.tsx | 8 +- .../__snapshots__/index.test.tsx.snap | 20 +- packages/ui/src/components/TextArea/index.tsx | 9 +- .../__snapshots__/index.test.tsx.snap | 256 ++-- .../ui/src/components/TextInput/index.tsx | 18 +- .../ui/src/components/TextInputV2/index.tsx | 24 +- .../__snapshots__/index.test.tsx.snap | 73 +- .../ui/src/components/TimeInputV2/index.tsx | 7 +- .../__snapshots__/index.test.tsx.snap | 24 +- packages/ui/src/components/Toaster/index.tsx | 6 +- packages/ui/src/components/Toggle/index.tsx | 13 +- .../ui/src/components/ToggleGroup/index.tsx | 9 +- packages/ui/src/components/index.ts | 7 - utils/scripts/generate-icons-file.tsx | 8 +- 563 files changed, 3024 insertions(+), 6321 deletions(-) create mode 100644 .changeset/pre.json create mode 100644 .changeset/witty-rocks-play.md rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/AiCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/ApplicationIntegrationCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/BaremetalCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/BillingCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/ComputeCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/ConsoleCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/ContainersCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/DatabaseCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/DatacenterCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/DedicatedServerCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/DevToolsCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/DocumentationCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/EnvironmentalFootprintCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/IotCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/LabsCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/ManagedServicesCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/NetworkCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/ObservabilityCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/PartnersCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/PinCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/SecurityCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/ServerlessCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/StorageCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/ToolsServicesCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/UseCaseCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/VpcCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/WebHostingCategoryIcon.tsx (100%) rename packages/icons/src/components/CategoryIcon/{__generatedIcons__ => __generated__}/index.ts (100%) delete mode 100644 packages/icons/src/components/Icon/__generatedIcons__/AsteriskIcon.tsx delete mode 100644 packages/icons/src/components/Icon/__generatedIcons__/CrossCircleIcon.tsx delete mode 100644 packages/icons/src/components/Icon/__generatedIcons__/CrossCircleOutlineIcon.tsx delete mode 100644 packages/icons/src/components/Icon/__generatedIcons__/DragVariantIcon.tsx rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/AddressIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/AddressOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/AddressPlayIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/AdjustmentsHorizontalIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/AdjustmentsHorizontalOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/AlertCircleIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/AlertCircleOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/AnchorIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ArrowDownIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ArrowLeftBottomIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ArrowLeftDoubleIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ArrowLeftIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ArrowRightBottomIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ArrowRightDoubleIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ArrowRightIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ArrowUpIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/AttachIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/AutoFixIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/AutoFixOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/BoldIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/BookOpenOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/BookOpenOutlineOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/BullhornIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/BullhornOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/BurgerIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CalculatorIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CalculatorOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CalendarRangeIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CalendarRangeOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CancelIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ChatIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ChatOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CheckCircleIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CheckCircleOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CheckIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ClockOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ClockOutlineOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CloseCircleOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CloseIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ConsoleIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ConsoleOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CopyContentIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CredentialIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CredentialOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CreditCardIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/CreditCardOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/DatabaseIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/DatabaseOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/DeleteIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/DeleteOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/DetachIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/DocIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/DocOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/DotsHorizontalIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/DotsVerticalIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/DownloadIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/DragIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/EarthIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/EarthOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/EastIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/EastShortIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/EmailIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/EmailOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/EmailRemoveIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/EmailRemoveOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/EqualIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/EscapeIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ExpandIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ExpandMoreIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/EyeIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/EyeOffIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/EyeOffOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/EyeOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/FilterIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/FilterOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/FolderIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/FolderOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/GithubIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/HelpCircleIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/HelpCircleOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/IdIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/IdOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/InformationIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/InformationOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/InstagramIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ItalicIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/LeafIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/LeafOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/LeftRightArrowIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/LightBulbIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/LightBulbOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/LinkedinIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ListBulletIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ListNumberIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/LockIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/LockOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/LogoutIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/MembersIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/MembersOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/MinusIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/MoonIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/MoonOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/MosaicIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/MosaicOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/NorthIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/NorthShortIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/NotificationIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/NotificationOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/OpenInNewIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/OrganizationIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/PartnerSpaceIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/Pen2Icon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/Pen2OutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/PenIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/PenOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/PencilIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/PencilOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/PhoneIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/PhoneOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/PinIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/PinOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/PlayIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/PlayOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/PlusIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/PrivacyIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/PrivacyOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ProfileIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ProfileOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ProgressCheckIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/RayEndArrowIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/RayStartArrowIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/RayStartEndIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/RayTopArrowIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/RebootIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/RestoreIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/RevokeIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/RocketIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/RocketOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/RssIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SearchIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SendIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SendOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SettingsIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SettingsOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SidebarIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SidebarOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SlackIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SortIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SouthIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SouthShortIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SparklesIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SparklesOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/StarIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/StarOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/StopIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/StopOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SunIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SunOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SupportIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SupportOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/SwitchOrgaIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ThumbsDownIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ThumbsDownOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ThumbsUpIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ThumbsUpOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/TwitterIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/UnderlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/UnlockIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/UnlockOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/UnpinIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/UnpinOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/UploadIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/ViewIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/WeatherNightIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/WeatherNightOutlineIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/WestIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/WestShortIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/YoutubeIcon.tsx (100%) rename packages/icons/src/components/Icon/{__generatedIcons__ => __generated__}/index.ts (97%) delete mode 100644 packages/icons/src/components/Icon/assets/default-outline/cross-circle.svg delete mode 100644 packages/icons/src/components/Icon/assets/default-solid/cross-circle.svg delete mode 100644 packages/icons/src/components/Icon/assets/default/asterisk.svg delete mode 100644 packages/icons/src/components/Icon/assets/default/drag-variant.svg delete mode 100644 packages/icons/src/components/Icon/assets/small-outline/cross-circle.svg delete mode 100644 packages/icons/src/components/Icon/assets/small-solid/cross-circle.svg delete mode 100644 packages/icons/src/components/Icon/assets/small/asterisk.svg delete mode 100644 packages/icons/src/components/Icon/assets/small/drag-variant.svg delete mode 100644 packages/icons/src/components/Icon/legacy/Icons.tsx delete mode 100644 packages/icons/src/components/Icon/legacy/SmallIcons.tsx delete mode 100644 packages/icons/src/components/Icon/legacy/index.tsx rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/BaaiLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/DeepseekLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/GithubLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/GmailLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/GoogleLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/HuggingFaceLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/KyutaiLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/MetaLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/MetabaseLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/MicrosoftLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/MistralLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/OutlookLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/PowerBiLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/QwenLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/TableauLogo.tsx (100%) rename packages/icons/src/components/Logo/{__generatedIcons__ => __generated__}/index.ts (100%) delete mode 100644 packages/icons/src/components/ProductIcon/__generatedIcons__/DocumentDbProductIcon.tsx rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/AbuseProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/AccountExperienceProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/AdditionalDiskProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/AdvancedSettingsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/AnsibleProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ApiGatewayProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ApiKeyProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ApiProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/AppleSiliconProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ApplicationLibraryProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ApplicationProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/AuditTrailProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/BackendsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/BandwidthProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/BasicSupportProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/BillingProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/BlockStorageProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/CbProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/CdnProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ChangelogProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/CliProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/CloudHostingProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/CockpitProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ColdStorageProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ConsoleProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ContainersProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/CostManagerProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DataWarehouseProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DdosProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DdxCoreServersProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DdxProServersProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DdxStartServersProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DedibackupProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DediboxProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DedicatedControlPlaneProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DedicatedServerProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DeleteMarkerProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DevicesProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DirectConnectProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DistributedDataLabProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DnsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DocumentationProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/DomainsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/EdgeServicesProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ElasticMetalAluminiumProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ElasticMetalBerylliumProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ElasticMetalIridiumProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ElasticMetalLithiumProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ElasticMetalProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ElasticMetalTitaniumProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/EnvironmentalFootprintCalculatorProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/FileProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/FlexibleIpProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/FolderProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/FrontEndsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/FunctionsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/GenerativeApiProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/GoldSupportProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/GpuServersProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/HubNetworksProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/HubRoutesProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/IamProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/IconElasticMetalProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/IconSdkJsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/IconSdkProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ImagesProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/InferenceProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/InstanceCostOptimizedProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/InstanceEnterpriseProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/InstanceGpuProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/InstanceLearnProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/InstancePopProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/InstanceProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/InstanceScallingGroupsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/InstanceWopProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/InterlinkProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/IotEdgeProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/IotProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/IpFailoverProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/IpamProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/IpfsNamingProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/IpfsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/JeroProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/K8sKosmosProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/KmsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/KubernetesProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/LbProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/LifeCycleRulesProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/MacMiniM2ProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/MacMiniM4ProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/MacMiniProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ManagedSearchDatabaseProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/MongoDbProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/MonitoringProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/MultiUserProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/NabuProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/NatsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/NetworkAclsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ObjectStorageProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/OsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/PackerProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/PlacementGroupProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/PlatinumSupportProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/PolicyProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/PoolProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/PostgresqlMysqlProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/PrivateIpProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/PrivateNetworkProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/PublicGatewayProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/QaasProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/QuantumApplicationProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/QueueingProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/RabbitMqProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/RdbProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/RedisProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/RegistryProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/RocketProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/RouterProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/RpnProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/RpnSanProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/RpnV1ProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/RpnV2ProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/SavingPlanProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/SdkGoProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/SdkPythonProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/SecretManagerProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/SecurityGroupProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/SepaProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ServerProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ServerlessDbProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ServerlessJobsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ServiceLevelProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/SilverSupportProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/SmsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/SmtpProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/SnapshotsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/SnsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/SqsProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/SslCertificatesProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/StoreServersProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/SupportProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/TerraformProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/TransactionalEmailProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/TutorialProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/UserProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/VerifyCardProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/VideoProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/VolumeProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/VpcProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/VpnProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/VpsProServersProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/VpsServersProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/VpsStartServersProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/WafProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/WebPlatformProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/WebhostingProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/ZoneProductIcon.tsx (100%) rename packages/icons/src/components/ProductIcon/{__generatedIcons__ => __generated__}/index.ts (99%) delete mode 100644 packages/icons/src/components/ProductIcon/assets/document-db.svg create mode 100644 packages/ui/src/components/StepList/__stories__/BulletIcon.stories.tsx create mode 100644 packages/ui/src/components/StepList/__stories__/ComplexChildren.stories.tsx create mode 100644 packages/ui/src/components/StepList/__stories__/Disabled.stories.tsx create mode 100644 packages/ui/src/components/StepList/__stories__/Playground.stories.tsx create mode 100644 packages/ui/src/components/StepList/__stories__/Sentiment.stories.tsx create mode 100644 packages/ui/src/components/StepList/__stories__/Sizes.stories.tsx create mode 100644 packages/ui/src/components/StepList/__stories__/Template.stories.tsx diff --git a/.changeset/config.json b/.changeset/config.json index 8ab7305dcc..cbad0e81d5 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -10,7 +10,7 @@ "linked": [], "fixed": [], "access": "public", - "baseBranch": "main", + "baseBranch": "beta", "updateInternalDependencies": "patch", "ignore": ["@examples/*", "@utils/*", "@repo/e2e"], "privatePackages": { diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 0000000000..2fc953c72d --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,19 @@ +{ + "mode": "pre", + "tag": "beta", + "initialVersions": { + "@repo/e2e": "1.0.0", + "@examples/next": "1.0.0", + "@examples/next-app-router": "1.0.0", + "@examples/vite": "0.0.0", + "@ultraviolet/fonts": "1.0.2", + "@ultraviolet/form": "3.17.0", + "@ultraviolet/icons": "3.14.0", + "@ultraviolet/illustrations": "4.5.0", + "@ultraviolet/plus": "0.26.1", + "@ultraviolet/themes": "1.17.0", + "@ultraviolet/ui": "1.94.0", + "@utils/test": "0.0.1" + }, + "changesets": [] +} diff --git a/.changeset/witty-rocks-play.md b/.changeset/witty-rocks-play.md new file mode 100644 index 0000000000..250fd2008d --- /dev/null +++ b/.changeset/witty-rocks-play.md @@ -0,0 +1,40 @@ +--- +"@ultraviolet/icons": major +--- + +**Beta 1 - Migration of Icons to @ultraviolet/icons with direct imports** + +- `Icon` component has been removed it was previously imported like `import { Icon } from '@ultraviolet/icons/legacy'`. Instead you should import the icon you need directly from `@ultraviolet/icons`. + + Before: + ```tsx + import { Icon } from '@ultraviolet/icons/legacy' + + + ``` + + After: + ```tsx + import { DragIcon } from '@ultraviolet/icons' + + + ``` + +### Icons removed +- `DocumentDbProductIcon`: no replacement. +- `AsteriskIcon`: use * in ASCII instead. +- `CrossCircleIcon` use `CloseCircleOutlineIcon` instead. +- `CrossCircleOutlineIcon` use `CloseCircleOutlineIcon` instead. +- `DragVariantIcon`: use `DragIcon` instead. + +### System icons changes +- prop `size` no longer support `string` and `number`. You shoud use the sizes supported by the component (`xmsall`, `small`, ect.). Example: + ```tsx + import { DragIcon } from '@ultraviolet/icons' + + // Before + + + // After + + ``` diff --git a/packages/form/package.json b/packages/form/package.json index 9b1d0fb800..fe2b463bb0 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -81,6 +81,7 @@ }, "dependencies": { "@babel/runtime": "7.27.6", + "@ultraviolet/icons": "workspace:*", "@ultraviolet/themes": "workspace:*", "@ultraviolet/ui": "workspace:*", "react-hook-form": "7.55.0", diff --git a/packages/form/src/components/KeyValueField/index.tsx b/packages/form/src/components/KeyValueField/index.tsx index c6bf0edbc5..f8058e3faf 100644 --- a/packages/form/src/components/KeyValueField/index.tsx +++ b/packages/form/src/components/KeyValueField/index.tsx @@ -1,9 +1,10 @@ 'use client' +import { DeleteIcon, PlusIcon } from '@ultraviolet/icons' import { Button, Row, Stack } from '@ultraviolet/ui' import type { ComponentProps } from 'react' -import { useFieldArray } from 'react-hook-form' import type { Control, FieldArrayPath, FieldValues } from 'react-hook-form' +import { useFieldArray } from 'react-hook-form' import { TextInputField as TextInputFieldV2 } from '../TextInputFieldV2' type InputKeyProps = { @@ -95,12 +96,13 @@ export const KeyValueField = < ))} @@ -108,7 +110,6 @@ export const KeyValueField = < diff --git a/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.test.tsx.snap index e84023d2d5..3d339ee8d7 100644 --- a/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.test.tsx.snap @@ -145,10 +145,10 @@ exports[`NumberInputField > should render correctly 1`] = ` .emotion-11 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-11 .fillStroke { @@ -293,10 +293,10 @@ exports[`NumberInputField > should render correctly 1`] = ` .emotion-22 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-22 .fillStroke { @@ -333,7 +333,9 @@ exports[`NumberInputField > should render correctly 1`] = ` viewBox="0 0 20 20" > @@ -365,7 +367,7 @@ exports[`NumberInputField > should render correctly 1`] = ` viewBox="0 0 20 20" > @@ -522,10 +524,10 @@ exports[`NumberInputField > should render correctly disabled 1`] = ` .emotion-11 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-11 .fillStroke { @@ -638,7 +640,9 @@ exports[`NumberInputField > should render correctly disabled 1`] = ` viewBox="0 0 20 20" > @@ -672,7 +676,7 @@ exports[`NumberInputField > should render correctly disabled 1`] = ` viewBox="0 0 20 20" > @@ -838,10 +842,10 @@ exports[`NumberInputField > should trigger event onMinCrossed & onMaxCrossed 1`] .emotion-11 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-11 .fillStroke { @@ -977,10 +981,10 @@ exports[`NumberInputField > should trigger event onMinCrossed & onMaxCrossed 1`] .emotion-22 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-22 .fillStroke { @@ -1016,7 +1020,9 @@ exports[`NumberInputField > should trigger event onMinCrossed & onMaxCrossed 1`] viewBox="0 0 20 20" > @@ -1049,7 +1055,7 @@ exports[`NumberInputField > should trigger event onMinCrossed & onMaxCrossed 1`] viewBox="0 0 20 20" > @@ -1215,10 +1221,10 @@ exports[`NumberInputField > should trigger events correctly 1`] = ` .emotion-11 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-11 .fillStroke { @@ -1330,7 +1336,9 @@ exports[`NumberInputField > should trigger events correctly 1`] = ` viewBox="0 0 20 20" > @@ -1362,7 +1370,7 @@ exports[`NumberInputField > should trigger events correctly 1`] = ` viewBox="0 0 20 20" > diff --git a/packages/form/src/components/Submit/__tests__/index.test.tsx b/packages/form/src/components/Submit/__tests__/index.test.tsx index 989e0bfcef..e9b398d3ea 100644 --- a/packages/form/src/components/Submit/__tests__/index.test.tsx +++ b/packages/form/src/components/Submit/__tests__/index.test.tsx @@ -12,15 +12,6 @@ describe('Submit', () => { expect(asFragment()).toMatchSnapshot() }) - test('renders correctly with icon and iconPosition ', () => { - const { asFragment } = renderWithForm( - - Test - , - ) - expect(asFragment()).toMatchSnapshot() - }) - test('form is invalid', () => { const { asFragment } = renderWithForm( <> diff --git a/packages/form/src/components/Submit/index.tsx b/packages/form/src/components/Submit/index.tsx index f901a5d360..52ca55783c 100644 --- a/packages/form/src/components/Submit/index.tsx +++ b/packages/form/src/components/Submit/index.tsx @@ -8,8 +8,6 @@ type SubmitProps = { children?: ReactNode className?: string disabled?: boolean - icon?: ComponentProps['icon'] - iconPosition?: ComponentProps['iconPosition'] size?: ComponentProps['size'] variant?: ComponentProps['variant'] sentiment?: ComponentProps['sentiment'] @@ -22,8 +20,6 @@ export const Submit = ({ children, className, disabled = false, - icon, - iconPosition, size, variant = 'filled', sentiment = 'primary', @@ -39,8 +35,6 @@ export const Submit = ({ @@ -178,8 +178,8 @@ export const List = () => { newExpandedStates[category] = !expandedStates[category] setExpandedStates(newExpandedStates) }} - icon={expandedStates[category] ? 'arrow-up' : 'arrow-down'} > + {expandedStates[category] ? : } {category} diff --git a/packages/plus/src/components/ContentCard/__stories__/Examples.stories.tsx b/packages/plus/src/components/ContentCard/__stories__/Examples.stories.tsx index aa61a5afdb..dde8cefdf0 100644 --- a/packages/plus/src/components/ContentCard/__stories__/Examples.stories.tsx +++ b/packages/plus/src/components/ContentCard/__stories__/Examples.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn } from '@storybook/react' +import { BookOpenOutlineIcon } from '@ultraviolet/icons' import { AdvancedSettingsProductIcon, ConsoleProductIcon, @@ -19,7 +20,10 @@ export const Examples: StoryFn = args => ( title="Create your first function" description="The Scaleway Serverless Functions platform makes your functions available, executes them on demand and manages resource allocation for you." > - + @@ -31,7 +35,10 @@ export const Examples: StoryFn = args => ( title="Create your first function" description="The Scaleway Serverless Functions platform makes your functions available, executes them on demand and manages resource allocation for you." > - + = args => ( title="Create your first function" description="The Scaleway Serverless Functions platform makes your functions available, executes them on demand and manages resource allocation for you. This one is a bit longer than the others." > - + = args => ( title="Create your first function" description="The Scaleway Serverless Functions platform makes your functions available, executes them on demand and manages resource allocation for you." > - + diff --git a/packages/plus/src/components/EstimateCost/Components/Item.tsx b/packages/plus/src/components/EstimateCost/Components/Item.tsx index 9ba8c44e43..811ffc1b2d 100644 --- a/packages/plus/src/components/EstimateCost/Components/Item.tsx +++ b/packages/plus/src/components/EstimateCost/Components/Item.tsx @@ -2,7 +2,8 @@ import { css } from '@emotion/react' import styled from '@emotion/styled' -import { Badge, Icon, Stack, Text, Tooltip, zoomIn } from '@ultraviolet/ui' +import { HelpCircleOutlineIcon } from '@ultraviolet/icons' +import { Badge, Stack, Text, Tooltip, zoomIn } from '@ultraviolet/ui' import type { ComponentProps, ReactNode } from 'react' import { Children, @@ -411,11 +412,7 @@ export const Item = memo( {tooltipInfo ? ( - + ) : null} diff --git a/packages/plus/src/components/EstimateCost/EstimateCostContent.tsx b/packages/plus/src/components/EstimateCost/EstimateCostContent.tsx index b1cac35bf9..58dfc728fe 100644 --- a/packages/plus/src/components/EstimateCost/EstimateCostContent.tsx +++ b/packages/plus/src/components/EstimateCost/EstimateCostContent.tsx @@ -1,7 +1,8 @@ 'use client' import styled from '@emotion/styled' -import { Alert, Icon, Stack, Text } from '@ultraviolet/ui' +import { CalculatorIcon } from '@ultraviolet/icons' +import { Alert, Stack, Text } from '@ultraviolet/ui' import type { ComponentProps, ReactNode } from 'react' import { Children, @@ -59,7 +60,7 @@ const RightAlignedText = styled(Text)` text-align: right; ` -const StyledIcon = styled(Icon)` +const StyledCalculatorIcon = styled(CalculatorIcon)` margin-right: ${({ theme }) => theme.space['1']}; ` @@ -104,7 +105,7 @@ const TitleComponent = memo( locales: Required['locales']> }) => ( - <StyledIcon name="calculator" color="primary" size={20} /> + <StyledCalculatorIcon sentiment="primary" size="medium" /> {locales?.['estimate.cost.label']} ), diff --git a/packages/plus/src/components/EstimateCost/OverlayComponent.tsx b/packages/plus/src/components/EstimateCost/OverlayComponent.tsx index 50bf39267d..6756324a77 100644 --- a/packages/plus/src/components/EstimateCost/OverlayComponent.tsx +++ b/packages/plus/src/components/EstimateCost/OverlayComponent.tsx @@ -1,7 +1,8 @@ 'use client' import styled from '@emotion/styled' -import { Icon, Stack } from '@ultraviolet/ui' +import { CalculatorIcon } from '@ultraviolet/icons' +import { Stack } from '@ultraviolet/ui' import type { JSX, ReactNode } from 'react' import { Children, cloneElement, isValidElement, useMemo } from 'react' import { LineThrough } from './Components/LineThrough' @@ -132,7 +133,7 @@ export const OverlayComponent = ({ )} - + {locales['estimate.cost.label']} diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Item.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Item.test.tsx.snap index 6427feb329..7b7a291383 100644 --- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Item.test.tsx.snap +++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Item.test.tsx.snap @@ -426,10 +426,10 @@ exports[`EstimateCost - Item > render with labelTextVariant 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -437,17 +437,13 @@ exports[`EstimateCost - Item > render with labelTextVariant 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -455,10 +451,6 @@ exports[`EstimateCost - Item > render with labelTextVariant 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -640,10 +632,10 @@ exports[`EstimateCost - Item > render with labelTextVariant 1`] = ` .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -652,17 +644,13 @@ exports[`EstimateCost - Item > render with labelTextVariant 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -671,10 +659,6 @@ exports[`EstimateCost - Item > render with labelTextVariant 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -1790,14 +1774,11 @@ exports[`EstimateCost - Item > render with labelTextVariant 1`] = ` > @@ -1845,14 +1826,11 @@ exports[`EstimateCost - Item > render with labelTextVariant 1`] = ` > @@ -1966,7 +1944,7 @@ exports[`EstimateCost - Item > render with labelTextVariant 1`] = ` class="emotion-23 emotion-1" > render with noPrice and noBorder 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -2316,10 +2294,6 @@ exports[`EstimateCost - Item > render with noPrice and noBorder 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -2401,10 +2375,10 @@ exports[`EstimateCost - Item > render with noPrice and noBorder 1`] = ` .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -2413,10 +2387,6 @@ exports[`EstimateCost - Item > render with noPrice and noBorder 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -2995,14 +2965,11 @@ exports[`EstimateCost - Item > render with noPrice and noBorder 1`] = ` > @@ -3050,14 +3017,11 @@ exports[`EstimateCost - Item > render with noPrice and noBorder 1`] = ` > @@ -3171,7 +3135,7 @@ exports[`EstimateCost - Item > render with noPrice and noBorder 1`] = ` class="emotion-23 emotion-1" > render with notice 1`] = ` .emotion-28 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-28 .fillStroke { @@ -3743,17 +3707,13 @@ exports[`EstimateCost - Item > render with notice 1`] = ` fill: none; } -.emotion-28 path { - fill: currentColor; -} - .emotion-28 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-28 .fillStroke { @@ -3761,10 +3721,6 @@ exports[`EstimateCost - Item > render with notice 1`] = ` fill: none; } -.emotion-28 path { - fill: currentColor; -} - .emotion-30 { height: 48px; display: -webkit-box; @@ -3924,10 +3880,10 @@ exports[`EstimateCost - Item > render with notice 1`] = ` .emotion-46 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -3936,17 +3892,13 @@ exports[`EstimateCost - Item > render with notice 1`] = ` fill: none; } -.emotion-46 path { - fill: currentColor; -} - .emotion-46 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -3955,10 +3907,6 @@ exports[`EstimateCost - Item > render with notice 1`] = ` fill: none; } -.emotion-46 path { - fill: currentColor; -} - .emotion-48 { padding-left: 16px; padding-right: 16px; @@ -5079,14 +5027,11 @@ exports[`EstimateCost - Item > render with notice 1`] = ` > @@ -5134,14 +5079,11 @@ exports[`EstimateCost - Item > render with notice 1`] = ` > @@ -5255,7 +5197,7 @@ exports[`EstimateCost - Item > render with notice 1`] = ` class="emotion-26 emotion-1" > render with priceText 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -5826,17 +5768,13 @@ exports[`EstimateCost - Item > render with priceText 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -5844,10 +5782,6 @@ exports[`EstimateCost - Item > render with priceText 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -6007,10 +5941,10 @@ exports[`EstimateCost - Item > render with priceText 1`] = ` .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -6019,17 +5953,13 @@ exports[`EstimateCost - Item > render with priceText 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -6038,10 +5968,6 @@ exports[`EstimateCost - Item > render with priceText 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -7157,14 +7083,11 @@ exports[`EstimateCost - Item > render with priceText 1`] = ` > @@ -7212,14 +7135,11 @@ exports[`EstimateCost - Item > render with priceText 1`] = ` > @@ -7333,7 +7253,7 @@ exports[`EstimateCost - Item > render with priceText 1`] = ` class="emotion-23 emotion-1" > render with tabulation 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -7891,17 +7811,13 @@ exports[`EstimateCost - Item > render with tabulation 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -7909,10 +7825,6 @@ exports[`EstimateCost - Item > render with tabulation 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -8072,10 +7984,10 @@ exports[`EstimateCost - Item > render with tabulation 1`] = ` .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -8084,17 +7996,13 @@ exports[`EstimateCost - Item > render with tabulation 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -8103,10 +8011,6 @@ exports[`EstimateCost - Item > render with tabulation 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -9214,14 +9118,11 @@ exports[`EstimateCost - Item > render with tabulation 1`] = ` > @@ -9269,14 +9170,11 @@ exports[`EstimateCost - Item > render with tabulation 1`] = ` > @@ -9390,7 +9288,7 @@ exports[`EstimateCost - Item > render with tabulation 1`] = ` class="emotion-23 emotion-1" > render with tooltipInfo 1`] = ` .emotion-20 { vertical-align: middle; fill: currentColor; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-20 .fillStroke { @@ -9816,10 +9714,6 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` fill: none; } -.emotion-20 path { - fill: currentColor; -} - .emotion-22 { text-align: initial; height: 48px; @@ -9979,10 +9873,10 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` .emotion-31 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-31 .fillStroke { @@ -9990,17 +9884,13 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` fill: none; } -.emotion-31 path { - fill: currentColor; -} - .emotion-31 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-31 .fillStroke { @@ -10008,10 +9898,6 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` fill: none; } -.emotion-31 path { - fill: currentColor; -} - .emotion-33 { height: 48px; display: -webkit-box; @@ -10171,10 +10057,10 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` .emotion-49 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -10183,17 +10069,13 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` fill: none; } -.emotion-49 path { - fill: currentColor; -} - .emotion-49 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -10202,10 +10084,6 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` fill: none; } -.emotion-49 path { - fill: currentColor; -} - .emotion-51 { padding-left: 16px; padding-right: 16px; @@ -11310,15 +11188,11 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` > @@ -11345,14 +11219,11 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` > @@ -11400,14 +11271,11 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` > @@ -11521,7 +11389,7 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` class="emotion-29 emotion-1" > render with tooltipInfo 1`] = ` > diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Region.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Region.test.tsx.snap index e1c0c60092..be1c97c31b 100644 --- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Region.test.tsx.snap +++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Region.test.tsx.snap @@ -226,10 +226,10 @@ exports[`EstimateCost - Region > render region component 1`] = ` .emotion-27 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-27 .fillStroke { @@ -237,10 +237,6 @@ exports[`EstimateCost - Region > render region component 1`] = ` fill: none; } -.emotion-27 path { - fill: currentColor; -} - .emotion-29 { height: 48px; display: -webkit-box; @@ -322,10 +318,10 @@ exports[`EstimateCost - Region > render region component 1`] = ` .emotion-45 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -334,10 +330,6 @@ exports[`EstimateCost - Region > render region component 1`] = ` fill: none; } -.emotion-45 path { - fill: currentColor; -} - .emotion-47 { padding-left: 16px; padding-right: 16px; @@ -934,14 +926,11 @@ exports[`EstimateCost - Region > render region component 1`] = ` > @@ -989,14 +978,11 @@ exports[`EstimateCost - Region > render region component 1`] = ` > @@ -1110,7 +1096,7 @@ exports[`EstimateCost - Region > render region component 1`] = ` class="emotion-25 emotion-1" > render basic props 1`] = ` .emotion-24 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-24 .fillStroke { @@ -220,10 +220,6 @@ exports[`EstimateCost - Regular Item > render basic props 1`] = ` fill: none; } -.emotion-24 path { - fill: currentColor; -} - .emotion-26 { height: 48px; display: -webkit-box; @@ -305,10 +301,10 @@ exports[`EstimateCost - Regular Item > render basic props 1`] = ` .emotion-42 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -317,10 +313,6 @@ exports[`EstimateCost - Regular Item > render basic props 1`] = ` fill: none; } -.emotion-42 path { - fill: currentColor; -} - .emotion-44 { padding-left: 16px; padding-right: 16px; @@ -900,14 +892,11 @@ exports[`EstimateCost - Regular Item > render basic props 1`] = ` > @@ -955,14 +944,11 @@ exports[`EstimateCost - Regular Item > render basic props 1`] = ` > @@ -1076,7 +1062,7 @@ exports[`EstimateCost - Regular Item > render basic props 1`] = ` class="emotion-22 emotion-1" > render basic props with is not defined 1` .emotion-22 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-22 .fillStroke { @@ -1399,10 +1385,6 @@ exports[`EstimateCost - Regular Item > render basic props with is not defined 1` fill: none; } -.emotion-22 path { - fill: currentColor; -} - .emotion-24 { height: 48px; display: -webkit-box; @@ -1484,10 +1466,10 @@ exports[`EstimateCost - Regular Item > render basic props with is not defined 1` .emotion-40 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -1496,10 +1478,6 @@ exports[`EstimateCost - Regular Item > render basic props with is not defined 1` fill: none; } -.emotion-40 path { - fill: currentColor; -} - .emotion-42 { padding-left: 16px; padding-right: 16px; @@ -2060,14 +2038,11 @@ exports[`EstimateCost - Regular Item > render basic props with is not defined 1` > @@ -2115,14 +2090,11 @@ exports[`EstimateCost - Regular Item > render basic props with is not defined 1` > @@ -2236,7 +2208,7 @@ exports[`EstimateCost - Regular Item > render basic props with is not defined 1` class="emotion-20 emotion-1" > render basic props with long fractions di .emotion-24 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-24 .fillStroke { @@ -2570,10 +2542,6 @@ exports[`EstimateCost - Regular Item > render basic props with long fractions di fill: none; } -.emotion-24 path { - fill: currentColor; -} - .emotion-26 { height: 48px; display: -webkit-box; @@ -2655,10 +2623,10 @@ exports[`EstimateCost - Regular Item > render basic props with long fractions di .emotion-42 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -2667,10 +2635,6 @@ exports[`EstimateCost - Regular Item > render basic props with long fractions di fill: none; } -.emotion-42 path { - fill: currentColor; -} - .emotion-44 { padding-left: 16px; padding-right: 16px; @@ -3250,14 +3214,11 @@ exports[`EstimateCost - Regular Item > render basic props with long fractions di > @@ -3305,14 +3266,11 @@ exports[`EstimateCost - Regular Item > render basic props with long fractions di > @@ -3426,7 +3384,7 @@ exports[`EstimateCost - Regular Item > render basic props with long fractions di class="emotion-22 emotion-1" > render basic props with maxPrice 1`] = ` .emotion-24 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-24 .fillStroke { @@ -3764,10 +3722,6 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice 1`] = ` fill: none; } -.emotion-24 path { - fill: currentColor; -} - .emotion-26 { height: 48px; display: -webkit-box; @@ -3849,10 +3803,10 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice 1`] = ` .emotion-42 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -3861,10 +3815,6 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice 1`] = ` fill: none; } -.emotion-42 path { - fill: currentColor; -} - .emotion-44 { padding-left: 16px; padding-right: 16px; @@ -4456,14 +4406,11 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice 1`] = ` > @@ -4511,14 +4458,11 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice 1`] = ` > @@ -4632,7 +4576,7 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice 1`] = ` class="emotion-22 emotion-1" > render basic props with maxPrice and long .emotion-24 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-24 .fillStroke { @@ -4975,10 +4919,6 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice and long fill: none; } -.emotion-24 path { - fill: currentColor; -} - .emotion-26 { height: 48px; display: -webkit-box; @@ -5060,10 +5000,10 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice and long .emotion-42 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -5072,10 +5012,6 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice and long fill: none; } -.emotion-42 path { - fill: currentColor; -} - .emotion-44 { padding-left: 16px; padding-right: 16px; @@ -5667,14 +5603,11 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice and long > @@ -5722,14 +5655,11 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice and long > @@ -5843,7 +5773,7 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice and long class="emotion-22 emotion-1" > render basic props with overlay 1`] = ` .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-43 .fillStroke { @@ -6228,10 +6158,6 @@ exports[`EstimateCost - Regular Item > render basic props with overlay 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { height: 48px; display: -webkit-box; @@ -6313,10 +6239,10 @@ exports[`EstimateCost - Regular Item > render basic props with overlay 1`] = ` .emotion-63 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -6325,10 +6251,6 @@ exports[`EstimateCost - Regular Item > render basic props with overlay 1`] = ` fill: none; } -.emotion-63 path { - fill: currentColor; -} - .emotion-65 { padding-left: 16px; padding-right: 16px; @@ -7011,14 +6933,11 @@ exports[`EstimateCost - Regular Item > render basic props with overlay 1`] = ` > @@ -7073,14 +6992,11 @@ exports[`EstimateCost - Regular Item > render basic props with overlay 1`] = ` > @@ -7194,7 +7110,7 @@ exports[`EstimateCost - Regular Item > render basic props with overlay 1`] = ` class="emotion-41 emotion-1" > render basic props with overlay beta 1`] .emotion-29 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-29 .fillStroke { @@ -7599,10 +7515,6 @@ exports[`EstimateCost - Regular Item > render basic props with overlay beta 1`] fill: none; } -.emotion-29 path { - fill: currentColor; -} - .emotion-31 { height: 48px; display: -webkit-box; @@ -7738,10 +7650,10 @@ exports[`EstimateCost - Regular Item > render basic props with overlay beta 1`] .emotion-53 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -7750,10 +7662,6 @@ exports[`EstimateCost - Regular Item > render basic props with overlay beta 1`] fill: none; } -.emotion-53 path { - fill: currentColor; -} - .emotion-55 { padding-left: 16px; padding-right: 16px; @@ -8410,14 +8318,11 @@ exports[`EstimateCost - Regular Item > render basic props with overlay beta 1`] > @@ -8477,14 +8382,11 @@ exports[`EstimateCost - Regular Item > render basic props with overlay beta 1`] > @@ -8598,7 +8500,7 @@ exports[`EstimateCost - Regular Item > render basic props with overlay beta 1`] class="emotion-27 emotion-1" > render basic props with sublabel 1`] = ` .emotion-24 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-24 .fillStroke { @@ -8960,10 +8862,6 @@ exports[`EstimateCost - Regular Item > render basic props with sublabel 1`] = ` fill: none; } -.emotion-24 path { - fill: currentColor; -} - .emotion-26 { height: 48px; display: -webkit-box; @@ -9045,10 +8943,10 @@ exports[`EstimateCost - Regular Item > render basic props with sublabel 1`] = ` .emotion-42 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -9057,10 +8955,6 @@ exports[`EstimateCost - Regular Item > render basic props with sublabel 1`] = ` fill: none; } -.emotion-42 path { - fill: currentColor; -} - .emotion-44 { padding-left: 16px; padding-right: 16px; @@ -9654,14 +9548,11 @@ exports[`EstimateCost - Regular Item > render basic props with sublabel 1`] = ` > @@ -9709,14 +9600,11 @@ exports[`EstimateCost - Regular Item > render basic props with sublabel 1`] = ` > @@ -9830,7 +9718,7 @@ exports[`EstimateCost - Regular Item > render basic props with sublabel 1`] = ` class="emotion-22 emotion-1" > render basic props with textNotDefined 1` .emotion-24 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-24 .fillStroke { @@ -10173,10 +10061,6 @@ exports[`EstimateCost - Regular Item > render basic props with textNotDefined 1` fill: none; } -.emotion-24 path { - fill: currentColor; -} - .emotion-26 { height: 48px; display: -webkit-box; @@ -10258,10 +10142,10 @@ exports[`EstimateCost - Regular Item > render basic props with textNotDefined 1` .emotion-42 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -10270,10 +10154,6 @@ exports[`EstimateCost - Regular Item > render basic props with textNotDefined 1` fill: none; } -.emotion-42 path { - fill: currentColor; -} - .emotion-44 { padding-left: 16px; padding-right: 16px; @@ -10853,14 +10733,11 @@ exports[`EstimateCost - Regular Item > render basic props with textNotDefined 1` > @@ -10908,14 +10785,11 @@ exports[`EstimateCost - Regular Item > render basic props with textNotDefined 1` > @@ -11029,7 +10903,7 @@ exports[`EstimateCost - Regular Item > render basic props with textNotDefined 1` class="emotion-22 emotion-1" > render basic with ellipsis 1`] = ` .emotion-27 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-27 .fillStroke { @@ -11382,10 +11256,6 @@ exports[`EstimateCost - Regular Item > render basic with ellipsis 1`] = ` fill: none; } -.emotion-27 path { - fill: currentColor; -} - .emotion-29 { height: 48px; display: -webkit-box; @@ -11467,10 +11337,10 @@ exports[`EstimateCost - Regular Item > render basic with ellipsis 1`] = ` .emotion-45 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -11479,10 +11349,6 @@ exports[`EstimateCost - Regular Item > render basic with ellipsis 1`] = ` fill: none; } -.emotion-45 path { - fill: currentColor; -} - .emotion-47 { padding-left: 16px; padding-right: 16px; @@ -12083,14 +11949,11 @@ exports[`EstimateCost - Regular Item > render basic with ellipsis 1`] = ` > @@ -12138,14 +12001,11 @@ exports[`EstimateCost - Regular Item > render basic with ellipsis 1`] = ` > @@ -12259,7 +12119,7 @@ exports[`EstimateCost - Regular Item > render basic with ellipsis 1`] = ` class="emotion-25 emotion-1" > render with alert 1`] = ` .emotion-24 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-24 .fillStroke { @@ -12605,10 +12465,6 @@ exports[`EstimateCost - Regular Item > render with alert 1`] = ` fill: none; } -.emotion-24 path { - fill: currentColor; -} - .emotion-26 { height: 48px; display: -webkit-box; @@ -12828,10 +12684,10 @@ exports[`EstimateCost - Regular Item > render with alert 1`] = ` .emotion-56 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -12840,10 +12696,6 @@ exports[`EstimateCost - Regular Item > render with alert 1`] = ` fill: none; } -.emotion-56 path { - fill: currentColor; -} - .emotion-58 { padding-left: 16px; padding-right: 16px; @@ -13423,14 +13275,11 @@ exports[`EstimateCost - Regular Item > render with alert 1`] = ` > @@ -13467,7 +13316,7 @@ exports[`EstimateCost - Regular Item > render with alert 1`] = ` class="emotion-39 emotion-1" > render with alert 1`] = ` > @@ -13635,7 +13481,7 @@ exports[`EstimateCost - Regular Item > render with alert 1`] = ` class="emotion-22 emotion-1" > render with isDisabledOnOverlay 1`] = ` .emotion-22 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-22 .fillStroke { @@ -13958,10 +13804,6 @@ exports[`EstimateCost - Regular Item > render with isDisabledOnOverlay 1`] = ` fill: none; } -.emotion-22 path { - fill: currentColor; -} - .emotion-24 { height: 48px; display: -webkit-box; @@ -14043,10 +13885,10 @@ exports[`EstimateCost - Regular Item > render with isDisabledOnOverlay 1`] = ` .emotion-40 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -14055,10 +13897,6 @@ exports[`EstimateCost - Regular Item > render with isDisabledOnOverlay 1`] = ` fill: none; } -.emotion-40 path { - fill: currentColor; -} - .emotion-42 { padding-left: 16px; padding-right: 16px; @@ -14632,14 +14470,11 @@ exports[`EstimateCost - Regular Item > render with isDisabledOnOverlay 1`] = ` > @@ -14687,14 +14522,11 @@ exports[`EstimateCost - Regular Item > render with isDisabledOnOverlay 1`] = ` > @@ -14808,7 +14640,7 @@ exports[`EstimateCost - Regular Item > render with isDisabledOnOverlay 1`] = ` class="emotion-20 emotion-1" > render basic props 1`] = ` .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -236,10 +236,6 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-31 { display: -webkit-box; display: -webkit-flex; @@ -305,10 +301,10 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = ` .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -317,10 +313,6 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-46 { padding-left: 16px; padding-right: 16px; @@ -903,7 +895,7 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -944,24 +936,6 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = ` color: #222638; } -.emotion-107 { - vertical-align: middle; - fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; -} - -.emotion-107 .fillStroke { - stroke: currentColor; - fill: none; -} - -.emotion-107 path { - fill: currentColor; -} - .emotion-110 { display: grid; grid-template-columns: 1fr auto; @@ -1198,14 +1172,11 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = ` > @@ -1253,14 +1224,11 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = ` > @@ -1374,7 +1342,7 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = ` class="emotion-24 emotion-1" > render basic props 1`] = ` type="button" > render basic props 1`] = ` type="button" > render basic with overlay 1`] = ` .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -1795,10 +1761,6 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-31 { display: -webkit-box; display: -webkit-flex; @@ -1864,10 +1826,10 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = ` .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -1876,10 +1838,6 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-46 { padding-left: 16px; padding-right: 16px; @@ -2462,7 +2420,7 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2503,24 +2461,6 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = ` color: #222638; } -.emotion-107 { - vertical-align: middle; - fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; -} - -.emotion-107 .fillStroke { - stroke: currentColor; - fill: none; -} - -.emotion-107 path { - fill: currentColor; -} - .emotion-110 { display: grid; grid-template-columns: 1fr auto; @@ -2757,14 +2697,11 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = ` > @@ -2812,14 +2749,11 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = ` > @@ -2933,7 +2867,7 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = ` class="emotion-24 emotion-1" > render basic with overlay 1`] = ` type="button" > render basic with overlay 1`] = ` type="button" > render with getAmountValue 1`] = ` .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -3354,10 +3286,6 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-31 { display: -webkit-box; display: -webkit-flex; @@ -3423,10 +3351,10 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = ` .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -3435,10 +3363,6 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-46 { padding-left: 16px; padding-right: 16px; @@ -4021,7 +3945,7 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4062,24 +3986,6 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = ` color: #222638; } -.emotion-107 { - vertical-align: middle; - fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; -} - -.emotion-107 .fillStroke { - stroke: currentColor; - fill: none; -} - -.emotion-107 path { - fill: currentColor; -} - .emotion-110 { display: grid; grid-template-columns: 1fr auto; @@ -4316,14 +4222,11 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = ` > @@ -4371,14 +4274,11 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = ` > @@ -4492,7 +4392,7 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = ` class="emotion-24 emotion-1" > render with getAmountValue 1`] = ` type="button" > render with getAmountValue 1`] = ` type="button" > render with values 1`] = ` .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -4913,10 +4811,6 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-31 { display: -webkit-box; display: -webkit-flex; @@ -4982,10 +4876,10 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = ` .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -4994,10 +4888,6 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-46 { padding-left: 16px; padding-right: 16px; @@ -5594,7 +5484,7 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -5635,24 +5525,6 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = ` color: #222638; } -.emotion-110 { - vertical-align: middle; - fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; -} - -.emotion-110 .fillStroke { - stroke: currentColor; - fill: none; -} - -.emotion-110 path { - fill: currentColor; -} - .emotion-113 { display: grid; grid-template-columns: 1fr auto; @@ -5901,14 +5773,11 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = ` > @@ -5956,14 +5825,11 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = ` > @@ -6077,7 +5943,7 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = ` class="emotion-24 emotion-1" > render with values 1`] = ` type="button" > render with values 1`] = ` type="button" > render basic props 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -232,10 +232,6 @@ exports[`EstimateCost - Strong Item > render basic props 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -317,10 +313,10 @@ exports[`EstimateCost - Strong Item > render basic props 1`] = ` .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -329,10 +325,6 @@ exports[`EstimateCost - Strong Item > render basic props 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -924,14 +916,11 @@ exports[`EstimateCost - Strong Item > render basic props 1`] = ` > @@ -979,14 +968,11 @@ exports[`EstimateCost - Strong Item > render basic props 1`] = ` > @@ -1100,7 +1086,7 @@ exports[`EstimateCost - Strong Item > render basic props 1`] = ` class="emotion-23 emotion-1" > render with isDisabledOnOverlay 1`] = ` .emotion-22 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-22 .fillStroke { @@ -1423,10 +1409,6 @@ exports[`EstimateCost - Strong Item > render with isDisabledOnOverlay 1`] = ` fill: none; } -.emotion-22 path { - fill: currentColor; -} - .emotion-24 { height: 48px; display: -webkit-box; @@ -1508,10 +1490,10 @@ exports[`EstimateCost - Strong Item > render with isDisabledOnOverlay 1`] = ` .emotion-40 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -1520,10 +1502,6 @@ exports[`EstimateCost - Strong Item > render with isDisabledOnOverlay 1`] = ` fill: none; } -.emotion-40 path { - fill: currentColor; -} - .emotion-42 { padding-left: 16px; padding-right: 16px; @@ -2109,14 +2087,11 @@ exports[`EstimateCost - Strong Item > render with isDisabledOnOverlay 1`] = ` > @@ -2164,14 +2139,11 @@ exports[`EstimateCost - Strong Item > render with isDisabledOnOverlay 1`] = ` > @@ -2285,7 +2257,7 @@ exports[`EstimateCost - Strong Item > render with isDisabledOnOverlay 1`] = ` class="emotion-20 emotion-1" > render with small variant 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -2635,10 +2607,6 @@ exports[`EstimateCost - Strong Item > render with small variant 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -2720,10 +2688,10 @@ exports[`EstimateCost - Strong Item > render with small variant 1`] = ` .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -2732,10 +2700,6 @@ exports[`EstimateCost - Strong Item > render with small variant 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -3327,14 +3291,11 @@ exports[`EstimateCost - Strong Item > render with small variant 1`] = ` > @@ -3382,14 +3343,11 @@ exports[`EstimateCost - Strong Item > render with small variant 1`] = ` > @@ -3503,7 +3461,7 @@ exports[`EstimateCost - Strong Item > render with small variant 1`] = ` class="emotion-23 emotion-1" > render basic props 1`] = ` .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -236,10 +236,6 @@ exports[`EstimateCost - Unit Item > render basic props 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-31 { display: -webkit-box; display: -webkit-flex; @@ -305,10 +301,10 @@ exports[`EstimateCost - Unit Item > render basic props 1`] = ` .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -317,10 +313,6 @@ exports[`EstimateCost - Unit Item > render basic props 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-46 { padding-left: 16px; padding-right: 16px; @@ -1053,14 +1045,11 @@ exports[`EstimateCost - Unit Item > render basic props 1`] = ` > @@ -1108,14 +1097,11 @@ exports[`EstimateCost - Unit Item > render basic props 1`] = ` > @@ -1229,7 +1215,7 @@ exports[`EstimateCost - Unit Item > render basic props 1`] = ` class="emotion-24 emotion-1" > render basic props with monthly price 1`] = .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -1844,17 +1830,13 @@ exports[`EstimateCost - Unit Item > render basic props with monthly price 1`] = fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -1862,10 +1844,6 @@ exports[`EstimateCost - Unit Item > render basic props with monthly price 1`] = fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-31 { display: -webkit-box; display: -webkit-flex; @@ -1993,10 +1971,10 @@ exports[`EstimateCost - Unit Item > render basic props with monthly price 1`] = .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -2005,17 +1983,13 @@ exports[`EstimateCost - Unit Item > render basic props with monthly price 1`] = fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -2024,10 +1998,6 @@ exports[`EstimateCost - Unit Item > render basic props with monthly price 1`] = fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-46 { padding-left: 16px; padding-right: 16px; @@ -3421,14 +3391,11 @@ exports[`EstimateCost - Unit Item > render basic props with monthly price 1`] = > @@ -3476,14 +3443,11 @@ exports[`EstimateCost - Unit Item > render basic props with monthly price 1`] = > @@ -3597,7 +3561,7 @@ exports[`EstimateCost - Unit Item > render basic props with monthly price 1`] = class="emotion-24 emotion-1" > render basic props with overlay 1`] = ` .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -4212,17 +4176,13 @@ exports[`EstimateCost - Unit Item > render basic props with overlay 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -4230,10 +4190,6 @@ exports[`EstimateCost - Unit Item > render basic props with overlay 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-31 { display: -webkit-box; display: -webkit-flex; @@ -4361,10 +4317,10 @@ exports[`EstimateCost - Unit Item > render basic props with overlay 1`] = ` .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -4373,17 +4329,13 @@ exports[`EstimateCost - Unit Item > render basic props with overlay 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -4392,10 +4344,6 @@ exports[`EstimateCost - Unit Item > render basic props with overlay 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-46 { padding-left: 16px; padding-right: 16px; @@ -5789,14 +5737,11 @@ exports[`EstimateCost - Unit Item > render basic props with overlay 1`] = ` > @@ -5844,14 +5789,11 @@ exports[`EstimateCost - Unit Item > render basic props with overlay 1`] = ` > @@ -5965,7 +5907,7 @@ exports[`EstimateCost - Unit Item > render basic props with overlay 1`] = ` class="emotion-24 emotion-1" > render basic props with values 1`] = ` .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -6580,17 +6522,13 @@ exports[`EstimateCost - Unit Item > render basic props with values 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -6598,10 +6536,6 @@ exports[`EstimateCost - Unit Item > render basic props with values 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-31 { display: -webkit-box; display: -webkit-flex; @@ -6729,10 +6663,10 @@ exports[`EstimateCost - Unit Item > render basic props with values 1`] = ` .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -6741,17 +6675,13 @@ exports[`EstimateCost - Unit Item > render basic props with values 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -6760,10 +6690,6 @@ exports[`EstimateCost - Unit Item > render basic props with values 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-46 { padding-left: 16px; padding-right: 16px; @@ -8183,14 +8109,11 @@ exports[`EstimateCost - Unit Item > render basic props with values 1`] = ` > @@ -8238,14 +8161,11 @@ exports[`EstimateCost - Unit Item > render basic props with values 1`] = ` > @@ -8359,7 +8279,7 @@ exports[`EstimateCost - Unit Item > render basic props with values 1`] = ` class="emotion-24 emotion-1" > render basic props with values and no iterat .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -8984,17 +8904,13 @@ exports[`EstimateCost - Unit Item > render basic props with values and no iterat fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -9002,10 +8918,6 @@ exports[`EstimateCost - Unit Item > render basic props with values and no iterat fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-31 { display: -webkit-box; display: -webkit-flex; @@ -9133,10 +9045,10 @@ exports[`EstimateCost - Unit Item > render basic props with values and no iterat .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -9145,17 +9057,13 @@ exports[`EstimateCost - Unit Item > render basic props with values and no iterat fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -9164,10 +9072,6 @@ exports[`EstimateCost - Unit Item > render basic props with values and no iterat fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-46 { padding-left: 16px; padding-right: 16px; @@ -10587,14 +10491,11 @@ exports[`EstimateCost - Unit Item > render basic props with values and no iterat > @@ -10642,14 +10543,11 @@ exports[`EstimateCost - Unit Item > render basic props with values and no iterat > @@ -10763,7 +10661,7 @@ exports[`EstimateCost - Unit Item > render basic props with values and no iterat class="emotion-24 emotion-1" > render test 1`] = ` .emotion-42 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-42 .fillStroke { @@ -11389,17 +11287,13 @@ exports[`EstimateCost - Unit Item > render test 1`] = ` fill: none; } -.emotion-42 path { - fill: currentColor; -} - .emotion-42 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-42 .fillStroke { @@ -11407,10 +11301,6 @@ exports[`EstimateCost - Unit Item > render test 1`] = ` fill: none; } -.emotion-42 path { - fill: currentColor; -} - .emotion-47 { display: -webkit-box; display: -webkit-flex; @@ -11538,10 +11428,10 @@ exports[`EstimateCost - Unit Item > render test 1`] = ` .emotion-60 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -11550,17 +11440,13 @@ exports[`EstimateCost - Unit Item > render test 1`] = ` fill: none; } -.emotion-60 path { - fill: currentColor; -} - .emotion-60 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -11569,10 +11455,6 @@ exports[`EstimateCost - Unit Item > render test 1`] = ` fill: none; } -.emotion-60 path { - fill: currentColor; -} - .emotion-62 { padding-left: 16px; padding-right: 16px; @@ -12994,14 +12876,11 @@ exports[`EstimateCost - Unit Item > render test 1`] = ` > @@ -13049,14 +12928,11 @@ exports[`EstimateCost - Unit Item > render test 1`] = ` > @@ -13170,7 +13046,7 @@ exports[`EstimateCost - Unit Item > render test 1`] = ` class="emotion-40 emotion-1" > render with 0 amount 1`] = ` .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -13890,17 +13766,13 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -13908,10 +13780,6 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-31 { display: -webkit-box; display: -webkit-flex; @@ -14039,10 +13907,10 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = ` .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -14051,17 +13919,13 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -14070,10 +13934,6 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-46 { padding-left: 16px; padding-right: 16px; @@ -15480,14 +15340,11 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = ` > @@ -15535,14 +15392,11 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = ` > @@ -15656,7 +15510,7 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = ` class="emotion-24 emotion-1" > render with 10 amount 1`] = ` .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -16271,17 +16125,13 @@ exports[`EstimateCost - Unit Item > render with 10 amount 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -16289,10 +16139,6 @@ exports[`EstimateCost - Unit Item > render with 10 amount 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-31 { display: -webkit-box; display: -webkit-flex; @@ -16420,10 +16266,10 @@ exports[`EstimateCost - Unit Item > render with 10 amount 1`] = ` .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -16432,17 +16278,13 @@ exports[`EstimateCost - Unit Item > render with 10 amount 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -16451,10 +16293,6 @@ exports[`EstimateCost - Unit Item > render with 10 amount 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-46 { padding-left: 16px; padding-right: 16px; @@ -17860,14 +17698,11 @@ exports[`EstimateCost - Unit Item > render with 10 amount 1`] = ` > @@ -17915,14 +17750,11 @@ exports[`EstimateCost - Unit Item > render with 10 amount 1`] = ` > @@ -18036,7 +17868,7 @@ exports[`EstimateCost - Unit Item > render with 10 amount 1`] = ` class="emotion-24 emotion-1" > render with getAmountValue 1`] = ` .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -18656,17 +18488,13 @@ exports[`EstimateCost - Unit Item > render with getAmountValue 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-26 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-26 .fillStroke { @@ -18674,10 +18502,6 @@ exports[`EstimateCost - Unit Item > render with getAmountValue 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-31 { display: -webkit-box; display: -webkit-flex; @@ -18805,10 +18629,10 @@ exports[`EstimateCost - Unit Item > render with getAmountValue 1`] = ` .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -18817,17 +18641,13 @@ exports[`EstimateCost - Unit Item > render with getAmountValue 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-44 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -18836,10 +18656,6 @@ exports[`EstimateCost - Unit Item > render with getAmountValue 1`] = ` fill: none; } -.emotion-44 path { - fill: currentColor; -} - .emotion-46 { padding-left: 16px; padding-right: 16px; @@ -20233,14 +20049,11 @@ exports[`EstimateCost - Unit Item > render with getAmountValue 1`] = ` > @@ -20288,14 +20101,11 @@ exports[`EstimateCost - Unit Item > render with getAmountValue 1`] = ` > @@ -20409,7 +20219,7 @@ exports[`EstimateCost - Unit Item > render with getAmountValue 1`] = ` class="emotion-24 emotion-1" > render region component, with animation 1`] = ` .emotion-27 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-27 .fillStroke { @@ -255,10 +255,6 @@ exports[`EstimateCost - Zone > render region component, with animation 1`] = ` fill: none; } -.emotion-27 path { - fill: currentColor; -} - .emotion-29 { height: 48px; display: -webkit-box; @@ -340,10 +336,10 @@ exports[`EstimateCost - Zone > render region component, with animation 1`] = ` .emotion-45 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -352,10 +348,6 @@ exports[`EstimateCost - Zone > render region component, with animation 1`] = ` fill: none; } -.emotion-45 path { - fill: currentColor; -} - .emotion-47 { padding-left: 16px; padding-right: 16px; @@ -952,14 +944,11 @@ exports[`EstimateCost - Zone > render region component, with animation 1`] = ` > @@ -1007,14 +996,11 @@ exports[`EstimateCost - Zone > render region component, with animation 1`] = ` > @@ -1128,7 +1114,7 @@ exports[`EstimateCost - Zone > render region component, with animation 1`] = ` class="emotion-25 emotion-1" > render zone component 1`] = ` .emotion-27 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-27 .fillStroke { @@ -1488,10 +1474,6 @@ exports[`EstimateCost - Zone > render zone component 1`] = ` fill: none; } -.emotion-27 path { - fill: currentColor; -} - .emotion-29 { height: 48px; display: -webkit-box; @@ -1573,10 +1555,10 @@ exports[`EstimateCost - Zone > render zone component 1`] = ` .emotion-45 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -1585,10 +1567,6 @@ exports[`EstimateCost - Zone > render zone component 1`] = ` fill: none; } -.emotion-45 path { - fill: currentColor; -} - .emotion-47 { padding-left: 16px; padding-right: 16px; @@ -2185,14 +2163,11 @@ exports[`EstimateCost - Zone > render zone component 1`] = ` > @@ -2240,14 +2215,11 @@ exports[`EstimateCost - Zone > render zone component 1`] = ` > @@ -2361,7 +2333,7 @@ exports[`EstimateCost - Zone > render zone component 1`] = ` class="emotion-25 emotion-1" > render isBeta with discount 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -232,10 +232,6 @@ exports[`EstimateCost - index > render isBeta with discount 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -357,10 +353,10 @@ exports[`EstimateCost - index > render isBeta with discount 1`] = ` .emotion-47 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -369,10 +365,6 @@ exports[`EstimateCost - index > render isBeta with discount 1`] = ` fill: none; } -.emotion-47 path { - fill: currentColor; -} - .emotion-49 { padding-left: 16px; padding-right: 16px; @@ -1003,14 +995,11 @@ exports[`EstimateCost - index > render isBeta with discount 1`] = ` > @@ -1063,14 +1052,11 @@ exports[`EstimateCost - index > render isBeta with discount 1`] = ` > @@ -1184,7 +1170,7 @@ exports[`EstimateCost - index > render isBeta with discount 1`] = ` class="emotion-23 emotion-1" > render isBeta with discount equal to 100% 1`] = .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -1540,10 +1526,6 @@ exports[`EstimateCost - index > render isBeta with discount equal to 100% 1`] = fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -1665,10 +1647,10 @@ exports[`EstimateCost - index > render isBeta with discount equal to 100% 1`] = .emotion-47 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -1677,10 +1659,6 @@ exports[`EstimateCost - index > render isBeta with discount equal to 100% 1`] = fill: none; } -.emotion-47 path { - fill: currentColor; -} - .emotion-49 { padding-left: 16px; padding-right: 16px; @@ -2316,14 +2294,11 @@ exports[`EstimateCost - index > render isBeta with discount equal to 100% 1`] = > @@ -2376,14 +2351,11 @@ exports[`EstimateCost - index > render isBeta with discount equal to 100% 1`] = > @@ -2497,7 +2469,7 @@ exports[`EstimateCost - index > render isBeta with discount equal to 100% 1`] = class="emotion-23 emotion-1" > render isBeta with discount more than 100% 1`] = .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -2853,10 +2825,6 @@ exports[`EstimateCost - index > render isBeta with discount more than 100% 1`] = fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -2978,10 +2946,10 @@ exports[`EstimateCost - index > render isBeta with discount more than 100% 1`] = .emotion-47 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -2990,10 +2958,6 @@ exports[`EstimateCost - index > render isBeta with discount more than 100% 1`] = fill: none; } -.emotion-47 path { - fill: currentColor; -} - .emotion-49 { padding-left: 16px; padding-right: 16px; @@ -3629,14 +3593,11 @@ exports[`EstimateCost - index > render isBeta with discount more than 100% 1`] = > @@ -3689,14 +3650,11 @@ exports[`EstimateCost - index > render isBeta with discount more than 100% 1`] = > @@ -3810,7 +3768,7 @@ exports[`EstimateCost - index > render isBeta with discount more than 100% 1`] = class="emotion-23 emotion-1" > render isBeta without discount 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -4166,10 +4124,6 @@ exports[`EstimateCost - index > render isBeta without discount 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -4296,10 +4250,10 @@ exports[`EstimateCost - index > render isBeta without discount 1`] = ` .emotion-47 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -4308,10 +4262,6 @@ exports[`EstimateCost - index > render isBeta without discount 1`] = ` fill: none; } -.emotion-47 path { - fill: currentColor; -} - .emotion-49 { padding-left: 16px; padding-right: 16px; @@ -4942,14 +4892,11 @@ exports[`EstimateCost - index > render isBeta without discount 1`] = ` > @@ -5002,14 +4949,11 @@ exports[`EstimateCost - index > render isBeta without discount 1`] = ` > @@ -5123,7 +5067,7 @@ exports[`EstimateCost - index > render isBeta without discount 1`] = ` class="emotion-23 emotion-1" > render with all timeUnits values 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -5479,10 +5423,6 @@ exports[`EstimateCost - index > render with all timeUnits values 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -5564,10 +5504,10 @@ exports[`EstimateCost - index > render with all timeUnits values 1`] = ` .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -5576,10 +5516,6 @@ exports[`EstimateCost - index > render with all timeUnits values 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -6171,14 +6107,11 @@ exports[`EstimateCost - index > render with all timeUnits values 1`] = ` > @@ -6226,14 +6159,11 @@ exports[`EstimateCost - index > render with all timeUnits values 1`] = ` > @@ -6347,7 +6277,7 @@ exports[`EstimateCost - index > render with all timeUnits values 1`] = ` class="emotion-23 emotion-1" > render with commitmentFees 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -6913,17 +6843,13 @@ exports[`EstimateCost - index > render with commitmentFees 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -6931,10 +6857,6 @@ exports[`EstimateCost - index > render with commitmentFees 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -7080,10 +7002,10 @@ exports[`EstimateCost - index > render with commitmentFees 1`] = ` .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -7092,17 +7014,13 @@ exports[`EstimateCost - index > render with commitmentFees 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -7111,10 +7029,6 @@ exports[`EstimateCost - index > render with commitmentFees 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -8188,14 +8102,11 @@ exports[`EstimateCost - index > render with commitmentFees 1`] = ` > @@ -8243,14 +8154,11 @@ exports[`EstimateCost - index > render with commitmentFees 1`] = ` > @@ -8364,7 +8272,7 @@ exports[`EstimateCost - index > render with commitmentFees 1`] = ` class="emotion-23 emotion-1" > render with commitmentFees and iscommitmentFeesC .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -8946,17 +8854,13 @@ exports[`EstimateCost - index > render with commitmentFees and iscommitmentFeesC fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -8964,10 +8868,6 @@ exports[`EstimateCost - index > render with commitmentFees and iscommitmentFeesC fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -9113,10 +9013,10 @@ exports[`EstimateCost - index > render with commitmentFees and iscommitmentFeesC .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -9125,17 +9025,13 @@ exports[`EstimateCost - index > render with commitmentFees and iscommitmentFeesC fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -9144,10 +9040,6 @@ exports[`EstimateCost - index > render with commitmentFees and iscommitmentFeesC fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -10221,14 +10113,11 @@ exports[`EstimateCost - index > render with commitmentFees and iscommitmentFeesC > @@ -10276,14 +10165,11 @@ exports[`EstimateCost - index > render with commitmentFees and iscommitmentFeesC > @@ -10397,7 +10283,7 @@ exports[`EstimateCost - index > render with commitmentFees and iscommitmentFeesC class="emotion-23 emotion-1" > render with description as node 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -10979,17 +10865,13 @@ exports[`EstimateCost - index > render with description as node 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -10997,10 +10879,6 @@ exports[`EstimateCost - index > render with description as node 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -11160,10 +11038,10 @@ exports[`EstimateCost - index > render with description as node 1`] = ` .emotion-41 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -11172,17 +11050,13 @@ exports[`EstimateCost - index > render with description as node 1`] = ` fill: none; } -.emotion-41 path { - fill: currentColor; -} - .emotion-41 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -11191,10 +11065,6 @@ exports[`EstimateCost - index > render with description as node 1`] = ` fill: none; } -.emotion-41 path { - fill: currentColor; -} - .emotion-43 { padding-left: 16px; padding-right: 16px; @@ -12323,14 +12193,11 @@ exports[`EstimateCost - index > render with description as node 1`] = ` > @@ -12376,14 +12243,11 @@ exports[`EstimateCost - index > render with description as node 1`] = ` > @@ -12497,7 +12361,7 @@ exports[`EstimateCost - index > render with description as node 1`] = ` class="emotion-23 emotion-1" > render with discount 0 and defaultTimeUnit month .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -12847,10 +12711,6 @@ exports[`EstimateCost - index > render with discount 0 and defaultTimeUnit month fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -12932,10 +12792,10 @@ exports[`EstimateCost - index > render with discount 0 and defaultTimeUnit month .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -12944,10 +12804,6 @@ exports[`EstimateCost - index > render with discount 0 and defaultTimeUnit month fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -13539,14 +13395,11 @@ exports[`EstimateCost - index > render with discount 0 and defaultTimeUnit month > @@ -13594,14 +13447,11 @@ exports[`EstimateCost - index > render with discount 0 and defaultTimeUnit month > @@ -13715,7 +13565,7 @@ exports[`EstimateCost - index > render with discount 0 and defaultTimeUnit month class="emotion-23 emotion-1" > render with discount 0.5 and defaultTimeUnit mon .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -14281,17 +14131,13 @@ exports[`EstimateCost - index > render with discount 0.5 and defaultTimeUnit mon fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -14299,10 +14145,6 @@ exports[`EstimateCost - index > render with discount 0.5 and defaultTimeUnit mon fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -14462,10 +14304,10 @@ exports[`EstimateCost - index > render with discount 0.5 and defaultTimeUnit mon .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -14474,17 +14316,13 @@ exports[`EstimateCost - index > render with discount 0.5 and defaultTimeUnit mon fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -14493,10 +14331,6 @@ exports[`EstimateCost - index > render with discount 0.5 and defaultTimeUnit mon fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -15625,14 +15459,11 @@ exports[`EstimateCost - index > render with discount 0.5 and defaultTimeUnit mon > @@ -15680,14 +15511,11 @@ exports[`EstimateCost - index > render with discount 0.5 and defaultTimeUnit mon > @@ -15801,7 +15629,7 @@ exports[`EstimateCost - index > render with discount 0.5 and defaultTimeUnit mon class="emotion-23 emotion-1" > render with discount 1 and defaultTimeUnit month .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -16151,10 +15979,6 @@ exports[`EstimateCost - index > render with discount 1 and defaultTimeUnit month fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -16236,10 +16060,10 @@ exports[`EstimateCost - index > render with discount 1 and defaultTimeUnit month .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -16248,10 +16072,6 @@ exports[`EstimateCost - index > render with discount 1 and defaultTimeUnit month fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -16843,14 +16663,11 @@ exports[`EstimateCost - index > render with discount 1 and defaultTimeUnit month > @@ -16898,14 +16715,11 @@ exports[`EstimateCost - index > render with discount 1 and defaultTimeUnit month > @@ -17019,7 +16833,7 @@ exports[`EstimateCost - index > render with discount 1 and defaultTimeUnit month class="emotion-23 emotion-1" > render with discount 1, isBeta and defaultTimeUn .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -17369,10 +17183,6 @@ exports[`EstimateCost - index > render with discount 1, isBeta and defaultTimeUn fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -17494,10 +17304,10 @@ exports[`EstimateCost - index > render with discount 1, isBeta and defaultTimeUn .emotion-47 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -17506,10 +17316,6 @@ exports[`EstimateCost - index > render with discount 1, isBeta and defaultTimeUn fill: none; } -.emotion-47 path { - fill: currentColor; -} - .emotion-49 { padding-left: 16px; padding-right: 16px; @@ -18145,14 +17951,11 @@ exports[`EstimateCost - index > render with discount 1, isBeta and defaultTimeUn > @@ -18205,14 +18008,11 @@ exports[`EstimateCost - index > render with discount 1, isBeta and defaultTimeUn > @@ -18326,7 +18126,7 @@ exports[`EstimateCost - index > render with discount 1, isBeta and defaultTimeUn class="emotion-23 emotion-1" > render with discount 100% but no isBeta 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -18682,10 +18482,6 @@ exports[`EstimateCost - index > render with discount 100% but no isBeta 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -18767,10 +18563,10 @@ exports[`EstimateCost - index > render with discount 100% but no isBeta 1`] = ` .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -18779,10 +18575,6 @@ exports[`EstimateCost - index > render with discount 100% but no isBeta 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -19374,14 +19166,11 @@ exports[`EstimateCost - index > render with discount 100% but no isBeta 1`] = ` > @@ -19429,14 +19218,11 @@ exports[`EstimateCost - index > render with discount 100% but no isBeta 1`] = ` > @@ -19550,7 +19336,7 @@ exports[`EstimateCost - index > render with discount 100% but no isBeta 1`] = ` class="emotion-23 emotion-1" > render with hideTimeUnit 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -20116,17 +19902,13 @@ exports[`EstimateCost - index > render with hideTimeUnit 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -20134,10 +19916,6 @@ exports[`EstimateCost - index > render with hideTimeUnit 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -20566,14 +20344,11 @@ exports[`EstimateCost - index > render with hideTimeUnit 1`] = ` > @@ -21136,10 +20911,10 @@ exports[`EstimateCost - index > render with hideTotal 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -21147,17 +20922,13 @@ exports[`EstimateCost - index > render with hideTotal 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -21165,10 +20936,6 @@ exports[`EstimateCost - index > render with hideTotal 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -21314,10 +21081,10 @@ exports[`EstimateCost - index > render with hideTotal 1`] = ` .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -21326,17 +21093,13 @@ exports[`EstimateCost - index > render with hideTotal 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -21345,10 +21108,6 @@ exports[`EstimateCost - index > render with hideTotal 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -22395,14 +22154,11 @@ exports[`EstimateCost - index > render with hideTotal 1`] = ` > @@ -22450,14 +22206,11 @@ exports[`EstimateCost - index > render with hideTotal 1`] = ` > @@ -22571,7 +22324,7 @@ exports[`EstimateCost - index > render with hideTotal 1`] = ` class="emotion-23 emotion-1" > render with isBeta but undefined discount 1`] = .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -22888,10 +22641,6 @@ exports[`EstimateCost - index > render with isBeta but undefined discount 1`] = fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -23018,10 +22767,10 @@ exports[`EstimateCost - index > render with isBeta but undefined discount 1`] = .emotion-47 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -23030,10 +22779,6 @@ exports[`EstimateCost - index > render with isBeta but undefined discount 1`] = fill: none; } -.emotion-47 path { - fill: currentColor; -} - .emotion-49 { padding-left: 16px; padding-right: 16px; @@ -23664,14 +23409,11 @@ exports[`EstimateCost - index > render with isBeta but undefined discount 1`] = > @@ -23724,14 +23466,11 @@ exports[`EstimateCost - index > render with isBeta but undefined discount 1`] = > @@ -23845,7 +23584,7 @@ exports[`EstimateCost - index > render with isBeta but undefined discount 1`] = class="emotion-23 emotion-1" > render with isBeta, discount 0 and defaultTimeUn .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -24417,17 +24156,13 @@ exports[`EstimateCost - index > render with isBeta, discount 0 and defaultTimeUn fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -24435,10 +24170,6 @@ exports[`EstimateCost - index > render with isBeta, discount 0 and defaultTimeUn fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -24688,10 +24419,10 @@ exports[`EstimateCost - index > render with isBeta, discount 0 and defaultTimeUn .emotion-47 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -24700,17 +24431,13 @@ exports[`EstimateCost - index > render with isBeta, discount 0 and defaultTimeUn fill: none; } -.emotion-47 path { - fill: currentColor; -} - .emotion-47 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -24719,10 +24446,6 @@ exports[`EstimateCost - index > render with isBeta, discount 0 and defaultTimeUn fill: none; } -.emotion-47 path { - fill: currentColor; -} - .emotion-49 { padding-left: 16px; padding-right: 16px; @@ -25929,14 +25652,11 @@ exports[`EstimateCost - index > render with isBeta, discount 0 and defaultTimeUn > @@ -25989,14 +25709,11 @@ exports[`EstimateCost - index > render with isBeta, discount 0 and defaultTimeUn > @@ -26110,7 +25827,7 @@ exports[`EstimateCost - index > render with isBeta, discount 0 and defaultTimeUn class="emotion-23 emotion-1" > render with isBeta, discount 0.5 and defaultTime .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -26682,17 +26399,13 @@ exports[`EstimateCost - index > render with isBeta, discount 0.5 and defaultTime fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -26700,10 +26413,6 @@ exports[`EstimateCost - index > render with isBeta, discount 0.5 and defaultTime fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -26943,10 +26652,10 @@ exports[`EstimateCost - index > render with isBeta, discount 0.5 and defaultTime .emotion-47 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -26955,17 +26664,13 @@ exports[`EstimateCost - index > render with isBeta, discount 0.5 and defaultTime fill: none; } -.emotion-47 path { - fill: currentColor; -} - .emotion-47 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -26974,10 +26679,6 @@ exports[`EstimateCost - index > render with isBeta, discount 0.5 and defaultTime fill: none; } -.emotion-47 path { - fill: currentColor; -} - .emotion-49 { padding-left: 16px; padding-right: 16px; @@ -28184,14 +27885,11 @@ exports[`EstimateCost - index > render with isBeta, discount 0.5 and defaultTime > @@ -28244,14 +27942,11 @@ exports[`EstimateCost - index > render with isBeta, discount 0.5 and defaultTime > @@ -28365,7 +28060,7 @@ exports[`EstimateCost - index > render with isBeta, discount 0.5 and defaultTime class="emotion-23 emotion-1" > render with isBeta, price, discount 50% 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -28721,10 +28416,6 @@ exports[`EstimateCost - index > render with isBeta, price, discount 50% 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -28846,10 +28537,10 @@ exports[`EstimateCost - index > render with isBeta, price, discount 50% 1`] = ` .emotion-47 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -28858,10 +28549,6 @@ exports[`EstimateCost - index > render with isBeta, price, discount 50% 1`] = ` fill: none; } -.emotion-47 path { - fill: currentColor; -} - .emotion-49 { padding-left: 16px; padding-right: 16px; @@ -29492,14 +29179,11 @@ exports[`EstimateCost - index > render with isBeta, price, discount 50% 1`] = ` > @@ -29552,14 +29236,11 @@ exports[`EstimateCost - index > render with isBeta, price, discount 50% 1`] = ` > @@ -29673,7 +29354,7 @@ exports[`EstimateCost - index > render with isBeta, price, discount 50% 1`] = ` class="emotion-23 emotion-1" > render with item discount 50% 1`] = ` .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -30029,10 +29710,6 @@ exports[`EstimateCost - index > render with item discount 50% 1`] = ` fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -30114,10 +29791,10 @@ exports[`EstimateCost - index > render with item discount 50% 1`] = ` .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -30126,10 +29803,6 @@ exports[`EstimateCost - index > render with item discount 50% 1`] = ` fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -30721,14 +30394,11 @@ exports[`EstimateCost - index > render with item discount 50% 1`] = ` > @@ -30776,14 +30446,11 @@ exports[`EstimateCost - index > render with item discount 50% 1`] = ` > @@ -30897,7 +30564,7 @@ exports[`EstimateCost - index > render with item discount 50% 1`] = ` class="emotion-23 emotion-1" > render with item discount 50% and defaultTimeUni .emotion-25 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-25 .fillStroke { @@ -31247,10 +30914,6 @@ exports[`EstimateCost - index > render with item discount 50% and defaultTimeUni fill: none; } -.emotion-25 path { - fill: currentColor; -} - .emotion-27 { height: 48px; display: -webkit-box; @@ -31332,10 +30995,10 @@ exports[`EstimateCost - index > render with item discount 50% and defaultTimeUni .emotion-43 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -31344,10 +31007,6 @@ exports[`EstimateCost - index > render with item discount 50% and defaultTimeUni fill: none; } -.emotion-43 path { - fill: currentColor; -} - .emotion-45 { padding-left: 16px; padding-right: 16px; @@ -31939,14 +31598,11 @@ exports[`EstimateCost - index > render with item discount 50% and defaultTimeUni > @@ -31994,14 +31650,11 @@ exports[`EstimateCost - index > render with item discount 50% and defaultTimeUni > @@ -32115,7 +31768,7 @@ exports[`EstimateCost - index > render with item discount 50% and defaultTimeUni class="emotion-23 emotion-1" > render with item discount 50% and text 1`] = ` .emotion-29 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; } .emotion-29 .fillStroke { @@ -32504,10 +32157,6 @@ exports[`EstimateCost - index > render with item discount 50% and text 1`] = ` fill: none; } -.emotion-29 path { - fill: currentColor; -} - .emotion-31 { height: 48px; display: -webkit-box; @@ -32589,10 +32238,10 @@ exports[`EstimateCost - index > render with item discount 50% and text 1`] = ` .emotion-47 { vertical-align: middle; fill: #641cb3; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + height: 1.25rem; + width: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; margin-right: 0.5rem; } @@ -32601,10 +32250,6 @@ exports[`EstimateCost - index > render with item discount 50% and text 1`] = ` fill: none; } -.emotion-47 path { - fill: currentColor; -} - .emotion-49 { padding-left: 16px; padding-right: 16px; @@ -33201,14 +32846,11 @@ exports[`EstimateCost - index > render with item discount 50% and text 1`] = ` > @@ -33256,14 +32898,11 @@ exports[`EstimateCost - index > render with item discount 50% and text 1`] = ` > @@ -33377,7 +33016,7 @@ exports[`EstimateCost - index > render with item discount 50% and text 1`] = ` class="emotion-27 emotion-1" > {categoryIcon ? ( diff --git a/packages/plus/src/components/SteppedListCard/Step.tsx b/packages/plus/src/components/SteppedListCard/Step.tsx index ec0ee00d74..ec61aadc08 100644 --- a/packages/plus/src/components/SteppedListCard/Step.tsx +++ b/packages/plus/src/components/SteppedListCard/Step.tsx @@ -1,6 +1,7 @@ 'use client' import styled from '@emotion/styled' +import { CheckIcon } from '@ultraviolet/icons' import { StepList, Text } from '@ultraviolet/ui' import { useContext } from 'react' import { Data } from './helper' @@ -53,7 +54,7 @@ export const SteppedList = ({ return completed ? ( } prominence={active ? 'strong' : 'default'} sentiment="primary" onClick={() => containerData.setCurrentStep(stepNumber)} @@ -65,7 +66,7 @@ export const SteppedList = ({ ) : ( containerData.setCurrentStep(stepNumber)} diff --git a/packages/plus/src/components/SteppedListCard/__stories__/OnClickHide.stories.tsx b/packages/plus/src/components/SteppedListCard/__stories__/OnClickHide.stories.tsx index 170ea8a0fd..76aa590c5a 100644 --- a/packages/plus/src/components/SteppedListCard/__stories__/OnClickHide.stories.tsx +++ b/packages/plus/src/components/SteppedListCard/__stories__/OnClickHide.stories.tsx @@ -1,6 +1,7 @@ import { useTheme } from '@emotion/react' import styled from '@emotion/styled' import type { StoryFn } from '@storybook/react' +import { MinusIcon, PlusIcon } from '@ultraviolet/icons' import { blockStorageWire } from '@ultraviolet/illustrations/products/blockStorage' import { Button, Expandable, Stack, Text } from '@ultraviolet/ui' import type { ComponentProps } from 'react' @@ -26,10 +27,8 @@ export const OnClickHide: StoryFn< return ( <> - @@ -168,22 +170,23 @@ export const FormContent = () => { @@ -191,11 +194,11 @@ export const FormContent = () => { )} diff --git a/packages/ui/src/__stories__/Tools/ThemeGenerator/ThemeResult/Demo.tsx b/packages/ui/src/__stories__/Tools/ThemeGenerator/ThemeResult/Demo.tsx index 8253cb449e..ed990bc416 100644 --- a/packages/ui/src/__stories__/Tools/ThemeGenerator/ThemeResult/Demo.tsx +++ b/packages/ui/src/__stories__/Tools/ThemeGenerator/ThemeResult/Demo.tsx @@ -1,6 +1,12 @@ import styled from '@emotion/styled' import type { ChangeEvent } from 'react' import { useState } from 'react' +import { + AlertCircleIcon, + ArrowRightIcon, + CheckIcon, + ClockOutlineIcon, +} from '../../../../../../icons/src' import { Alert, AvatarV2, @@ -114,7 +120,8 @@ export const Demo = () => { UV-UI UV-CORE UV-FORM - + + Badge Badge @@ -130,14 +137,14 @@ export const Demo = () => { } sentiment="success" size="small" > Registration completed } size="small" sentiment="info" > @@ -180,12 +187,9 @@ export const Demo = () => { - diff --git a/packages/ui/src/__stories__/Tools/ThemeGenerator/ThemeResult/index.tsx b/packages/ui/src/__stories__/Tools/ThemeGenerator/ThemeResult/index.tsx index d7388691e1..646d909f72 100644 --- a/packages/ui/src/__stories__/Tools/ThemeGenerator/ThemeResult/index.tsx +++ b/packages/ui/src/__stories__/Tools/ThemeGenerator/ThemeResult/index.tsx @@ -1,5 +1,6 @@ import { ThemeProvider } from '@emotion/react' import styled from '@emotion/styled' +import { ArrowLeftIcon, EyeIcon, EyeOffIcon } from '@ultraviolet/icons' import { useCallback, useState } from 'react' import { Button, Row, Stack, Text } from '../../../../components' import type { SCWUITheme } from '../../../../theme' @@ -45,10 +46,9 @@ export const ThemeResult = ({ @@ -61,11 +61,11 @@ export const ThemeResult = ({ diff --git a/packages/ui/src/components/ActionBar/__stories__/Template.stories.tsx b/packages/ui/src/components/ActionBar/__stories__/Template.stories.tsx index 586920a4df..747222f637 100644 --- a/packages/ui/src/components/ActionBar/__stories__/Template.stories.tsx +++ b/packages/ui/src/components/ActionBar/__stories__/Template.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn } from '@storybook/react' +import { DeleteIcon } from '@ultraviolet/icons' import { useState } from 'react' import { ActionBar } from '..' import { Button } from '../../Button' @@ -27,12 +28,9 @@ export const Template: StoryFn = args => { width="100%" >
I am the Playground Action Bar
- ) : null} diff --git a/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap index 4626ad91d6..79c5e5305f 100644 --- a/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap @@ -1441,7 +1441,7 @@ exports[`Alert > renders correctly with closable and onClose 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1488,10 +1488,10 @@ exports[`Alert > renders correctly with closable and onClose 1`] = ` .emotion-15 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-15 .fillStroke { @@ -1499,10 +1499,6 @@ exports[`Alert > renders correctly with closable and onClose 1`] = ` fill: none; } -.emotion-15 path { - fill: currentColor; -} -
@@ -1542,9 +1538,8 @@ exports[`Alert > renders correctly with closable and onClose 1`] = ` type="button" > + > + + ) : null} ) diff --git a/packages/ui/src/components/AvatarV2/__stories__/Examples.stories.tsx b/packages/ui/src/components/AvatarV2/__stories__/Examples.stories.tsx index 05d9ae2f48..6697877958 100644 --- a/packages/ui/src/components/AvatarV2/__stories__/Examples.stories.tsx +++ b/packages/ui/src/components/AvatarV2/__stories__/Examples.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn } from '@storybook/react' +import { LockIcon } from '@ultraviolet/icons' import { useRef, useState } from 'react' import { AvatarV2 } from '..' import { Stack } from '../../Stack' @@ -13,10 +14,11 @@ export const Examples: StoryFn = props => { {' '} + > + + Locked Profile diff --git a/packages/ui/src/components/AvatarV2/__stories__/Sentiment.stories.tsx b/packages/ui/src/components/AvatarV2/__stories__/Sentiment.stories.tsx index a95e4d36fd..8cd4b7241e 100644 --- a/packages/ui/src/components/AvatarV2/__stories__/Sentiment.stories.tsx +++ b/packages/ui/src/components/AvatarV2/__stories__/Sentiment.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn } from '@storybook/react' +import { MosaicIcon } from '@ultraviolet/icons' import { AvatarV2 } from '..' import { Stack } from '../../Stack' @@ -6,8 +7,12 @@ export const Sentiment: StoryFn = props => ( <> - - + + + + + + ) diff --git a/packages/ui/src/components/AvatarV2/__stories__/Size.stories.tsx b/packages/ui/src/components/AvatarV2/__stories__/Size.stories.tsx index f95c53a84b..40af6e29d9 100644 --- a/packages/ui/src/components/AvatarV2/__stories__/Size.stories.tsx +++ b/packages/ui/src/components/AvatarV2/__stories__/Size.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn } from '@storybook/react' +import { MosaicIcon } from '@ultraviolet/icons' import { AvatarV2 } from '..' import { Stack } from '../../Stack' @@ -12,10 +13,18 @@ export const Size: StoryFn = props => ( <> - - - - + + + + + + + + + + + + @@ -26,10 +35,18 @@ export const Size: StoryFn = props => ( <> - - - - + + + + + + + + + + + + diff --git a/packages/ui/src/components/AvatarV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/AvatarV2/__tests__/__snapshots__/index.test.tsx.snap index e0c31dfbcb..04ea49b6c1 100644 --- a/packages/ui/src/components/AvatarV2/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/AvatarV2/__tests__/__snapshots__/index.test.tsx.snap @@ -189,22 +189,18 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with .emotion-4 { vertical-align: middle; - fill: #ffffff; - height: 56px; - width: 56px; - min-width: 56px; - min-height: 56px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #ffffff; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -221,25 +217,19 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with >
@@ -349,22 +339,18 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with .emotion-4 { vertical-align: middle; - fill: #222638; - height: 56px; - width: 56px; - min-width: 56px; - min-height: 56px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #222638; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -381,25 +367,19 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with >
@@ -1390,22 +1370,18 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with .emotion-4 { vertical-align: middle; - fill: #ffffff; - height: 32px; - width: 32px; - min-width: 32px; - min-height: 32px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #ffffff; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -1422,25 +1398,19 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with >
@@ -1550,22 +1520,18 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with .emotion-4 { vertical-align: middle; - fill: #222638; - height: 32px; - width: 32px; - min-width: 32px; - min-height: 32px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #222638; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -1582,25 +1548,19 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with >
@@ -2591,22 +2551,18 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with .emotion-4 { vertical-align: middle; - fill: #ffffff; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #ffffff; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -2623,25 +2579,19 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with >
@@ -2751,22 +2701,18 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with .emotion-4 { vertical-align: middle; - fill: #222638; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #222638; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -2783,25 +2729,19 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with >
@@ -3767,22 +3707,18 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with .emotion-4 { vertical-align: middle; - fill: #ffffff; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #ffffff; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -3799,25 +3735,19 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with >
@@ -3902,22 +3832,18 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with .emotion-4 { vertical-align: middle; - fill: #222638; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #222638; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -3934,25 +3860,19 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with >
@@ -4987,22 +4907,18 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with .emotion-4 { vertical-align: middle; - fill: #ffffff; - height: 56px; - width: 56px; - min-width: 56px; - min-height: 56px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #ffffff; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -5019,25 +4935,19 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with >
@@ -5147,22 +5057,18 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with .emotion-4 { vertical-align: middle; - fill: #222638; - height: 56px; - width: 56px; - min-width: 56px; - min-height: 56px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #222638; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -5179,25 +5085,19 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with >
@@ -6388,22 +6288,18 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with .emotion-4 { vertical-align: middle; - fill: #ffffff; - height: 32px; - width: 32px; - min-width: 32px; - min-height: 32px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #ffffff; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -6420,25 +6316,19 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with >
@@ -6548,22 +6438,18 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with .emotion-4 { vertical-align: middle; - fill: #222638; - height: 32px; - width: 32px; - min-width: 32px; - min-height: 32px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #222638; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -6580,25 +6466,19 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with >
@@ -7789,22 +7669,18 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with .emotion-4 { vertical-align: middle; - fill: #ffffff; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #ffffff; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -7821,25 +7697,19 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with >
@@ -7949,22 +7819,18 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with .emotion-4 { vertical-align: middle; - fill: #222638; - height: 20px; - width: 20px; - min-width: 20px; - min-height: 20px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #222638; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -7981,25 +7847,19 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with >
@@ -9190,22 +9050,18 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with .emotion-4 { vertical-align: middle; - fill: #ffffff; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #ffffff; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -9222,25 +9078,19 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with >
@@ -9350,22 +9200,18 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with .emotion-4 { vertical-align: middle; - fill: #222638; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #222638; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -9382,25 +9228,19 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with >
diff --git a/packages/ui/src/components/AvatarV2/__tests__/index.test.tsx b/packages/ui/src/components/AvatarV2/__tests__/index.test.tsx index 698aa065b8..3116343a58 100644 --- a/packages/ui/src/components/AvatarV2/__tests__/index.test.tsx +++ b/packages/ui/src/components/AvatarV2/__tests__/index.test.tsx @@ -1,5 +1,6 @@ import { screen } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' +import { MosaicIcon } from '@ultraviolet/icons' import { renderWithTheme, shouldMatchEmotionSnapshot } from '@utils/test' import { describe, expect, it, vi } from 'vitest' import { AvatarV2 } from '..' @@ -45,12 +46,9 @@ describe('AvatarV2', () => { it('renders correctly with variant icon', () => shouldMatchEmotionSnapshot( - , + + + , )) it('renders correctly with variant icon and sentiment neutral', () => @@ -58,10 +56,11 @@ describe('AvatarV2', () => { , + > + + , )) it('renders correctly with variant colors', () => diff --git a/packages/ui/src/components/AvatarV2/constants.ts b/packages/ui/src/components/AvatarV2/constants.ts index 8809bb80dc..fd2489fddf 100644 --- a/packages/ui/src/components/AvatarV2/constants.ts +++ b/packages/ui/src/components/AvatarV2/constants.ts @@ -17,14 +17,6 @@ export const sizes = (theme: Theme) => large: '7rem', // TODO: add this value to tokens }) as const -// Match the avatar sizes with the icon sizes -export const ICON_SIZES = { - xsmall: 'small', - small: 'large', - medium: 'xlarge', - large: 'xxlarge', -} as const - export const RADIUS_SIZES = { xsmall: 'default', small: 'large', diff --git a/packages/ui/src/components/AvatarV2/index.tsx b/packages/ui/src/components/AvatarV2/index.tsx index b890aaffe0..73c9641811 100644 --- a/packages/ui/src/components/AvatarV2/index.tsx +++ b/packages/ui/src/components/AvatarV2/index.tsx @@ -4,12 +4,10 @@ import type { Theme } from '@emotion/react' import { css } from '@emotion/react' import styled from '@emotion/styled' import { UploadIcon } from '@ultraviolet/icons' -import { Icon } from '@ultraviolet/icons/legacy' import { UserProductIcon } from '@ultraviolet/icons/product' import { Text } from '../Text' import { DEFAULT_COLORS, - ICON_SIZES, RADIUS_SIZES, SENTIMENTS, TEXT_VARIANT_BY_SIZE, @@ -190,7 +188,6 @@ export const AvatarV2 = ({ shape, variant, image, - icon, text, size = 'medium', sentiment = 'primary', @@ -226,17 +223,7 @@ export const AvatarV2 = ({ ) : null} {variant === 'icon' ? ( - - {icon ? ( - - ) : null} - {children} - + {children} ) : null} {variant === 'text' ? ( diff --git a/packages/ui/src/components/AvatarV2/types.ts b/packages/ui/src/components/AvatarV2/types.ts index 6c3e84a866..3fc18be71d 100644 --- a/packages/ui/src/components/AvatarV2/types.ts +++ b/packages/ui/src/components/AvatarV2/types.ts @@ -1,5 +1,4 @@ -import type { Icon } from '@ultraviolet/icons/legacy' -import type { ComponentProps, MouseEvent, ReactNode } from 'react' +import type { MouseEvent, ReactNode } from 'react' import type { SENTIMENTS, sizes } from './constants' // This type defines an array of string that should have a length of 0, 1, or 2 @@ -33,7 +32,6 @@ type CommonProps = { type VariantUser = { variant: 'user' image?: never - icon?: never text?: never sentiment?: never colors?: never @@ -43,7 +41,6 @@ type VariantUser = { type VariantImage = { variant: 'image' image: string - icon?: never text?: never sentiment?: never colors?: never @@ -53,10 +50,6 @@ type VariantImage = { type VariantIcon = { variant: 'icon' image?: never - /** - * @deprecated Use children to add you icon directly instead of using the icon prop - */ - icon?: ComponentProps['name'] text?: never sentiment?: (typeof SENTIMENTS)[number] colors?: never @@ -66,7 +59,6 @@ type VariantIcon = { type VariantText = { variant: 'text' image?: never - icon?: never text: string sentiment?: (typeof SENTIMENTS)[number] colors?: never @@ -76,7 +68,6 @@ type VariantText = { type VariantColors = { variant: 'colors' image?: never - icon?: never text?: never sentiment?: never /** diff --git a/packages/ui/src/components/Badge/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Badge/__tests__/__snapshots__/index.test.tsx.snap index 8fdeb2b38f..bb31fce8ef 100644 --- a/packages/ui/src/components/Badge/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Badge/__tests__/__snapshots__/index.test.tsx.snap @@ -726,10 +726,10 @@ exports[`Badge > renders correctly with icon 1`] = ` .emotion-3 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-3 .fillStroke { @@ -737,10 +737,6 @@ exports[`Badge > renders correctly with icon 1`] = ` fill: none; } -.emotion-3 path { - fill: currentColor; -} -
@@ -749,14 +745,11 @@ exports[`Badge > renders correctly with icon 1`] = ` > diff --git a/packages/ui/src/components/Badge/__tests__/index.test.tsx b/packages/ui/src/components/Badge/__tests__/index.test.tsx index 0e742b9832..2114986e4b 100644 --- a/packages/ui/src/components/Badge/__tests__/index.test.tsx +++ b/packages/ui/src/components/Badge/__tests__/index.test.tsx @@ -1,3 +1,4 @@ +import { InformationOutlineIcon } from '@ultraviolet/icons' import { shouldMatchEmotionSnapshot } from '@utils/test' import { describe, test } from 'vitest' import { Badge, PROMINENCES, SIZES } from '..' @@ -9,7 +10,10 @@ describe('Badge', () => { test('renders correctly with icon', () => shouldMatchEmotionSnapshot( - Sample badge, + + + Sample badge + , )) test('renders correctly when disabled', () => diff --git a/packages/ui/src/components/Badge/index.tsx b/packages/ui/src/components/Badge/index.tsx index 5ba2e6d00c..1a05ce2121 100644 --- a/packages/ui/src/components/Badge/index.tsx +++ b/packages/ui/src/components/Badge/index.tsx @@ -3,16 +3,13 @@ import type { Theme } from '@emotion/react' import { useTheme } from '@emotion/react' import styled from '@emotion/styled' -import { Icon } from '@ultraviolet/icons/legacy' -import type { ComponentProps, ReactNode } from 'react' +import type { ReactNode } from 'react' import { useMemo } from 'react' import type { Color } from '../../theme' import { SENTIMENTS_WITHOUT_NEUTRAL } from '../../theme' import capitalize from '../../utils/capitalize' import { Text } from '../Text' -type IconName = ComponentProps['name'] - export const SIZES = { large: '400', // sizing token from theme medium: '300', @@ -119,11 +116,6 @@ type BadgeProps = { sentiment?: Color size?: keyof typeof SIZES prominence?: keyof typeof PROMINENCES - /** - * @deprecated: Use the icon directly in children - * Defines icon to display on left side of badge. **Only available on medium and large sizes**. - */ - icon?: IconName disabled?: boolean className?: string children: ReactNode @@ -137,7 +129,6 @@ export const Badge = ({ sentiment = 'neutral', size = 'medium', prominence = 'default', - icon, disabled = false, className, children, @@ -175,7 +166,6 @@ export const Badge = ({ data-testid={dataTestId} whiteSpace="nowrap" > - {icon && size !== 'small' ? : null} {children} ) diff --git a/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap index fbac932c39..fbf8ac61c3 100644 --- a/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap @@ -225,7 +225,7 @@ exports[`Banner > renders correctly with a button 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -269,10 +269,10 @@ exports[`Banner > renders correctly with a button 1`] = ` .emotion-18 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-18 .fillStroke { @@ -280,10 +280,6 @@ exports[`Banner > renders correctly with a button 1`] = ` fill: none; } -.emotion-18 path { - fill: currentColor; -} -
@@ -336,7 +332,6 @@ exports[`Banner > renders correctly with a button 1`] = ` renders correctly with a link 1`] = ` .emotion-19 { vertical-align: middle; fill: currentColor; - height: 14px; - width: 14px; - min-width: 14px; - min-height: 14px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; margin-left: 0.5rem; } @@ -627,7 +622,7 @@ exports[`Banner > renders correctly with a link 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -671,10 +666,10 @@ exports[`Banner > renders correctly with a link 1`] = ` .emotion-23 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-23 .fillStroke { @@ -682,10 +677,6 @@ exports[`Banner > renders correctly with a link 1`] = ` fill: none; } -.emotion-23 path { - fill: currentColor; -} -
@@ -737,7 +728,7 @@ exports[`Banner > renders correctly with a link 1`] = ` > renders correctly with a link 1`] = ` type="button" > renders correctly with default values 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1133,10 +1123,10 @@ exports[`Banner > renders correctly with default values 1`] = ` .emotion-14 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-14 .fillStroke { @@ -1144,10 +1134,6 @@ exports[`Banner > renders correctly with default values 1`] = ` fill: none; } -.emotion-14 path { - fill: currentColor; -} -
@@ -1190,7 +1176,6 @@ exports[`Banner > renders correctly with default values 1`] = ` renders correctly with direction row 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1393,10 +1378,10 @@ exports[`Banner > renders correctly with direction row 1`] = ` .emotion-14 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-14 .fillStroke { @@ -1404,10 +1389,6 @@ exports[`Banner > renders correctly with direction row 1`] = ` fill: none; } -.emotion-14 path { - fill: currentColor; -} -
@@ -1450,7 +1431,6 @@ exports[`Banner > renders correctly with direction row 1`] = ` should render correctly with dark theme 1`] = ` .emotion-19 { vertical-align: middle; fill: currentColor; - height: 14px; - width: 14px; - min-width: 14px; - min-height: 14px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; margin-left: 0.5rem; } @@ -1788,7 +1768,7 @@ exports[`Banner > should render correctly with dark theme 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1832,10 +1812,10 @@ exports[`Banner > should render correctly with dark theme 1`] = ` .emotion-23 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-23 .fillStroke { @@ -1843,17 +1823,13 @@ exports[`Banner > should render correctly with dark theme 1`] = ` fill: none; } -.emotion-23 path { - fill: currentColor; -} - .emotion-23 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-23 .fillStroke { @@ -1861,10 +1837,6 @@ exports[`Banner > should render correctly with dark theme 1`] = ` fill: none; } -.emotion-23 path { - fill: currentColor; -} -
@@ -1916,7 +1888,7 @@ exports[`Banner > should render correctly with dark theme 1`] = ` > should render correctly with dark theme 1`] = ` type="button" > sizes and variants > renders correctly with size medium and va gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2140,10 +2111,10 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va .emotion-14 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-14 .fillStroke { @@ -2151,10 +2122,6 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va fill: none; } -.emotion-14 path { - fill: currentColor; -} -
@@ -2197,7 +2164,6 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va sizes and variants > renders correctly with size medium and va gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2400,10 +2366,10 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va .emotion-14 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-14 .fillStroke { @@ -2411,10 +2377,6 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va fill: none; } -.emotion-14 path { - fill: currentColor; -} -
@@ -2457,7 +2419,6 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va sizes and variants > renders correctly with size small and var gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2660,10 +2621,10 @@ exports[`Banner > sizes and variants > renders correctly with size small and var .emotion-14 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-14 .fillStroke { @@ -2671,10 +2632,6 @@ exports[`Banner > sizes and variants > renders correctly with size small and var fill: none; } -.emotion-14 path { - fill: currentColor; -} -
@@ -2717,7 +2674,6 @@ exports[`Banner > sizes and variants > renders correctly with size small and var sizes and variants > renders correctly with size small and var gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2920,10 +2876,10 @@ exports[`Banner > sizes and variants > renders correctly with size small and var .emotion-14 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-14 .fillStroke { @@ -2931,10 +2887,6 @@ exports[`Banner > sizes and variants > renders correctly with size small and var fill: none; } -.emotion-14 path { - fill: currentColor; -} -
@@ -2977,7 +2929,6 @@ exports[`Banner > sizes and variants > renders correctly with size small and var {closable ? ( + > + + ) : null} ) diff --git a/packages/ui/src/components/Breadcrumbs/__stories__/AdvancedUsage.stories.tsx b/packages/ui/src/components/Breadcrumbs/__stories__/AdvancedUsage.stories.tsx index 47606894e6..b1507faf91 100644 --- a/packages/ui/src/components/Breadcrumbs/__stories__/AdvancedUsage.stories.tsx +++ b/packages/ui/src/components/Breadcrumbs/__stories__/AdvancedUsage.stories.tsx @@ -1,5 +1,5 @@ import type { StoryFn } from '@storybook/react' -import { ArrowDownIcon, DotsHorizontalIcon } from '@ultraviolet/icons' +import { ArrowDownIcon, DotsHorizontalIcon, PlusIcon } from '@ultraviolet/icons' import type { ComponentProps } from 'react' import { Breadcrumbs } from '..' import { AvatarV2 } from '../../AvatarV2' @@ -65,12 +65,8 @@ export const AdvancedUsage: StoryFn< justifyContent="end" width="100%" > -
diff --git a/packages/ui/src/components/Breadcrumbs/__stories__/OnClick.stories.tsx b/packages/ui/src/components/Breadcrumbs/__stories__/OnClick.stories.tsx index da34c80697..be571defd3 100644 --- a/packages/ui/src/components/Breadcrumbs/__stories__/OnClick.stories.tsx +++ b/packages/ui/src/components/Breadcrumbs/__stories__/OnClick.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn } from '@storybook/react' +import { RestoreIcon } from '@ultraviolet/icons' import type { ComponentProps } from 'react' import { useCallback, useState } from 'react' import { Breadcrumbs } from '..' @@ -38,13 +39,13 @@ export const OnClick: StoryFn> = props => {
diff --git a/packages/ui/src/components/Bullet/__stories__/Playground.stories.tsx b/packages/ui/src/components/Bullet/__stories__/Playground.stories.tsx index c2603a1f88..cb0a74600e 100644 --- a/packages/ui/src/components/Bullet/__stories__/Playground.stories.tsx +++ b/packages/ui/src/components/Bullet/__stories__/Playground.stories.tsx @@ -3,5 +3,5 @@ import { Template } from './Template' export const Playground = Template.bind({}) Playground.args = { - text: '1', + children: '1', } diff --git a/packages/ui/src/components/Bullet/__stories__/Sentiments.stories.tsx b/packages/ui/src/components/Bullet/__stories__/Sentiments.stories.tsx index 55efabc79e..0a9241c683 100644 --- a/packages/ui/src/components/Bullet/__stories__/Sentiments.stories.tsx +++ b/packages/ui/src/components/Bullet/__stories__/Sentiments.stories.tsx @@ -11,7 +11,9 @@ export const Sentiments: StoryFn = props => ( Prominence default: {SENTIMENTS.map(sentiment => ( - + + 1 + ))} @@ -24,8 +26,9 @@ export const Sentiments: StoryFn = props => ( key={sentiment} sentiment={sentiment} prominence="strong" - text="1" - /> + > + 1 + ))} diff --git a/packages/ui/src/components/Bullet/__stories__/Sizes.stories.tsx b/packages/ui/src/components/Bullet/__stories__/Sizes.stories.tsx index 8653eaeefb..dc8ab236f1 100644 --- a/packages/ui/src/components/Bullet/__stories__/Sizes.stories.tsx +++ b/packages/ui/src/components/Bullet/__stories__/Sizes.stories.tsx @@ -5,7 +5,9 @@ export const Sizes: StoryFn = props => ( <> {(['medium', 'small', 'xsmall', 'xxsmall'] as const).map(size => (
- + + 1 +
))} diff --git a/packages/ui/src/components/Bullet/__stories__/Text.stories.tsx b/packages/ui/src/components/Bullet/__stories__/Text.stories.tsx index 6f3d31d6f4..7015568004 100644 --- a/packages/ui/src/components/Bullet/__stories__/Text.stories.tsx +++ b/packages/ui/src/components/Bullet/__stories__/Text.stories.tsx @@ -1,7 +1,7 @@ import type { StoryFn } from '@storybook/react' import { Bullet } from '..' -export const Text: StoryFn = props => +export const Text: StoryFn = props => A Text.parameters = { docs: { diff --git a/packages/ui/src/components/Bullet/__stories__/Tooltip.stories.tsx b/packages/ui/src/components/Bullet/__stories__/Tooltip.stories.tsx index 883d2d79bd..400ad836d0 100644 --- a/packages/ui/src/components/Bullet/__stories__/Tooltip.stories.tsx +++ b/packages/ui/src/components/Bullet/__stories__/Tooltip.stories.tsx @@ -3,7 +3,7 @@ import { Template } from './Template' export const Tooltip = Template.bind({}) Tooltip.args = { - text: '1', + children: '1', tooltip: 'tooltip text', } diff --git a/packages/ui/src/components/Bullet/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Bullet/__tests__/__snapshots__/index.test.tsx.snap index d9e7a468b9..01545440b7 100644 --- a/packages/ui/src/components/Bullet/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Bullet/__tests__/__snapshots__/index.test.tsx.snap @@ -63,10 +63,10 @@ exports[`Bullet > renders correctly with an icon 1`] = ` .emotion-2 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-2 .fillStroke { @@ -74,10 +74,6 @@ exports[`Bullet > renders correctly with an icon 1`] = ` fill: none; } -.emotion-2 path { - fill: currentColor; -} -
@@ -86,13 +82,10 @@ exports[`Bullet > renders correctly with an icon 1`] = ` >
@@ -127,10 +120,10 @@ exports[`Bullet > renders correctly with an icon and icon variant 1`] = ` .emotion-2 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-2 .fillStroke { @@ -138,10 +131,6 @@ exports[`Bullet > renders correctly with an icon and icon variant 1`] = ` fill: none; } -.emotion-2 path { - fill: currentColor; -} -
@@ -150,14 +139,11 @@ exports[`Bullet > renders correctly with an icon and icon variant 1`] = ` > diff --git a/packages/ui/src/components/Bullet/__tests__/index.test.tsx b/packages/ui/src/components/Bullet/__tests__/index.test.tsx index ac4ba806e8..bcd817f5ab 100644 --- a/packages/ui/src/components/Bullet/__tests__/index.test.tsx +++ b/packages/ui/src/components/Bullet/__tests__/index.test.tsx @@ -1,3 +1,4 @@ +import { MoonIcon, MoonOutlineIcon } from '@ultraviolet/icons' import { shouldMatchEmotionSnapshot } from '@utils/test' import { describe, test } from 'vitest' import { Bullet } from '..' @@ -8,10 +9,18 @@ describe('Bullet', () => { shouldMatchEmotionSnapshot()) test('renders correctly with an icon', () => - shouldMatchEmotionSnapshot()) + shouldMatchEmotionSnapshot( + + + , + )) test('renders correctly with an icon and icon variant', () => - shouldMatchEmotionSnapshot()) + shouldMatchEmotionSnapshot( + + + , + )) describe('sentiment', () => { ;['disabled', ...SENTIMENTS].forEach(sentiment => { diff --git a/packages/ui/src/components/Bullet/index.tsx b/packages/ui/src/components/Bullet/index.tsx index 47ac447ee5..54056c53cc 100644 --- a/packages/ui/src/components/Bullet/index.tsx +++ b/packages/ui/src/components/Bullet/index.tsx @@ -2,8 +2,7 @@ import type { Theme } from '@emotion/react' import styled from '@emotion/styled' -import { Icon } from '@ultraviolet/icons/legacy' -import type { ComponentProps, ReactNode } from 'react' +import type { ReactNode } from 'react' import { SENTIMENTS, SENTIMENTS_WITHOUT_NEUTRAL } from '../../theme' import capitalize from '../../utils/capitalize' import { Tooltip } from '../Tooltip' @@ -110,17 +109,7 @@ type BulletProps = { 'data-testid'?: string prominence?: ProminenceType children?: ReactNode - /** - * @deprecated Add the icon directly into the children - */ - icon?: ComponentProps['name'] - /** - * @deprecated Add the icon directly into the children - */ - iconVariant?: ComponentProps['variant'] - /** - * @deprecated Add the text directly into the children - */ + /** @deprecated Use children instead */ text?: string } @@ -131,8 +120,6 @@ export const Bullet = ({ className, sentiment = 'neutral', size = 'medium', - icon, - iconVariant, text, tooltip, tooltipBaseId, @@ -148,7 +135,7 @@ export const Bullet = ({ data-testid={dataTestId} prominence={prominence} > - {icon ? : text} + {text} {children} diff --git a/packages/ui/src/components/Button/__stories__/Size.stories.tsx b/packages/ui/src/components/Button/__stories__/Size.stories.tsx index d9f49d2c17..1de17cfbe9 100644 --- a/packages/ui/src/components/Button/__stories__/Size.stories.tsx +++ b/packages/ui/src/components/Button/__stories__/Size.stories.tsx @@ -1,11 +1,13 @@ import type { StoryFn } from '@storybook/react' +import { PencilIcon } from '@ultraviolet/icons' import { Button, buttonSizes } from '..' import { Stack } from '../..' export const Size: StoryFn = args => ( {buttonSizes.map(size => ( - ))} diff --git a/packages/ui/src/components/Button/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Button/__tests__/__snapshots__/index.test.tsx.snap index 0c1dda93ff..350b33d4b0 100644 --- a/packages/ui/src/components/Button/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Button/__tests__/__snapshots__/index.test.tsx.snap @@ -493,10 +493,10 @@ exports[`Button > render with icon 1`] = ` .emotion-2 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-2 .fillStroke { @@ -504,10 +504,6 @@ exports[`Button > render with icon 1`] = ` fill: none; } -.emotion-2 path { - fill: currentColor; -} -
@@ -518,17 +514,13 @@ exports[`Button > render with icon 1`] = ` > Hello @@ -547,9 +539,9 @@ exports[`Button > render with icon on the right 1`] = ` position: relative; height: 3rem; padding: 0 1rem; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; @@ -589,10 +581,10 @@ exports[`Button > render with icon on the right 1`] = ` .emotion-2 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-2 .fillStroke { @@ -600,10 +592,6 @@ exports[`Button > render with icon on the right 1`] = ` fill: none; } -.emotion-2 path { - fill: currentColor; -} -
@@ -612,22 +600,18 @@ exports[`Button > render with icon on the right 1`] = ` disabled="" type="button" > + Hello - Hello
@@ -643,13 +627,13 @@ exports[`Button > render with icon only 1`] = ` position: relative; height: 3rem; padding: 0 1rem; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 3rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -685,10 +669,10 @@ exports[`Button > render with icon only 1`] = ` .emotion-2 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-2 .fillStroke { @@ -696,10 +680,6 @@ exports[`Button > render with icon only 1`] = ` fill: none; } -.emotion-2 path { - fill: currentColor; -} -
@@ -710,17 +690,12 @@ exports[`Button > render with icon only 1`] = ` > - @@ -787,6 +762,20 @@ exports[`Button > render with isLoading with icon 1`] = ` transition: stroke-dashoffset 0.5s ease 0s; } +.emotion-5 { + vertical-align: middle; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; +} + +.emotion-5 .fillStroke { + stroke: currentColor; + fill: none; +} +
@@ -827,6 +816,17 @@ exports[`Button > render with isLoading with icon 1`] = ` stroke-width="16" /> + + + + Hello
@@ -870,9 +870,9 @@ exports[`Button > render with isLoading with icon variant 1`] = ` line-height: 1.5rem; paragraph-spacing: 0; text-case: none; - background: none; - border: 1px solid #8c40ef; - color: #641cb3; + background: #8c40ef; + border: none; + color: #ffffff; } .emotion-0:hover { @@ -886,18 +886,17 @@ exports[`Button > render with isLoading with icon variant 1`] = ` .emotion-0:hover, .emotion-0:active { - background: #e5dbfd; - color: #521094; - border: 1px solid #792dd4; + background: #792dd4; + color: #f9f9fa; } .emotion-2 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-2 .fillStroke { @@ -905,10 +904,6 @@ exports[`Button > render with isLoading with icon variant 1`] = ` fill: none; } -.emotion-2 path { - fill: currentColor; -} -
@@ -918,17 +913,12 @@ exports[`Button > render with isLoading with icon variant 1`] = ` > - Hello diff --git a/packages/ui/src/components/Button/__tests__/index.test.tsx b/packages/ui/src/components/Button/__tests__/index.test.tsx index 6eddca76f8..6f95927c46 100644 --- a/packages/ui/src/components/Button/__tests__/index.test.tsx +++ b/packages/ui/src/components/Button/__tests__/index.test.tsx @@ -1,3 +1,4 @@ +import { PencilIcon, PencilOutlineIcon } from '@ultraviolet/icons' import { shouldMatchEmotionSnapshot } from '@utils/test' import { describe, test } from 'vitest' import { Button, buttonSizes, buttonVariants } from '..' @@ -46,26 +47,25 @@ describe('Button', () => { test(`render with icon`, () => shouldMatchEmotionSnapshot( - , )) test(`render with icon on the right`, () => shouldMatchEmotionSnapshot( - , )) test(`render with icon only`, () => shouldMatchEmotionSnapshot( - , )) test(`render with fullWidth`, () => @@ -84,14 +84,16 @@ describe('Button', () => { test(`render with isLoading with icon`, () => shouldMatchEmotionSnapshot( - , )) test(`render with isLoading with icon variant`, () => shouldMatchEmotionSnapshot( - , )) diff --git a/packages/ui/src/components/Button/index.tsx b/packages/ui/src/components/Button/index.tsx index 7a7ea19d08..4370d04309 100644 --- a/packages/ui/src/components/Button/index.tsx +++ b/packages/ui/src/components/Button/index.tsx @@ -2,11 +2,9 @@ import type { Theme } from '@emotion/react' import styled from '@emotion/styled' -import { Icon } from '@ultraviolet/icons/legacy' import type { AriaRole, ButtonHTMLAttributes, - ComponentProps, MouseEventHandler, ReactNode, Ref, @@ -40,20 +38,15 @@ const isMonochrome = (sentiment: ExtendedColor) => // VARIANTS type StyledButtonProps = Required< - Pick< - FinalProps, - 'size' | 'sentiment' | 'disabled' | 'iconPosition' | 'fullWidth' - > -> & { iconOnly: boolean } + Pick +> const coreStyle = ({ theme, size, sentiment, - iconPosition, fullWidth, disabled, - iconOnly, }: { theme: Theme } & StyledButtonProps) => { const font = size === 'large' @@ -63,8 +56,6 @@ const coreStyle = ({ let width = 'auto' if (fullWidth) { width = '100%' - } else if (iconOnly) { - width = `${theme.sizing[SIZE_HEIGHT[size]]}` } return ` @@ -72,7 +63,7 @@ const coreStyle = ({ position: relative; height: ${theme.sizing[SIZE_HEIGHT[size]]}; padding: 0 ${theme.space[SIZE_PADDING_KEY[size]]}; - flex-direction: ${iconPosition === 'right' ? 'row-reverse' : 'row'}; + flex-direction: row; gap: ${theme.space[SIZE_GAP_KEY[size]]}; border-radius: ${theme.radii.default}; box-sizing: border-box; @@ -110,10 +101,7 @@ const coreStyle = ({ } const StyledFilledButton = styled('button', { - shouldForwardProp: prop => - !['size', 'sentiment', 'iconPosition', 'fullWidth', 'iconOnly'].includes( - prop, - ), + shouldForwardProp: prop => !['size', 'sentiment', 'fullWidth'].includes(prop), })` ${args => coreStyle(args)} @@ -142,10 +130,7 @@ const StyledFilledButton = styled('button', { ` const StyledOutlinedButton = styled('button', { - shouldForwardProp: prop => - !['size', 'sentiment', 'iconPosition', 'fullWidth', 'iconOnly'].includes( - prop, - ), + shouldForwardProp: prop => !['size', 'sentiment', 'fullWidth'].includes(prop), })` ${args => coreStyle(args)} @@ -196,10 +181,7 @@ const StyledOutlinedButton = styled('button', { ` const StyledGhostButton = styled('button', { - shouldForwardProp: prop => - !['size', 'sentiment', 'iconPosition', 'fullWidth', 'iconOnly'].includes( - prop, - ), + shouldForwardProp: prop => !['size', 'sentiment', 'fullWidth'].includes(prop), })` ${args => coreStyle(args)} @@ -253,16 +235,6 @@ type CommonProps = { 'data-testid'?: string sentiment?: ExtendedColor disabled?: boolean - /** - * @deprecated `iconPosition` prop is deprecated and will be removed in the next major version. - * You can directly set the icon into the children of the Button component. - */ - iconPosition?: 'left' | 'right' - /** - * @deprecated `iconVariant` prop is deprecated and will be removed in the next major version. - * You can directly set the icon into the children of the Button component. - */ - iconVariant?: ComponentProps['variant'] fullWidth?: boolean isLoading?: boolean 'aria-label'?: string @@ -280,62 +252,13 @@ type CommonProps = { onMouseLeave?: MouseEventHandler } -// @note: using XOR utility was generating some lint erros -type FinalProps = CommonProps & - ( - | { - // Button : Children + optional Icon - children: ReactNode - /** - * @deprecated `iconVariant` prop is deprecated and will be removed in the next major version. - * You can directly set the icon into the children of the Button component. - */ - icon?: ComponentProps['name'] - name?: string - href?: never - target?: never - download?: never - } - | { - // Button : Icon only - children?: never - /** - * @deprecated `iconVariant` prop is deprecated and will be removed in the next major version. - * You can directly set the icon into the children of the Button component. - */ - icon: ComponentProps['name'] - name?: string - href?: never - target?: never - download?: never - } - | { - // Anchor : Children + optional Icon - children: ReactNode - /** - * @deprecated `iconVariant` prop is deprecated and will be removed in the next major version. - * You can directly set the icon into the children of the Button component. - */ - icon?: ComponentProps['name'] - name?: never - href: string - target?: string - download?: string - } - | { - // Anchor : Children + Icon Only - children?: never - /** - * @deprecated `iconVariant` prop is deprecated and will be removed in the next major version. - * You can directly set the icon into the children of the Button component. - */ - icon: ComponentProps['name'] - name?: never - href: string - target?: string - download?: string - } - ) +type FinalProps = CommonProps & { + children: ReactNode + name?: string + href?: string + target?: string + download?: string +} /** * Button component is used to trigger an action or event, such as submitting a form, opening a dialog, @@ -351,9 +274,6 @@ export const Button = forwardRef( variant = 'filled', size = 'large', disabled = false, - icon, - iconPosition = 'left', - iconVariant, fullWidth = false, isLoading = false, children, @@ -383,9 +303,6 @@ export const Button = forwardRef( const content = ( <> - {!isLoading && icon ? ( - - ) : null} {isLoading ? ( ( data-testid={dataTestId} disabled={false} fullWidth={fullWidth} - iconPosition={iconPosition} sentiment={sentiment} size={size} type={type} @@ -424,7 +340,6 @@ export const Button = forwardRef( target={target} download={download} ref={ref as Ref} - iconOnly={!!icon && !children} tabIndex={tabIndex} autoFocus={autoFocus} onMouseDown={onMouseDown} @@ -449,7 +364,6 @@ export const Button = forwardRef( data-testid={dataTestId} disabled={computeIsDisabled} fullWidth={fullWidth} - iconPosition={iconPosition} sentiment={sentiment} size={size} type={type} @@ -461,7 +375,6 @@ export const Button = forwardRef( aria-controls={ariaControls} aria-expanded={ariaExpanded} aria-haspopup={ariaHaspopup} - iconOnly={!!icon && !children} tabIndex={tabIndex} autoFocus={autoFocus} onMouseDown={onMouseDown} diff --git a/packages/ui/src/components/Card/__stories__/Active.stories.tsx b/packages/ui/src/components/Card/__stories__/Active.stories.tsx index 759dd09ff5..04b6166001 100644 --- a/packages/ui/src/components/Card/__stories__/Active.stories.tsx +++ b/packages/ui/src/components/Card/__stories__/Active.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn } from '@storybook/react' +import { CancelIcon, CheckIcon, PencilIcon } from '@ultraviolet/icons' import { useState } from 'react' import { Button } from '../../Button' import { Stack } from '../../Stack' @@ -21,22 +22,22 @@ export const Active: StoryFn = args => { ) : ( - )} diff --git a/packages/ui/src/components/Checkbox/index.tsx b/packages/ui/src/components/Checkbox/index.tsx index 1c011b21ed..1cdfd3b8ec 100644 --- a/packages/ui/src/components/Checkbox/index.tsx +++ b/packages/ui/src/components/Checkbox/index.tsx @@ -2,7 +2,6 @@ import { useTheme } from '@emotion/react' import styled from '@emotion/styled' -import { AsteriskIcon } from '@ultraviolet/icons' import type { InputHTMLAttributes, ReactNode } from 'react' import { forwardRef, useId } from 'react' import { Loader } from '../Loader' @@ -424,9 +423,9 @@ export const Checkbox = forwardRef( ) : null} {required ? ( - - - + + * + ) : null} )} diff --git a/packages/ui/src/components/CheckboxGroup/index.tsx b/packages/ui/src/components/CheckboxGroup/index.tsx index e833e48da7..5765219866 100644 --- a/packages/ui/src/components/CheckboxGroup/index.tsx +++ b/packages/ui/src/components/CheckboxGroup/index.tsx @@ -1,7 +1,6 @@ 'use client' import styled from '@emotion/styled' -import { AsteriskIcon } from '@ultraviolet/icons' import type { ComponentProps, InputHTMLAttributes, ReactNode } from 'react' import { createContext, useContext, useMemo } from 'react' import { Checkbox } from '../Checkbox' @@ -86,10 +85,6 @@ const FieldSet = styled.fieldset` margin: 0; ` -const StyledRequiredIcon = styled(AsteriskIcon)` - vertical-align: super; -` - type CheckboxGroupProps = { legend?: ReactNode value?: string[] @@ -146,7 +141,9 @@ export const CheckboxGroup = ({ > {legend}  {required ? ( - + + * + ) : null} ) : null} diff --git a/packages/ui/src/components/CopyButton/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/CopyButton/__tests__/__snapshots__/index.test.tsx.snap index 504636ca98..bb2d2df84c 100644 --- a/packages/ui/src/components/CopyButton/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/CopyButton/__tests__/__snapshots__/index.test.tsx.snap @@ -28,7 +28,7 @@ exports[`CopyButton > renders correctly 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -72,10 +72,10 @@ exports[`CopyButton > renders correctly 1`] = ` .emotion-4 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { @@ -83,10 +83,6 @@ exports[`CopyButton > renders correctly 1`] = ` fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -105,7 +101,6 @@ exports[`CopyButton > renders correctly 1`] = ` renders correctly sentiment large 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 3rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -196,10 +191,10 @@ exports[`CopyButton > renders correctly sentiment large 1`] = ` .emotion-4 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { @@ -207,10 +202,6 @@ exports[`CopyButton > renders correctly sentiment large 1`] = ` fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -229,7 +220,6 @@ exports[`CopyButton > renders correctly sentiment large 1`] = ` renders correctly sentiment medium 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -320,10 +310,10 @@ exports[`CopyButton > renders correctly sentiment medium 1`] = ` .emotion-4 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { @@ -331,10 +321,6 @@ exports[`CopyButton > renders correctly sentiment medium 1`] = ` fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -353,7 +339,6 @@ exports[`CopyButton > renders correctly sentiment medium 1`] = ` renders correctly sentiment neutral 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -444,10 +429,10 @@ exports[`CopyButton > renders correctly sentiment neutral 1`] = ` .emotion-4 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { @@ -455,10 +440,6 @@ exports[`CopyButton > renders correctly sentiment neutral 1`] = ` fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -477,7 +458,6 @@ exports[`CopyButton > renders correctly sentiment neutral 1`] = ` renders correctly sentiment primary 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -568,10 +548,10 @@ exports[`CopyButton > renders correctly sentiment primary 1`] = ` .emotion-4 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { @@ -579,10 +559,6 @@ exports[`CopyButton > renders correctly sentiment primary 1`] = ` fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -601,7 +577,6 @@ exports[`CopyButton > renders correctly sentiment primary 1`] = ` renders correctly sentiment small 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -692,10 +667,10 @@ exports[`CopyButton > renders correctly sentiment small 1`] = ` .emotion-4 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { @@ -703,10 +678,6 @@ exports[`CopyButton > renders correctly sentiment small 1`] = ` fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -725,7 +696,6 @@ exports[`CopyButton > renders correctly sentiment small 1`] = ` renders correctly sentiment xsmall 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -816,10 +786,10 @@ exports[`CopyButton > renders correctly sentiment xsmall 1`] = ` .emotion-4 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { @@ -827,10 +797,6 @@ exports[`CopyButton > renders correctly sentiment xsmall 1`] = ` fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -849,7 +815,6 @@ exports[`CopyButton > renders correctly sentiment xsmall 1`] = ` renders correctly with bordered 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -941,10 +906,10 @@ exports[`CopyButton > renders correctly with bordered 1`] = ` .emotion-4 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { @@ -952,10 +917,6 @@ exports[`CopyButton > renders correctly with bordered 1`] = ` fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -974,7 +935,6 @@ exports[`CopyButton > renders correctly with bordered 1`] = ` renders correctly with children 1`] = ` .emotion-4 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { @@ -1076,10 +1036,6 @@ exports[`CopyButton > renders correctly with children 1`] = ` fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -1098,7 +1054,6 @@ exports[`CopyButton > renders correctly with children 1`] = ` renders correctly with custom class name 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1190,10 +1145,10 @@ exports[`CopyButton > renders correctly with custom class name 1`] = ` .emotion-4 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { @@ -1201,10 +1156,6 @@ exports[`CopyButton > renders correctly with custom class name 1`] = ` fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -1223,7 +1174,6 @@ exports[`CopyButton > renders correctly with custom class name 1`] = ` renders correctly with custom copied text 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1314,10 +1264,10 @@ exports[`CopyButton > renders correctly with custom copied text 1`] = ` .emotion-4 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { @@ -1325,10 +1275,6 @@ exports[`CopyButton > renders correctly with custom copied text 1`] = ` fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -1347,7 +1293,6 @@ exports[`CopyButton > renders correctly with custom copied text 1`] = ` renders correctly with custom copy text 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1438,10 +1383,10 @@ exports[`CopyButton > renders correctly with custom copy text 1`] = ` .emotion-4 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { @@ -1449,10 +1394,6 @@ exports[`CopyButton > renders correctly with custom copy text 1`] = ` fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -1471,7 +1412,6 @@ exports[`CopyButton > renders correctly with custom copy text 1`] = ` renders correctly with no border 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1562,10 +1502,10 @@ exports[`CopyButton > renders correctly with no border 1`] = ` .emotion-4 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { @@ -1573,10 +1513,6 @@ exports[`CopyButton > renders correctly with no border 1`] = ` fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -1595,7 +1531,6 @@ exports[`CopyButton > renders correctly with no border 1`] = ` + {isCopied ? : } {children} ) diff --git a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap index 1d466a5ae3..46e547e63b 100644 --- a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap @@ -576,7 +576,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -620,10 +620,10 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date .emotion-26 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-26 .fillStroke { @@ -631,10 +631,6 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-29 { color: #3f4250; font-size: 1rem; @@ -894,9 +890,8 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date type="button" > render correctly with showMonthYearPicker with default date type="button" > render correctly with showMonthYearPicker with excluded mon gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1391,10 +1385,10 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon .emotion-26 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-26 .fillStroke { @@ -1402,10 +1396,6 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-29 { color: #3f4250; font-size: 1rem; @@ -1725,9 +1715,8 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon type="button" > render correctly with showMonthYearPicker with excluded mon type="button" > renders correctly with a array of dates to exclude 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4551,10 +4539,10 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = ` .emotion-26 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-26 .fillStroke { @@ -4562,10 +4550,6 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-29 { color: #3f4250; font-size: 1rem; @@ -4914,9 +4898,8 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = ` type="button" > renders correctly with a array of dates to exclude 1`] = ` type="button" > renders correctly with date-fns locale es 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -5670,10 +5652,10 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` .emotion-26 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-26 .fillStroke { @@ -5681,10 +5663,6 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-29 { color: #3f4250; font-size: 1rem; @@ -5884,9 +5862,8 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = ` type="button" > renders correctly with date-fns locale es 1`] = ` type="button" > renders correctly with date-fns locale fr 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -6637,10 +6613,10 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` .emotion-26 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-26 .fillStroke { @@ -6648,10 +6624,6 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-29 { color: #3f4250; font-size: 1rem; @@ -6851,9 +6823,8 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = ` type="button" > renders correctly with date-fns locale fr 1`] = ` type="button" > renders correctly with date-fns locale ru 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -7604,10 +7574,10 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` .emotion-26 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-26 .fillStroke { @@ -7615,10 +7585,6 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` fill: none; } -.emotion-26 path { - fill: currentColor; -} - .emotion-29 { color: #3f4250; font-size: 1rem; @@ -7818,9 +7784,8 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = ` type="button" > renders correctly with date-fns locale ru 1`] = ` type="button" > renders correctly with input = "calendar 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -8631,10 +8595,10 @@ exports[`DateInput > renders correctly with input = "calendar 1`] = ` .emotion-15 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-15 .fillStroke { @@ -8642,10 +8606,6 @@ exports[`DateInput > renders correctly with input = "calendar 1`] = ` fill: none; } -.emotion-15 path { - fill: currentColor; -} - .emotion-18 { color: #3f4250; font-size: 1rem; @@ -8802,7 +8762,6 @@ exports[`DateInput > renders correctly with input = "calendar 1`] = ` renders correctly with input = "calendar 1`] = ` renders correctly with input = "calendar disabled 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -9349,10 +9307,10 @@ exports[`DateInput > renders correctly with input = "calendar disabled 1`] = ` .emotion-15 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-15 .fillStroke { @@ -9360,10 +9318,6 @@ exports[`DateInput > renders correctly with input = "calendar disabled 1`] = ` fill: none; } -.emotion-15 path { - fill: currentColor; -} - .emotion-18 { color: #b5b7bd; font-size: 1rem; @@ -9512,7 +9466,6 @@ exports[`DateInput > renders correctly with input = "calendar disabled 1`] = ` renders correctly with input = "calendar disabled 1`] = ` { { {yearToShow} {showMonthYearPicker ? : } diff --git a/packages/ui/src/components/Dialog/index.tsx b/packages/ui/src/components/Dialog/index.tsx index 1b45450205..7d85455404 100644 --- a/packages/ui/src/components/Dialog/index.tsx +++ b/packages/ui/src/components/Dialog/index.tsx @@ -1,6 +1,7 @@ 'use client' import styled from '@emotion/styled' +import { AlertCircleIcon, CheckIcon } from '@ultraviolet/icons' import type { ComponentProps } from 'react' import { useMemo } from 'react' import { Bullet } from '../Bullet' @@ -67,12 +68,13 @@ export const BaseDialog = ({ }: DialogProps) => { const headerContent = ( <> - + + {sentiment === 'warning' || sentiment === 'danger' ? ( + + ) : ( + + )} + renders with disclosure and onClose 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -824,7 +824,7 @@ exports[`Drawer > renders with disclosure and onClose 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -868,10 +868,10 @@ exports[`Drawer > renders with disclosure and onClose 1`] = ` .emotion-20 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-20 .fillStroke { @@ -879,17 +879,13 @@ exports[`Drawer > renders with disclosure and onClose 1`] = ` fill: none; } -.emotion-20 path { - fill: currentColor; -} - .emotion-20 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-20 .fillStroke { @@ -897,10 +893,6 @@ exports[`Drawer > renders with disclosure and onClose 1`] = ` fill: none; } -.emotion-20 path { - fill: currentColor; -} -
renders with disclosure and onClose 1`] = ` + ), diff --git a/packages/ui/src/components/EmptyState/__stories__/Playground.stories.tsx b/packages/ui/src/components/EmptyState/__stories__/Playground.stories.tsx index 208990b3cd..45f1e9b463 100644 --- a/packages/ui/src/components/EmptyState/__stories__/Playground.stories.tsx +++ b/packages/ui/src/components/EmptyState/__stories__/Playground.stories.tsx @@ -1,3 +1,4 @@ +import { PlusIcon } from '@ultraviolet/icons' import { Button } from '../../Button' import { Template } from './Template.stories' import kapsuleLogo from './illustrations/kapsule.webp' @@ -10,7 +11,8 @@ Playground.args = { 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', image: kapsuleLogo, primaryButton: ( -
- + } > Action 1 diff --git a/packages/ui/src/components/GlobalAlert/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/GlobalAlert/__tests__/__snapshots__/index.test.tsx.snap index 9f5fb989a6..32f080e796 100644 --- a/packages/ui/src/components/GlobalAlert/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/GlobalAlert/__tests__/__snapshots__/index.test.tsx.snap @@ -89,7 +89,7 @@ exports[`GlobalAlert > renders correctly with all variants > renders correctly v gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -142,10 +142,10 @@ exports[`GlobalAlert > renders correctly with all variants > renders correctly v .emotion-9 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-9 .fillStroke { @@ -153,10 +153,6 @@ exports[`GlobalAlert > renders correctly with all variants > renders correctly v fill: none; } -.emotion-9 path { - fill: currentColor; -} -
@@ -180,7 +176,6 @@ exports[`GlobalAlert > renders correctly with all variants > renders correctly v renders correctly with all variants > renders correctly v gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -334,10 +329,10 @@ exports[`GlobalAlert > renders correctly with all variants > renders correctly v .emotion-9 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-9 .fillStroke { @@ -345,10 +340,6 @@ exports[`GlobalAlert > renders correctly with all variants > renders correctly v fill: none; } -.emotion-9 path { - fill: currentColor; -} -
@@ -372,7 +363,6 @@ exports[`GlobalAlert > renders correctly with all variants > renders correctly v renders correctly with all variants > renders correctly v gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -526,10 +516,10 @@ exports[`GlobalAlert > renders correctly with all variants > renders correctly v .emotion-9 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-9 .fillStroke { @@ -537,10 +527,6 @@ exports[`GlobalAlert > renders correctly with all variants > renders correctly v fill: none; } -.emotion-9 path { - fill: currentColor; -} -
@@ -564,7 +550,6 @@ exports[`GlobalAlert > renders correctly with all variants > renders correctly v renders correctly with buttonText and onClickButton 1`] = gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -773,10 +758,10 @@ exports[`GlobalAlert > renders correctly with buttonText and onClickButton 1`] = .emotion-11 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-11 .fillStroke { @@ -784,10 +769,6 @@ exports[`GlobalAlert > renders correctly with buttonText and onClickButton 1`] = fill: none; } -.emotion-11 path { - fill: currentColor; -} -
@@ -817,7 +798,6 @@ exports[`GlobalAlert > renders correctly with buttonText and onClickButton 1`] = renders correctly with children as component 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -971,10 +951,10 @@ exports[`GlobalAlert > renders correctly with children as component 1`] = ` .emotion-9 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-9 .fillStroke { @@ -982,10 +962,6 @@ exports[`GlobalAlert > renders correctly with children as component 1`] = ` fill: none; } -.emotion-9 path { - fill: currentColor; -} -
@@ -1009,7 +985,6 @@ exports[`GlobalAlert > renders correctly with children as component 1`] = ` renders correctly with closable and onClose 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1163,10 +1138,10 @@ exports[`GlobalAlert > renders correctly with closable and onClose 1`] = ` .emotion-9 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-9 .fillStroke { @@ -1174,10 +1149,6 @@ exports[`GlobalAlert > renders correctly with closable and onClose 1`] = ` fill: none; } -.emotion-9 path { - fill: currentColor; -} -
@@ -1201,7 +1172,6 @@ exports[`GlobalAlert > renders correctly with closable and onClose 1`] = ` renders correctly with default values 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1355,10 +1325,10 @@ exports[`GlobalAlert > renders correctly with default values 1`] = ` .emotion-9 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-9 .fillStroke { @@ -1366,10 +1336,6 @@ exports[`GlobalAlert > renders correctly with default values 1`] = ` fill: none; } -.emotion-9 path { - fill: currentColor; -} -
@@ -1393,7 +1359,6 @@ exports[`GlobalAlert > renders correctly with default values 1`] = ` renders correctly with link 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1717,7 +1682,7 @@ exports[`GlobalAlert > renders correctly with link 1`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1770,10 +1735,10 @@ exports[`GlobalAlert > renders correctly with link 1`] = ` .emotion-11 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-11 .fillStroke { @@ -1781,17 +1746,13 @@ exports[`GlobalAlert > renders correctly with link 1`] = ` fill: none; } -.emotion-11 path { - fill: currentColor; -} - .emotion-11 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-11 .fillStroke { @@ -1799,10 +1760,6 @@ exports[`GlobalAlert > renders correctly with link 1`] = ` fill: none; } -.emotion-11 path { - fill: currentColor; -} -
@@ -1836,7 +1793,6 @@ exports[`GlobalAlert > renders correctly with link 1`] = ` { toggleOpened() onClose?.() }} - /> + > + + ) : null} ) diff --git a/packages/ui/src/components/Link/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Link/__tests__/__snapshots__/index.test.tsx.snap index de57b97e09..c2a46be530 100644 --- a/packages/ui/src/components/Link/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Link/__tests__/__snapshots__/index.test.tsx.snap @@ -816,10 +816,10 @@ exports[`Link > render correctly with href props 2`] = ` .emotion-3 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; margin-left: 0.5rem; } @@ -917,10 +917,10 @@ exports[`Link > render correctly with href props 2`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; margin-left: 0.5rem; } @@ -940,10 +940,10 @@ exports[`Link > render correctly with href props 2`] = ` .emotion-15 { vertical-align: middle; fill: currentColor; - height: 14px; - width: 14px; - min-width: 14px; - min-height: 14px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; margin-left: 0.5rem; } @@ -963,7 +963,7 @@ exports[`Link > render correctly with href props 2`] = ` > render correctly with href props 2`] = ` Hello render correctly with href props 2`] = ` > render correctly with href props 2`] = ` > render correctly with target blank 1`] = ` .emotion-5 { vertical-align: middle; fill: currentColor; - height: 14px; - width: 14px; - min-width: 14px; - min-height: 14px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; margin-left: 0.5rem; } @@ -1677,7 +1677,7 @@ exports[`Link > render correctly with target blank 1`] = ` > ( + > + {expandedRowIds[id] ? : } + ) : null} {children} diff --git a/packages/ui/src/components/List/__stories__/Example.stories.tsx b/packages/ui/src/components/List/__stories__/Example.stories.tsx index 7314348400..35325e91e5 100644 --- a/packages/ui/src/components/List/__stories__/Example.stories.tsx +++ b/packages/ui/src/components/List/__stories__/Example.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn } from '@storybook/react' +import { PencilIcon } from '@ultraviolet/icons' import { useMemo, useState } from 'react' import { List } from '..' import { Button } from '../../Button/index' @@ -70,7 +71,8 @@ export const Example: StoryFn = args => {
A planet description
+ } diff --git a/packages/ui/src/components/List/__stories__/HighlightAnimation.stories.tsx b/packages/ui/src/components/List/__stories__/HighlightAnimation.stories.tsx index 715914655d..ec76ec4df1 100644 --- a/packages/ui/src/components/List/__stories__/HighlightAnimation.stories.tsx +++ b/packages/ui/src/components/List/__stories__/HighlightAnimation.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn } from '@storybook/react' +import { PlusIcon, RestoreIcon } from '@ultraviolet/icons' import { useState } from 'react' import { List } from '..' import { Button } from '../../Button' @@ -28,14 +29,12 @@ export const HighlightAnimation: StoryFn = ({ ...props }) => { return ( - - diff --git a/packages/ui/src/components/Menu/__stories__/Template.stories.tsx b/packages/ui/src/components/Menu/__stories__/Template.stories.tsx index 51f5c23dfc..50a6b948d1 100644 --- a/packages/ui/src/components/Menu/__stories__/Template.stories.tsx +++ b/packages/ui/src/components/Menu/__stories__/Template.stories.tsx @@ -1,14 +1,12 @@ import type { StoryFn } from '@storybook/react' +import { DotsHorizontalIcon } from '@ultraviolet/icons' import { Menu } from '..' import { Button } from '../../index' export const DefaultDisclosure = ( - ) export const Template: StoryFn = ({ diff --git a/packages/ui/src/components/MenuV2/__stories__/Searchable.stories.tsx b/packages/ui/src/components/MenuV2/__stories__/Searchable.stories.tsx index 5ca97032c3..d280fb4416 100644 --- a/packages/ui/src/components/MenuV2/__stories__/Searchable.stories.tsx +++ b/packages/ui/src/components/MenuV2/__stories__/Searchable.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn } from '@storybook/react' +import { DotsHorizontalIcon } from '@ultraviolet/icons' import { MenuV2 } from '..' import { AvatarV2 } from '../../AvatarV2' import { Button } from '../../Button' @@ -10,12 +11,9 @@ export const Searchable: StoryFn = () => ( searchable hideOnClickItem disclosure={ - } > diff --git a/packages/ui/src/components/MenuV2/__stories__/Template.stories.tsx b/packages/ui/src/components/MenuV2/__stories__/Template.stories.tsx index 519dbc174d..7b0535ae02 100644 --- a/packages/ui/src/components/MenuV2/__stories__/Template.stories.tsx +++ b/packages/ui/src/components/MenuV2/__stories__/Template.stories.tsx @@ -1,14 +1,12 @@ import type { StoryFn } from '@storybook/react' +import { DotsHorizontalIcon } from '@ultraviolet/icons' import { MenuV2 } from '..' import { Button } from '../../index' export const DefaultDisclosure = ( - ) export const Template: StoryFn = ({ diff --git a/packages/ui/src/components/Modal/ModalContent.tsx b/packages/ui/src/components/Modal/ModalContent.tsx index ece760b781..0cc3195110 100644 --- a/packages/ui/src/components/Modal/ModalContent.tsx +++ b/packages/ui/src/components/Modal/ModalContent.tsx @@ -1,6 +1,7 @@ 'use client' import styled from '@emotion/styled' +import { CloseIcon } from '@ultraviolet/icons' import type { ComponentProps } from 'react' import type { Modal } from '.' import { Button } from '../Button' @@ -90,10 +91,11 @@ export const ModalContent = ({ onClick={handleClose} variant="ghost" size="small" - icon="close" sentiment="neutral" aria-label="close" - /> + > + + ) : null} diff --git a/packages/ui/src/components/Modal/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Modal/__tests__/__snapshots__/index.test.tsx.snap index add976d281..dd753693a0 100644 --- a/packages/ui/src/components/Modal/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Modal/__tests__/__snapshots__/index.test.tsx.snap @@ -427,7 +427,7 @@ exports[`Modal > renders with disclosure and onClose 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -482,7 +482,7 @@ exports[`Modal > renders with disclosure and onClose 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -526,10 +526,10 @@ exports[`Modal > renders with disclosure and onClose 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -537,17 +537,13 @@ exports[`Modal > renders with disclosure and onClose 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -555,10 +551,6 @@ exports[`Modal > renders with disclosure and onClose 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} -
renders with disclosure and onClose 1`] = ` renders correctly with close button 2`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -159,10 +159,10 @@ exports[`Toaster > renders correctly with close button 2`] = ` .emotion-9 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-9 .fillStroke { @@ -170,10 +170,6 @@ exports[`Toaster > renders correctly with close button 2`] = ` fill: none; } -.emotion-9 path { - fill: currentColor; -} -
@@ -220,7 +216,6 @@ exports[`Toaster > renders correctly with close button 2`] = ` ( + > + + ) export const notification = ( diff --git a/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap index ebf7e08fb3..6601a48552 100644 --- a/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap @@ -295,10 +295,10 @@ exports[`NumberInput > should click on center button 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -309,10 +309,10 @@ exports[`NumberInput > should click on center button 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -487,7 +487,9 @@ exports[`NumberInput > should click on center button 1`] = ` viewBox="0 0 20 20" > @@ -519,7 +521,7 @@ exports[`NumberInput > should click on center button 1`] = ` viewBox="0 0 20 20" > @@ -825,10 +827,10 @@ exports[`NumberInput > should click on min button 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -839,10 +841,10 @@ exports[`NumberInput > should click on min button 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -1017,7 +1019,9 @@ exports[`NumberInput > should click on min button 1`] = ` viewBox="0 0 20 20" > @@ -1049,7 +1053,7 @@ exports[`NumberInput > should click on min button 1`] = ` viewBox="0 0 20 20" > @@ -1355,10 +1359,10 @@ exports[`NumberInput > should click on plus button with a step value 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -1369,10 +1373,10 @@ exports[`NumberInput > should click on plus button with a step value 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -1547,7 +1551,9 @@ exports[`NumberInput > should click on plus button with a step value 1`] = ` viewBox="0 0 20 20" > @@ -1579,7 +1585,7 @@ exports[`NumberInput > should click on plus button with a step value 1`] = ` viewBox="0 0 20 20" > @@ -1885,10 +1891,10 @@ exports[`NumberInput > should click on plus button with a step value and an in-b .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -1899,10 +1905,10 @@ exports[`NumberInput > should click on plus button with a step value and an in-b .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -2077,7 +2083,9 @@ exports[`NumberInput > should click on plus button with a step value and an in-b viewBox="0 0 20 20" > @@ -2109,7 +2117,7 @@ exports[`NumberInput > should click on plus button with a step value and an in-b viewBox="0 0 20 20" > @@ -2415,10 +2423,10 @@ exports[`NumberInput > should focus input and modify value 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -2429,10 +2437,10 @@ exports[`NumberInput > should focus input and modify value 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -2607,7 +2615,9 @@ exports[`NumberInput > should focus input and modify value 1`] = ` viewBox="0 0 20 20" > @@ -2639,7 +2649,7 @@ exports[`NumberInput > should focus input and modify value 1`] = ` viewBox="0 0 20 20" > @@ -2945,10 +2955,10 @@ exports[`NumberInput > should focus input and modify value onMaxCrossed 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -2959,10 +2969,10 @@ exports[`NumberInput > should focus input and modify value onMaxCrossed 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -3214,10 +3224,10 @@ exports[`NumberInput > should focus input and modify value onMaxCrossed 1`] = ` .emotion-20 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-20 .fillStroke { @@ -3228,10 +3238,10 @@ exports[`NumberInput > should focus input and modify value onMaxCrossed 1`] = ` .emotion-20 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-20 .fillStroke { @@ -3263,7 +3273,9 @@ exports[`NumberInput > should focus input and modify value onMaxCrossed 1`] = ` viewBox="0 0 20 20" > @@ -3296,7 +3308,7 @@ exports[`NumberInput > should focus input and modify value onMaxCrossed 1`] = ` viewBox="0 0 20 20" > @@ -3584,10 +3596,10 @@ exports[`NumberInput > should focus input and modify value onMinCrossed 1`] = ` .emotion-9 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -3598,10 +3610,10 @@ exports[`NumberInput > should focus input and modify value onMinCrossed 1`] = ` .emotion-9 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -3871,10 +3883,10 @@ exports[`NumberInput > should focus input and modify value onMinCrossed 1`] = ` .emotion-20 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-20 .fillStroke { @@ -3885,10 +3897,10 @@ exports[`NumberInput > should focus input and modify value onMinCrossed 1`] = ` .emotion-20 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-20 .fillStroke { @@ -3921,7 +3933,9 @@ exports[`NumberInput > should focus input and modify value onMinCrossed 1`] = ` viewBox="0 0 20 20" > @@ -3953,7 +3967,7 @@ exports[`NumberInput > should focus input and modify value onMinCrossed 1`] = ` viewBox="0 0 20 20" > @@ -4259,10 +4273,10 @@ exports[`NumberInput > should increase and decrease input with arrow up and down .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -4273,10 +4287,10 @@ exports[`NumberInput > should increase and decrease input with arrow up and down .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -4528,10 +4542,10 @@ exports[`NumberInput > should increase and decrease input with arrow up and down .emotion-20 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-20 .fillStroke { @@ -4542,10 +4556,10 @@ exports[`NumberInput > should increase and decrease input with arrow up and down .emotion-20 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-20 .fillStroke { @@ -4577,7 +4591,9 @@ exports[`NumberInput > should increase and decrease input with arrow up and down viewBox="0 0 20 20" > @@ -4610,7 +4626,7 @@ exports[`NumberInput > should increase and decrease input with arrow up and down viewBox="0 0 20 20" > @@ -4916,10 +4932,10 @@ exports[`NumberInput > should increase and decrease input with arrow up and down .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -4930,10 +4946,10 @@ exports[`NumberInput > should increase and decrease input with arrow up and down .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -5185,10 +5201,10 @@ exports[`NumberInput > should increase and decrease input with arrow up and down .emotion-20 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-20 .fillStroke { @@ -5199,10 +5215,10 @@ exports[`NumberInput > should increase and decrease input with arrow up and down .emotion-20 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-20 .fillStroke { @@ -5234,7 +5250,9 @@ exports[`NumberInput > should increase and decrease input with arrow up and down viewBox="0 0 20 20" > @@ -5267,7 +5285,7 @@ exports[`NumberInput > should increase and decrease input with arrow up and down viewBox="0 0 20 20" > @@ -5573,10 +5591,10 @@ exports[`NumberInput > should not changed controlled value on click min button 1 .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -5587,10 +5605,10 @@ exports[`NumberInput > should not changed controlled value on click min button 1 .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -5765,7 +5783,9 @@ exports[`NumberInput > should not changed controlled value on click min button 1 viewBox="0 0 20 20" > @@ -5797,7 +5817,7 @@ exports[`NumberInput > should not changed controlled value on click min button 1 viewBox="0 0 20 20" > @@ -5958,10 +5978,10 @@ exports[`NumberInput > should renders correctly 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -6060,7 +6080,9 @@ exports[`NumberInput > should renders correctly 1`] = ` viewBox="0 0 20 20" > @@ -6089,7 +6111,7 @@ exports[`NumberInput > should renders correctly 1`] = ` viewBox="0 0 20 20" > @@ -6328,10 +6350,10 @@ exports[`NumberInput > should renders correctly disabled 1`] = ` .emotion-9 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -6498,7 +6520,9 @@ exports[`NumberInput > should renders correctly disabled 1`] = ` viewBox="0 0 20 20" > @@ -6529,7 +6553,7 @@ exports[`NumberInput > should renders correctly disabled 1`] = ` viewBox="0 0 20 20" > @@ -6835,10 +6859,10 @@ exports[`NumberInput > should renders correctly max value 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -6849,10 +6873,10 @@ exports[`NumberInput > should renders correctly max value 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -7018,7 +7042,9 @@ exports[`NumberInput > should renders correctly max value 1`] = ` viewBox="0 0 20 20" > @@ -7047,7 +7073,7 @@ exports[`NumberInput > should renders correctly max value 1`] = ` viewBox="0 0 20 20" > @@ -7353,10 +7379,10 @@ exports[`NumberInput > should renders correctly min value 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -7367,10 +7393,10 @@ exports[`NumberInput > should renders correctly min value 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -7536,7 +7562,9 @@ exports[`NumberInput > should renders correctly min value 1`] = ` viewBox="0 0 20 20" > @@ -7565,7 +7593,7 @@ exports[`NumberInput > should renders correctly min value 1`] = ` viewBox="0 0 20 20" > @@ -7871,10 +7899,10 @@ exports[`NumberInput > should renders correctly with error 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -7885,10 +7913,10 @@ exports[`NumberInput > should renders correctly with error 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -8066,7 +8094,9 @@ exports[`NumberInput > should renders correctly with error 1`] = ` viewBox="0 0 20 20" > @@ -8095,7 +8125,7 @@ exports[`NumberInput > should renders correctly with error 1`] = ` viewBox="0 0 20 20" > @@ -8406,10 +8436,10 @@ exports[`NumberInput > should renders correctly with placeholder 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -8420,10 +8450,10 @@ exports[`NumberInput > should renders correctly with placeholder 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -8589,7 +8619,9 @@ exports[`NumberInput > should renders correctly with placeholder 1`] = ` viewBox="0 0 20 20" > @@ -8619,7 +8651,7 @@ exports[`NumberInput > should renders correctly with placeholder 1`] = ` viewBox="0 0 20 20" > @@ -8925,10 +8957,10 @@ exports[`NumberInput > should renders large size 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -8939,10 +8971,10 @@ exports[`NumberInput > should renders large size 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -9108,7 +9140,9 @@ exports[`NumberInput > should renders large size 1`] = ` viewBox="0 0 20 20" > @@ -9137,7 +9171,7 @@ exports[`NumberInput > should renders large size 1`] = ` viewBox="0 0 20 20" > @@ -9402,10 +9436,10 @@ exports[`NumberInput > should renders small size 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 22px; - width: 22px; - min-width: 22px; - min-height: 22px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-9 .fillStroke { @@ -9542,7 +9576,7 @@ exports[`NumberInput > should renders small size 1`] = ` > should renders small size 1`] = ` > should use maxValue instead of defaultValue if default va .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -9894,10 +9928,10 @@ exports[`NumberInput > should use maxValue instead of defaultValue if default va .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -10149,10 +10183,10 @@ exports[`NumberInput > should use maxValue instead of defaultValue if default va .emotion-20 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-20 .fillStroke { @@ -10163,10 +10197,10 @@ exports[`NumberInput > should use maxValue instead of defaultValue if default va .emotion-20 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-20 .fillStroke { @@ -10198,7 +10232,9 @@ exports[`NumberInput > should use maxValue instead of defaultValue if default va viewBox="0 0 20 20" > @@ -10231,7 +10267,7 @@ exports[`NumberInput > should use maxValue instead of defaultValue if default va viewBox="0 0 20 20" > @@ -10519,10 +10555,10 @@ exports[`NumberInput > should use minValue instead of defaultValue if default va .emotion-9 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -10533,10 +10569,10 @@ exports[`NumberInput > should use minValue instead of defaultValue if default va .emotion-9 { vertical-align: middle; fill: #d8c5fc; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -10806,10 +10842,10 @@ exports[`NumberInput > should use minValue instead of defaultValue if default va .emotion-20 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-20 .fillStroke { @@ -10820,10 +10856,10 @@ exports[`NumberInput > should use minValue instead of defaultValue if default va .emotion-20 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-20 .fillStroke { @@ -10856,7 +10892,9 @@ exports[`NumberInput > should use minValue instead of defaultValue if default va viewBox="0 0 20 20" > @@ -10888,7 +10926,7 @@ exports[`NumberInput > should use minValue instead of defaultValue if default va viewBox="0 0 20 20" > @@ -11194,10 +11232,10 @@ exports[`NumberInput > should use the defaultValue 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -11208,10 +11246,10 @@ exports[`NumberInput > should use the defaultValue 1`] = ` .emotion-9 { vertical-align: middle; fill: #641cb3; - height: 26px; - width: 26px; - min-width: 26px; - min-height: 26px; + height: 1.5rem; + width: 1.5rem; + min-width: 1.5rem; + min-height: 1.5rem; } .emotion-9 .fillStroke { @@ -11386,7 +11424,9 @@ exports[`NumberInput > should use the defaultValue 1`] = ` viewBox="0 0 20 20" > @@ -11418,7 +11458,7 @@ exports[`NumberInput > should use the defaultValue 1`] = ` viewBox="0 0 20 20" > diff --git a/packages/ui/src/components/NumberInput/index.tsx b/packages/ui/src/components/NumberInput/index.tsx index 2ca34e3467..0492e09086 100644 --- a/packages/ui/src/components/NumberInput/index.tsx +++ b/packages/ui/src/components/NumberInput/index.tsx @@ -28,12 +28,6 @@ const containerSizes = { type ContainerSizesType = keyof typeof containerSizes -const iconSizes = { - large: 26, - medium: 24, - small: 22, -} - const BASE_INPUT_WIDTH = 34 const StyledSelectButton = styled(Button)` @@ -363,7 +357,7 @@ export const NumberInput = ({ size="small" > @@ -414,7 +408,7 @@ export const NumberInput = ({ size="small" > diff --git a/packages/ui/src/components/NumberInputV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/NumberInputV2/__tests__/__snapshots__/index.test.tsx.snap index 2f1d7d105f..a4907c2ca8 100644 --- a/packages/ui/src/components/NumberInputV2/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/NumberInputV2/__tests__/__snapshots__/index.test.tsx.snap @@ -264,7 +264,7 @@ exports[`NumberInputV2 > should click on min button 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -319,7 +319,7 @@ exports[`NumberInputV2 > should click on min button 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -363,10 +363,10 @@ exports[`NumberInputV2 > should click on min button 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -374,17 +374,13 @@ exports[`NumberInputV2 > should click on min button 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -392,10 +388,6 @@ exports[`NumberInputV2 > should click on min button 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -648,7 +640,6 @@ exports[`NumberInputV2 > should click on min button 1`] = ` should click on min button 1`] = ` should click on plus button with a step value 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1019,7 +1009,7 @@ exports[`NumberInputV2 > should click on plus button with a step value 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1063,10 +1053,10 @@ exports[`NumberInputV2 > should click on plus button with a step value 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -1074,17 +1064,13 @@ exports[`NumberInputV2 > should click on plus button with a step value 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -1092,10 +1078,6 @@ exports[`NumberInputV2 > should click on plus button with a step value 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -1348,7 +1330,6 @@ exports[`NumberInputV2 > should click on plus button with a step value 1`] = ` should click on plus button with a step value 1`] = ` should click on plus button with a step value and an in gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1718,7 +1698,7 @@ exports[`NumberInputV2 > should click on plus button with a step value and an in gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1762,10 +1742,10 @@ exports[`NumberInputV2 > should click on plus button with a step value and an in .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -1773,17 +1753,13 @@ exports[`NumberInputV2 > should click on plus button with a step value and an in fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -1791,10 +1767,6 @@ exports[`NumberInputV2 > should click on plus button with a step value and an in fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -2047,7 +2019,6 @@ exports[`NumberInputV2 > should click on plus button with a step value and an in should click on plus button with a step value and an in should focus input and modify value 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2417,7 +2387,7 @@ exports[`NumberInputV2 > should focus input and modify value 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2461,10 +2431,10 @@ exports[`NumberInputV2 > should focus input and modify value 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -2472,17 +2442,13 @@ exports[`NumberInputV2 > should focus input and modify value 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -2490,10 +2456,6 @@ exports[`NumberInputV2 > should focus input and modify value 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -2746,7 +2708,6 @@ exports[`NumberInputV2 > should focus input and modify value 1`] = ` should focus input and modify value 1`] = ` should focus input and modify value when value > max 1` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -3117,7 +3077,7 @@ exports[`NumberInputV2 > should focus input and modify value when value > max 1` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -3161,10 +3121,10 @@ exports[`NumberInputV2 > should focus input and modify value when value > max 1` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -3172,17 +3132,13 @@ exports[`NumberInputV2 > should focus input and modify value when value > max 1` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -3190,10 +3146,6 @@ exports[`NumberInputV2 > should focus input and modify value when value > max 1` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -3446,7 +3398,6 @@ exports[`NumberInputV2 > should focus input and modify value when value > max 1` should focus input and modify value when value > max 1` should renders correctly 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -3682,10 +3632,10 @@ exports[`NumberInputV2 > should renders correctly 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -3693,10 +3643,6 @@ exports[`NumberInputV2 > should renders correctly 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -3837,7 +3783,6 @@ exports[`NumberInputV2 > should renders correctly 1`] = ` should renders correctly 1`] = ` should renders correctly all sizes > with size large 1` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4071,10 +4015,10 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size large 1` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -4082,10 +4026,6 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size large 1` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -4226,7 +4166,6 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size large 1` should renders correctly all sizes > with size large 1` should renders correctly all sizes > with size large an gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4460,10 +4398,10 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size large an .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -4471,10 +4409,6 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size large an fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -4638,7 +4572,6 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size large an should renders correctly all sizes > with size large an should renders correctly all sizes > with size medium 1 gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4877,10 +4809,10 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size medium 1 .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -4888,10 +4820,6 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size medium 1 fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -5032,7 +4960,6 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size medium 1 should renders correctly all sizes > with size medium 1 should renders correctly all sizes > with size medium a gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -5266,10 +5192,10 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size medium a .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -5277,10 +5203,6 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size medium a fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -5444,7 +5366,6 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size medium a should renders correctly all sizes > with size medium a should renders correctly all sizes > with size small 1` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -5683,10 +5603,10 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size small 1` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -5694,10 +5614,6 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size small 1` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -5838,7 +5754,6 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size small 1` should renders correctly all sizes > with size small 1` should renders correctly all sizes > with size small an gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -6072,10 +5986,10 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size small an .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -6083,10 +5997,6 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size small an fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -6250,7 +6160,6 @@ exports[`NumberInputV2 > should renders correctly all sizes > with size small an should renders correctly all sizes > with size small an should renders correctly disabled 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -6480,10 +6388,10 @@ exports[`NumberInputV2 > should renders correctly disabled 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -6491,10 +6399,6 @@ exports[`NumberInputV2 > should renders correctly disabled 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -6636,7 +6540,6 @@ exports[`NumberInputV2 > should renders correctly disabled 1`] = ` should renders correctly disabled 1`] = ` should renders correctly max value 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -6872,10 +6774,10 @@ exports[`NumberInputV2 > should renders correctly max value 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -6883,10 +6785,6 @@ exports[`NumberInputV2 > should renders correctly max value 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -7027,7 +6925,6 @@ exports[`NumberInputV2 > should renders correctly max value 1`] = ` should renders correctly max value 1`] = ` should renders correctly min value 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -7261,10 +7157,10 @@ exports[`NumberInputV2 > should renders correctly min value 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -7272,10 +7168,6 @@ exports[`NumberInputV2 > should renders correctly min value 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -7416,7 +7308,6 @@ exports[`NumberInputV2 > should renders correctly min value 1`] = ` should renders correctly min value 1`] = ` should renders correctly with error 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -7650,10 +7540,10 @@ exports[`NumberInputV2 > should renders correctly with error 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -7661,10 +7551,6 @@ exports[`NumberInputV2 > should renders correctly with error 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -7817,7 +7703,6 @@ exports[`NumberInputV2 > should renders correctly with error 1`] = ` should renders correctly with error 1`] = ` should renders correctly with label 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -8069,10 +7953,10 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = ` .emotion-11 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-11 .fillStroke { @@ -8080,10 +7964,6 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = ` fill: none; } -.emotion-11 path { - fill: currentColor; -} - .emotion-14 { display: grid; grid-template-columns: 1fr auto; @@ -8230,7 +8110,6 @@ exports[`NumberInputV2 > should renders correctly with label 1`] = ` should renders correctly with label 1`] = ` should renders correctly with label description 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -8500,10 +8378,10 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = ` .emotion-13 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-13 .fillStroke { @@ -8511,10 +8389,6 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = ` fill: none; } -.emotion-13 path { - fill: currentColor; -} - .emotion-16 { display: grid; grid-template-columns: 1fr auto; @@ -8666,7 +8540,6 @@ exports[`NumberInputV2 > should renders correctly with label description 1`] = ` should renders correctly with label description 1`] = ` should renders correctly with placeholder 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -8900,10 +8772,10 @@ exports[`NumberInputV2 > should renders correctly with placeholder 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -8911,10 +8783,6 @@ exports[`NumberInputV2 > should renders correctly with placeholder 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -9055,7 +8923,6 @@ exports[`NumberInputV2 > should renders correctly with placeholder 1`] = ` should renders correctly with placeholder 1`] = ` should renders correctly with success 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -9289,10 +9155,10 @@ exports[`NumberInputV2 > should renders correctly with success 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -9300,10 +9166,6 @@ exports[`NumberInputV2 > should renders correctly with success 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-11 { display: grid; grid-template-columns: 1fr auto; @@ -9456,7 +9318,6 @@ exports[`NumberInputV2 > should renders correctly with success 1`] = ` should renders correctly with success 1`] = ` + > + + ) : null} + > + + ) : null} diff --git a/packages/ui/src/components/Pagination/PaginationButtons.tsx b/packages/ui/src/components/Pagination/PaginationButtons.tsx index e61f6119a9..fb2a557a49 100644 --- a/packages/ui/src/components/Pagination/PaginationButtons.tsx +++ b/packages/ui/src/components/Pagination/PaginationButtons.tsx @@ -1,6 +1,7 @@ 'use client' import styled from '@emotion/styled' +import { ArrowLeftIcon, ArrowRightIcon } from '@ultraviolet/icons' import { useCallback, useMemo } from 'react' import { Button } from '../Button' import { Stack } from '../Stack' @@ -122,9 +123,10 @@ export const PaginationButtons = ({ variant="outlined" sentiment="primary" onClick={goToPreviousPage} - icon="arrow-left" size={perPage ? 'small' : 'medium'} - /> + > + + {pageNumbersToDisplay.map((pageNumber, index) => ( @@ -151,9 +153,10 @@ export const PaginationButtons = ({ variant="outlined" sentiment="primary" onClick={goToNextPage} - icon="arrow-right" size={perPage ? 'small' : 'medium'} - /> + > + + ) diff --git a/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap index ec3bb33fea..4b63babfed 100644 --- a/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Pagination/__tests__/__snapshots__/index.test.tsx.snap @@ -84,7 +84,7 @@ exports[`Pagination > should render correctly 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -120,10 +120,10 @@ exports[`Pagination > should render correctly 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -131,10 +131,6 @@ exports[`Pagination > should render correctly 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-10 { display: -webkit-box; display: -webkit-flex; @@ -286,7 +282,7 @@ exports[`Pagination > should render correctly 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -349,7 +345,6 @@ exports[`Pagination > should render correctly 1`] = ` should render correctly 1`] = ` should render correctly component with disabled 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -545,10 +539,10 @@ exports[`Pagination > should render correctly component with disabled 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -556,10 +550,6 @@ exports[`Pagination > should render correctly component with disabled 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-10 { display: -webkit-box; display: -webkit-flex; @@ -720,7 +710,6 @@ exports[`Pagination > should render correctly component with disabled 1`] = ` should render correctly component with disabled 1`] = ` should render correctly component with pageTabCount 1`] = gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -941,10 +929,10 @@ exports[`Pagination > should render correctly component with pageTabCount 1`] = .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -952,10 +940,6 @@ exports[`Pagination > should render correctly component with pageTabCount 1`] = fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-10 { display: -webkit-box; display: -webkit-flex; @@ -1132,7 +1116,6 @@ exports[`Pagination > should render correctly component with pageTabCount 1`] = should render correctly component with pageTabCount 1`] = should render correctly with page < 1 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1338,10 +1320,10 @@ exports[`Pagination > should render correctly with page < 1 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -1349,10 +1331,6 @@ exports[`Pagination > should render correctly with page < 1 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-10 { display: -webkit-box; display: -webkit-flex; @@ -1448,7 +1426,7 @@ exports[`Pagination > should render correctly with page < 1 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1511,7 +1489,6 @@ exports[`Pagination > should render correctly with page < 1 1`] = ` should render correctly with page < 1 1`] = ` should render correctly with page > pageCount 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1695,10 +1671,10 @@ exports[`Pagination > should render correctly with page > pageCount 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -1706,10 +1682,6 @@ exports[`Pagination > should render correctly with page > pageCount 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-10 { display: -webkit-box; display: -webkit-flex; @@ -1805,7 +1777,7 @@ exports[`Pagination > should render correctly with page > pageCount 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1858,7 +1830,6 @@ exports[`Pagination > should render correctly with page > pageCount 1`] = ` should render correctly with page > pageCount 1`] = ` should render correctly with pageClick 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2043,10 +2013,10 @@ exports[`Pagination > should render correctly with pageClick 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -2054,10 +2024,6 @@ exports[`Pagination > should render correctly with pageClick 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-10 { display: -webkit-box; display: -webkit-flex; @@ -2234,7 +2200,6 @@ exports[`Pagination > should render correctly with pageClick 1`] = ` should render correctly with pageClick 1`] = ` should render correctly with pageCount is 1 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2442,10 +2406,10 @@ exports[`Pagination > should render correctly with pageCount is 1 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -2453,10 +2417,6 @@ exports[`Pagination > should render correctly with pageCount is 1 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-10 { display: -webkit-box; display: -webkit-flex; @@ -2558,7 +2518,6 @@ exports[`Pagination > should render correctly with pageCount is 1 1`] = ` should render correctly with pageCount is 1 1`] = ` should render correctly with perPage - default values 1`] gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2984,10 +2942,10 @@ exports[`Pagination > should render correctly with perPage - default values 1`] .emotion-30 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-30 .fillStroke { @@ -2995,10 +2953,6 @@ exports[`Pagination > should render correctly with perPage - default values 1`] fill: none; } -.emotion-30 path { - fill: currentColor; -} - .emotion-32 { display: -webkit-box; display: -webkit-flex; @@ -3239,9 +3193,8 @@ exports[`Pagination > should render correctly with perPage - default values 1`] type="button" > should render correctly with perPage - default values 1`] type="button" > should render correctly with perPage 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -3706,10 +3658,10 @@ exports[`Pagination > should render correctly with perPage 1`] = ` .emotion-30 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-30 .fillStroke { @@ -3717,10 +3669,6 @@ exports[`Pagination > should render correctly with perPage 1`] = ` fill: none; } -.emotion-30 path { - fill: currentColor; -} - .emotion-32 { display: -webkit-box; display: -webkit-flex; @@ -3961,9 +3909,8 @@ exports[`Pagination > should render correctly with perPage 1`] = ` type="button" > should render correctly with perPage 1`] = ` type="button" > = props => ( title="Popover Title" content="This is a simple text content inside the popover. You can customize it by passing text into content property." > - + ) diff --git a/packages/ui/src/components/Popover/index.tsx b/packages/ui/src/components/Popover/index.tsx index 09cabe4963..aaec3b010a 100644 --- a/packages/ui/src/components/Popover/index.tsx +++ b/packages/ui/src/components/Popover/index.tsx @@ -1,6 +1,7 @@ 'use client' import styled from '@emotion/styled' +import { CloseIcon } from '@ultraviolet/icons' import type { ComponentProps, ReactNode, Ref } from 'react' import { forwardRef, @@ -77,9 +78,10 @@ const ContentWrapper = ({ sentiment={sentiment === 'neutral' ? 'neutral' : 'primary'} onClick={onClose} size="small" - icon="close" aria-label="close" - /> + > + + {typeof children === 'string' ? ( {legend}  {required ? ( - + + * + ) : null} ) : null} diff --git a/packages/ui/src/components/SelectInput/__stories__/EmptyState.stories.tsx b/packages/ui/src/components/SelectInput/__stories__/EmptyState.stories.tsx index 8d47fc05c5..3b7b5eb8fb 100644 --- a/packages/ui/src/components/SelectInput/__stories__/EmptyState.stories.tsx +++ b/packages/ui/src/components/SelectInput/__stories__/EmptyState.stories.tsx @@ -1,4 +1,5 @@ -import { Icon, Stack, Text } from '../..' +import { InformationOutlineIcon } from '@ultraviolet/icons' +import { Stack, Text } from '../..' import { Template } from './Template.stories' export const EmptyState = Template.bind({}) @@ -6,11 +7,10 @@ EmptyState.args = { name: 'emptyState', emptyState: () => ( - There is currently no option available diff --git a/packages/ui/src/components/SelectInputV2/SelectBar.tsx b/packages/ui/src/components/SelectInputV2/SelectBar.tsx index 9843418207..4c2dfa7928 100644 --- a/packages/ui/src/components/SelectInputV2/SelectBar.tsx +++ b/packages/ui/src/components/SelectInputV2/SelectBar.tsx @@ -5,6 +5,7 @@ import { AlertCircleIcon, ArrowDownIcon, CheckCircleIcon, + CloseIcon, PlusIcon, } from '@ultraviolet/icons' import type { RefObject } from 'react' @@ -424,7 +425,6 @@ export const SelectBar = ({ disabled={disabled || !selectedData.selectedValues[0] || readOnly} variant="ghost" size="small" - icon="close" onClick={event => { event.stopPropagation() setSelectedData({ type: 'clearAll' }) @@ -436,7 +436,9 @@ export const SelectBar = ({ }} sentiment="neutral" data-testid="clear-all" - /> + > + + ) : null} alert('We will enable Warsaw soon!')} > + Contact us ), diff --git a/packages/ui/src/components/SelectableCardGroup/index.tsx b/packages/ui/src/components/SelectableCardGroup/index.tsx index f03b278519..13873d686e 100644 --- a/packages/ui/src/components/SelectableCardGroup/index.tsx +++ b/packages/ui/src/components/SelectableCardGroup/index.tsx @@ -1,7 +1,6 @@ 'use client' import styled from '@emotion/styled' -import { AsteriskIcon } from '@ultraviolet/icons' import type { ComponentProps, InputHTMLAttributes, ReactNode } from 'react' import { createContext, useContext, useMemo } from 'react' import { Row } from '../Row' @@ -83,10 +82,6 @@ const FieldSet = styled.fieldset` margin: 0; ` -const StyledRequiredIcon = styled(AsteriskIcon)` - vertical-align: super; -` - type SelectableCardGroupProps = { legend?: ReactNode value: string | number | (string | number)[] @@ -140,7 +135,9 @@ export const SelectableCardGroup = ({ {legend && <>{legend}  } {required ? ( - + + * + ) : null} ) : null} diff --git a/packages/ui/src/components/Separator/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Separator/__tests__/__snapshots__/index.test.tsx.snap index 972b8a5ced..3bdb95f9e4 100644 --- a/packages/ui/src/components/Separator/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Separator/__tests__/__snapshots__/index.test.tsx.snap @@ -136,22 +136,18 @@ exports[`Separator > renders correctly with custom icon 1`] = ` .emotion-4 { vertical-align: middle; - fill: #3f4250; - height: 24px; - width: 24px; - min-width: 24px; - min-height: 24px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #3f4250; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -166,7 +162,6 @@ exports[`Separator > renders correctly with custom icon 1`] = ` renders correctly with custom icon horizontally 1`] = ` .emotion-4 { vertical-align: middle; - fill: #3f4250; - height: 24px; - width: 24px; - min-width: 24px; - min-height: 24px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #3f4250; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -251,7 +242,6 @@ exports[`Separator > renders correctly with custom icon horizontally 1`] = ` renders correctly with custom icon vertically 1`] = ` .emotion-4 { vertical-align: middle; - fill: #3f4250; - height: 24px; - width: 24px; - min-width: 24px; - min-height: 24px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #3f4250; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -336,7 +322,6 @@ exports[`Separator > renders correctly with custom icon vertically 1`] = ` renders correctly with custom sentiment and icon 1`] = ` .emotion-4 { vertical-align: middle; - fill: #3f4250; - height: 24px; - width: 24px; - min-width: 24px; - min-height: 24px; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-4 .fillStroke { - stroke: #3f4250; + stroke: currentColor; fill: none; } -.emotion-4 path { - fill: currentColor; -} -
@@ -421,7 +402,6 @@ exports[`Separator > renders correctly with custom sentiment and icon 1`] = ` { shouldMatchEmotionSnapshot()) test(`renders correctly with custom icon`, () => - shouldMatchEmotionSnapshot()) + shouldMatchEmotionSnapshot( + + + , + )) test(`renders correctly with custom sentiment and icon`, () => shouldMatchEmotionSnapshot( - , + + + , )) test(`renders correctly with custom icon vertically`, () => shouldMatchEmotionSnapshot( - , + + + , )) test(`renders correctly with custom icon horizontally`, () => shouldMatchEmotionSnapshot( - , + + + , )) }) diff --git a/packages/ui/src/components/Separator/index.tsx b/packages/ui/src/components/Separator/index.tsx index c3fd0b4712..10f7c94dbb 100644 --- a/packages/ui/src/components/Separator/index.tsx +++ b/packages/ui/src/components/Separator/index.tsx @@ -1,8 +1,7 @@ 'use client' import styled from '@emotion/styled' -import { Icon } from '@ultraviolet/icons/legacy' -import type { ComponentProps, ReactNode } from 'react' +import type { ReactNode } from 'react' import type { Color } from '../../theme' type Direction = 'horizontal' | 'vertical' @@ -50,10 +49,6 @@ const StyledHr = styled('hr', { ` type SeparatorProps = { - /** - * @deprecated Use the icon directly in children - */ - icon?: ComponentProps['name'] direction?: Direction thickness?: number /** @@ -74,12 +69,11 @@ export const Separator = ({ thickness = 1, color = 'neutral', sentiment, - icon, className, 'data-testid': dataTestId, children, }: SeparatorProps) => - icon || children ? ( + children ? ( {children} - {icon ? : null} renders correctly 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -150,10 +150,10 @@ exports[`Snippet > renders correctly 1`] = ` .emotion-15 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-15 .fillStroke { @@ -161,10 +161,6 @@ exports[`Snippet > renders correctly 1`] = ` fill: none; } -.emotion-15 path { - fill: currentColor; -} -
@@ -201,7 +197,6 @@ exports[`Snippet > renders correctly 1`] = ` renders correctly in multiline 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -381,10 +376,10 @@ exports[`Snippet > renders correctly in multiline 1`] = ` .emotion-29 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-29 .fillStroke { @@ -392,10 +387,6 @@ exports[`Snippet > renders correctly in multiline 1`] = ` fill: none; } -.emotion-29 path { - fill: currentColor; -} - .emotion-31 { width: 100%; box-shadow: 0px -22px 19px -6px #f9f9fa; @@ -524,7 +515,6 @@ exports[`Snippet > renders correctly in multiline 1`] = ` renders correctly in multiline 1`] = ` > Show  renders correctly in multiline with prefix command 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -744,10 +734,10 @@ exports[`Snippet > renders correctly in multiline with prefix command 1`] = ` .emotion-29 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-29 .fillStroke { @@ -755,10 +745,6 @@ exports[`Snippet > renders correctly in multiline with prefix command 1`] = ` fill: none; } -.emotion-29 path { - fill: currentColor; -} - .emotion-31 { width: 100%; box-shadow: 0px -22px 19px -6px #f9f9fa; @@ -887,7 +873,6 @@ exports[`Snippet > renders correctly in multiline with prefix command 1`] = ` renders correctly in multiline with prefix command 1`] = ` > Show  renders correctly in multiline with prefix lines number 1`] = gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1108,10 +1093,10 @@ exports[`Snippet > renders correctly in multiline with prefix lines number 1`] = .emotion-29 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-29 .fillStroke { @@ -1119,10 +1104,6 @@ exports[`Snippet > renders correctly in multiline with prefix lines number 1`] = fill: none; } -.emotion-29 path { - fill: currentColor; -} - .emotion-31 { width: 100%; box-shadow: 0px -22px 19px -6px #f9f9fa; @@ -1251,7 +1232,6 @@ exports[`Snippet > renders correctly in multiline with prefix lines number 1`] = renders correctly in multiline with prefix lines number 1`] = > Show  renders correctly with copiedText 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1448,10 +1428,10 @@ exports[`Snippet > renders correctly with copiedText 1`] = ` .emotion-15 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-15 .fillStroke { @@ -1459,10 +1439,6 @@ exports[`Snippet > renders correctly with copiedText 1`] = ` fill: none; } -.emotion-15 path { - fill: currentColor; -} -
@@ -1499,7 +1475,6 @@ exports[`Snippet > renders correctly with copiedText 1`] = ` renders correctly with copyText 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1671,10 +1646,10 @@ exports[`Snippet > renders correctly with copyText 1`] = ` .emotion-15 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-15 .fillStroke { @@ -1682,10 +1657,6 @@ exports[`Snippet > renders correctly with copyText 1`] = ` fill: none; } -.emotion-15 path { - fill: currentColor; -} -
@@ -1722,7 +1693,6 @@ exports[`Snippet > renders correctly with copyText 1`] = ` renders correctly with custom number of rows 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1993,7 +1963,7 @@ exports[`Snippet > renders correctly with custom number of rows 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2037,10 +2007,10 @@ exports[`Snippet > renders correctly with custom number of rows 1`] = ` .emotion-27 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-27 .fillStroke { @@ -2048,17 +2018,13 @@ exports[`Snippet > renders correctly with custom number of rows 1`] = ` fill: none; } -.emotion-27 path { - fill: currentColor; -} - .emotion-27 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-27 .fillStroke { @@ -2066,10 +2032,6 @@ exports[`Snippet > renders correctly with custom number of rows 1`] = ` fill: none; } -.emotion-27 path { - fill: currentColor; -} -
@@ -2134,7 +2096,6 @@ exports[`Snippet > renders correctly with custom number of rows 1`] = ` renders correctly with hideText 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2314,10 +2275,10 @@ exports[`Snippet > renders correctly with hideText 1`] = ` .emotion-29 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-29 .fillStroke { @@ -2325,10 +2286,6 @@ exports[`Snippet > renders correctly with hideText 1`] = ` fill: none; } -.emotion-29 path { - fill: currentColor; -} - .emotion-31 { width: 100%; box-shadow: 0px -22px 19px -6px #f9f9fa; @@ -2457,7 +2414,6 @@ exports[`Snippet > renders correctly with hideText 1`] = ` renders correctly with hideText 1`] = ` > Show  renders correctly with initiallyExpanded 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2771,7 +2727,7 @@ exports[`Snippet > renders correctly with initiallyExpanded 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2815,10 +2771,10 @@ exports[`Snippet > renders correctly with initiallyExpanded 1`] = ` .emotion-29 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-29 .fillStroke { @@ -2826,17 +2782,13 @@ exports[`Snippet > renders correctly with initiallyExpanded 1`] = ` fill: none; } -.emotion-29 path { - fill: currentColor; -} - .emotion-29 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-29 .fillStroke { @@ -2844,10 +2796,6 @@ exports[`Snippet > renders correctly with initiallyExpanded 1`] = ` fill: none; } -.emotion-29 path { - fill: currentColor; -} - .emotion-31 { width: 100%; box-shadow: none; @@ -3009,7 +2957,6 @@ exports[`Snippet > renders correctly with initiallyExpanded 1`] = ` renders correctly with initiallyExpanded 1`] = ` > Hide  renders correctly with noExpandable 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -3288,7 +3235,7 @@ exports[`Snippet > renders correctly with noExpandable 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -3332,10 +3279,10 @@ exports[`Snippet > renders correctly with noExpandable 1`] = ` .emotion-27 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-27 .fillStroke { @@ -3343,17 +3290,13 @@ exports[`Snippet > renders correctly with noExpandable 1`] = ` fill: none; } -.emotion-27 path { - fill: currentColor; -} - .emotion-27 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-27 .fillStroke { @@ -3361,10 +3304,6 @@ exports[`Snippet > renders correctly with noExpandable 1`] = ` fill: none; } -.emotion-27 path { - fill: currentColor; -} -
@@ -3429,7 +3368,6 @@ exports[`Snippet > renders correctly with noExpandable 1`] = ` renders correctly with showText 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -3718,7 +3656,7 @@ exports[`Snippet > renders correctly with showText 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -3762,10 +3700,10 @@ exports[`Snippet > renders correctly with showText 1`] = ` .emotion-29 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-29 .fillStroke { @@ -3773,17 +3711,13 @@ exports[`Snippet > renders correctly with showText 1`] = ` fill: none; } -.emotion-29 path { - fill: currentColor; -} - .emotion-29 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-29 .fillStroke { @@ -3791,10 +3725,6 @@ exports[`Snippet > renders correctly with showText 1`] = ` fill: none; } -.emotion-29 path { - fill: currentColor; -} - .emotion-31 { width: 100%; box-shadow: 0px -22px 19px -6px #f9f9fa; @@ -3982,7 +3912,6 @@ exports[`Snippet > renders correctly with showText 1`] = ` renders correctly with showText 1`] = ` > Test  renders correctly with single line with prefix command 1`] = gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4194,10 +4123,10 @@ exports[`Snippet > renders correctly with single line with prefix command 1`] = .emotion-15 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-15 .fillStroke { @@ -4205,10 +4134,6 @@ exports[`Snippet > renders correctly with single line with prefix command 1`] = fill: none; } -.emotion-15 path { - fill: currentColor; -} -
@@ -4245,7 +4170,6 @@ exports[`Snippet > renders correctly with single line with prefix command 1`] = renders correctly with single line with prefix lines number 1 gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4433,10 +4357,10 @@ exports[`Snippet > renders correctly with single line with prefix lines number 1 .emotion-15 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-15 .fillStroke { @@ -4444,10 +4368,6 @@ exports[`Snippet > renders correctly with single line with prefix lines number 1 fill: none; } -.emotion-15 path { - fill: currentColor; -} -
@@ -4484,7 +4404,6 @@ exports[`Snippet > renders correctly with single line with prefix lines number 1 should click on extend button to display full content on 1`] gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4773,7 +4692,7 @@ exports[`Snippet > should click on extend button to display full content on 1`] gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -4817,10 +4736,10 @@ exports[`Snippet > should click on extend button to display full content on 1`] .emotion-29 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-29 .fillStroke { @@ -4828,17 +4747,13 @@ exports[`Snippet > should click on extend button to display full content on 1`] fill: none; } -.emotion-29 path { - fill: currentColor; -} - .emotion-29 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-29 .fillStroke { @@ -4846,10 +4761,6 @@ exports[`Snippet > should click on extend button to display full content on 1`] fill: none; } -.emotion-29 path { - fill: currentColor; -} - .emotion-31 { width: 100%; box-shadow: none; @@ -5011,7 +4922,6 @@ exports[`Snippet > should click on extend button to display full content on 1`] should click on extend button to display full content on 1`] > Hide  ( + + } sentiment="success"> + check success + + }>check default + + ), +] diff --git a/packages/ui/src/components/StepList/__stories__/ComplexChildren.stories.tsx b/packages/ui/src/components/StepList/__stories__/ComplexChildren.stories.tsx new file mode 100644 index 0000000000..2bc6061d65 --- /dev/null +++ b/packages/ui/src/components/StepList/__stories__/ComplexChildren.stories.tsx @@ -0,0 +1,44 @@ +import { CheckIcon } from '@ultraviolet/icons' +import { StepList } from '..' +import { Stack } from '../../Stack' +import { Text } from '../../Text' +import { Template } from './Template.stories' + +export const ComplexChild = Template.bind({}) + +ComplexChild.decorators = [ + () => ( + + } sentiment="success"> + + + Lorem ipsum + + + dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui + officia deserunt mollit anim id est laborum + + + + }> + + + Sed ut perspiciatis + + + unde omnis iste natus error sit voluptatem accusantium doloremque + laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore + veritatis et quasi architecto beatae vitae dicta sunt explicabo. + Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut + fugit, sed quia consequuntur + + + + + ), +] diff --git a/packages/ui/src/components/StepList/__stories__/Disabled.stories.tsx b/packages/ui/src/components/StepList/__stories__/Disabled.stories.tsx new file mode 100644 index 0000000000..20199c64bd --- /dev/null +++ b/packages/ui/src/components/StepList/__stories__/Disabled.stories.tsx @@ -0,0 +1,23 @@ +import { StepList } from '..' +import { Template } from './Template.stories' + +export const Disabled = Template.bind({}) + +Disabled.parameters = { + docs: { + story: { + description: 'Set a disable state using `disabled` property.', + }, + }, +} + +Disabled.decorators = [ + () => ( + + + disabled + + active + + ), +] diff --git a/packages/ui/src/components/StepList/__stories__/Playground.stories.tsx b/packages/ui/src/components/StepList/__stories__/Playground.stories.tsx new file mode 100644 index 0000000000..1bb1300883 --- /dev/null +++ b/packages/ui/src/components/StepList/__stories__/Playground.stories.tsx @@ -0,0 +1,3 @@ +import { Template } from './Template.stories' + +export const Playground = Template.bind({}) diff --git a/packages/ui/src/components/StepList/__stories__/Sentiment.stories.tsx b/packages/ui/src/components/StepList/__stories__/Sentiment.stories.tsx new file mode 100644 index 0000000000..fd078a5884 --- /dev/null +++ b/packages/ui/src/components/StepList/__stories__/Sentiment.stories.tsx @@ -0,0 +1,23 @@ +import { StepList } from '..' +import { Template } from './Template.stories' + +export const Sentiment = Template.bind({}) + +Sentiment.parameters = { + docs: { + story: { + description: 'Set a bullet sentiment state using `sentiment` property.', + }, + }, +} + +Sentiment.decorators = [ + () => ( + + + success + + default + + ), +] diff --git a/packages/ui/src/components/StepList/__stories__/Sizes.stories.tsx b/packages/ui/src/components/StepList/__stories__/Sizes.stories.tsx new file mode 100644 index 0000000000..01d41e7bd8 --- /dev/null +++ b/packages/ui/src/components/StepList/__stories__/Sizes.stories.tsx @@ -0,0 +1,28 @@ +import { StepList } from '..' +import type { Sizes as SizesType } from '..' +import { Template } from './Template.stories' + +export const Sizes = Template.bind({}) + +Sizes.parameters = { + docs: { + story: { + description: 'Set `size` using size property.', + }, + }, +} + +Sizes.decorators = [ + () => ( + + {['small', 'medium'].map((size, index) => ( + + {size} + + ))} + + ), +] diff --git a/packages/ui/src/components/StepList/__stories__/Template.stories.tsx b/packages/ui/src/components/StepList/__stories__/Template.stories.tsx new file mode 100644 index 0000000000..f94222d1e3 --- /dev/null +++ b/packages/ui/src/components/StepList/__stories__/Template.stories.tsx @@ -0,0 +1,11 @@ +import type { StoryFn } from '@storybook/react' +import type { ComponentProps } from 'react' +import { StepList } from '..' + +export const Template: StoryFn> = args => ( + + First + Second + Third + +) diff --git a/packages/ui/src/components/StepList/__stories__/index.stories.tsx b/packages/ui/src/components/StepList/__stories__/index.stories.tsx index 578636262d..93b056d016 100644 --- a/packages/ui/src/components/StepList/__stories__/index.stories.tsx +++ b/packages/ui/src/components/StepList/__stories__/index.stories.tsx @@ -1,9 +1,5 @@ -import type { Meta, StoryFn } from '@storybook/react' -import type { ComponentProps } from 'react' -import type { Sizes as SizesType } from '..' +import type { Meta } from '@storybook/react' import { StepList } from '..' -import { Stack } from '../../Stack' -import { Text } from '../../Text' export default { component: StepList, @@ -14,137 +10,8 @@ export default { title: 'Components/Data Display/StepList', } as Meta -const Template: StoryFn> = args => ( - - First - Second - Third - -) - -export const Default = Template.bind({}) - -export const Sizes = Template.bind({}) -Sizes.parameters = { - docs: { - story: { - description: 'Set `size` using size property.', - }, - }, -} -Sizes.decorators = [ - () => ( - - {['small', 'medium'].map((size, index) => ( - - {size} - - ))} - - ), -] - -export const Disabled = Template.bind({}) -Disabled.parameters = { - docs: { - story: { - description: 'Set a disable state using `disabled` property.', - }, - }, -} -Disabled.decorators = [ - () => ( - - - disabled - - active - - ), -] - -export const Sentiment = Template.bind({}) -Sentiment.parameters = { - docs: { - story: { - description: 'Set a bullet sentiment state using `sentiment` property.', - }, - }, -} -Sentiment.decorators = [ - () => ( - - - success - - default - - ), -] - -export const BulletIcon = Template.bind({}) -BulletIcon.parameters = { - docs: { - story: { - description: 'Set a bullet icon state using `bulletIcon` property.', - }, - }, -} -BulletIcon.decorators = [ - () => ( - - - check success - - check default - - ), -] - -export const ComplexChild = Template.bind({}) -BulletIcon.parameters = { - docs: { - story: { - description: 'With complex child bullet will stay aligned', - }, - }, -} -ComplexChild.decorators = [ - () => ( - - - - - Lorem ipsum - - - dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui - officia deserunt mollit anim id est laborum - - - - - - - Sed ut perspiciatis - - - unde omnis iste natus error sit voluptatem accusantium doloremque - laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore - veritatis et quasi architecto beatae vitae dicta sunt explicabo. - Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut - fugit, sed quia consequuntur - - - - - ), -] +export { Playground } from './Playground.stories' +export { Disabled } from './Disabled.stories' +export { Sentiment } from './Sentiment.stories' +export { Sizes } from './Sizes.stories' +export { BulletIcon } from './BulletIcon.stories' diff --git a/packages/ui/src/components/StepList/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/StepList/__tests__/__snapshots__/index.test.tsx.snap index 295c52cde1..cd587e7d68 100644 --- a/packages/ui/src/components/StepList/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/StepList/__tests__/__snapshots__/index.test.tsx.snap @@ -99,7 +99,7 @@ exports[`StepList > renders correctly 1`] = ` `; -exports[`StepList > renders correctly with bulletIcon & sentiment 1`] = ` +exports[`StepList > renders correctly with bulletContent & sentiment 1`] = ` .emotion-0 { list-style: none; @@ -167,10 +167,10 @@ exports[`StepList > renders correctly with bulletIcon & sentiment 1`] = ` .emotion-6 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-6 .fillStroke { @@ -178,10 +178,6 @@ exports[`StepList > renders correctly with bulletIcon & sentiment 1`] = ` fill: none; } -.emotion-6 path { - fill: currentColor; -} - .emotion-8 { -webkit-flex: 1; -ms-flex: 1; @@ -205,14 +201,11 @@ exports[`StepList > renders correctly with bulletIcon & sentiment 1`] = ` > @@ -228,7 +221,7 @@ exports[`StepList > renders correctly with bulletIcon & sentiment 1`] = ` `; -exports[`StepList > renders correctly with bulletIcon 1`] = ` +exports[`StepList > renders correctly with bulletContent 1`] = ` .emotion-0 { list-style: none; @@ -296,10 +289,10 @@ exports[`StepList > renders correctly with bulletIcon 1`] = ` .emotion-6 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-6 .fillStroke { @@ -307,10 +300,6 @@ exports[`StepList > renders correctly with bulletIcon 1`] = ` fill: none; } -.emotion-6 path { - fill: currentColor; -} - .emotion-8 { -webkit-flex: 1; -ms-flex: 1; @@ -334,14 +323,11 @@ exports[`StepList > renders correctly with bulletIcon 1`] = ` > @@ -425,10 +411,10 @@ exports[`StepList > renders correctly with disabled state & bullet icon 1`] = ` .emotion-6 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-6 .fillStroke { @@ -436,10 +422,6 @@ exports[`StepList > renders correctly with disabled state & bullet icon 1`] = ` fill: none; } -.emotion-6 path { - fill: currentColor; -} - .emotion-8 { -webkit-flex: 1; -ms-flex: 1; @@ -463,9 +445,7 @@ exports[`StepList > renders correctly with disabled state & bullet icon 1`] = ` > { test('renders correctly ', () => shouldMatchEmotionSnapshot( - Item 1 + Item 1 , )) - test('renders correctly with bulletIcon', () => + test('renders correctly with bulletContent', () => shouldMatchEmotionSnapshot( - Item 1 + }> + Item 1 + , )) - test('renders correctly with bulletIcon & sentiment', () => + test('renders correctly with bulletContent & sentiment', () => shouldMatchEmotionSnapshot( - + } + sentiment="success" + > Item 1 , @@ -29,7 +35,7 @@ describe('StepList', () => { test('renders correctly with small size', () => shouldMatchEmotionSnapshot( - + Item 1 small , @@ -38,7 +44,7 @@ describe('StepList', () => { test('renders correctly with disabled state', () => shouldMatchEmotionSnapshot( - +
Item 1 with disabled state
, @@ -47,7 +53,7 @@ describe('StepList', () => { test('renders correctly with disabled state & bullet icon', () => shouldMatchEmotionSnapshot( - + } disabled>
Item 1 with disabled state
 , diff --git a/packages/ui/src/components/StepList/index.tsx b/packages/ui/src/components/StepList/index.tsx index a0a497deb8..1e04139a04 100644 --- a/packages/ui/src/components/StepList/index.tsx +++ b/packages/ui/src/components/StepList/index.tsx @@ -38,10 +38,6 @@ const StyledDiv = styled('div', { export type Sizes = 'small' | 'medium' -type ContentProps = - | { bulletIcon: ComponentProps['icon']; bulletText?: never } - | { bulletIcon?: never; bulletText: string } - type ItemProps = { sentiment?: ComponentProps['sentiment'] prominence?: ComponentProps['prominence'] @@ -50,11 +46,11 @@ type ItemProps = { children: ReactNode onClick?: () => void className?: string -} & ContentProps + bulletContent?: ReactNode +} const Item = ({ - bulletText, - bulletIcon, + bulletContent, sentiment, prominence, children, @@ -64,21 +60,14 @@ const Item = ({ className, }: ItemProps) => ( - {bulletIcon ? ( - - ) : null} - {bulletText ? ( + {bulletContent ? ( + > + {bulletContent} + ) : null} {children} diff --git a/packages/ui/src/components/Stepper/Step.tsx b/packages/ui/src/components/Stepper/Step.tsx index 0c32711729..eb4f3898eb 100644 --- a/packages/ui/src/components/Stepper/Step.tsx +++ b/packages/ui/src/components/Stepper/Step.tsx @@ -2,6 +2,7 @@ import { css, keyframes } from '@emotion/react' import styled from '@emotion/styled' +import { CheckIcon } from '@ultraviolet/icons' import type { ReactNode } from 'react' import { useMemo } from 'react' import { Bullet } from '../Bullet' @@ -240,19 +241,21 @@ export const Step = ({ {isDone && !disabled ? ( + > + + ) : ( + > + {(index + 1).toString()} + )} {title ? ( handles clicks when interactive 1`] = ` .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -400,17 +400,13 @@ exports[`Stepper > handles clicks when interactive 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -418,10 +414,6 @@ exports[`Stepper > handles clicks when interactive 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-10 { color: #3f4250; font-size: 1rem; @@ -660,9 +652,7 @@ exports[`Stepper > handles clicks when interactive 1`] = ` > handles clicks when interactive and small 1`] = ` .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -1115,17 +1105,13 @@ exports[`Stepper > handles clicks when interactive and small 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -1133,10 +1119,6 @@ exports[`Stepper > handles clicks when interactive and small 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-10 { color: #3f4250; font-size: 0.875rem; @@ -1375,9 +1357,7 @@ exports[`Stepper > handles clicks when interactive and small 1`] = ` > handles clicks when not interactive 1`] = ` .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -1830,17 +1810,13 @@ exports[`Stepper > handles clicks when not interactive 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -1848,10 +1824,6 @@ exports[`Stepper > handles clicks when not interactive 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-10 { color: #3f4250; font-size: 0.875rem; @@ -2090,9 +2062,7 @@ exports[`Stepper > handles clicks when not interactive 1`] = ` > renders correctly with all selected 1`] = ` .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -2358,10 +2328,6 @@ exports[`Stepper > renders correctly with all selected 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-10 { color: #3f4250; font-size: 1rem; @@ -2492,9 +2458,7 @@ exports[`Stepper > renders correctly with all selected 1`] = ` > renders correctly with animation 1`] = ` .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -2760,10 +2724,6 @@ exports[`Stepper > renders correctly with animation 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-10 { color: #3f4250; font-size: 1rem; @@ -2894,9 +2854,7 @@ exports[`Stepper > renders correctly with animation 1`] = ` > renders correctly with children 1`] = ` .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -3162,10 +3120,6 @@ exports[`Stepper > renders correctly with children 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-10 { color: #3f4250; font-size: 1rem; @@ -3296,9 +3250,7 @@ exports[`Stepper > renders correctly with children 1`] = ` > renders correctly with default props 1`] = ` .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -3565,10 +3517,6 @@ exports[`Stepper > renders correctly with default props 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-10 { color: #3f4250; font-size: 1rem; @@ -3699,9 +3647,7 @@ exports[`Stepper > renders correctly with default props 1`] = ` > renders correctly with selected prop 1`] = ` .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -4307,10 +4253,6 @@ exports[`Stepper > renders correctly with selected prop 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-10 { color: #3f4250; font-size: 1rem; @@ -4397,9 +4339,7 @@ exports[`Stepper > renders correctly with selected prop 1`] = ` > renders correctly with selected prop 1`] = ` > renders correctly with small size 1`] = ` .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -4675,10 +4613,6 @@ exports[`Stepper > renders correctly with small size 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-10 { color: #3f4250; font-size: 0.875rem; @@ -4809,9 +4743,7 @@ exports[`Stepper > renders correctly with small size 1`] = ` > renders correctly with step number in row 1`] = ` .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -5087,10 +5019,6 @@ exports[`Stepper > renders correctly with step number in row 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-10 { color: #3f4250; font-size: 1rem; @@ -5278,9 +5206,7 @@ exports[`Stepper > renders correctly with step number in row 1`] = ` > renders correctly without Stepper.Step 1`] = ` .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -5741,17 +5667,13 @@ exports[`Stepper > renders correctly without Stepper.Step 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -5759,10 +5681,6 @@ exports[`Stepper > renders correctly without Stepper.Step 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-12 { display: -webkit-box; display: -webkit-flex; @@ -5893,9 +5811,7 @@ exports[`Stepper > renders correctly without Stepper.Step 1`] = ` > renders correctly without separator 1`] = ` .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -6159,10 +6075,6 @@ exports[`Stepper > renders correctly without separator 1`] = ` fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-10 { color: #3f4250; font-size: 1rem; @@ -6293,9 +6205,7 @@ exports[`Stepper > renders correctly without separator 1`] = ` > renders correctly without separator with label on the right 1 .emotion-7 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-7 .fillStroke { @@ -6571,10 +6481,6 @@ exports[`Stepper > renders correctly without separator with label on the right 1 fill: none; } -.emotion-7 path { - fill: currentColor; -} - .emotion-10 { color: #3f4250; font-size: 1rem; @@ -6705,9 +6611,7 @@ exports[`Stepper > renders correctly without separator with label on the right 1 > + > + {expandedRowIds[id] ? : } + ) : null} {children} diff --git a/packages/ui/src/components/Table/__stories__/HighlightAnimation.stories.tsx b/packages/ui/src/components/Table/__stories__/HighlightAnimation.stories.tsx index a8f8f2f3c1..325410ccea 100644 --- a/packages/ui/src/components/Table/__stories__/HighlightAnimation.stories.tsx +++ b/packages/ui/src/components/Table/__stories__/HighlightAnimation.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn } from '@storybook/react' +import { PlusIcon, RestoreIcon } from '@ultraviolet/icons' import { useState } from 'react' import { Table } from '..' import { Button } from '../../Button' @@ -32,14 +33,12 @@ export const HighlightAnimation: StoryFn = ({ ...props }) => { return ( - diff --git a/packages/ui/src/components/Table/__stories__/WithMenu.stories.tsx b/packages/ui/src/components/Table/__stories__/WithMenu.stories.tsx index 38b367234a..4ba49adf02 100644 --- a/packages/ui/src/components/Table/__stories__/WithMenu.stories.tsx +++ b/packages/ui/src/components/Table/__stories__/WithMenu.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn } from '@storybook/react' +import { DotsHorizontalIcon } from '@ultraviolet/icons' import { Table } from '..' import { Button } from '../../Button' import { MenuV2 } from '../../MenuV2' @@ -25,12 +26,9 @@ WithMenu.args = { + } > default (neutral) diff --git a/packages/ui/src/components/Tag/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Tag/__tests__/__snapshots__/index.test.tsx.snap index 38e67ab328..ba19e94ddb 100644 --- a/packages/ui/src/components/Tag/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Tag/__tests__/__snapshots__/index.test.tsx.snap @@ -354,25 +354,7 @@ exports[`Tag > renders correctly with icon 1`] = ` border: solid 1px #d9dadd; } -.emotion-2 { - vertical-align: middle; - fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; -} - -.emotion-2 .fillStroke { - stroke: currentColor; - fill: none; -} - -.emotion-2 path { - fill: currentColor; -} - -.emotion-5 { +.emotion-3 { font-size: 0.75rem; font-family: Inter,Asap,sans-serif; font-weight: 400; @@ -387,28 +369,39 @@ exports[`Tag > renders correctly with icon 1`] = ` max-width: 14.5rem; } +.emotion-5 { + vertical-align: middle; + fill: currentColor; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; +} + +.emotion-5 .fillStroke { + stroke: currentColor; + fill: none; +} +
- - -
+ + + test
@@ -574,7 +567,7 @@ exports[`Tag > renders correctly with onClose 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -625,10 +618,10 @@ exports[`Tag > renders correctly with onClose 1`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -636,10 +629,6 @@ exports[`Tag > renders correctly with onClose 1`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} -
@@ -660,7 +649,6 @@ exports[`Tag > renders correctly with onClose 1`] = ` { shouldMatchEmotionSnapshot(test)) test('renders correctly with icon', () => - shouldMatchEmotionSnapshot(test)) + shouldMatchEmotionSnapshot( + + + test + , + )) test('renders correctly with isLoading', () => shouldMatchEmotionSnapshot(test)) diff --git a/packages/ui/src/components/Tag/index.tsx b/packages/ui/src/components/Tag/index.tsx index a24cf1ced8..073ca261fb 100644 --- a/packages/ui/src/components/Tag/index.tsx +++ b/packages/ui/src/components/Tag/index.tsx @@ -1,8 +1,8 @@ 'use client' import styled from '@emotion/styled' -import { Icon } from '@ultraviolet/icons/legacy' -import type { ComponentProps, MouseEventHandler, ReactNode } from 'react' +import { CloseIcon } from '@ultraviolet/icons' +import type { MouseEventHandler, ReactNode } from 'react' import useClipboard from 'react-use-clipboard' import type { Color } from '../../theme' import { Button } from '../Button' @@ -10,8 +10,6 @@ import { Loader } from '../Loader' import { Text } from '../Text' import { Tooltip } from '../Tooltip' -type IconName = ComponentProps['name'] - const COPY_DURATION = 2500 const StyledContainer = styled('span', { @@ -75,10 +73,6 @@ type TagProps = { onClose?: MouseEventHandler sentiment?: Color disabled?: boolean - /** - * @deprecated Add the icon directly into the children - */ - icon?: IconName copiable?: boolean copyText?: string copiedText?: string @@ -102,16 +96,13 @@ const TagInner = ({ children, isLoading = false, onClose, - icon, disabled = false, }: TagInnerProps) => ( <> - {icon ? : null} {children} - {/* @check: Size issue here, Clickable icon ? */} {onClose && !isLoading ? ( + > + + ) : null} {isLoading ? : null} @@ -136,7 +128,6 @@ export const Tag = ({ children, isLoading, onClose, - icon, copiable = false, copyText = 'Copy', copiedText = 'Copied!', @@ -165,12 +156,7 @@ export const Tag = ({ className={className} data-testid={dataTestId} > - + {children} @@ -184,12 +170,7 @@ export const Tag = ({ className={className} data-testid={dataTestId} > - + {children} diff --git a/packages/ui/src/components/TagInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TagInput/__tests__/__snapshots__/index.test.tsx.snap index 8c0dd73bca..003d0d43a5 100644 --- a/packages/ui/src/components/TagInput/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/TagInput/__tests__/__snapshots__/index.test.tsx.snap @@ -560,10 +560,10 @@ exports[`TagInput > should renders correctly with error 1`] = ` .emotion-10 { vertical-align: middle; fill: #b3144d; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-10 .fillStroke { @@ -613,7 +613,7 @@ exports[`TagInput > should renders correctly with error 1`] = ` > should renders correctly with some tags 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1359,10 +1359,10 @@ exports[`TagInput > should renders correctly with some tags 1`] = ` .emotion-14 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-14 .fillStroke { @@ -1370,10 +1370,6 @@ exports[`TagInput > should renders correctly with some tags 1`] = ` fill: none; } -.emotion-14 path { - fill: currentColor; -} - .emotion-26 { display: -webkit-box; display: -webkit-flex; @@ -1444,7 +1440,6 @@ exports[`TagInput > should renders correctly with some tags 1`] = ` should renders correctly with some tags 1`] = ` should renders correctly with some tags objects 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1687,10 +1681,10 @@ exports[`TagInput > should renders correctly with some tags objects 1`] = ` .emotion-14 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-14 .fillStroke { @@ -1698,10 +1692,6 @@ exports[`TagInput > should renders correctly with some tags objects 1`] = ` fill: none; } -.emotion-14 path { - fill: currentColor; -} - .emotion-26 { display: -webkit-box; display: -webkit-flex; @@ -1772,7 +1762,6 @@ exports[`TagInput > should renders correctly with some tags objects 1`] = ` should renders correctly with some tags objects 1`] = ` should renders correctly with success 1`] = ` .emotion-10 { vertical-align: middle; fill: #22674e; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-10 .fillStroke { @@ -2013,7 +2001,7 @@ exports[`TagInput > should renders correctly with success 1`] = ` > + > + + ) : null} {success ? ( ) : null} {error ? ( ) : null} diff --git a/packages/ui/src/components/TagList/__stories__/Icons.stories.tsx b/packages/ui/src/components/TagList/__stories__/Icons.stories.tsx index 11dd89dc6f..7ce5351ace 100644 --- a/packages/ui/src/components/TagList/__stories__/Icons.stories.tsx +++ b/packages/ui/src/components/TagList/__stories__/Icons.stories.tsx @@ -1,13 +1,14 @@ +import { IdIcon, LockIcon, PlusIcon } from '@ultraviolet/icons' import { Template } from './Template.stories' export const Icons = Template.bind({}) Icons.args = { tags: [ - { label: 'smooth', icon: 'id' }, + { label: 'smooth', icon: }, 'code', - { label: 'hello', icon: 'lock' }, - { label: 'world', icon: 'plus' }, + { label: 'hello', icon: }, + { label: 'world', icon: }, ], threshold: 3, } diff --git a/packages/ui/src/components/TagList/index.tsx b/packages/ui/src/components/TagList/index.tsx index 656be86782..c8c67e6a75 100644 --- a/packages/ui/src/components/TagList/index.tsx +++ b/packages/ui/src/components/TagList/index.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled' import { consoleLightTheme } from '@ultraviolet/themes' import { useEffect, useMemo, useRef, useState } from 'react' -import type { ComponentProps } from 'react' +import type { ComponentProps, ReactNode } from 'react' import { Popover } from '../Popover' import { Tag } from '../Tag' @@ -58,9 +58,7 @@ const StyledTagContainer = styled.div<{ `}; ` -export type TagType = - | string - | { label: string; icon: NonNullable['icon']> } +export type TagType = string | { label: string; icon: ReactNode } type TagListProps = { /** @@ -290,9 +288,9 @@ export const TagList = ({ copiable={copiable} copyText={copyText} copiedText={copiedText} - icon={typeof tag === 'object' ? tag.icon : undefined} className={isEllipsis ? 'ellipsed' : ''} > + {typeof tag !== 'string' && tag.icon ? tag.icon : null} {getTagLabel(tag)} ) diff --git a/packages/ui/src/components/TextArea/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TextArea/__tests__/__snapshots__/index.test.tsx.snap index 95452a788d..af10a653f2 100644 --- a/packages/ui/src/components/TextArea/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/TextArea/__tests__/__snapshots__/index.test.tsx.snap @@ -98,7 +98,7 @@ exports[`TextArea > should render correctly when input has a error sentiment 1` color: #3f4250; border-radius: 0.25rem; padding: 0.75rem 0.5rem 0.75rem 1rem; - padding-right: calc(1.5rem + 0px + 16px); + padding-right: calc(1.5rem + 0px + smallpx); } .emotion-7::-webkit-input-placeholder { @@ -409,7 +409,7 @@ exports[`TextArea > should render correctly when input has a success sentiment 1 color: #3f4250; border-radius: 0.25rem; padding: 0.75rem 0.5rem 0.75rem 1rem; - padding-right: calc(1.5rem + 0px + 16px); + padding-right: calc(1.5rem + 0px + smallpx); } .emotion-7::-webkit-input-placeholder { @@ -528,10 +528,10 @@ exports[`TextArea > should render correctly when input has a success sentiment 1 .emotion-11 { vertical-align: middle; fill: #22674e; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-11 .fillStroke { @@ -596,7 +596,7 @@ exports[`TextArea > should render correctly when input has a success sentiment 1 > should render with AutoExpandMax 1`] = ` color: #3f4250; border-radius: 0.25rem; padding: 0.75rem 0.5rem 0.75rem 1rem; - padding-right: calc(1.5rem + 0px + 16px); + padding-right: calc(1.5rem + 0px + smallpx); } .emotion-7::-webkit-input-placeholder { @@ -2577,7 +2577,7 @@ exports[`TextArea > should render with AutoExpandMax and rows 1`] = ` color: #3f4250; border-radius: 0.25rem; padding: 0.75rem 0.5rem 0.75rem 1rem; - padding-right: calc(1.5rem + 0px + 16px); + padding-right: calc(1.5rem + 0px + smallpx); } .emotion-7::-webkit-input-placeholder { @@ -2889,7 +2889,7 @@ exports[`TextArea > should render with auto rows 1`] = ` color: #3f4250; border-radius: 0.25rem; padding: 0.75rem 0.5rem 0.75rem 1rem; - padding-right: calc(1.5rem + 0px + 16px); + padding-right: calc(1.5rem + 0px + smallpx); } .emotion-7::-webkit-input-placeholder { diff --git a/packages/ui/src/components/TextArea/index.tsx b/packages/ui/src/components/TextArea/index.tsx index 2786978657..9f66e02488 100644 --- a/packages/ui/src/components/TextArea/index.tsx +++ b/packages/ui/src/components/TextArea/index.tsx @@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react' import styled from '@emotion/styled' -import { AlertCircleIcon, CheckCircleIcon } from '@ultraviolet/icons' +import { AlertCircleIcon, CheckCircleIcon, CloseIcon } from '@ultraviolet/icons' import type { DOMAttributes, ReactNode } from 'react' import { forwardRef, @@ -20,7 +20,7 @@ import { Stack } from '../Stack' import { Text } from '../Text' import { Tooltip } from '../Tooltip' -const STATE_ICON_SIZE = 16 +const STATE_ICON_SIZE = 'small' const StyledTextAreaWrapper = styled.div` position: relative; @@ -288,12 +288,13 @@ export const TextArea = forwardRef( aria-label="clear value" variant="ghost" size="xsmall" - icon="close" onClick={() => { onChange('') }} sentiment="neutral" - /> + > + + ) : null} {success ? ( diff --git a/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap index 3f8beb96f3..d89a657e93 100644 --- a/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap @@ -284,7 +284,7 @@ exports[`TextInput > should handle events on random button 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -339,7 +339,7 @@ exports[`TextInput > should handle events on random button 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -383,10 +383,10 @@ exports[`TextInput > should handle events on random button 1`] = ` .emotion-10 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-10 .fillStroke { @@ -394,17 +394,13 @@ exports[`TextInput > should handle events on random button 1`] = ` fill: none; } -.emotion-10 path { - fill: currentColor; -} - .emotion-10 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-10 .fillStroke { @@ -412,10 +408,6 @@ exports[`TextInput > should handle events on random button 1`] = ` fill: none; } -.emotion-10 path { - fill: currentColor; -} - .emotion-12 { height: auto; } @@ -474,25 +466,19 @@ exports[`TextInput > should handle events on random button 1`] = ` > @@ -796,7 +782,7 @@ exports[`TextInput > should handle events on toggleable password 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -851,7 +837,7 @@ exports[`TextInput > should handle events on toggleable password 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -895,10 +881,10 @@ exports[`TextInput > should handle events on toggleable password 1`] = ` .emotion-10 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-10 .fillStroke { @@ -906,17 +892,13 @@ exports[`TextInput > should handle events on toggleable password 1`] = ` fill: none; } -.emotion-10 path { - fill: currentColor; -} - .emotion-10 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-10 .fillStroke { @@ -924,10 +906,6 @@ exports[`TextInput > should handle events on toggleable password 1`] = ` fill: none; } -.emotion-10 path { - fill: currentColor; -} - .emotion-12 { height: auto; } @@ -986,18 +964,14 @@ exports[`TextInput > should handle events on toggleable password 1`] = ` > @@ -3655,7 +3629,7 @@ exports[`TextInput > should render correctly with multiple right components 1`] gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -3710,7 +3684,7 @@ exports[`TextInput > should render correctly with multiple right components 1`] gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -3754,10 +3728,10 @@ exports[`TextInput > should render correctly with multiple right components 1`] .emotion-17 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-17 .fillStroke { @@ -3765,17 +3739,13 @@ exports[`TextInput > should render correctly with multiple right components 1`] fill: none; } -.emotion-17 path { - fill: currentColor; -} - .emotion-17 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-17 .fillStroke { @@ -3783,10 +3753,6 @@ exports[`TextInput > should render correctly with multiple right components 1`] fill: none; } -.emotion-17 path { - fill: currentColor; -} - .emotion-23 { vertical-align: middle; fill: #22674e; @@ -3914,18 +3880,14 @@ exports[`TextInput > should render correctly with multiple right components 1`] > @@ -3937,30 +3899,24 @@ exports[`TextInput > should render correctly with multiple right components 1`] > should render random 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -6994,7 +6950,7 @@ exports[`TextInput > should render random 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -7038,10 +6994,10 @@ exports[`TextInput > should render random 1`] = ` .emotion-10 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-10 .fillStroke { @@ -7049,17 +7005,13 @@ exports[`TextInput > should render random 1`] = ` fill: none; } -.emotion-10 path { - fill: currentColor; -} - .emotion-10 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-10 .fillStroke { @@ -7067,10 +7019,6 @@ exports[`TextInput > should render random 1`] = ` fill: none; } -.emotion-10 path { - fill: currentColor; -} - .emotion-12 { height: auto; } @@ -7127,25 +7075,19 @@ exports[`TextInput > should render random 1`] = ` > @@ -7395,7 +7337,7 @@ exports[`TextInput > should render random 2`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -7430,10 +7372,10 @@ exports[`TextInput > should render random 2`] = ` .emotion-12 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-12 .fillStroke { @@ -7441,17 +7383,13 @@ exports[`TextInput > should render random 2`] = ` fill: none; } -.emotion-12 path { - fill: currentColor; -} - .emotion-12 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-12 .fillStroke { @@ -7459,10 +7397,6 @@ exports[`TextInput > should render random 2`] = ` fill: none; } -.emotion-12 path { - fill: currentColor; -} - .emotion-14 { height: auto; } @@ -7529,25 +7463,19 @@ exports[`TextInput > should render random 2`] = ` > @@ -7829,7 +7757,7 @@ exports[`TextInput > should render random with required 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -7884,7 +7812,7 @@ exports[`TextInput > should render random with required 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -7928,10 +7856,10 @@ exports[`TextInput > should render random with required 1`] = ` .emotion-15 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-15 .fillStroke { @@ -7939,17 +7867,13 @@ exports[`TextInput > should render random with required 1`] = ` fill: none; } -.emotion-15 path { - fill: currentColor; -} - .emotion-15 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-15 .fillStroke { @@ -7957,10 +7881,6 @@ exports[`TextInput > should render random with required 1`] = ` fill: none; } -.emotion-15 path { - fill: currentColor; -} - .emotion-17 { height: auto; } @@ -8028,25 +7948,19 @@ exports[`TextInput > should render random with required 1`] = ` > @@ -8220,7 +8134,7 @@ exports[`TextInput > should render toggleable password 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -8264,10 +8178,10 @@ exports[`TextInput > should render toggleable password 1`] = ` .emotion-10 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-10 .fillStroke { @@ -8275,10 +8189,6 @@ exports[`TextInput > should render toggleable password 1`] = ` fill: none; } -.emotion-10 path { - fill: currentColor; -} - .emotion-12 { height: auto; } @@ -8335,18 +8245,14 @@ exports[`TextInput > should render toggleable password 1`] = ` > @@ -8629,7 +8535,7 @@ exports[`TextInput > should render toggleable password with required 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -8684,7 +8590,7 @@ exports[`TextInput > should render toggleable password with required 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -8728,10 +8634,10 @@ exports[`TextInput > should render toggleable password with required 1`] = ` .emotion-15 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-15 .fillStroke { @@ -8739,17 +8645,13 @@ exports[`TextInput > should render toggleable password with required 1`] = ` fill: none; } -.emotion-15 path { - fill: currentColor; -} - .emotion-15 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-15 .fillStroke { @@ -8757,10 +8659,6 @@ exports[`TextInput > should render toggleable password with required 1`] = ` fill: none; } -.emotion-15 path { - fill: currentColor; -} - .emotion-17 { height: auto; } @@ -8828,18 +8726,14 @@ exports[`TextInput > should render toggleable password with required 1`] = ` > diff --git a/packages/ui/src/components/TextInput/index.tsx b/packages/ui/src/components/TextInput/index.tsx index a97583daf3..2b270ad167 100644 --- a/packages/ui/src/components/TextInput/index.tsx +++ b/packages/ui/src/components/TextInput/index.tsx @@ -3,7 +3,13 @@ import { css } from '@emotion/react' import styled from '@emotion/styled' import randomName from '@scaleway/random-name' -import { CheckIcon, CloseIcon } from '@ultraviolet/icons' +import { + AutoFixIcon, + CheckIcon, + CloseIcon, + EyeIcon, + EyeOffIcon, +} from '@ultraviolet/icons' import type { ChangeEvent, FocusEventHandler, @@ -505,9 +511,10 @@ export const TextInput = forwardRef< onClick={handlePassVisibilityClick} variant="ghost" sentiment="neutral" - icon={passwordVisible ? 'eye-off' : 'eye'} size="small" - />, + > + {passwordVisible ? : } + , ) } if (random) { @@ -520,11 +527,12 @@ export const TextInput = forwardRef< aria-label="randomize" onClick={handleClickRandomize} disabled={disabled} - icon="auto-fix" variant="ghost" sentiment="neutral" size="small" - />, + > + + , ) } if (valid === false || valid === true) { diff --git a/packages/ui/src/components/TextInputV2/index.tsx b/packages/ui/src/components/TextInputV2/index.tsx index 8a113414b3..5d14b9c49e 100644 --- a/packages/ui/src/components/TextInputV2/index.tsx +++ b/packages/ui/src/components/TextInputV2/index.tsx @@ -1,7 +1,14 @@ 'use client' import styled from '@emotion/styled' -import { AlertCircleIcon, CheckCircleIcon } from '@ultraviolet/icons' +import { + AlertCircleIcon, + AutoFixIcon, + CheckCircleIcon, + CloseIcon, + EyeIcon, + EyeOffIcon, +} from '@ultraviolet/icons' import type { ChangeEvent, ChangeEventHandler, @@ -360,7 +367,6 @@ export const TextInputV2 = forwardRef( disabled={disabled || !computedValue} variant="ghost" size={size === 'small' ? 'xsmall' : 'small'} - icon="close" onClick={() => { if (inputRef?.current) { inputRef.current.value = '' @@ -372,7 +378,9 @@ export const TextInputV2 = forwardRef( } }} sentiment="neutral" - /> + > + + ) : null} {success ? ( ( }} variant="ghost" sentiment="neutral" - icon={isPasswordVisible ? 'eye-off' : 'eye'} size={size === 'small' ? 'xsmall' : 'small'} - /> + > + {isPasswordVisible ? : } + ) : null} {onRandomize ? ( + > + + ) : null} diff --git a/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap index b104bbd6b9..2c93123e70 100644 --- a/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap @@ -1161,7 +1161,7 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1216,7 +1216,7 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1260,10 +1260,10 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = ` .emotion-35 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-35 .fillStroke { @@ -1271,17 +1271,13 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = ` fill: none; } -.emotion-35 path { - fill: currentColor; -} - .emotion-35 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-35 .fillStroke { @@ -1289,10 +1285,6 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = ` fill: none; } -.emotion-35 path { - fill: currentColor; -} - .emotion-37 { color: #727683; font-size: 0.75rem; @@ -1419,7 +1411,6 @@ exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = ` renders correctly clearable 1`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1738,10 +1729,10 @@ exports[`TimeInput > renders correctly clearable 1`] = ` .emotion-31 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-31 .fillStroke { @@ -1749,10 +1740,6 @@ exports[`TimeInput > renders correctly clearable 1`] = ` fill: none; } -.emotion-31 path { - fill: currentColor; -} -
@@ -1843,7 +1830,6 @@ exports[`TimeInput > renders correctly clearable 1`] = ` renders correctly clearable 2`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2430,7 +2416,7 @@ exports[`TimeInput > renders correctly clearable 2`] = ` gap: 0.5rem; border-radius: 0.25rem; box-sizing: border-box; - width: 2rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -2474,10 +2460,10 @@ exports[`TimeInput > renders correctly clearable 2`] = ` .emotion-37 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-37 .fillStroke { @@ -2485,17 +2471,13 @@ exports[`TimeInput > renders correctly clearable 2`] = ` fill: none; } -.emotion-37 path { - fill: currentColor; -} - .emotion-37 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-37 .fillStroke { @@ -2503,10 +2485,6 @@ exports[`TimeInput > renders correctly clearable 2`] = ` fill: none; } -.emotion-37 path { - fill: currentColor; -} - .emotion-39 { color: #727683; font-size: 0.75rem; @@ -2647,7 +2625,6 @@ exports[`TimeInput > renders correctly clearable 2`] = ` { event.stopPropagation() setTime(undefined) @@ -530,7 +529,9 @@ export const TimeInputV2 = ({ }} sentiment="neutral" data-testid="clear" - /> + > + + ) : null} ) : null} diff --git a/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap index 69d803fcb6..9c4fdb0c6b 100644 --- a/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap @@ -410,7 +410,7 @@ exports[`Toaster > renders correctly with all kind of toast 5`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -464,10 +464,10 @@ exports[`Toaster > renders correctly with all kind of toast 5`] = ` .emotion-8 { vertical-align: middle; fill: currentColor; - height: 16px; - width: 16px; - min-width: 16px; - min-height: 16px; + height: 1rem; + width: 1rem; + min-width: 1rem; + min-height: 1rem; } .emotion-8 .fillStroke { @@ -475,10 +475,6 @@ exports[`Toaster > renders correctly with all kind of toast 5`] = ` fill: none; } -.emotion-8 path { - fill: currentColor; -} - .emotion-16 { display: -webkit-inline-box; display: -webkit-inline-flex; @@ -493,7 +489,7 @@ exports[`Toaster > renders correctly with all kind of toast 5`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -558,7 +554,7 @@ exports[`Toaster > renders correctly with all kind of toast 5`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -623,7 +619,7 @@ exports[`Toaster > renders correctly with all kind of toast 5`] = ` gap: 0.25rem; border-radius: 0.25rem; box-sizing: border-box; - width: 1.5rem; + width: auto; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -717,7 +713,6 @@ exports[`Toaster > renders correctly with all kind of toast 5`] = ` renders correctly with all kind of toast 5`] = ` renders correctly with all kind of toast 5`] = ` renders correctly with all kind of toast 5`] = ` ( + > + + ) type ContentProps = { diff --git a/packages/ui/src/components/Toggle/index.tsx b/packages/ui/src/components/Toggle/index.tsx index 61f639c546..b48dae50b6 100644 --- a/packages/ui/src/components/Toggle/index.tsx +++ b/packages/ui/src/components/Toggle/index.tsx @@ -1,7 +1,6 @@ 'use client' import styled from '@emotion/styled' -import { AsteriskIcon } from '@ultraviolet/icons' import type { ChangeEvent, ChangeEventHandler, @@ -161,12 +160,6 @@ const StyledLabel = styled.label<{ } ` -const RequiredIcon = () => ( - - - -) - type ToggleProps = { id?: string checked?: boolean @@ -253,7 +246,11 @@ export const Toggle = forwardRef( ) : ( label )} - {required ? : null} + {required ? ( + + * + + ) : null} ) : null} {typeof error === 'string' ? ( diff --git a/packages/ui/src/components/ToggleGroup/index.tsx b/packages/ui/src/components/ToggleGroup/index.tsx index 5b60f38f6b..29d8189c2b 100644 --- a/packages/ui/src/components/ToggleGroup/index.tsx +++ b/packages/ui/src/components/ToggleGroup/index.tsx @@ -1,7 +1,6 @@ 'use client' import styled from '@emotion/styled' -import { AsteriskIcon } from '@ultraviolet/icons' import type { ComponentProps, InputHTMLAttributes, ReactNode } from 'react' import { createContext, useContext, useMemo } from 'react' import { Stack } from '../Stack' @@ -72,10 +71,6 @@ const FieldSet = styled.fieldset` margin: 0; ` -const StyledRequiredIcon = styled(AsteriskIcon)` - vertical-align: super; -` - type ToggleGroupProps = { legend?: ReactNode value?: string[] @@ -128,7 +123,9 @@ export const ToggleGroup = ({ > {legend}  {required ? ( - + + * + ) : null} ) : null} diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 0e62f52305..386fe8d760 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -77,11 +77,4 @@ export { Tooltip } from './Tooltip' export { UnitInput } from './UnitInput' export { VerificationCode } from './VerificationCode' export { Drawer } from './Drawer' -export { - /** - * @deprecated This component is deprecated. Please use `Icon` from `@ultraviolet/icons` instead. - * The component is the same but has been moved to another package. - */ - Icon, -} from '@ultraviolet/icons/legacy' export { InfiniteScroll } from './InfiniteScroll' diff --git a/utils/scripts/generate-icons-file.tsx b/utils/scripts/generate-icons-file.tsx index 52a81e5371..5a9c152593 100644 --- a/utils/scripts/generate-icons-file.tsx +++ b/utils/scripts/generate-icons-file.tsx @@ -9,28 +9,28 @@ const COMPONENTS = [ name: 'System Icons', suffix: 'Icon', input: 'packages/icons/src/components/Icon/assets', - output: 'packages/icons/src/components/Icon/__generatedIcons__', + output: 'packages/icons/src/components/Icon/__generated__', typeName: 'SystemIconNames', }, { name: 'Product Icons', suffix: 'ProductIcon', input: 'packages/icons/src/components/ProductIcon/assets', - output: 'packages/icons/src/components/ProductIcon/__generatedIcons__', + output: 'packages/icons/src/components/ProductIcon/__generated__', typeName: 'ProductIconNames', }, { name: 'Category Icons', suffix: 'CategoryIcon', input: 'packages/icons/src/components/CategoryIcon/assets', - output: 'packages/icons/src/components/CategoryIcon/__generatedIcons__', + output: 'packages/icons/src/components/CategoryIcon/__generated__', typeName: 'CategoryIconNames', }, { name: 'Logo', suffix: 'Logo', input: 'packages/icons/src/components/Logo/assets', - output: 'packages/icons/src/components/Logo/__generatedIcons__', + output: 'packages/icons/src/components/Logo/__generated__', typeName: 'LogoIconNames', }, ] From 7308c5a929ce611281c2039be7969d83ea0f8b08 Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Tue, 6 May 2025 18:50:32 +0200 Subject: [PATCH 003/109] chore: changeset major release for beta (#5112) --- .changeset/sixty-beds-repair.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 .changeset/sixty-beds-repair.md diff --git a/.changeset/sixty-beds-repair.md b/.changeset/sixty-beds-repair.md new file mode 100644 index 0000000000..5368cad365 --- /dev/null +++ b/.changeset/sixty-beds-repair.md @@ -0,0 +1,10 @@ +--- +"@ultraviolet/fonts": major +"@ultraviolet/form": major +"@ultraviolet/illustrations": major +"@ultraviolet/plus": major +"@ultraviolet/themes": major +"@ultraviolet/ui": major +--- + +Beta release From 33db69c9558349626dc7eb73c2bf9df438a48df9 Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Mon, 12 May 2025 10:52:03 +0200 Subject: [PATCH 004/109] ci: sync main beta pr (#5125) * ci: beta sync with main and releases (#5102) * ci: fix (#5103) * ci: change github action (#5106) * ci: fix sync github action (#5109) * refactor(Navigation): deprecated and change some types category icon items (#5100) * refactor(Navigation): deprecated and change some types category icon items * fix: navigation improive badge visibility * chore: release (#5098) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore(devdeps): update dependency @eslint/compat to v1.2.9 (#5115) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency browserslist to v4.24.5 (#5116) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency eslint-plugin-oxlint to v0.16.9 (#5117) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * revert(react-hook-form): useless re-render (#5120) * fix(Notice): icon size (#5119) * fix(Notice): icon size * fix: unit tests * chore: release (#5121) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore(devdeps): update commitlint monorepo to v19.8.1 (#5122) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency @changesets/cli to v2.29.3 (#5123) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency eslint-plugin-oxlint to v0.16.10 (#5124) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --------- Co-authored-by: Scaleway Bot Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/plus/src/components/Navigation/components/Item.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/plus/src/components/Navigation/components/Item.tsx b/packages/plus/src/components/Navigation/components/Item.tsx index 3b95c9172b..244b0b5a95 100644 --- a/packages/plus/src/components/Navigation/components/Item.tsx +++ b/packages/plus/src/components/Navigation/components/Item.tsx @@ -5,7 +5,6 @@ import styled from '@emotion/styled' import { ArrowDownIcon, ArrowRightIcon, - DotsHorizontalIcon, DragIcon, OpenInNewIcon, PinOutlineIcon, From 8af66b120f5f78d3f83f02bc1374c87dc8f155f1 Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Mon, 12 May 2025 11:30:15 +0200 Subject: [PATCH 005/109] refactor(CategoryIcon): renaming some category icons (#5113) * refactor(CategoryIcon): renaming some category icons * fix: feedback oceane --- .changeset/spicy-sites-march.md | 13 ++++++++ ...> CostAndImpactManagementCategoryIcon.tsx} | 2 +- ...n.tsx => DataAndAnalyticsCategoryIcon.tsx} | 2 +- ...x => DomainsAndWebHostingCategoryIcon.tsx} | 4 ++- ...sx => IntegrationServicesCategoryIcon.tsx} | 2 +- ...> ManagementAndGovernanceCategoryIcon.tsx} | 2 +- ...oryIcon.tsx => MonitoringCategoryIcon.tsx} | 2 +- ... => OrganizationDashboardCategoryIcon.tsx} | 2 +- ....tsx => ServerlessComputeCategoryIcon.tsx} | 2 +- .../CategoryIcon/__generated__/index.ts | 32 +++++++++---------- ...int.svg => cost-and-impact-management.svg} | 0 ...ed-services.svg => data-and-analytics.svg} | 0 .../{iot.svg => domains-and-web-hosting.svg} | 0 ...tegration.svg => integration-services.svg} | 0 ...ices.svg => management-and-governance.svg} | 0 .../{observability.svg => monitoring.svg} | 0 ...console.svg => organization-dashboard.svg} | 0 ...{serverless.svg => serverless-compute.svg} | 0 .../__stories__/Playground.stories.tsx | 12 +++---- .../components/Navigation/components/Item.tsx | 4 +-- 20 files changed, 47 insertions(+), 32 deletions(-) create mode 100644 .changeset/spicy-sites-march.md rename packages/icons/src/components/CategoryIcon/__generated__/{EnvironmentalFootprintCategoryIcon.tsx => CostAndImpactManagementCategoryIcon.tsx} (96%) rename packages/icons/src/components/CategoryIcon/__generated__/{ManagedServicesCategoryIcon.tsx => DataAndAnalyticsCategoryIcon.tsx} (94%) rename packages/icons/src/components/CategoryIcon/__generated__/{IotCategoryIcon.tsx => DomainsAndWebHostingCategoryIcon.tsx} (96%) rename packages/icons/src/components/CategoryIcon/__generated__/{ApplicationIntegrationCategoryIcon.tsx => IntegrationServicesCategoryIcon.tsx} (96%) rename packages/icons/src/components/CategoryIcon/__generated__/{ToolsServicesCategoryIcon.tsx => ManagementAndGovernanceCategoryIcon.tsx} (96%) rename packages/icons/src/components/CategoryIcon/__generated__/{ObservabilityCategoryIcon.tsx => MonitoringCategoryIcon.tsx} (95%) rename packages/icons/src/components/CategoryIcon/__generated__/{ConsoleCategoryIcon.tsx => OrganizationDashboardCategoryIcon.tsx} (95%) rename packages/icons/src/components/CategoryIcon/__generated__/{ServerlessCategoryIcon.tsx => ServerlessComputeCategoryIcon.tsx} (96%) rename packages/icons/src/components/CategoryIcon/assets/{environmental-footprint.svg => cost-and-impact-management.svg} (100%) rename packages/icons/src/components/CategoryIcon/assets/{managed-services.svg => data-and-analytics.svg} (100%) rename packages/icons/src/components/CategoryIcon/assets/{iot.svg => domains-and-web-hosting.svg} (100%) rename packages/icons/src/components/CategoryIcon/assets/{application-integration.svg => integration-services.svg} (100%) rename packages/icons/src/components/CategoryIcon/assets/{tools-services.svg => management-and-governance.svg} (100%) rename packages/icons/src/components/CategoryIcon/assets/{observability.svg => monitoring.svg} (100%) rename packages/icons/src/components/CategoryIcon/assets/{console.svg => organization-dashboard.svg} (100%) rename packages/icons/src/components/CategoryIcon/assets/{serverless.svg => serverless-compute.svg} (100%) diff --git a/.changeset/spicy-sites-march.md b/.changeset/spicy-sites-march.md new file mode 100644 index 0000000000..2256563d0a --- /dev/null +++ b/.changeset/spicy-sites-march.md @@ -0,0 +1,13 @@ +--- +"@ultraviolet/icons": minor +--- + +Name changing in Category icons: + - `ToolsServicesCategoryIcon` → `ManagementAndGovernanceCategoryIcon` + - `IotCategoryIcon` → `DomainsAndWebHostingCategoryIcon` + - `ServerlessCategoryIcon` → `ServerlessComputeCategoryIcon` + - `ConsoleCategoryIcon` → `OrganizationDashboardCategoryIcon` + - `ObservabilityCategoryIcon` → `MonitoringCategoryIcon` + - `ManagedServicesCategoryIcon` → `DataAndAnalyticsCategoryIcon` + - `ApplicationIntegrationCategoryIcon` → `IntegrationServicesCategoryIcon` + - `EnvironmentalFootprintCategoryIcon` → `CostAndImpactManagerCategoryIcon` diff --git a/packages/icons/src/components/CategoryIcon/__generated__/EnvironmentalFootprintCategoryIcon.tsx b/packages/icons/src/components/CategoryIcon/__generated__/CostAndImpactManagementCategoryIcon.tsx similarity index 96% rename from packages/icons/src/components/CategoryIcon/__generated__/EnvironmentalFootprintCategoryIcon.tsx rename to packages/icons/src/components/CategoryIcon/__generated__/CostAndImpactManagementCategoryIcon.tsx index 9db18d156b..ae8c63e426 100644 --- a/packages/icons/src/components/CategoryIcon/__generated__/EnvironmentalFootprintCategoryIcon.tsx +++ b/packages/icons/src/components/CategoryIcon/__generated__/CostAndImpactManagementCategoryIcon.tsx @@ -8,7 +8,7 @@ import { Icon } from '../Icon' import type { IconProps } from '../Icon' -export const EnvironmentalFootprintCategoryIcon = ({ +export const CostAndImpactManagementCategoryIcon = ({ ...props }: Omit) => ( // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/packages/icons/src/components/CategoryIcon/__generated__/ManagedServicesCategoryIcon.tsx b/packages/icons/src/components/CategoryIcon/__generated__/DataAndAnalyticsCategoryIcon.tsx similarity index 94% rename from packages/icons/src/components/CategoryIcon/__generated__/ManagedServicesCategoryIcon.tsx rename to packages/icons/src/components/CategoryIcon/__generated__/DataAndAnalyticsCategoryIcon.tsx index db80d147fb..b5ce83784d 100644 --- a/packages/icons/src/components/CategoryIcon/__generated__/ManagedServicesCategoryIcon.tsx +++ b/packages/icons/src/components/CategoryIcon/__generated__/DataAndAnalyticsCategoryIcon.tsx @@ -8,7 +8,7 @@ import { Icon } from '../Icon' import type { IconProps } from '../Icon' -export const ManagedServicesCategoryIcon = ({ +export const DataAndAnalyticsCategoryIcon = ({ ...props }: Omit) => ( // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/packages/icons/src/components/CategoryIcon/__generated__/IotCategoryIcon.tsx b/packages/icons/src/components/CategoryIcon/__generated__/DomainsAndWebHostingCategoryIcon.tsx similarity index 96% rename from packages/icons/src/components/CategoryIcon/__generated__/IotCategoryIcon.tsx rename to packages/icons/src/components/CategoryIcon/__generated__/DomainsAndWebHostingCategoryIcon.tsx index f59e8a3c5c..6172c25071 100644 --- a/packages/icons/src/components/CategoryIcon/__generated__/IotCategoryIcon.tsx +++ b/packages/icons/src/components/CategoryIcon/__generated__/DomainsAndWebHostingCategoryIcon.tsx @@ -8,7 +8,9 @@ import { Icon } from '../Icon' import type { IconProps } from '../Icon' -export const IotCategoryIcon = ({ ...props }: Omit) => ( +export const DomainsAndWebHostingCategoryIcon = ({ + ...props +}: Omit) => ( // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/packages/icons/src/components/CategoryIcon/__generated__/ApplicationIntegrationCategoryIcon.tsx b/packages/icons/src/components/CategoryIcon/__generated__/IntegrationServicesCategoryIcon.tsx similarity index 96% rename from packages/icons/src/components/CategoryIcon/__generated__/ApplicationIntegrationCategoryIcon.tsx rename to packages/icons/src/components/CategoryIcon/__generated__/IntegrationServicesCategoryIcon.tsx index 3d8bd2237a..72a1be370c 100644 --- a/packages/icons/src/components/CategoryIcon/__generated__/ApplicationIntegrationCategoryIcon.tsx +++ b/packages/icons/src/components/CategoryIcon/__generated__/IntegrationServicesCategoryIcon.tsx @@ -8,7 +8,7 @@ import { Icon } from '../Icon' import type { IconProps } from '../Icon' -export const ApplicationIntegrationCategoryIcon = ({ +export const IntegrationServicesCategoryIcon = ({ ...props }: Omit) => ( // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/packages/icons/src/components/CategoryIcon/__generated__/ToolsServicesCategoryIcon.tsx b/packages/icons/src/components/CategoryIcon/__generated__/ManagementAndGovernanceCategoryIcon.tsx similarity index 96% rename from packages/icons/src/components/CategoryIcon/__generated__/ToolsServicesCategoryIcon.tsx rename to packages/icons/src/components/CategoryIcon/__generated__/ManagementAndGovernanceCategoryIcon.tsx index acb9d934d3..8b066368f8 100644 --- a/packages/icons/src/components/CategoryIcon/__generated__/ToolsServicesCategoryIcon.tsx +++ b/packages/icons/src/components/CategoryIcon/__generated__/ManagementAndGovernanceCategoryIcon.tsx @@ -8,7 +8,7 @@ import { Icon } from '../Icon' import type { IconProps } from '../Icon' -export const ToolsServicesCategoryIcon = ({ +export const ManagementAndGovernanceCategoryIcon = ({ ...props }: Omit) => ( // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/packages/icons/src/components/CategoryIcon/__generated__/ObservabilityCategoryIcon.tsx b/packages/icons/src/components/CategoryIcon/__generated__/MonitoringCategoryIcon.tsx similarity index 95% rename from packages/icons/src/components/CategoryIcon/__generated__/ObservabilityCategoryIcon.tsx rename to packages/icons/src/components/CategoryIcon/__generated__/MonitoringCategoryIcon.tsx index 0e393bf956..bb17e1ee04 100644 --- a/packages/icons/src/components/CategoryIcon/__generated__/ObservabilityCategoryIcon.tsx +++ b/packages/icons/src/components/CategoryIcon/__generated__/MonitoringCategoryIcon.tsx @@ -8,7 +8,7 @@ import { Icon } from '../Icon' import type { IconProps } from '../Icon' -export const ObservabilityCategoryIcon = ({ +export const MonitoringCategoryIcon = ({ ...props }: Omit) => ( // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/packages/icons/src/components/CategoryIcon/__generated__/ConsoleCategoryIcon.tsx b/packages/icons/src/components/CategoryIcon/__generated__/OrganizationDashboardCategoryIcon.tsx similarity index 95% rename from packages/icons/src/components/CategoryIcon/__generated__/ConsoleCategoryIcon.tsx rename to packages/icons/src/components/CategoryIcon/__generated__/OrganizationDashboardCategoryIcon.tsx index 7ec7d959b4..25448ec4d1 100644 --- a/packages/icons/src/components/CategoryIcon/__generated__/ConsoleCategoryIcon.tsx +++ b/packages/icons/src/components/CategoryIcon/__generated__/OrganizationDashboardCategoryIcon.tsx @@ -8,7 +8,7 @@ import { Icon } from '../Icon' import type { IconProps } from '../Icon' -export const ConsoleCategoryIcon = ({ +export const OrganizationDashboardCategoryIcon = ({ ...props }: Omit) => ( // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/packages/icons/src/components/CategoryIcon/__generated__/ServerlessCategoryIcon.tsx b/packages/icons/src/components/CategoryIcon/__generated__/ServerlessComputeCategoryIcon.tsx similarity index 96% rename from packages/icons/src/components/CategoryIcon/__generated__/ServerlessCategoryIcon.tsx rename to packages/icons/src/components/CategoryIcon/__generated__/ServerlessComputeCategoryIcon.tsx index 35f68c8e63..73c9a4be95 100644 --- a/packages/icons/src/components/CategoryIcon/__generated__/ServerlessCategoryIcon.tsx +++ b/packages/icons/src/components/CategoryIcon/__generated__/ServerlessComputeCategoryIcon.tsx @@ -8,7 +8,7 @@ import { Icon } from '../Icon' import type { IconProps } from '../Icon' -export const ServerlessCategoryIcon = ({ +export const ServerlessComputeCategoryIcon = ({ ...props }: Omit) => ( // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/packages/icons/src/components/CategoryIcon/__generated__/index.ts b/packages/icons/src/components/CategoryIcon/__generated__/index.ts index ead053119e..557ba5ebff 100644 --- a/packages/icons/src/components/CategoryIcon/__generated__/index.ts +++ b/packages/icons/src/components/CategoryIcon/__generated__/index.ts @@ -6,57 +6,57 @@ * PLEASE DO NOT EDIT HERE */ export { AiCategoryIcon } from './AiCategoryIcon' -export { ApplicationIntegrationCategoryIcon } from './ApplicationIntegrationCategoryIcon' export { BaremetalCategoryIcon } from './BaremetalCategoryIcon' export { BillingCategoryIcon } from './BillingCategoryIcon' export { ComputeCategoryIcon } from './ComputeCategoryIcon' -export { ConsoleCategoryIcon } from './ConsoleCategoryIcon' export { ContainersCategoryIcon } from './ContainersCategoryIcon' +export { CostAndImpactManagementCategoryIcon } from './CostAndImpactManagementCategoryIcon' +export { DataAndAnalyticsCategoryIcon } from './DataAndAnalyticsCategoryIcon' export { DatabaseCategoryIcon } from './DatabaseCategoryIcon' export { DatacenterCategoryIcon } from './DatacenterCategoryIcon' export { DedicatedServerCategoryIcon } from './DedicatedServerCategoryIcon' export { DevToolsCategoryIcon } from './DevToolsCategoryIcon' export { DocumentationCategoryIcon } from './DocumentationCategoryIcon' -export { EnvironmentalFootprintCategoryIcon } from './EnvironmentalFootprintCategoryIcon' -export { IotCategoryIcon } from './IotCategoryIcon' +export { DomainsAndWebHostingCategoryIcon } from './DomainsAndWebHostingCategoryIcon' +export { IntegrationServicesCategoryIcon } from './IntegrationServicesCategoryIcon' export { LabsCategoryIcon } from './LabsCategoryIcon' -export { ManagedServicesCategoryIcon } from './ManagedServicesCategoryIcon' +export { ManagementAndGovernanceCategoryIcon } from './ManagementAndGovernanceCategoryIcon' +export { MonitoringCategoryIcon } from './MonitoringCategoryIcon' export { NetworkCategoryIcon } from './NetworkCategoryIcon' -export { ObservabilityCategoryIcon } from './ObservabilityCategoryIcon' +export { OrganizationDashboardCategoryIcon } from './OrganizationDashboardCategoryIcon' export { PartnersCategoryIcon } from './PartnersCategoryIcon' export { PinCategoryIcon } from './PinCategoryIcon' export { SecurityCategoryIcon } from './SecurityCategoryIcon' -export { ServerlessCategoryIcon } from './ServerlessCategoryIcon' +export { ServerlessComputeCategoryIcon } from './ServerlessComputeCategoryIcon' export { StorageCategoryIcon } from './StorageCategoryIcon' -export { ToolsServicesCategoryIcon } from './ToolsServicesCategoryIcon' export { UseCaseCategoryIcon } from './UseCaseCategoryIcon' export { VpcCategoryIcon } from './VpcCategoryIcon' export { WebHostingCategoryIcon } from './WebHostingCategoryIcon' export type CategoryIconNames = | 'AiCategoryIcon' - | 'ApplicationIntegrationCategoryIcon' | 'BaremetalCategoryIcon' | 'BillingCategoryIcon' | 'ComputeCategoryIcon' - | 'ConsoleCategoryIcon' | 'ContainersCategoryIcon' + | 'CostAndImpactManagementCategoryIcon' + | 'DataAndAnalyticsCategoryIcon' | 'DatabaseCategoryIcon' | 'DatacenterCategoryIcon' | 'DedicatedServerCategoryIcon' | 'DevToolsCategoryIcon' | 'DocumentationCategoryIcon' - | 'EnvironmentalFootprintCategoryIcon' - | 'IotCategoryIcon' + | 'DomainsAndWebHostingCategoryIcon' + | 'IntegrationServicesCategoryIcon' | 'LabsCategoryIcon' - | 'ManagedServicesCategoryIcon' + | 'ManagementAndGovernanceCategoryIcon' + | 'MonitoringCategoryIcon' | 'NetworkCategoryIcon' - | 'ObservabilityCategoryIcon' + | 'OrganizationDashboardCategoryIcon' | 'PartnersCategoryIcon' | 'PinCategoryIcon' | 'SecurityCategoryIcon' - | 'ServerlessCategoryIcon' + | 'ServerlessComputeCategoryIcon' | 'StorageCategoryIcon' - | 'ToolsServicesCategoryIcon' | 'UseCaseCategoryIcon' | 'VpcCategoryIcon' | 'WebHostingCategoryIcon' diff --git a/packages/icons/src/components/CategoryIcon/assets/environmental-footprint.svg b/packages/icons/src/components/CategoryIcon/assets/cost-and-impact-management.svg similarity index 100% rename from packages/icons/src/components/CategoryIcon/assets/environmental-footprint.svg rename to packages/icons/src/components/CategoryIcon/assets/cost-and-impact-management.svg diff --git a/packages/icons/src/components/CategoryIcon/assets/managed-services.svg b/packages/icons/src/components/CategoryIcon/assets/data-and-analytics.svg similarity index 100% rename from packages/icons/src/components/CategoryIcon/assets/managed-services.svg rename to packages/icons/src/components/CategoryIcon/assets/data-and-analytics.svg diff --git a/packages/icons/src/components/CategoryIcon/assets/iot.svg b/packages/icons/src/components/CategoryIcon/assets/domains-and-web-hosting.svg similarity index 100% rename from packages/icons/src/components/CategoryIcon/assets/iot.svg rename to packages/icons/src/components/CategoryIcon/assets/domains-and-web-hosting.svg diff --git a/packages/icons/src/components/CategoryIcon/assets/application-integration.svg b/packages/icons/src/components/CategoryIcon/assets/integration-services.svg similarity index 100% rename from packages/icons/src/components/CategoryIcon/assets/application-integration.svg rename to packages/icons/src/components/CategoryIcon/assets/integration-services.svg diff --git a/packages/icons/src/components/CategoryIcon/assets/tools-services.svg b/packages/icons/src/components/CategoryIcon/assets/management-and-governance.svg similarity index 100% rename from packages/icons/src/components/CategoryIcon/assets/tools-services.svg rename to packages/icons/src/components/CategoryIcon/assets/management-and-governance.svg diff --git a/packages/icons/src/components/CategoryIcon/assets/observability.svg b/packages/icons/src/components/CategoryIcon/assets/monitoring.svg similarity index 100% rename from packages/icons/src/components/CategoryIcon/assets/observability.svg rename to packages/icons/src/components/CategoryIcon/assets/monitoring.svg diff --git a/packages/icons/src/components/CategoryIcon/assets/console.svg b/packages/icons/src/components/CategoryIcon/assets/organization-dashboard.svg similarity index 100% rename from packages/icons/src/components/CategoryIcon/assets/console.svg rename to packages/icons/src/components/CategoryIcon/assets/organization-dashboard.svg diff --git a/packages/icons/src/components/CategoryIcon/assets/serverless.svg b/packages/icons/src/components/CategoryIcon/assets/serverless-compute.svg similarity index 100% rename from packages/icons/src/components/CategoryIcon/assets/serverless.svg rename to packages/icons/src/components/CategoryIcon/assets/serverless-compute.svg diff --git a/packages/plus/src/components/Navigation/__stories__/Playground.stories.tsx b/packages/plus/src/components/Navigation/__stories__/Playground.stories.tsx index 7cf6050a0a..ca1b8ef7b1 100644 --- a/packages/plus/src/components/Navigation/__stories__/Playground.stories.tsx +++ b/packages/plus/src/components/Navigation/__stories__/Playground.stories.tsx @@ -2,11 +2,11 @@ import styled from '@emotion/styled' import type { StoryFn } from '@storybook/react' import { BaremetalCategoryIcon, - ConsoleCategoryIcon, + DataAndAnalyticsCategoryIcon, DatabaseCategoryIcon, - ManagedServicesCategoryIcon, + MonitoringCategoryIcon, NetworkCategoryIcon, - ObservabilityCategoryIcon, + OrganizationDashboardCategoryIcon, SecurityCategoryIcon, UseCaseCategoryIcon, } from '@ultraviolet/icons/category' @@ -81,7 +81,7 @@ const PlaygroundContent = ({ ...props }: ComponentProps) => { } + categoryIcon={} noPinButton active={active === 'Organization Dashboard'} onClickPinUnpin={onClickPinUnpin} @@ -174,7 +174,7 @@ const PlaygroundContent = ({ ...props }: ComponentProps) => { } + categoryIcon={} > ) => { } + categoryIcon={} > {categoryIcon || ( - )} From 1d0c535198671780914a755a137f30e4de404f77 Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Tue, 13 May 2025 10:16:54 +0200 Subject: [PATCH 006/109] fix: plus and form to have ui ad peer deps (#5126) * fix: plus and form have ui as peer deps * fix: readme and dependencies --- .changeset/modern-poems-lose.md | 6 ++++++ packages/form/package.json | 3 ++- packages/plus/README.md | 2 +- packages/plus/package.json | 3 ++- 4 files changed, 11 insertions(+), 3 deletions(-) create mode 100644 .changeset/modern-poems-lose.md diff --git a/.changeset/modern-poems-lose.md b/.changeset/modern-poems-lose.md new file mode 100644 index 0000000000..363c439349 --- /dev/null +++ b/.changeset/modern-poems-lose.md @@ -0,0 +1,6 @@ +--- +"@ultraviolet/form": patch +"@ultraviolet/plus": patch +--- + +⚠️ `@ultraviolet/ui` is now a peer-dependency of `@ultraviolet/form` and `@ultraviolet/plus`. This means you need to have an installed version of `@ultraviolet/ui` in your project that matches the version defined by the peer-dependency. diff --git a/packages/form/package.json b/packages/form/package.json index fe2b463bb0..038fd668ba 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -65,6 +65,7 @@ "peerDependencies": { "@emotion/react": "11.14.0", "@emotion/styled": "11.14.1", + "@ultraviolet/ui": "workspace:*", "react": "18.x || 19.x", "react-dom": "18.x || 19.x" }, @@ -75,6 +76,7 @@ "@types/final-form-focus": "1.1.7", "@types/react": "19.1.8", "@types/react-dom": "19.1.6", + "@ultraviolet/ui": "workspace:*", "@utils/test": "workspace:*", "react": "19.1.0", "react-dom": "19.1.0" @@ -83,7 +85,6 @@ "@babel/runtime": "7.27.6", "@ultraviolet/icons": "workspace:*", "@ultraviolet/themes": "workspace:*", - "@ultraviolet/ui": "workspace:*", "react-hook-form": "7.55.0", "react-select": "5.10.0" } diff --git a/packages/plus/README.md b/packages/plus/README.md index 2c2aebdac6..cff95f73f0 100644 --- a/packages/plus/README.md +++ b/packages/plus/README.md @@ -11,7 +11,7 @@ Ultraviolet Plus is a set of complex components that are built on top of Ultravi ## Get Started ```sh -$ pnpm add @ultraviolet/plus +$ pnpm add @ultraviolet/ui @ultraviolet/plus @emotion/react @emotion/styled ``` ## Documentation diff --git a/packages/plus/package.json b/packages/plus/package.json index bc939b27fa..08394f1a88 100644 --- a/packages/plus/package.json +++ b/packages/plus/package.json @@ -65,6 +65,7 @@ "peerDependencies": { "@emotion/react": "11.14.0", "@emotion/styled": "11.14.1", + "@ultraviolet/ui": "workspace:*", "react": "18.x || 19.x", "react-dom": "18.x || 19.x" }, @@ -75,6 +76,7 @@ "@types/react": "19.1.8", "@types/react-dom": "19.1.6", "@ultraviolet/illustrations": "workspace:*", + "@ultraviolet/ui": "workspace:*", "@utils/test": "workspace:*", "react": "19.1.0", "react-dom": "19.1.0" @@ -85,7 +87,6 @@ "@uiw/react-codemirror": "4.23.13", "@ultraviolet/icons": "workspace:*", "@ultraviolet/themes": "workspace:*", - "@ultraviolet/ui": "workspace:*", "react-intersection-observer": "9.16.0" } } From 55a7a53c567ad79559b54e9ef4504e28217112e7 Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Tue, 13 May 2025 10:21:26 +0200 Subject: [PATCH 007/109] ci: sync beta branch (#5131) * ci: beta sync with main and releases (#5102) * ci: fix (#5103) * ci: change github action (#5106) * ci: fix sync github action (#5109) * refactor(Navigation): deprecated and change some types category icon items (#5100) * refactor(Navigation): deprecated and change some types category icon items * fix: navigation improive badge visibility * chore: release (#5098) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore(devdeps): update dependency @eslint/compat to v1.2.9 (#5115) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency browserslist to v4.24.5 (#5116) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency eslint-plugin-oxlint to v0.16.9 (#5117) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * revert(react-hook-form): useless re-render (#5120) * fix(Notice): icon size (#5119) * fix(Notice): icon size * fix: unit tests * chore: release (#5121) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore(devdeps): update commitlint monorepo to v19.8.1 (#5122) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency @changesets/cli to v2.29.3 (#5123) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency eslint-plugin-oxlint to v0.16.10 (#5124) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(icons): implement use client directive for all icons (#5127) * chore: release (#5129) * ci: remove sync main to beta --------- Co-authored-by: Scaleway Bot Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .github/workflows/sync-main-to-beta.yml | 53 ------------------------- 1 file changed, 53 deletions(-) delete mode 100644 .github/workflows/sync-main-to-beta.yml diff --git a/.github/workflows/sync-main-to-beta.yml b/.github/workflows/sync-main-to-beta.yml deleted file mode 100644 index 48c2b7bc43..0000000000 --- a/.github/workflows/sync-main-to-beta.yml +++ /dev/null @@ -1,53 +0,0 @@ -name: Sync Main to Beta - -on: - push: - branches: - - main - -permissions: - contents: write - pull-requests: write - -jobs: - sync-main-to-beta: - name: Sync Main to Beta - runs-on: ubuntu-latest - - steps: - - name: Checkout Repository - uses: actions/checkout@v4 - - - name: Check if Beta Branch Exists - id: check-beta - run: | - if git ls-remote --heads origin beta | grep -q beta; then - echo "Beta branch exists." - echo "exists=true" >> $GITHUB_ENV - else - echo "Beta branch does not exist. Exiting." - echo "exists=false" >> $GITHUB_ENV - fi - - - name: Exit if Beta Branch Does Not Exist - if: env.exists == 'false' - run: exit 0 - - - name: Set Git Identity - run: | - git config --global user.name 'Scaleway Bot' - git config --global user.email 'github@scaleway.com' - - - name: Fetch All Branches - run: git fetch --all - - - name: Opening pull request - id: pull - uses: tretuna/sync-branches@1.4.0 - with: - GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} - FROM_BRANCH: "main" - TO_BRANCH: "beta" - PULL_REQUEST_TITLE: "chore: sync main to beta" - PULL_REQUEST_BODY: "Beta needs to be updated to follow main. This PR is automatically opened as beta branch exists. Once the branch will be deleted the github action will not run anymore." - CONTENT_COMPARISON: true From 2908e3d1163fd569a858c63a06bb3f98fda363dd Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Tue, 13 May 2025 10:35:26 +0200 Subject: [PATCH 008/109] ci: fix changeset (#5132) --- .changeset/modern-poems-lose.md | 4 ++-- .changeset/spicy-sites-march.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/modern-poems-lose.md b/.changeset/modern-poems-lose.md index 363c439349..d6f5f973b1 100644 --- a/.changeset/modern-poems-lose.md +++ b/.changeset/modern-poems-lose.md @@ -1,6 +1,6 @@ --- -"@ultraviolet/form": patch -"@ultraviolet/plus": patch +"@ultraviolet/form": major +"@ultraviolet/plus": major --- ⚠️ `@ultraviolet/ui` is now a peer-dependency of `@ultraviolet/form` and `@ultraviolet/plus`. This means you need to have an installed version of `@ultraviolet/ui` in your project that matches the version defined by the peer-dependency. diff --git a/.changeset/spicy-sites-march.md b/.changeset/spicy-sites-march.md index 2256563d0a..f60b231880 100644 --- a/.changeset/spicy-sites-march.md +++ b/.changeset/spicy-sites-march.md @@ -1,5 +1,5 @@ --- -"@ultraviolet/icons": minor +"@ultraviolet/icons": major --- Name changing in Category icons: From 35fc96ec702209dd1331da4b30f9152f174031a5 Mon Sep 17 00:00:00 2001 From: Scaleway Bot Date: Tue, 13 May 2025 14:15:42 +0200 Subject: [PATCH 009/109] chore: release (beta) (#5111) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/pre.json | 7 +++- packages/fonts/CHANGELOG.md | 6 +++ packages/fonts/package.json | 2 +- packages/form/CHANGELOG.md | 14 ++++++- packages/form/package.json | 2 +- packages/icons/CHANGELOG.md | 62 +++++++++++++++++++++++++++++ packages/icons/package.json | 2 +- packages/illustrations/CHANGELOG.md | 11 +++++ packages/illustrations/package.json | 2 +- packages/plus/CHANGELOG.md | 15 +++++++ packages/plus/package.json | 2 +- packages/themes/CHANGELOG.md | 6 +++ packages/themes/package.json | 2 +- packages/ui/CHANGELOG.md | 12 ++++++ packages/ui/package.json | 2 +- 15 files changed, 137 insertions(+), 10 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 2fc953c72d..967d5b65c8 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -15,5 +15,10 @@ "@ultraviolet/ui": "1.94.0", "@utils/test": "0.0.1" }, - "changesets": [] + "changesets": [ + "modern-poems-lose", + "sixty-beds-repair", + "spicy-sites-march", + "witty-rocks-play" + ] } diff --git a/packages/fonts/CHANGELOG.md b/packages/fonts/CHANGELOG.md index 57b18e1be6..c4ad1b318b 100644 --- a/packages/fonts/CHANGELOG.md +++ b/packages/fonts/CHANGELOG.md @@ -1,5 +1,11 @@ # @ultraviolet/fonts +## 2.0.0-beta.0 + +### Major Changes + +- [#5112](https://github.com/scaleway/ultraviolet/pull/5112) [`37a7d63`](https://github.com/scaleway/ultraviolet/commit/37a7d632cd1e61d7615e5356fc179ec08f3bec09) Thanks [@matthprost](https://github.com/matthprost)! - Beta release + ## 1.0.2 ### Patch Changes diff --git a/packages/fonts/package.json b/packages/fonts/package.json index 0793d7f34a..58366d224e 100644 --- a/packages/fonts/package.json +++ b/packages/fonts/package.json @@ -1,6 +1,6 @@ { "name": "@ultraviolet/fonts", - "version": "1.0.2", + "version": "2.0.0-beta.0", "description": "Ultraviolet Fonts", "homepage": "https://github.com/scaleway/ultraviolet#readme", "repository": { diff --git a/packages/form/CHANGELOG.md b/packages/form/CHANGELOG.md index ea372457c2..688165b466 100644 --- a/packages/form/CHANGELOG.md +++ b/packages/form/CHANGELOG.md @@ -1,5 +1,13 @@ # Change Log +## 4.0.0-beta.0 + +### Major Changes + +- [#5126](https://github.com/scaleway/ultraviolet/pull/5126) [`17da30c`](https://github.com/scaleway/ultraviolet/commit/17da30c133f624964daff6398e481568bd6da446) Thanks [@matthprost](https://github.com/matthprost)! - ⚠️ `@ultraviolet/ui` is now a peer-dependency of `@ultraviolet/form` and `@ultraviolet/plus`. This means you need to have an installed version of `@ultraviolet/ui` in your project that matches the version defined by the peer-dependency. + +- [#5112](https://github.com/scaleway/ultraviolet/pull/5112) [`37a7d63`](https://github.com/scaleway/ultraviolet/commit/37a7d632cd1e61d7615e5356fc179ec08f3bec09) Thanks [@matthprost](https://github.com/matthprost)! - Beta release + ## 3.17.18 ### Patch Changes @@ -26,8 +34,10 @@ ### Patch Changes -- Updated dependencies [[`40d4066`](https://github.com/scaleway/ultraviolet/commit/40d40662d7305712b0ca23d08759b37590a677a0), [`80d5c50`](https://github.com/scaleway/ultraviolet/commit/80d5c50e294efdc5fe714a55ef985ff142c07b6e)]: - - @ultraviolet/ui@1.95.12 +- Updated dependencies [[`37a7d63`](https://github.com/scaleway/ultraviolet/commit/37a7d632cd1e61d7615e5356fc179ec08f3bec09), [`a928589`](https://github.com/scaleway/ultraviolet/commit/a9285896d638e34eba9bb25c55c38de2aef4e210), [`865c160`](https://github.com/scaleway/ultraviolet/commit/865c160aee2db5bd5e7b357e9693a45a17ef4284)]: + - @ultraviolet/themes@2.0.0-beta.0 + - @ultraviolet/ui@2.0.0-beta.0 + - @ultraviolet/icons@4.0.0-beta.0 ## 3.17.15 diff --git a/packages/form/package.json b/packages/form/package.json index 038fd668ba..e6b8333732 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -1,6 +1,6 @@ { "name": "@ultraviolet/form", - "version": "3.17.18", + "version": "4.0.0-beta.0", "description": "Ultraviolet Form", "homepage": "https://github.com/scaleway/ultraviolet#readme", "repository": { diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index d455079a7b..f288f67e90 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,67 @@ # Change Log +## 4.0.0-beta.0 + +### Major Changes + +- [#5113](https://github.com/scaleway/ultraviolet/pull/5113) [`a928589`](https://github.com/scaleway/ultraviolet/commit/a9285896d638e34eba9bb25c55c38de2aef4e210) Thanks [@matthprost](https://github.com/matthprost)! - Name changing in Category icons: + + - `ToolsServicesCategoryIcon` → `ManagementAndGovernanceCategoryIcon` + - `IotCategoryIcon` → `DomainsAndWebHostingCategoryIcon` + - `ServerlessCategoryIcon` → `ServerlessComputeCategoryIcon` + - `ConsoleCategoryIcon` → `OrganizationDashboardCategoryIcon` + - `ObservabilityCategoryIcon` → `MonitoringCategoryIcon` + - `ManagedServicesCategoryIcon` → `DataAndAnalyticsCategoryIcon` + - `ApplicationIntegrationCategoryIcon` → `IntegrationServicesCategoryIcon` + - `EnvironmentalFootprintCategoryIcon` → `CostAndImpactManagerCategoryIcon` + +- [#5058](https://github.com/scaleway/ultraviolet/pull/5058) [`865c160`](https://github.com/scaleway/ultraviolet/commit/865c160aee2db5bd5e7b357e9693a45a17ef4284) Thanks [@matthprost](https://github.com/matthprost)! - **Beta 1 - Migration of Icons to @ultraviolet/icons with direct imports** + + - `Icon` component has been removed it was previously imported like `import { Icon } from '@ultraviolet/icons/legacy'`. Instead you should import the icon you need directly from `@ultraviolet/icons`. + + Before: + + ```tsx + import { Icon } from "@ultraviolet/icons/legacy"; + + ; + ``` + + After: + + ```tsx + import { DragIcon } from "@ultraviolet/icons"; + + ; + ``` + + ### Icons removed + + - `DocumentDbProductIcon`: no replacement. + - `AsteriskIcon`: use \* in ASCII instead. + - `CrossCircleIcon` use `CloseCircleOutlineIcon` instead. + - `CrossCircleOutlineIcon` use `CloseCircleOutlineIcon` instead. + - `DragVariantIcon`: use `DragIcon` instead. + + ### System icons changes + + - prop `size` no longer support `string` and `number`. You shoud use the sizes supported by the component (`xmsall`, `small`, ect.). Example: + + ```tsx + import { DragIcon } from '@ultraviolet/icons' + + // Before + + + // After + + ``` + +### Patch Changes + +- Updated dependencies [[`37a7d63`](https://github.com/scaleway/ultraviolet/commit/37a7d632cd1e61d7615e5356fc179ec08f3bec09)]: + - @ultraviolet/themes@2.0.0-beta.0 + ## 3.15.8 ### Patch Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index 396f07204f..684b653ce6 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@ultraviolet/icons", - "version": "3.15.8", + "version": "4.0.0-beta.0", "description": "Ultraviolet Icons", "homepage": "https://github.com/scaleway/ultraviolet#readme", "repository": { diff --git a/packages/illustrations/CHANGELOG.md b/packages/illustrations/CHANGELOG.md index e3df33810b..222b0c56b8 100644 --- a/packages/illustrations/CHANGELOG.md +++ b/packages/illustrations/CHANGELOG.md @@ -1,5 +1,16 @@ # @ultraviolet/illustrations +## 5.0.0-beta.0 + +### Major Changes + +- [#5112](https://github.com/scaleway/ultraviolet/pull/5112) [`37a7d63`](https://github.com/scaleway/ultraviolet/commit/37a7d632cd1e61d7615e5356fc179ec08f3bec09) Thanks [@matthprost](https://github.com/matthprost)! - Beta release + +### Patch Changes + +- Updated dependencies [[`37a7d63`](https://github.com/scaleway/ultraviolet/commit/37a7d632cd1e61d7615e5356fc179ec08f3bec09)]: + - @ultraviolet/themes@2.0.0-beta.0 + ## 4.5.3 ### Patch Changes diff --git a/packages/illustrations/package.json b/packages/illustrations/package.json index 4518efdecf..5420fc3c0e 100644 --- a/packages/illustrations/package.json +++ b/packages/illustrations/package.json @@ -1,6 +1,6 @@ { "name": "@ultraviolet/illustrations", - "version": "4.5.3", + "version": "5.0.0-beta.0", "description": "Ultraviolet Illustrations", "homepage": "https://github.com/scaleway/ultraviolet#readme", "repository": { diff --git a/packages/plus/CHANGELOG.md b/packages/plus/CHANGELOG.md index acbd459d89..8c9db0b30b 100644 --- a/packages/plus/CHANGELOG.md +++ b/packages/plus/CHANGELOG.md @@ -1,5 +1,20 @@ # @ultraviolet/plus +## 1.0.0-beta.0 + +### Major Changes + +- [#5126](https://github.com/scaleway/ultraviolet/pull/5126) [`17da30c`](https://github.com/scaleway/ultraviolet/commit/17da30c133f624964daff6398e481568bd6da446) Thanks [@matthprost](https://github.com/matthprost)! - ⚠️ `@ultraviolet/ui` is now a peer-dependency of `@ultraviolet/form` and `@ultraviolet/plus`. This means you need to have an installed version of `@ultraviolet/ui` in your project that matches the version defined by the peer-dependency. + +- [#5112](https://github.com/scaleway/ultraviolet/pull/5112) [`37a7d63`](https://github.com/scaleway/ultraviolet/commit/37a7d632cd1e61d7615e5356fc179ec08f3bec09) Thanks [@matthprost](https://github.com/matthprost)! - Beta release + +### Patch Changes + +- Updated dependencies [[`37a7d63`](https://github.com/scaleway/ultraviolet/commit/37a7d632cd1e61d7615e5356fc179ec08f3bec09), [`a928589`](https://github.com/scaleway/ultraviolet/commit/a9285896d638e34eba9bb25c55c38de2aef4e210), [`865c160`](https://github.com/scaleway/ultraviolet/commit/865c160aee2db5bd5e7b357e9693a45a17ef4284)]: + - @ultraviolet/themes@2.0.0-beta.0 + - @ultraviolet/ui@2.0.0-beta.0 + - @ultraviolet/icons@4.0.0-beta.0 + ## 0.28.13 ### Patch Changes diff --git a/packages/plus/package.json b/packages/plus/package.json index 08394f1a88..4163a810d7 100644 --- a/packages/plus/package.json +++ b/packages/plus/package.json @@ -1,6 +1,6 @@ { "name": "@ultraviolet/plus", - "version": "0.28.13", + "version": "1.0.0-beta.0", "description": "Ultraviolet Plus", "homepage": "https://github.com/scaleway/ultraviolet#readme", "repository": { diff --git a/packages/themes/CHANGELOG.md b/packages/themes/CHANGELOG.md index 92fb157175..4f7c9eb695 100644 --- a/packages/themes/CHANGELOG.md +++ b/packages/themes/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 2.0.0-beta.0 + +### Major Changes + +- [#5112](https://github.com/scaleway/ultraviolet/pull/5112) [`37a7d63`](https://github.com/scaleway/ultraviolet/commit/37a7d632cd1e61d7615e5356fc179ec08f3bec09) Thanks [@matthprost](https://github.com/matthprost)! - Beta release + ## 1.17.0 ### Minor Changes diff --git a/packages/themes/package.json b/packages/themes/package.json index edfcd03a7d..9bf459a3ce 100644 --- a/packages/themes/package.json +++ b/packages/themes/package.json @@ -1,6 +1,6 @@ { "name": "@ultraviolet/themes", - "version": "1.17.0", + "version": "2.0.0-beta.0", "description": "Ultraviolet Themes", "homepage": "https://github.com/scaleway/ultraviolet#readme", "repository": { diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index eec61145aa..5ac9679b30 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,17 @@ # Change Log +## 2.0.0-beta.0 + +### Major Changes + +- [#5112](https://github.com/scaleway/ultraviolet/pull/5112) [`37a7d63`](https://github.com/scaleway/ultraviolet/commit/37a7d632cd1e61d7615e5356fc179ec08f3bec09) Thanks [@matthprost](https://github.com/matthprost)! - Beta release + +### Patch Changes + +- Updated dependencies [[`37a7d63`](https://github.com/scaleway/ultraviolet/commit/37a7d632cd1e61d7615e5356fc179ec08f3bec09), [`a928589`](https://github.com/scaleway/ultraviolet/commit/a9285896d638e34eba9bb25c55c38de2aef4e210), [`865c160`](https://github.com/scaleway/ultraviolet/commit/865c160aee2db5bd5e7b357e9693a45a17ef4284)]: + - @ultraviolet/themes@2.0.0-beta.0 + - @ultraviolet/icons@4.0.0-beta.0 + ## 1.95.14 ### Patch Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index 40605bbda8..3eb051dd54 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@ultraviolet/ui", - "version": "1.95.14", + "version": "2.0.0-beta.0", "description": "Ultraviolet UI", "homepage": "https://github.com/scaleway/ultraviolet#readme", "repository": { From fa5103eaa69e1b137589bad9b04b515a19991501 Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Tue, 13 May 2025 17:48:28 +0200 Subject: [PATCH 010/109] ci: fix missing changeset on ui (#5139) * chore: sync main to beta (#5110) * ci: beta sync with main and releases (#5102) * ci: fix (#5103) * ci: change github action (#5106) * ci: fix sync github action (#5109) --------- Co-authored-by: Matthias Prost * feat: beta 1 (#5058) * feat: beta 1 * ci: fix unit tests * fix: typecheck for all stories * ci: add changeset pre release file * fix: add changeset and fix stories * fix: unit tests * chore: changeset major release for beta (#5112) * ci: sync main beta pr (#5125) * ci: beta sync with main and releases (#5102) * ci: fix (#5103) * ci: change github action (#5106) * ci: fix sync github action (#5109) * refactor(Navigation): deprecated and change some types category icon items (#5100) * refactor(Navigation): deprecated and change some types category icon items * fix: navigation improive badge visibility * chore: release (#5098) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore(devdeps): update dependency @eslint/compat to v1.2.9 (#5115) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency browserslist to v4.24.5 (#5116) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency eslint-plugin-oxlint to v0.16.9 (#5117) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * revert(react-hook-form): useless re-render (#5120) * fix(Notice): icon size (#5119) * fix(Notice): icon size * fix: unit tests * chore: release (#5121) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore(devdeps): update commitlint monorepo to v19.8.1 (#5122) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency @changesets/cli to v2.29.3 (#5123) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency eslint-plugin-oxlint to v0.16.10 (#5124) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --------- Co-authored-by: Scaleway Bot Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * refactor(CategoryIcon): renaming some category icons (#5113) * refactor(CategoryIcon): renaming some category icons * fix: feedback oceane * fix: plus and form to have ui ad peer deps (#5126) * fix: plus and form have ui as peer deps * fix: readme and dependencies * ci: sync beta branch (#5131) * ci: beta sync with main and releases (#5102) * ci: fix (#5103) * ci: change github action (#5106) * ci: fix sync github action (#5109) * refactor(Navigation): deprecated and change some types category icon items (#5100) * refactor(Navigation): deprecated and change some types category icon items * fix: navigation improive badge visibility * chore: release (#5098) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore(devdeps): update dependency @eslint/compat to v1.2.9 (#5115) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency browserslist to v4.24.5 (#5116) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency eslint-plugin-oxlint to v0.16.9 (#5117) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * revert(react-hook-form): useless re-render (#5120) * fix(Notice): icon size (#5119) * fix(Notice): icon size * fix: unit tests * chore: release (#5121) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore(devdeps): update commitlint monorepo to v19.8.1 (#5122) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency @changesets/cli to v2.29.3 (#5123) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(devdeps): update dependency eslint-plugin-oxlint to v0.16.10 (#5124) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(icons): implement use client directive for all icons (#5127) * chore: release (#5129) * ci: remove sync main to beta --------- Co-authored-by: Scaleway Bot Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * ci: fix changeset (#5132) * chore: release (beta) (#5111) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * ci: fix missing changeset on ui * docs: update readme --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Scaleway Bot Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .changeset/major-views-add.md | 146 ++++++++++++++++++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 .changeset/major-views-add.md diff --git a/.changeset/major-views-add.md b/.changeset/major-views-add.md new file mode 100644 index 0000000000..c650a09ceb --- /dev/null +++ b/.changeset/major-views-add.md @@ -0,0 +1,146 @@ +--- +"@ultraviolet/ui": major +--- + +Following the icon major update some components have recieved a small update to improve the usage of icons. + +## Detailed migration per components + +### Button + +`icon`, `iconPosition`, `iconVariant` props are deprecated. You can directly use the imported icon you need in the children. + +```tsx +// Before +import { Button } from '@ultraviolet/ui' + + +``` + +```tsx +// After +import { Button } from '@ultraviolet/ui' +import { PencilOutlineIcon } from '@ultraviolet/icons' + + +``` + +### Badge + +`icon` props is deprecated. You can directly use the imported icon you need in the children. + +```tsx +// Before +import { Badge } from '@ultraviolet/ui' + + + Edit + +``` + +```tsx +// After +import { Badge } from '@ultraviolet/ui' +import { PencilOutlineIcon } from '@ultraviolet/icons' + + + Edit + +``` + +### Bullet + +`icon` and `iconVariant` props are deprecated. You can directly use the imported icon you need in the children. + +```tsx +// Before +import { Bullet } from '@ultraviolet/ui' + + + +``` + +```tsx +// After +import { Bullet } from '@ultraviolet/ui' +import { CheckIcon, CheckCircleOutlineIcon } from '@ultraviolet/icons' + + + + + + + + +``` + +### AvatarV2 + +`icon` prop is deprecated. You can directly use the imported icon you need in the children. + +```tsx +// Before +import { AvatarV2 } from '@ultraviolet/ui' + + +``` + +```tsx +// After +import { AvatarV2 } from '@ultraviolet/ui' +import { MosaicIcon } from '@ultraviolet/icons' + + + + +``` + +### Separator + +`icon` prop is deprecated. You can directly use the imported icon you need in the children. + +```tsx +// Before +import { Separator } from '@ultraviolet/ui' + + +``` + +```tsx +// After +import { Separator } from '@ultraviolet/ui' +import { RayTopArrowIcon } from '@ultraviolet/icons' + + + + +``` + + +### Tag + +`icon` prop is deprecated. You can directly use the imported icon you need in the children. + +```tsx +// Before +import { Tag } from '@ultraviolet/ui' + + + Valid + +``` + +```tsx +// After +import { Tag } from '@ultraviolet/ui' +import { CheckIcon } from '@ultraviolet/icons' + + + + Valid + +``` From d784891222b342ec29f0cd751475ec638bf336d8 Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Wed, 14 May 2025 09:53:06 +0200 Subject: [PATCH 011/109] ci: add changeset (#5142) --- .changeset/bitter-turtles-knock.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/bitter-turtles-knock.md diff --git a/.changeset/bitter-turtles-knock.md b/.changeset/bitter-turtles-knock.md new file mode 100644 index 0000000000..99eb4bb6ba --- /dev/null +++ b/.changeset/bitter-turtles-knock.md @@ -0,0 +1,5 @@ +--- +"@ultraviolet/icons": patch +--- + +New logo icons From bd169e8f61d3238bf070d4305eb9f98ba30b86fe Mon Sep 17 00:00:00 2001 From: Scaleway Bot Date: Wed, 14 May 2025 10:34:50 +0200 Subject: [PATCH 012/109] chore: release (beta) (#5141) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/pre.json | 2 + packages/form/CHANGELOG.md | 14 +++- packages/form/package.json | 2 +- packages/icons/CHANGELOG.md | 6 ++ packages/icons/package.json | 2 +- packages/plus/CHANGELOG.md | 8 ++ packages/plus/package.json | 2 +- packages/ui/CHANGELOG.md | 160 +++++++++++++++++++++++++++++++++++- packages/ui/package.json | 2 +- 9 files changed, 188 insertions(+), 10 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 967d5b65c8..779a2a61de 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -16,6 +16,8 @@ "@utils/test": "0.0.1" }, "changesets": [ + "bitter-turtles-knock", + "major-views-add", "modern-poems-lose", "sixty-beds-repair", "spicy-sites-march", diff --git a/packages/form/CHANGELOG.md b/packages/form/CHANGELOG.md index 688165b466..6e133825cd 100644 --- a/packages/form/CHANGELOG.md +++ b/packages/form/CHANGELOG.md @@ -1,5 +1,13 @@ # Change Log +## 4.0.0-beta.1 + +### Patch Changes + +- Updated dependencies [[`1464f54`](https://github.com/scaleway/ultraviolet/commit/1464f54cb9099b6daa51b254cc935f36147004d0), [`4308966`](https://github.com/scaleway/ultraviolet/commit/4308966450c594969417d3740d984099463e7da8)]: + - @ultraviolet/icons@4.0.0-beta.1 + - @ultraviolet/ui@2.0.0-beta.1 + ## 4.0.0-beta.0 ### Major Changes @@ -35,9 +43,9 @@ ### Patch Changes - Updated dependencies [[`37a7d63`](https://github.com/scaleway/ultraviolet/commit/37a7d632cd1e61d7615e5356fc179ec08f3bec09), [`a928589`](https://github.com/scaleway/ultraviolet/commit/a9285896d638e34eba9bb25c55c38de2aef4e210), [`865c160`](https://github.com/scaleway/ultraviolet/commit/865c160aee2db5bd5e7b357e9693a45a17ef4284)]: - - @ultraviolet/themes@2.0.0-beta.0 - - @ultraviolet/ui@2.0.0-beta.0 - - @ultraviolet/icons@4.0.0-beta.0 + - @ultraviolet/themes@2.0.0-beta.0 + - @ultraviolet/ui@2.0.0-beta.0 + - @ultraviolet/icons@4.0.0-beta.0 ## 3.17.15 diff --git a/packages/form/package.json b/packages/form/package.json index e6b8333732..25d986978f 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -1,6 +1,6 @@ { "name": "@ultraviolet/form", - "version": "4.0.0-beta.0", + "version": "4.0.0-beta.1", "description": "Ultraviolet Form", "homepage": "https://github.com/scaleway/ultraviolet#readme", "repository": { diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index f288f67e90..16a5ca0c53 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 4.0.0-beta.1 + +### Patch Changes + +- [#5142](https://github.com/scaleway/ultraviolet/pull/5142) [`1464f54`](https://github.com/scaleway/ultraviolet/commit/1464f54cb9099b6daa51b254cc935f36147004d0) Thanks [@matthprost](https://github.com/matthprost)! - New logo icons + ## 4.0.0-beta.0 ### Major Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index 684b653ce6..1b43e2a422 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@ultraviolet/icons", - "version": "4.0.0-beta.0", + "version": "4.0.0-beta.1", "description": "Ultraviolet Icons", "homepage": "https://github.com/scaleway/ultraviolet#readme", "repository": { diff --git a/packages/plus/CHANGELOG.md b/packages/plus/CHANGELOG.md index 8c9db0b30b..4d40a07507 100644 --- a/packages/plus/CHANGELOG.md +++ b/packages/plus/CHANGELOG.md @@ -1,5 +1,13 @@ # @ultraviolet/plus +## 1.0.0-beta.1 + +### Patch Changes + +- Updated dependencies [[`1464f54`](https://github.com/scaleway/ultraviolet/commit/1464f54cb9099b6daa51b254cc935f36147004d0), [`4308966`](https://github.com/scaleway/ultraviolet/commit/4308966450c594969417d3740d984099463e7da8)]: + - @ultraviolet/icons@4.0.0-beta.1 + - @ultraviolet/ui@2.0.0-beta.1 + ## 1.0.0-beta.0 ### Major Changes diff --git a/packages/plus/package.json b/packages/plus/package.json index 4163a810d7..83e9da5607 100644 --- a/packages/plus/package.json +++ b/packages/plus/package.json @@ -1,6 +1,6 @@ { "name": "@ultraviolet/plus", - "version": "1.0.0-beta.0", + "version": "1.0.0-beta.1", "description": "Ultraviolet Plus", "homepage": "https://github.com/scaleway/ultraviolet#readme", "repository": { diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 5ac9679b30..f39d4787d0 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,148 @@ # Change Log +## 2.0.0-beta.1 + +### Major Changes + +- [#5139](https://github.com/scaleway/ultraviolet/pull/5139) [`4308966`](https://github.com/scaleway/ultraviolet/commit/4308966450c594969417d3740d984099463e7da8) Thanks [@matthprost](https://github.com/matthprost)! - Following the icon major update some components have recieved a small update to improve the usage of icons. + + ## Detailed migration per components + + ### Button + + `icon`, `iconPosition`, `iconVariant` props are deprecated. You can directly use the imported icon you need in the children. + + ```tsx + // Before + import { Button } from "@ultraviolet/ui"; + + ; + ``` + + ```tsx + // After + import { Button } from "@ultraviolet/ui"; + import { PencilOutlineIcon } from "@ultraviolet/icons"; + + ; + ``` + + ### Badge + + `icon` props is deprecated. You can directly use the imported icon you need in the children. + + ```tsx + // Before + import { Badge } from '@ultraviolet/ui' + + + Edit + + ``` + + ```tsx + // After + import { Badge } from "@ultraviolet/ui"; + import { PencilOutlineIcon } from "@ultraviolet/icons"; + + + Edit + ; + ``` + + ### Bullet + + `icon` and `iconVariant` props are deprecated. You can directly use the imported icon you need in the children. + + ```tsx + // Before + import { Bullet } from '@ultraviolet/ui' + + + + ``` + + ```tsx + // After + import { Bullet } from '@ultraviolet/ui' + import { CheckIcon, CheckCircleOutlineIcon } from '@ultraviolet/icons' + + + + + + + + + ``` + + ### AvatarV2 + + `icon` prop is deprecated. You can directly use the imported icon you need in the children. + + ```tsx + // Before + import { AvatarV2 } from "@ultraviolet/ui"; + + ; + ``` + + ```tsx + // After + import { AvatarV2 } from "@ultraviolet/ui"; + import { MosaicIcon } from "@ultraviolet/icons"; + + + + ; + ``` + + ### Separator + + `icon` prop is deprecated. You can directly use the imported icon you need in the children. + + ```tsx + // Before + import { Separator } from "@ultraviolet/ui"; + + ; + ``` + + ```tsx + // After + import { Separator } from "@ultraviolet/ui"; + import { RayTopArrowIcon } from "@ultraviolet/icons"; + + + + ; + ``` + + ### Tag + + `icon` prop is deprecated. You can directly use the imported icon you need in the children. + + ```tsx + // Before + import { Tag } from "@ultraviolet/ui"; + + Valid; + ``` + + ```tsx + // After + import { Tag } from "@ultraviolet/ui"; + import { CheckIcon } from "@ultraviolet/icons"; + + + + Valid + ; + ``` ## 2.0.0-beta.0 ### Major Changes @@ -39,10 +182,21 @@ ### Patch Changes -- [#5277](https://github.com/scaleway/ultraviolet/pull/5277) [`40d4066`](https://github.com/scaleway/ultraviolet/commit/40d40662d7305712b0ca23d08759b37590a677a0) Thanks [@renovate](https://github.com/apps/renovate)! - Updated dependency `next` to `15.3.4`. - Updated dependency `eslint-config-next` to `15.3.4`. +- Updated dependencies [[`1464f54`](https://github.com/scaleway/ultraviolet/commit/1464f54cb9099b6daa51b254cc935f36147004d0)]: + - @ultraviolet/icons@4.0.0-beta.1 -- [#5287](https://github.com/scaleway/ultraviolet/pull/5287) [`80d5c50`](https://github.com/scaleway/ultraviolet/commit/80d5c50e294efdc5fe714a55ef985ff142c07b6e) Thanks [@renovate](https://github.com/apps/renovate)! - Updated dependency `@scaleway/random-name` to `5.1.2`. +## 2.0.0-beta.0 + +### Major Changes + +- [#5112](https://github.com/scaleway/ultraviolet/pull/5112) [`37a7d63`](https://github.com/scaleway/ultraviolet/commit/37a7d632cd1e61d7615e5356fc179ec08f3bec09) Thanks [@matthprost](https://github.com/matthprost)! - Beta release + +### Patch Changes + +- Updated dependencies [[`37a7d63`](https://github.com/scaleway/ultraviolet/commit/37a7d632cd1e61d7615e5356fc179ec08f3bec09), [`a928589`](https://github.com/scaleway/ultraviolet/commit/a9285896d638e34eba9bb25c55c38de2aef4e210), [`865c160`](https://github.com/scaleway/ultraviolet/commit/865c160aee2db5bd5e7b357e9693a45a17ef4284)]: + - @ultraviolet/themes@2.0.0-beta.0 + - @ultraviolet/icons@4.0.0-beta.0 +>>>>>>> 96a6d7431 (chore: release (beta) (#5111)) ## 1.95.11 diff --git a/packages/ui/package.json b/packages/ui/package.json index 3eb051dd54..b3c2485322 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@ultraviolet/ui", - "version": "2.0.0-beta.0", + "version": "2.0.0-beta.1", "description": "Ultraviolet UI", "homepage": "https://github.com/scaleway/ultraviolet#readme", "repository": { From 641e937cc16351c6444c23af1c0787a1ef282642 Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Wed, 14 May 2025 14:05:41 +0200 Subject: [PATCH 013/109] fix(SteppedListCard): content to fit better (#5144) --- .changeset/thick-stars-dance.md | 5 +++++ .../src/components/SteppedListCard/SteppedListContent.tsx | 1 + .../SteppedListCard/__stories__/Template.stories.tsx | 6 +++++- .../__tests__/__snapshots__/index.test.tsx.snap | 5 +++++ 4 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 .changeset/thick-stars-dance.md diff --git a/.changeset/thick-stars-dance.md b/.changeset/thick-stars-dance.md new file mode 100644 index 0000000000..887b0f7bb4 --- /dev/null +++ b/.changeset/thick-stars-dance.md @@ -0,0 +1,5 @@ +--- +"@ultraviolet/plus": patch +--- + +Fix `` content to fit better diff --git a/packages/plus/src/components/SteppedListCard/SteppedListContent.tsx b/packages/plus/src/components/SteppedListCard/SteppedListContent.tsx index 5a7253265c..8e6f5fdc1f 100644 --- a/packages/plus/src/components/SteppedListCard/SteppedListContent.tsx +++ b/packages/plus/src/components/SteppedListCard/SteppedListContent.tsx @@ -7,6 +7,7 @@ import { useContext, useEffect } from 'react' import { Data, nextStep } from './helper' const StyledContent = styled(Stack)` + min-width: 0; padding: ${({ theme }) => theme.space['3']}; padding-top: ${({ theme }) => theme.space['4']}; ` diff --git a/packages/plus/src/components/SteppedListCard/__stories__/Template.stories.tsx b/packages/plus/src/components/SteppedListCard/__stories__/Template.stories.tsx index fa4bb69f1b..1a26fb4fbe 100644 --- a/packages/plus/src/components/SteppedListCard/__stories__/Template.stories.tsx +++ b/packages/plus/src/components/SteppedListCard/__stories__/Template.stories.tsx @@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react' import styled from '@emotion/styled' import type { StoryFn } from '@storybook/react' import { blockStorageWire } from '@ultraviolet/illustrations/products/blockStorage' -import { Button, Stack, Text } from '@ultraviolet/ui' +import { Button, Snippet, Stack, Text } from '@ultraviolet/ui' import type { ComponentProps } from 'react' import { SteppedListCard } from '../SteppedListCard' @@ -37,6 +37,10 @@ export const Template: StoryFn< > {nextStep => ( + + pnpm add @ultraviolet/ui; pnpm install; pnpm start; pnpm build; + pnpm test:unit; pnpm test:visual; pnpm build:storybook; + We are thrilled to count you as a Scaleway user! We are looking forward to providing you with the very best experience. To order diff --git a/packages/plus/src/components/SteppedListCard/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/SteppedListCard/__tests__/__snapshots__/index.test.tsx.snap index 1227f59829..7a060d0edc 100644 --- a/packages/plus/src/components/SteppedListCard/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/plus/src/components/SteppedListCard/__tests__/__snapshots__/index.test.tsx.snap @@ -271,6 +271,7 @@ exports[`SteppedListCard > should hide the toggle button 1`] = ` -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; + min-width: 0; padding: 1.5rem; padding-top: 2rem; } @@ -733,6 +734,7 @@ exports[`SteppedListCard > should work with custom hide action 1`] = ` -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; + min-width: 0; padding: 1.5rem; padding-top: 2rem; } @@ -1191,6 +1193,7 @@ exports[`SteppedListCard > should work with default props 1`] = ` -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; + min-width: 0; padding: 1.5rem; padding-top: 2rem; } @@ -1987,6 +1990,7 @@ exports[`SteppedListCard > should work with pre-completed step 1`] = ` -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; + min-width: 0; padding: 1.5rem; padding-top: 2rem; } @@ -2012,6 +2016,7 @@ exports[`SteppedListCard > should work with pre-completed step 1`] = ` -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; + min-width: 0; padding: 1.5rem; padding-top: 2rem; } From 58b646107e786e9a0cd447337fced6f6b3a78c23 Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Thu, 15 May 2025 10:22:50 +0200 Subject: [PATCH 014/109] fix(Notification): improve display notification (#5147) --- .changeset/crazy-colts-accept.md | 5 + .../__snapshots__/index.test.tsx.snap | 93 ++++--- .../__snapshots__/index.test.tsx.snap | 166 ++++++------ .../ui/src/components/Notification/index.tsx | 40 +-- .../__snapshots__/index.test.tsx.snap | 240 +++++++++--------- .../__snapshots__/index.test.tsx.snap | 88 +++---- .../__snapshots__/index.test.tsx.snap | 120 +++++---- 7 files changed, 364 insertions(+), 388 deletions(-) create mode 100644 .changeset/crazy-colts-accept.md diff --git a/.changeset/crazy-colts-accept.md b/.changeset/crazy-colts-accept.md new file mode 100644 index 0000000000..7a88ba9c0e --- /dev/null +++ b/.changeset/crazy-colts-accept.md @@ -0,0 +1,5 @@ +--- +"@ultraviolet/ui": patch +--- + +Fix `` position to avoid error in index diff --git a/packages/ui/src/components/Checkbox/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Checkbox/__tests__/__snapshots__/index.test.tsx.snap index 36504487cc..a5f9eed8a5 100644 --- a/packages/ui/src/components/Checkbox/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Checkbox/__tests__/__snapshots__/index.test.tsx.snap @@ -657,7 +657,7 @@ exports[`Checkbox > renders correctly checked 1`] = ` aria-invalid="false" checked="" class="emotion-2 emotion-3" - id="«re»" + id="«rf»" type="checkbox" /> renders correctly checked 1`] = ` > @@ -1011,7 +1011,7 @@ exports[`Checkbox > renders correctly checked and disabled 1`] = ` checked="" class="emotion-2 emotion-3" disabled="" - id="«ro»" + id="«rp»" type="checkbox" /> renders correctly checked and disabled 1`] = ` > @@ -1376,7 +1376,7 @@ exports[`Checkbox > renders correctly checked with helper 1`] = ` aria-invalid="false" checked="" class="emotion-2 emotion-3" - id="«rh»" + id="«ri»" type="checkbox" /> renders correctly checked with helper 1`] = ` > @@ -2086,7 +2086,7 @@ exports[`Checkbox > renders correctly indeterminate 1`] = ` aria-checked="mixed" aria-invalid="false" class="emotion-2 emotion-3" - id="«rl»" + id="«rm»" type="checkbox" /> renders correctly indeterminate 1`] = ` > @@ -2437,7 +2437,7 @@ exports[`Checkbox > renders correctly indeterminate and disabled 1`] = ` aria-invalid="false" class="emotion-2 emotion-3" disabled="" - id="«rr»" + id="«rs»" type="checkbox" /> renders correctly indeterminate and disabled 1`] = ` > @@ -2788,7 +2788,7 @@ exports[`Checkbox > renders correctly invisible 1`] = ` aria-checked="false" aria-invalid="false" class="emotion-2 emotion-3" - id="«ru»" + id="«rv»" type="checkbox" /> renders correctly invisible 1`] = ` > @@ -3401,17 +3401,15 @@ exports[`Checkbox > renders correctly required 1`] = ` } .emotion-15 { - vertical-align: middle; - fill: #b3144d; - height: 8px; - width: 8px; - min-width: 8px; - min-height: 8px; -} - -.emotion-15 .fillStroke { - stroke: #b3144d; - fill: none; + color: #b3144d; + font-size: 1rem; + font-family: Inter,Asap,sans-serif; + font-weight: 400; + letter-spacing: 0; + line-height: 1.5rem; + text-transform: none; + -webkit-text-decoration: none; + text-decoration: none; }
renders correctly required 1`] = ` > Checkbox Label - - - - + + *
@@ -3790,7 +3783,7 @@ exports[`Checkbox > renders correctly with a value 1`] = ` aria-checked="false" aria-invalid="false" class="emotion-2 emotion-3" - id="«r1a»" + id="«r1b»" type="checkbox" value="test" /> @@ -3829,7 +3822,7 @@ exports[`Checkbox > renders correctly with a value 1`] = ` > @@ -4154,10 +4147,10 @@ exports[`Checkbox > renders correctly with an error 1`] = ` > renders correctly with an error 1`] = ` > @@ -4514,7 +4507,7 @@ exports[`Checkbox > renders correctly with indeterminate state 1`] = ` aria-checked="mixed" aria-invalid="false" class="emotion-2 emotion-3" - id="«r1j»" + id="«r1k»" type="checkbox" /> renders correctly with indeterminate state 1`] = ` > @@ -4893,7 +4886,7 @@ exports[`Checkbox > renders correctly with progress 1`] = ` aria-invalid="false" class="emotion-7 emotion-8" disabled="" - id="«r15»" + id="«r16»" type="checkbox" />
renders correctly with progress 1`] = ` > @@ -5182,7 +5175,7 @@ exports[`Checkbox > renders correctly with progress and no child 1`] = ` aria-label="check" class="emotion-7 emotion-8" disabled="" - id="«r18»" + id="«r19»" type="checkbox" />
@@ -5510,7 +5503,7 @@ exports[`Checkbox > renders correctly with sizes 1`] = ` aria-checked="false" aria-invalid="false" class="emotion-2 emotion-3" - id="«r1d»" + id="«r1e»" type="checkbox" value="test" /> @@ -5550,7 +5543,7 @@ exports[`Checkbox > renders correctly with sizes 1`] = ` > @@ -5604,7 +5597,7 @@ exports[`Checkbox > renders correctly with sizes 1`] = ` aria-invalid="false" class="emotion-2 emotion-3" disabled="" - id="«r1g»" + id="«r1h»" type="checkbox" value="test" /> @@ -5616,7 +5609,7 @@ exports[`Checkbox > renders correctly with sizes 1`] = ` > @@ -5933,8 +5926,8 @@ exports[`Checkbox > renders correctly with tooltip 1`] = ` data-testid="testing" >
@@ -5948,7 +5941,7 @@ exports[`Checkbox > renders correctly with tooltip 1`] = ` aria-checked="false" aria-invalid="false" class="emotion-4 emotion-5" - id="«rb»" + id="«rc»" type="checkbox" /> renders correctly with tooltip 1`] = ` > diff --git a/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap index 64ba17e044..70e81fe783 100644 --- a/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/CheckboxGroup/__tests__/__snapshots__/index.test.tsx.snap @@ -2793,22 +2793,19 @@ exports[`CheckboxGroup > renders correctly with required prop 1`] = ` text-decoration: none; } -.emotion-11 { - vertical-align: middle; - fill: #b3144d; - height: 8px; - width: 8px; - min-width: 8px; - min-height: 8px; - vertical-align: super; -} - -.emotion-11 .fillStroke { - stroke: #b3144d; - fill: none; +.emotion-10 { + color: #b3144d; + font-size: 1rem; + font-family: Inter,Asap,sans-serif; + font-weight: 400; + letter-spacing: 0; + line-height: 1.5rem; + text-transform: none; + -webkit-text-decoration: none; + text-decoration: none; } -.emotion-16 { +.emotion-15 { position: relative; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -2821,65 +2818,65 @@ exports[`CheckboxGroup > renders correctly with required prop 1`] = ` gap: 0.5rem; } -.emotion-16 .eqr7bqq4 { +.emotion-15 .eqr7bqq4 { cursor: pointer; } -.emotion-16[aria-disabled='true'] { +.emotion-15[aria-disabled='true'] { cursor: not-allowed; color: #b5b7bd; } -.emotion-16[aria-disabled='true'] .eqr7bqq4 { +.emotion-15[aria-disabled='true'] .eqr7bqq4 { cursor: not-allowed; } -.emotion-16[aria-disabled='true'] .emotion-21 { +.emotion-15[aria-disabled='true'] .emotion-20 { fill: #e9eaeb; } -.emotion-16[aria-disabled='true'] .emotion-21 .emotion-23 { +.emotion-15[aria-disabled='true'] .emotion-20 .emotion-22 { stroke: #d9dadd; fill: #f3f3f4; } -.emotion-16[aria-disabled='true'] .emotion-19[aria-invalid="true"]:checked+.emotion-21 { +.emotion-15[aria-disabled='true'] .emotion-18[aria-invalid="true"]:checked+.emotion-20 { fill: #ffd3e3; } -.emotion-16[aria-disabled='true'] .emotion-19[aria-invalid="true"]:checked+.emotion-21 .emotion-23 { +.emotion-15[aria-disabled='true'] .emotion-18[aria-invalid="true"]:checked+.emotion-20 .emotion-22 { stroke: #ffd3e3; fill: #ffd3e3; } -.emotion-16[aria-disabled='true'] .emotion-19[aria-invalid="true"]+.emotion-21 { +.emotion-15[aria-disabled='true'] .emotion-18[aria-invalid="true"]+.emotion-20 { fill: #ffebf2; } -.emotion-16[aria-disabled='true'] .emotion-19[aria-invalid="true"]+.emotion-21 .emotion-23 { +.emotion-15[aria-disabled='true'] .emotion-18[aria-invalid="true"]+.emotion-20 .emotion-22 { stroke: #ffbbd3; fill: #ffebf2; } -.emotion-16[aria-disabled='true'] .emotion-19:checked+.emotion-21 { +.emotion-15[aria-disabled='true'] .emotion-18:checked+.emotion-20 { fill: #e5dbfd; } -.emotion-16[aria-disabled='true'] .emotion-19:checked+.emotion-21 .emotion-23 { +.emotion-15[aria-disabled='true'] .emotion-18:checked+.emotion-20 .emotion-22 { stroke: #d8c5fc; fill: #d8c5fc; } -.emotion-16[aria-disabled='true'] .emotion-19[aria-checked="mixed"]+.emotion-21 { +.emotion-15[aria-disabled='true'] .emotion-18[aria-checked="mixed"]+.emotion-20 { fill: #e5dbfd; } -.emotion-16[aria-disabled='true'] .emotion-19[aria-checked="mixed"]+.emotion-21 .emotion-23 { +.emotion-15[aria-disabled='true'] .emotion-18[aria-checked="mixed"]+.emotion-20 .emotion-22 { stroke: #e5dbfd; fill: #e5dbfd; } -.emotion-16 .emotion-19:checked+.emotion-21 path { +.emotion-15 .emotion-18:checked+.emotion-20 path { transform-origin: center; -webkit-transition: 200ms -webkit-transform ease-in-out; transition: 200ms transform ease-in-out; @@ -2893,66 +2890,66 @@ exports[`CheckboxGroup > renders correctly with required prop 1`] = ` transform: translate(2px, 2px); } -.emotion-16 .emotion-19:checked+.emotion-21 .emotion-23 { +.emotion-15 .emotion-18:checked+.emotion-20 .emotion-22 { fill: #8c40ef; stroke: #8c40ef; } -.emotion-16 .emotion-19[aria-invalid="true"]:checked+.emotion-21 .emotion-23 { +.emotion-15 .emotion-18[aria-invalid="true"]:checked+.emotion-20 .emotion-22 { fill: #e51963; stroke: #e51963; } -.emotion-16 .emotion-19[aria-checked="mixed"]+.emotion-21 .eqr7bqq6 { +.emotion-15 .emotion-18[aria-checked="mixed"]+.emotion-20 .eqr7bqq6 { fill: #ffffff; } -.emotion-16 .emotion-19[aria-checked="mixed"]+.emotion-21 .emotion-23 { +.emotion-15 .emotion-18[aria-checked="mixed"]+.emotion-20 .emotion-22 { fill: #8c40ef; stroke: #8c40ef; } -.emotion-16:hover[aria-disabled='false'] .emotion-19[aria-invalid='false'][aria-checked='false']+.emotion-21 .emotion-23 { +.emotion-15:hover[aria-disabled='false'] .emotion-18[aria-invalid='false'][aria-checked='false']+.emotion-20 .emotion-22 { stroke: #792dd4; fill: #e5dbfd; } -.emotion-16:hover[aria-disabled='false'] .emotion-19[aria-invalid='false'][aria-checked='true']+.emotion-21 .emotion-23 { +.emotion-15:hover[aria-disabled='false'] .emotion-18[aria-invalid='false'][aria-checked='true']+.emotion-20 .emotion-22 { stroke: #792dd4; fill: #792dd4; } -.emotion-16:hover[aria-disabled='false'] .emotion-19[aria-invalid='false'][aria-checked='mixed']+.emotion-21 .emotion-23 { +.emotion-15:hover[aria-disabled='false'] .emotion-18[aria-invalid='false'][aria-checked='mixed']+.emotion-20 .emotion-22 { stroke: #792dd4; fill: #792dd4; } -.emotion-16:hover[aria-disabled='false'] .emotion-19[aria-invalid='true'][aria-checked='false']+.emotion-21 .emotion-23 { +.emotion-15:hover[aria-disabled='false'] .emotion-18[aria-invalid='true'][aria-checked='false']+.emotion-20 .emotion-22 { stroke: #92103f; fill: #ffd3e3; } -.emotion-16:hover[aria-disabled='false'] .emotion-19[aria-invalid='true'][aria-checked='true']+.emotion-21 .emotion-23 { +.emotion-15:hover[aria-disabled='false'] .emotion-18[aria-invalid='true'][aria-checked='true']+.emotion-20 .emotion-22 { stroke: #d6175c; fill: #d6175c; } -.emotion-16 .emotion-19[aria-invalid="true"]+.emotion-21 { +.emotion-15 .emotion-18[aria-invalid="true"]+.emotion-20 { fill: #e51963; } -.emotion-16 .emotion-19[aria-invalid="true"]+.emotion-21 .emotion-23 { +.emotion-15 .emotion-18[aria-invalid="true"]+.emotion-20 .emotion-22 { stroke: #e51963; fill: #ffebf2; } -.emotion-16 label { +.emotion-15 label { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } -.emotion-18 { +.emotion-17 { position: absolute; white-space: nowrap; height: 1.5rem; @@ -2961,57 +2958,57 @@ exports[`CheckboxGroup > renders correctly with required prop 1`] = ` border-width: 0; } -.emotion-18:not(:disabled) { +.emotion-17:not(:disabled) { cursor: pointer; } -.emotion-18:disabled { +.emotion-17:disabled { cursor: not-allowed; } -.emotion-18:not(:disabled):checked+.emotion-21, -.emotion-18:not(:disabled)[aria-checked='mixed']+.emotion-21 { +.emotion-17:not(:disabled):checked+.emotion-20, +.emotion-17:not(:disabled)[aria-checked='mixed']+.emotion-20 { fill: #8c40ef; } -.emotion-18:not(:disabled):checked+.emotion-21 .emotion-23, -.emotion-18:not(:disabled)[aria-checked='mixed']+.emotion-21 .emotion-23 { +.emotion-17:not(:disabled):checked+.emotion-20 .emotion-22, +.emotion-17:not(:disabled)[aria-checked='mixed']+.emotion-20 .emotion-22 { stroke: #8c40ef; } -.emotion-18:not(:disabled)[aria-invalid='true']+.emotion-21, -.emotion-18:not(:disabled)[aria-invalid='mixed']+.emotion-21 { +.emotion-17:not(:disabled)[aria-invalid='true']+.emotion-20, +.emotion-17:not(:disabled)[aria-invalid='mixed']+.emotion-20 { fill: #ffebf2; } -.emotion-18:not(:disabled)[aria-invalid='true']+.emotion-21 .emotion-23, -.emotion-18:not(:disabled)[aria-invalid='mixed']+.emotion-21 .emotion-23 { +.emotion-17:not(:disabled)[aria-invalid='true']+.emotion-20 .emotion-22, +.emotion-17:not(:disabled)[aria-invalid='mixed']+.emotion-20 .emotion-22 { stroke: #b3144d; } -.emotion-18:focus+.emotion-21 { +.emotion-17:focus+.emotion-20 { background-color: #f1eefc; fill: #ffebf2; outline: 1px solid 0px 0px 0px 3px #8c40ef40; } -.emotion-18:focus+.emotion-21 .emotion-23 { +.emotion-17:focus+.emotion-20 .emotion-22 { stroke: #792dd4; fill: #e5dbfd; } -.emotion-18[aria-invalid='true']:focus+.emotion-21 { +.emotion-17[aria-invalid='true']:focus+.emotion-20 { background-color: #ffebf2; fill: #ffebf2; outline: 1px solid 0px 0px 0px 3px #f91b6c40; } -.emotion-18[aria-invalid='true']:focus+.emotion-21 .emotion-23 { +.emotion-17[aria-invalid='true']:focus+.emotion-20 .emotion-22 { stroke: #92103f; fill: #ffd3e3; } -.emotion-20 { +.emotion-19 { border-radius: 0.25rem; height: 1.5rem; width: 1.5rem; @@ -3019,7 +3016,7 @@ exports[`CheckboxGroup > renders correctly with required prop 1`] = ` min-height: 1.5rem; } -.emotion-20 path { +.emotion-19 path { fill: #ffffff; -webkit-transform: translate(2px, 2px); -moz-transform: translate(2px, 2px); @@ -3031,12 +3028,12 @@ exports[`CheckboxGroup > renders correctly with required prop 1`] = ` transform: scale(0); } -.emotion-22 { +.emotion-21 { fill: #ffffff; stroke: #d9dadd; } -.emotion-24 { +.emotion-23 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3062,7 +3059,7 @@ exports[`CheckboxGroup > renders correctly with required prop 1`] = ` flex: 1; } -.emotion-26 { +.emotion-25 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -3088,7 +3085,7 @@ exports[`CheckboxGroup > renders correctly with required prop 1`] = ` flex: 1; } -.emotion-29 { +.emotion-28 { color: #3f4250; font-size: 1rem; font-family: Inter,Asap,sans-serif; @@ -3121,14 +3118,11 @@ exports[`CheckboxGroup > renders correctly with required prop 1`] = ` class="emotion-8 emotion-9" > Label  - - - + * +
renders correctly with required prop 1`] = ` >
renders correctly with required prop 1`] = `
@@ -3193,27 +3187,27 @@ exports[`CheckboxGroup > renders correctly with required prop 1`] = `
renders correctly with required prop 1`] = `
diff --git a/packages/ui/src/components/Notification/index.tsx b/packages/ui/src/components/Notification/index.tsx index 5995adb846..50cb1d8d5a 100644 --- a/packages/ui/src/components/Notification/index.tsx +++ b/packages/ui/src/components/Notification/index.tsx @@ -1,7 +1,7 @@ 'use client' import type { Theme } from '@emotion/react' -import { ClassNames, css, useTheme } from '@emotion/react' +import { ClassNames, Global, css, useTheme } from '@emotion/react' import { CloseIcon } from '@ultraviolet/icons' import type { ReactNode } from 'react' import { @@ -31,6 +31,13 @@ type CloseButtonProps = { theme: ThemeToastify } +const toaster = css` + ${PREFIX} { + z-index: 1; + position: fixed; + } +` + const styles = { toast: ({ theme }: StylesProps) => css` border-radius: ${theme.radii.default}; @@ -132,20 +139,23 @@ export const NotificationContainer = ({ {/* eslint-disable-next-line @typescript-eslint/unbound-method */} {({ css: localCss }) => ( - + <> + + + )} ) diff --git a/packages/ui/src/components/SelectableCardGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SelectableCardGroup/__tests__/__snapshots__/index.test.tsx.snap index 444af7206b..cb6e6ca64b 100644 --- a/packages/ui/src/components/SelectableCardGroup/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/SelectableCardGroup/__tests__/__snapshots__/index.test.tsx.snap @@ -1127,7 +1127,7 @@ exports[`SelectableCardGroup > renders correctly as a radio 1`] = ` aria-invalid="true" checked="" class="emotion-17 emotion-18" - id="«r1h»" + id="«r1i»" name="radio" tabindex="-1" type="radio" @@ -1160,7 +1160,7 @@ exports[`SelectableCardGroup > renders correctly as a radio 1`] = ` @@ -1192,7 +1192,7 @@ exports[`SelectableCardGroup > renders correctly as a radio 1`] = ` aria-disabled="false" aria-invalid="true" class="emotion-17 emotion-18" - id="«r1l»" + id="«r1m»" name="radio" tabindex="-1" type="radio" @@ -1225,7 +1225,7 @@ exports[`SelectableCardGroup > renders correctly as a radio 1`] = ` @@ -1310,22 +1310,19 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = ` text-decoration: none; } -.emotion-9 { - vertical-align: middle; - fill: #b3144d; - height: 8px; - width: 8px; - min-width: 8px; - min-height: 8px; - vertical-align: super; -} - -.emotion-9 .fillStroke { - stroke: #b3144d; - fill: none; +.emotion-8 { + color: #b3144d; + font-size: 1rem; + font-family: Inter,Asap,sans-serif; + font-weight: 400; + letter-spacing: 0; + line-height: 1.5rem; + text-transform: none; + -webkit-text-decoration: none; + text-decoration: none; } -.emotion-11 { +.emotion-10 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; @@ -1339,7 +1336,7 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = ` justify-content: normal; } -.emotion-13 { +.emotion-12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1374,54 +1371,54 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = ` color: #3f4250; } -.emotion-13[data-has-label='false']>:first-child { +.emotion-12[data-has-label='false']>:first-child { margin-bottom: -0.25rem; } -.emotion-13[data-has-default-cursor='true'] { +.emotion-12[data-has-default-cursor='true'] { cursor: default; } -.emotion-13[data-checked='true'] { +.emotion-12[data-checked='true'] { border: 1px solid #8c40ef; } -.emotion-13[data-error='true'] { +.emotion-12[data-error='true'] { border: 1px solid #b3144d; } -.emotion-13[data-disabled='true'] { +.emotion-12[data-disabled='true'] { border: 1px solid #e9eaeb; color: #b5b7bd; background: #f3f3f4; cursor: not-allowed; } -.emotion-13[data-image="illustration"] { +.emotion-12[data-image="illustration"] { padding: 0rem; } -.emotion-13[data-image="icon"] { +.emotion-12[data-image="icon"] { padding: 0rem; padding-right: 1rem; } -.emotion-13:hover:not([data-error='true']):not([data-disabled='true']), -.emotion-13:active:not([data-error='true']):not([data-disabled='true']) { +.emotion-12:hover:not([data-error='true']):not([data-disabled='true']), +.emotion-12:active:not([data-error='true']):not([data-disabled='true']) { border: 1px solid #8c40ef; } -.emotion-13:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'], -.emotion-13:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] { +.emotion-12:hover:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'], +.emotion-12:active:not([data-error='true']):not([data-disabled='true'])[data-cheked='false'] { box-shadow: 0px 4px 16px 4px #f6f3ffcc; } -.emotion-13[data-has-label='true'] .ehkrmld6, -.emotion-13[data-has-label='true'] .emotion-17 { +.emotion-12[data-has-label='true'] .ehkrmld6, +.emotion-12[data-has-label='true'] .emotion-16 { width: 100%; } -.emotion-16 { +.emotion-15 { position: relative; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -1442,65 +1439,65 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = ` align-items: start; } -.emotion-16 .eqr7bqq4 { +.emotion-15 .eqr7bqq4 { cursor: pointer; } -.emotion-16[aria-disabled='true'] { +.emotion-15[aria-disabled='true'] { cursor: not-allowed; color: #b5b7bd; } -.emotion-16[aria-disabled='true'] .eqr7bqq4 { +.emotion-15[aria-disabled='true'] .eqr7bqq4 { cursor: not-allowed; } -.emotion-16[aria-disabled='true'] .emotion-21 { +.emotion-15[aria-disabled='true'] .emotion-20 { fill: #e9eaeb; } -.emotion-16[aria-disabled='true'] .emotion-21 .emotion-23 { +.emotion-15[aria-disabled='true'] .emotion-20 .emotion-22 { stroke: #d9dadd; fill: #f3f3f4; } -.emotion-16[aria-disabled='true'] .emotion-19[aria-invalid="true"]:checked+.emotion-21 { +.emotion-15[aria-disabled='true'] .emotion-18[aria-invalid="true"]:checked+.emotion-20 { fill: #ffd3e3; } -.emotion-16[aria-disabled='true'] .emotion-19[aria-invalid="true"]:checked+.emotion-21 .emotion-23 { +.emotion-15[aria-disabled='true'] .emotion-18[aria-invalid="true"]:checked+.emotion-20 .emotion-22 { stroke: #ffd3e3; fill: #ffd3e3; } -.emotion-16[aria-disabled='true'] .emotion-19[aria-invalid="true"]+.emotion-21 { +.emotion-15[aria-disabled='true'] .emotion-18[aria-invalid="true"]+.emotion-20 { fill: #ffebf2; } -.emotion-16[aria-disabled='true'] .emotion-19[aria-invalid="true"]+.emotion-21 .emotion-23 { +.emotion-15[aria-disabled='true'] .emotion-18[aria-invalid="true"]+.emotion-20 .emotion-22 { stroke: #ffbbd3; fill: #ffebf2; } -.emotion-16[aria-disabled='true'] .emotion-19:checked+.emotion-21 { +.emotion-15[aria-disabled='true'] .emotion-18:checked+.emotion-20 { fill: #e5dbfd; } -.emotion-16[aria-disabled='true'] .emotion-19:checked+.emotion-21 .emotion-23 { +.emotion-15[aria-disabled='true'] .emotion-18:checked+.emotion-20 .emotion-22 { stroke: #d8c5fc; fill: #d8c5fc; } -.emotion-16[aria-disabled='true'] .emotion-19[aria-checked="mixed"]+.emotion-21 { +.emotion-15[aria-disabled='true'] .emotion-18[aria-checked="mixed"]+.emotion-20 { fill: #e5dbfd; } -.emotion-16[aria-disabled='true'] .emotion-19[aria-checked="mixed"]+.emotion-21 .emotion-23 { +.emotion-15[aria-disabled='true'] .emotion-18[aria-checked="mixed"]+.emotion-20 .emotion-22 { stroke: #e5dbfd; fill: #e5dbfd; } -.emotion-16 .emotion-19:checked+.emotion-21 path { +.emotion-15 .emotion-18:checked+.emotion-20 path { transform-origin: center; -webkit-transition: 200ms -webkit-transform ease-in-out; transition: 200ms transform ease-in-out; @@ -1514,103 +1511,103 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = ` transform: translate(2px, 2px); } -.emotion-16 .emotion-19:checked+.emotion-21 .emotion-23 { +.emotion-15 .emotion-18:checked+.emotion-20 .emotion-22 { fill: #8c40ef; stroke: #8c40ef; } -.emotion-16 .emotion-19[aria-invalid="true"]:checked+.emotion-21 .emotion-23 { +.emotion-15 .emotion-18[aria-invalid="true"]:checked+.emotion-20 .emotion-22 { fill: #e51963; stroke: #e51963; } -.emotion-16 .emotion-19[aria-checked="mixed"]+.emotion-21 .eqr7bqq6 { +.emotion-15 .emotion-18[aria-checked="mixed"]+.emotion-20 .eqr7bqq6 { fill: #ffffff; } -.emotion-16 .emotion-19[aria-checked="mixed"]+.emotion-21 .emotion-23 { +.emotion-15 .emotion-18[aria-checked="mixed"]+.emotion-20 .emotion-22 { fill: #8c40ef; stroke: #8c40ef; } -.emotion-16:hover[aria-disabled='false'] .emotion-19[aria-invalid='false'][aria-checked='false']+.emotion-21 .emotion-23 { +.emotion-15:hover[aria-disabled='false'] .emotion-18[aria-invalid='false'][aria-checked='false']+.emotion-20 .emotion-22 { stroke: #792dd4; fill: #e5dbfd; } -.emotion-16:hover[aria-disabled='false'] .emotion-19[aria-invalid='false'][aria-checked='true']+.emotion-21 .emotion-23 { +.emotion-15:hover[aria-disabled='false'] .emotion-18[aria-invalid='false'][aria-checked='true']+.emotion-20 .emotion-22 { stroke: #792dd4; fill: #792dd4; } -.emotion-16:hover[aria-disabled='false'] .emotion-19[aria-invalid='false'][aria-checked='mixed']+.emotion-21 .emotion-23 { +.emotion-15:hover[aria-disabled='false'] .emotion-18[aria-invalid='false'][aria-checked='mixed']+.emotion-20 .emotion-22 { stroke: #792dd4; fill: #792dd4; } -.emotion-16:hover[aria-disabled='false'] .emotion-19[aria-invalid='true'][aria-checked='false']+.emotion-21 .emotion-23 { +.emotion-15:hover[aria-disabled='false'] .emotion-18[aria-invalid='true'][aria-checked='false']+.emotion-20 .emotion-22 { stroke: #92103f; fill: #ffd3e3; } -.emotion-16:hover[aria-disabled='false'] .emotion-19[aria-invalid='true'][aria-checked='true']+.emotion-21 .emotion-23 { +.emotion-15:hover[aria-disabled='false'] .emotion-18[aria-invalid='true'][aria-checked='true']+.emotion-20 .emotion-22 { stroke: #d6175c; fill: #d6175c; } -.emotion-16 .emotion-19[aria-invalid="true"]+.emotion-21 { +.emotion-15 .emotion-18[aria-invalid="true"]+.emotion-20 { fill: #e51963; } -.emotion-16 .emotion-19[aria-invalid="true"]+.emotion-21 .emotion-23 { +.emotion-15 .emotion-18[aria-invalid="true"]+.emotion-20 .emotion-22 { stroke: #e51963; fill: #ffebf2; } -.emotion-16[data-checked='true'] { +.emotion-15[data-checked='true'] { color: #641cb3; } -.emotion-16[data-error='true'] { +.emotion-15[data-error='true'] { color: #b3144d; } -.emotion-16[aria-disabled='true'] { +.emotion-15[aria-disabled='true'] { color: #b5b7bd; } -.emotion-16 label { +.emotion-15 label { width: 100%; } -.emotion-16:hover[aria-disabled='false'] .emotion-19[aria-invalid='false'][aria-checked='false']+.emotion-21 .emotion-23 { +.emotion-15:hover[aria-disabled='false'] .emotion-18[aria-invalid='false'][aria-checked='false']+.emotion-20 .emotion-22 { fill: #ffffff; stroke: #d9dadd; } -.emotion-16:hover[aria-disabled='false'] .emotion-19[aria-invalid='false'][aria-checked='true']+.emotion-21 .emotion-23 { +.emotion-15:hover[aria-disabled='false'] .emotion-18[aria-invalid='false'][aria-checked='true']+.emotion-20 .emotion-22 { stroke: #8c40ef; fill: #8c40ef; } -.emotion-16:hover[aria-disabled='false'] .emotion-19[aria-invalid='false'][aria-checked='mixed']+.emotion-21 .emotion-23 { +.emotion-15:hover[aria-disabled='false'] .emotion-18[aria-invalid='false'][aria-checked='mixed']+.emotion-20 .emotion-22 { stroke: #8c40ef; fill: #8c40ef; } -.emotion-16 .emotion-19:focus+.emotion-21, -.emotion-16 .emotion-19:active+.emotion-21 { +.emotion-15 .emotion-18:focus+.emotion-20, +.emotion-15 .emotion-18:active+.emotion-20 { outline: none; background-color: #ffffff; fill: #ffffff; } -.emotion-16 .emotion-19[aria-checked='false'] .emotion-23 { +.emotion-15 .emotion-18[aria-checked='false'] .emotion-22 { fill: #ffffff; stroke: #d9dadd; } -.emotion-18 { +.emotion-17 { position: absolute; white-space: nowrap; height: 1.5rem; @@ -1619,57 +1616,57 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = ` border-width: 0; } -.emotion-18:not(:disabled) { +.emotion-17:not(:disabled) { cursor: pointer; } -.emotion-18:disabled { +.emotion-17:disabled { cursor: not-allowed; } -.emotion-18:not(:disabled):checked+.emotion-21, -.emotion-18:not(:disabled)[aria-checked='mixed']+.emotion-21 { +.emotion-17:not(:disabled):checked+.emotion-20, +.emotion-17:not(:disabled)[aria-checked='mixed']+.emotion-20 { fill: #8c40ef; } -.emotion-18:not(:disabled):checked+.emotion-21 .emotion-23, -.emotion-18:not(:disabled)[aria-checked='mixed']+.emotion-21 .emotion-23 { +.emotion-17:not(:disabled):checked+.emotion-20 .emotion-22, +.emotion-17:not(:disabled)[aria-checked='mixed']+.emotion-20 .emotion-22 { stroke: #8c40ef; } -.emotion-18:not(:disabled)[aria-invalid='true']+.emotion-21, -.emotion-18:not(:disabled)[aria-invalid='mixed']+.emotion-21 { +.emotion-17:not(:disabled)[aria-invalid='true']+.emotion-20, +.emotion-17:not(:disabled)[aria-invalid='mixed']+.emotion-20 { fill: #ffebf2; } -.emotion-18:not(:disabled)[aria-invalid='true']+.emotion-21 .emotion-23, -.emotion-18:not(:disabled)[aria-invalid='mixed']+.emotion-21 .emotion-23 { +.emotion-17:not(:disabled)[aria-invalid='true']+.emotion-20 .emotion-22, +.emotion-17:not(:disabled)[aria-invalid='mixed']+.emotion-20 .emotion-22 { stroke: #b3144d; } -.emotion-18:focus+.emotion-21 { +.emotion-17:focus+.emotion-20 { background-color: #f1eefc; fill: #ffebf2; outline: 1px solid 0px 0px 0px 3px #8c40ef40; } -.emotion-18:focus+.emotion-21 .emotion-23 { +.emotion-17:focus+.emotion-20 .emotion-22 { stroke: #792dd4; fill: #e5dbfd; } -.emotion-18[aria-invalid='true']:focus+.emotion-21 { +.emotion-17[aria-invalid='true']:focus+.emotion-20 { background-color: #ffebf2; fill: #ffebf2; outline: 1px solid 0px 0px 0px 3px #f91b6c40; } -.emotion-18[aria-invalid='true']:focus+.emotion-21 .emotion-23 { +.emotion-17[aria-invalid='true']:focus+.emotion-20 .emotion-22 { stroke: #92103f; fill: #ffd3e3; } -.emotion-20 { +.emotion-19 { border-radius: 0.25rem; height: 1.5rem; width: 1.5rem; @@ -1677,7 +1674,7 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = ` min-height: 1.5rem; } -.emotion-20 path { +.emotion-19 path { fill: #ffffff; -webkit-transform: translate(2px, 2px); -moz-transform: translate(2px, 2px); @@ -1689,12 +1686,12 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = ` transform: scale(0); } -.emotion-22 { +.emotion-21 { fill: #ffffff; stroke: #d9dadd; } -.emotion-24 { +.emotion-23 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1720,7 +1717,7 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = ` flex: 1; } -.emotion-26 { +.emotion-25 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1746,7 +1743,7 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = ` flex: 1; } -.emotion-29 { +.emotion-28 { color: #3f4250; font-size: 1rem; font-family: Inter,Asap,sans-serif; @@ -1776,20 +1773,17 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = ` class="emotion-6 emotion-7" > Label   - - - + * +
renders correctly required and showTick 1`] = ` >
@@ -1810,21 +1804,21 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = ` aria-checked="true" aria-invalid="false" checked="" - class="emotion-18 emotion-19" - id="«ru»" + class="emotion-17 emotion-18" + id="«rv»" name="checkbox" tabindex="-1" type="checkbox" value="value-1" /> renders correctly required and showTick 1`] = `
@@ -1861,7 +1855,7 @@ exports[`SelectableCardGroup > renders correctly required and showTick 1`] = `
renders correctly required and showTick 1`] = ` >
renders correctly required and showTick 1`] = `
@@ -3170,11 +3164,11 @@ exports[`SelectableCardGroup > renders correctly with error content 1`] = ` > renders correctly with error content 1`] = ` > @@ -3243,10 +3237,10 @@ exports[`SelectableCardGroup > renders correctly with error content 1`] = ` > renders correctly with error content 1`] = ` > diff --git a/packages/ui/src/components/Toggle/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Toggle/__tests__/__snapshots__/index.test.tsx.snap index bfd768b5a3..0a9f69350e 100644 --- a/packages/ui/src/components/Toggle/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Toggle/__tests__/__snapshots__/index.test.tsx.snap @@ -416,7 +416,7 @@ exports[`Toggle > renders correctly label 1`] = ` @@ -898,17 +898,15 @@ exports[`Toggle > renders correctly when required with label 1`] = ` } .emotion-8 { - vertical-align: middle; - fill: #b3144d; - height: 8px; - width: 8px; - min-width: 8px; - min-height: 8px; -} - -.emotion-8 .fillStroke { - stroke: #b3144d; - fill: none; + color: #b3144d; + font-size: 1rem; + font-family: Inter,Asap,sans-serif; + font-weight: 400; + letter-spacing: 0; + line-height: 1.5rem; + text-transform: none; + -webkit-text-decoration: none; + text-decoration: none; } .emotion-10 { @@ -1042,15 +1040,10 @@ exports[`Toggle > renders correctly when required with label 1`] = ` > test - - - - + + *
@@ -1153,17 +1146,15 @@ exports[`Toggle > renders correctly when required with label left 1`] = ` } .emotion-8 { - vertical-align: middle; - fill: #b3144d; - height: 8px; - width: 8px; - min-width: 8px; - min-height: 8px; -} - -.emotion-8 .fillStroke { - stroke: #b3144d; - fill: none; + color: #b3144d; + font-size: 1rem; + font-family: Inter,Asap,sans-serif; + font-weight: 400; + letter-spacing: 0; + line-height: 1.5rem; + text-transform: none; + -webkit-text-decoration: none; + text-decoration: none; } .emotion-10 { @@ -1297,15 +1288,10 @@ exports[`Toggle > renders correctly when required with label left 1`] = ` > test - - - - + + *
@@ -1318,7 +1304,7 @@ exports[`Toggle > renders correctly when required with label left 1`] = ` @@ -1535,7 +1521,7 @@ exports[`Toggle > renders correctly with complex label 1`] = ` @@ -1766,7 +1752,7 @@ exports[`Toggle > renders correctly with custom labels on right 1`] = ` @@ -2204,7 +2190,7 @@ exports[`Toggle > renders correctly with error 1`] = ` @@ -2642,7 +2628,7 @@ exports[`Toggle > renders correctly with helper 1`] = ` @@ -2873,7 +2859,7 @@ exports[`Toggle > renders correctly with labels on left 1`] = ` @@ -3068,7 +3054,7 @@ exports[`Toggle > renders correctly with non default size 1`] = ` @@ -3286,8 +3272,8 @@ exports[`Toggle > renders correctly with tooltip 1`] = ` data-testid="testing" >
@@ -3317,7 +3303,7 @@ exports[`Toggle > renders correctly with tooltip 1`] = ` diff --git a/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap index df9694cc1c..1258b9ceb7 100644 --- a/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/ToggleGroup/__tests__/__snapshots__/index.test.tsx.snap @@ -1723,22 +1723,19 @@ exports[`ToggleGroup > renders correctly with required prop 1`] = ` text-decoration: none; } -.emotion-11 { - vertical-align: middle; - fill: #b3144d; - height: 8px; - width: 8px; - min-width: 8px; - min-height: 8px; - vertical-align: super; -} - -.emotion-11 .fillStroke { - stroke: #b3144d; - fill: none; +.emotion-10 { + color: #b3144d; + font-size: 1rem; + font-family: Inter,Asap,sans-serif; + font-weight: 400; + letter-spacing: 0; + line-height: 1.5rem; + text-transform: none; + -webkit-text-decoration: none; + text-decoration: none; } -.emotion-13 { +.emotion-12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1761,7 +1758,7 @@ exports[`ToggleGroup > renders correctly with required prop 1`] = ` flex-wrap: nowrap; } -.emotion-15 { +.emotion-14 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1780,16 +1777,16 @@ exports[`ToggleGroup > renders correctly with required prop 1`] = ` flex-direction: row-reverse; } -.emotion-15:active .emotion-24[data-disabled='false']:after { +.emotion-14:active .emotion-23[data-disabled='false']:after { width: calc(1rem * 1.3775); } -.emotion-15[aria-disabled="true"] { +.emotion-14[aria-disabled="true"] { cursor: not-allowed; color: #b5b7bd; } -.emotion-17 { +.emotion-16 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1812,7 +1809,7 @@ exports[`ToggleGroup > renders correctly with required prop 1`] = ` flex-wrap: nowrap; } -.emotion-19 { +.emotion-18 { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; @@ -1826,7 +1823,7 @@ exports[`ToggleGroup > renders correctly with required prop 1`] = ` justify-content: normal; } -.emotion-21 { +.emotion-20 { color: #3f4250; font-size: 1rem; font-family: Inter,Asap,sans-serif; @@ -1838,7 +1835,7 @@ exports[`ToggleGroup > renders correctly with required prop 1`] = ` text-decoration: none; } -.emotion-23 { +.emotion-22 { box-sizing: content-box; outline: none; overflow: hidden; @@ -1860,11 +1857,11 @@ exports[`ToggleGroup > renders correctly with required prop 1`] = ` height: 1.5rem; } -.emotion-23:hover { +.emotion-22:hover { background-color: #d9dadd; } -.emotion-23:after { +.emotion-22:after { content: ""; position: absolute; top: calc(1.5rem / 2 - 1rem / 2); @@ -1877,25 +1874,25 @@ exports[`ToggleGroup > renders correctly with required prop 1`] = ` transition: all 300ms; } -.emotion-23:focus-within, -.emotion-23:focus { +.emotion-22:focus-within, +.emotion-22:focus { box-shadow: 0px 0px 0px 3px #151a2d5c; } -.emotion-23[data-disabled="false"]:active:after { +.emotion-22[data-disabled="false"]:active:after { width: calc(1rem * 1.3775); } -.emotion-23[data-checked="true"] { +.emotion-22[data-checked="true"] { color: #222638; background-color: #8c40ef; } -.emotion-23[data-checked="true"]:hover { +.emotion-22[data-checked="true"]:hover { background-color: #792dd4; } -.emotion-23[data-checked="true"]:after { +.emotion-22[data-checked="true"]:after { left: calc(100% - 5px); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); @@ -1903,41 +1900,41 @@ exports[`ToggleGroup > renders correctly with required prop 1`] = ` transform: translateX(-100%); } -.emotion-23[data-checked="true"]:focus-within, -.emotion-23[data-checked="true"]:focus { +.emotion-22[data-checked="true"]:focus-within, +.emotion-22[data-checked="true"]:focus { box-shadow: 0px 0px 0px 3px #8c40ef40; } -.emotion-23[data-disabled="true"] { +.emotion-22[data-disabled="true"] { background: #f3f3f4; } -.emotion-23[data-disabled="true"][data-checked="true"] { +.emotion-22[data-disabled="true"][data-checked="true"] { background: #e5dbfd; } -.emotion-23[data-error="true"] { +.emotion-22[data-error="true"] { background-color: #ffebf2; } -.emotion-23[data-error="true"]:focus-within, -.emotion-23[data-error="true"]:focus { +.emotion-22[data-error="true"]:focus-within, +.emotion-22[data-error="true"]:focus { box-shadow: 0px 0px 0px 3px #f91b6c40; } -.emotion-23[data-error="true"][data-checked="true"] { +.emotion-22[data-error="true"][data-checked="true"] { background-color: #e51963; } -.emotion-23[data-error="true"][data-disabled="true"] { +.emotion-22[data-error="true"][data-disabled="true"] { background-color: #fff3f7; } -.emotion-23[data-error="true"][data-disabled="true"][data-checked="true"] { +.emotion-22[data-error="true"][data-disabled="true"][data-checked="true"] { background-color: #ffd3e3; } -.emotion-25 { +.emotion-24 { position: absolute; opacity: 0; top: 0; @@ -1947,7 +1944,7 @@ exports[`ToggleGroup > renders correctly with required prop 1`] = ` cursor: pointer; } -.emotion-25[disabled] { +.emotion-24[disabled] { cursor: not-allowed; } @@ -1970,46 +1967,43 @@ exports[`ToggleGroup > renders correctly with required prop 1`] = ` class="emotion-8 emotion-9" > Label  - - - + * +