paste
paste copied to clipboard
Published
20 hours ago âĸ
twilio-labs
twilio-labs
feat(tabs): make non-fitted tabs responsive
I went to great lengths to use a native scrollbar solution and style it such that I wouldn't need a pure JS built scrollbar.
In order to achieve this, I needed to add two wrapper divs to the TabList component. One for the outer scrollbar, and one for the bottom border. I still need some JS to fetch the total width of the TabList in order to position the bottom border correctly cross-browser, and to offset the scrollbar position by 4px on the outside of the element visually.
I also made the Tabs component scroll to the selected tab on mount, if it is off-screen. This initial scroll happens instantly to avoid screen noise. Subsequent tab navigation will smoothly scroll to the selected tab to provide a more refined experience.
Fitted tabs do not receive any significant changes, as by definition they shouldn't overflow or scroll. Vertical tabs have similarly remained untouched.
I tested these changes thoroughly on Safari, Firefox, and Chrome, and checked the browser support tables for the features I'm using to verify they pass our requirements.
Chrome
Firefox
Safari
![stackblitz[bot] avatar](https://avatars.githubusercontent.com/in/182710?v=4 "Published by a pub.dev verified publisher"){kind=small}
đĻ Changeset detected
Latest commit: 19498cdecdca352d239c172f3083cf1dcf00485f
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 3 packages
| Name | Type |
|---|---|
| @twilio-paste/code-block | Patch |
| @twilio-paste/core | Patch |
| @twilio-paste/tabs | Patch |
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
![changeset-bot[bot] avatar](https://avatars.githubusercontent.com/in/28616?v=4 "Published by a pub.dev verified publisher"){kind=small}
The latest updates on your projects. Learn more about Vercel for Git âī¸
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| paste-docs | â Ready (Inspect) | Visit Preview | đŦ Add feedback | Apr 23, 2024 6:07pm |
| paste-remix | â Ready (Inspect) | Visit Preview | đŦ Add feedback | Apr 23, 2024 6:07pm |
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
âī¸ Nx Cloud Report
CI is running/has finished running commands for commit 19498cdecdca352d239c172f3083cf1dcf00485f. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.
đ See all runs for this CI Pipeline Execution
â Successfully ran 3 targets
Sent with đ from NxCloud.
![nx-cloud[bot] avatar](https://avatars.githubusercontent.com/in/80458?v=4 "Published by a pub.dev verified publisher"){kind=small}
Size Change: +1.2 kB (0%)
Total Size: 1.03 MB
| Filename | Size | Change | |
|---|---|---|---|
packages/paste-core/components/code-block/dist/index.js |
3.88 kB | +672 B (+21%) | đ¨ |
packages/paste-core/components/tabs/dist/index.js |
2.96 kB | +527 B (+22%) | đ¨ |
âšī¸ View Unchanged
| Filename | Size |
|---|---|
./packages/paste-icons/cjs/AcceptIcon.js |
1.11 kB |
./packages/paste-icons/cjs/AddListIcon.js |
1.24 kB |
./packages/paste-icons/cjs/AddSeriesIcon.js |
1.27 kB |
./packages/paste-icons/cjs/AgentIcon.js |
1.47 kB |
./packages/paste-icons/cjs/AlignLeftIcon.js |
1.23 kB |
./packages/paste-icons/cjs/AlignRightIcon.js |
1.19 kB |
./packages/paste-icons/cjs/AlignVerticalCenterIcon.js |
1.28 kB |
./packages/paste-icons/cjs/ArchiveIcon.js |
1.28 kB |
./packages/paste-icons/cjs/ArrowBackIcon.js |
1.21 kB |
./packages/paste-icons/cjs/ArrowDownIcon.js |
1.22 kB |
./packages/paste-icons/cjs/ArrowForwardIcon.js |
1.22 kB |
./packages/paste-icons/cjs/ArrowUpIcon.js |
1.24 kB |
./packages/paste-icons/cjs/ArtificialIntelligenceIcon.js |
1.51 kB |
./packages/paste-icons/cjs/AttachIcon.js |
1.36 kB |
./packages/paste-icons/cjs/AttachmentIcon.js |
1.28 kB |
./packages/paste-icons/cjs/AutomaticUpdatesIcon.js |
1.21 kB |
./packages/paste-icons/cjs/AvailableIcon.js |
1.14 kB |
./packages/paste-icons/cjs/BoldIcon.js |
1.43 kB |
./packages/paste-icons/cjs/BuildIcon.js |
1.66 kB |
./packages/paste-icons/cjs/BuiltInIcon.js |
1.26 kB |
./packages/paste-icons/cjs/BusinessIcon.js |
1.34 kB |
./packages/paste-icons/cjs/ButtonIcon.js |
1.27 kB |
./packages/paste-icons/cjs/CalendarIcon.js |
1.31 kB |
./packages/paste-icons/cjs/CallActiveIcon.js |
1.53 kB |
./packages/paste-icons/cjs/CallAddIcon.js |
1.43 kB |
./packages/paste-icons/cjs/CallFailedIcon.js |
1.46 kB |
./packages/paste-icons/cjs/CallHoldIcon.js |
1.41 kB |
./packages/paste-icons/cjs/CallIcon.js |
1.37 kB |
./packages/paste-icons/cjs/CallIncomingIcon.js |
1.46 kB |
./packages/paste-icons/cjs/CallOutgoingIcon.js |
1.45 kB |
./packages/paste-icons/cjs/CallTransferIcon.js |
1.48 kB |
./packages/paste-icons/cjs/ChatIcon.js |
1.31 kB |
./packages/paste-icons/cjs/CheckboxCheckIcon.js |
1.13 kB |
./packages/paste-icons/cjs/CheckboxLineIcon.js |
1.08 kB |
./packages/paste-icons/cjs/CheckmarkCircleIcon.js |
1.21 kB |
./packages/paste-icons/cjs/ChevronDisclosureCollapsedIcon.js |
1.14 kB |
./packages/paste-icons/cjs/ChevronDisclosureExpandedIcon.js |
1.15 kB |
./packages/paste-icons/cjs/ChevronDisclosureIcon.js |
1.1 kB |
./packages/paste-icons/cjs/ChevronDoubleLeftIcon.js |
1.16 kB |
./packages/paste-icons/cjs/ChevronDoubleRightIcon.js |
1.19 kB |
./packages/paste-icons/cjs/ChevronDownIcon.js |
1.11 kB |
./packages/paste-icons/cjs/ChevronExpandIcon.js |
1.16 kB |
./packages/paste-icons/cjs/ChevronLeftIcon.js |
1.11 kB |
./packages/paste-icons/cjs/ChevronRightIcon.js |
1.11 kB |
./packages/paste-icons/cjs/ChevronUpIcon.js |
1.11 kB |
./packages/paste-icons/cjs/ClearIcon.js |
1.1 kB |
./packages/paste-icons/cjs/CloseCircleIcon.js |
1.14 kB |
./packages/paste-icons/cjs/CloseIcon.js |
1.11 kB |
./packages/paste-icons/cjs/CloudIcon.js |
1.45 kB |
./packages/paste-icons/cjs/CodeIcon.js |
1.42 kB |
./packages/paste-icons/cjs/CollapseIcon.js |
1.16 kB |
./packages/paste-icons/cjs/ColorPickerIcon.js |
1.35 kB |
./packages/paste-icons/cjs/ColumnIcon.js |
1.19 kB |
./packages/paste-icons/cjs/CommunityIcon.js |
1.36 kB |
./packages/paste-icons/cjs/ConnectivityAvailableIcon.js |
1.03 kB |
./packages/paste-icons/cjs/ConnectivityBusyIcon.js |
1.02 kB |
./packages/paste-icons/cjs/ConnectivityNeutralIcon.js |
1.03 kB |
./packages/paste-icons/cjs/ConnectivityOfflineIcon.js |
1.08 kB |
./packages/paste-icons/cjs/ConnectivityUnavailableIcon.js |
1.03 kB |
./packages/paste-icons/cjs/CopyIcon.js |
1.32 kB |
./packages/paste-icons/cjs/CreditCardIcon.js |
1.14 kB |
./packages/paste-icons/cjs/CustomIcon.js |
1.41 kB |
./packages/paste-icons/cjs/DarkModeIcon.js |
1.18 kB |
./packages/paste-icons/cjs/DataBarChartIcon.js |
1.17 kB |
./packages/paste-icons/cjs/DatabaseIcon.js |
1.66 kB |
./packages/paste-icons/cjs/DataLineChartIcon.js |
1.19 kB |
./packages/paste-icons/cjs/DataPieChartIcon.js |
1.17 kB |
./packages/paste-icons/cjs/DataTableIcon.js |
1.17 kB |
./packages/paste-icons/cjs/DeleteIcon.js |
1.3 kB |
./packages/paste-icons/cjs/DeliveredIcon.js |
1.4 kB |
./packages/paste-icons/cjs/DialpadIcon.js |
1.11 kB |
./packages/paste-icons/cjs/DirectoryIcon.js |
1.25 kB |
./packages/paste-icons/cjs/DisableIcon.js |
1.13 kB |
./packages/paste-icons/cjs/DividerIcon.js |
1.24 kB |
./packages/paste-icons/cjs/DocumentationIcon.js |
1.67 kB |
./packages/paste-icons/cjs/DoNotIcon.js |
1.06 kB |
./packages/paste-icons/cjs/DownloadIcon.js |
1.16 kB |
./packages/paste-icons/cjs/DragHorizontalIcon.js |
1.05 kB |
./packages/paste-icons/cjs/DragIcon.js |
1.07 kB |
./packages/paste-icons/cjs/DragVerticalIcon.js |
1.02 kB |
./packages/paste-icons/cjs/EditIcon.js |
1.3 kB |
./packages/paste-icons/cjs/ElasticSIPTrunkingCapableIcon.js |
1.6 kB |
./packages/paste-icons/cjs/EmailIcon.js |
1.16 kB |
./packages/paste-icons/cjs/EmojiIcon.js |
1.24 kB |
./packages/paste-icons/cjs/ErrorIcon.js |
1.19 kB |
./packages/paste-icons/cjs/ExpandIcon.js |
1.28 kB |
./packages/paste-icons/cjs/ExportIcon.js |
1.16 kB |
./packages/paste-icons/cjs/FaxCapableIcon.js |
1.46 kB |
./packages/paste-icons/cjs/FeedIcon.js |
1.23 kB |
./packages/paste-icons/cjs/FileAudioIcon.js |
1.46 kB |
./packages/paste-icons/cjs/FileIcon.js |
1.16 kB |
./packages/paste-icons/cjs/FileImageIcon.js |
1.39 kB |
./packages/paste-icons/cjs/FileVideoIcon.js |
1.23 kB |
./packages/paste-icons/cjs/FileZipIcon.js |
1.3 kB |
./packages/paste-icons/cjs/FilterIcon.js |
1.06 kB |
./packages/paste-icons/cjs/FlagIcon.js |
1.26 kB |
./packages/paste-icons/cjs/FolderIcon.js |
1.33 kB |
./packages/paste-icons/cjs/GitIcon.js |
1.26 kB |
./packages/paste-icons/cjs/HeatmapIcon.js |
1.22 kB |
./packages/paste-icons/cjs/helpers/IconWrapper.js |
1.14 kB |
./packages/paste-icons/cjs/HideIcon.js |
1.53 kB |
./packages/paste-icons/cjs/HistoryIcon.js |
1.22 kB |
./packages/paste-icons/cjs/ImageTextIcon.js |
1.5 kB |
./packages/paste-icons/cjs/InboxIcon.js |
1.19 kB |
./packages/paste-icons/cjs/IndentDecreaseIcon.js |
1.24 kB |
./packages/paste-icons/cjs/IndentIncreaseIcon.js |
1.24 kB |
./packages/paste-icons/cjs/InformationIcon.js |
1.11 kB |
./packages/paste-icons/cjs/ItalicIcon.js |
1.16 kB |
./packages/paste-icons/cjs/LightModeIcon.js |
1.29 kB |
./packages/paste-icons/cjs/LinkExternalIcon.js |
1.22 kB |
./packages/paste-icons/cjs/LinkIcon.js |
1.22 kB |
./packages/paste-icons/cjs/LoadingIcon.js |
1.43 kB |
./packages/paste-icons/cjs/LockIcon.js |
1.18 kB |
./packages/paste-icons/cjs/LogInIcon.js |
1.27 kB |
./packages/paste-icons/cjs/LogoPasteIcon.js |
1.35 kB |
./packages/paste-icons/cjs/LogoTwilioIcon.js |
1.17 kB |
./packages/paste-icons/cjs/LogOutIcon.js |
1.24 kB |
./packages/paste-icons/cjs/LowerHandIcon.js |
1.65 kB |
./packages/paste-icons/cjs/MenuIcon.js |
1.07 kB |
./packages/paste-icons/cjs/MicrophoneOffIcon.js |
1.44 kB |
./packages/paste-icons/cjs/MicrophoneOnIcon.js |
1.26 kB |
./packages/paste-icons/cjs/MinusIcon.js |
1.11 kB |
./packages/paste-icons/cjs/MMSCapableIcon.js |
1.4 kB |
./packages/paste-icons/cjs/MobileIcon.js |
1.16 kB |
./packages/paste-icons/cjs/MoreIcon.js |
1.08 kB |
./packages/paste-icons/cjs/NeutralIcon.js |
1.34 kB |
./packages/paste-icons/cjs/NewIcon.js |
1.42 kB |
./packages/paste-icons/cjs/NotesIcon.js |
1.26 kB |
./packages/paste-icons/cjs/NotificationIcon.js |
1.25 kB |
./packages/paste-icons/cjs/OrderedListIcon.js |
1.35 kB |
./packages/paste-icons/cjs/OutOfDateIcon.js |
1.19 kB |
./packages/paste-icons/cjs/PauseIcon.js |
1.14 kB |
./packages/paste-icons/cjs/PinIcon.js |
1.34 kB |
./packages/paste-icons/cjs/PlayIcon.js |
1.12 kB |
./packages/paste-icons/cjs/PlusIcon.js |
1.08 kB |
./packages/paste-icons/cjs/ProcessDisabledIcon.js |
1.11 kB |
./packages/paste-icons/cjs/ProcessDraftIcon.js |
1.39 kB |
./packages/paste-icons/cjs/ProcessErrorIcon.js |
1.1 kB |
./packages/paste-icons/cjs/ProcessInProgressIcon.js |
1.13 kB |
./packages/paste-icons/cjs/ProcessNeutralIcon.js |
1.12 kB |
./packages/paste-icons/cjs/ProcessSuccessIcon.js |
1.02 kB |
./packages/paste-icons/cjs/ProcessWarningIcon.js |
1.14 kB |
./packages/paste-icons/cjs/ProductAddOnsIcon.js |
1.52 kB |
./packages/paste-icons/cjs/ProductAdminAccessControlIcon.js |
1.74 kB |
./packages/paste-icons/cjs/ProductAdminAccountsIcon.js |
1.25 kB |
./packages/paste-icons/cjs/ProductAdminDomainsIcon.js |
1.99 kB |
./packages/paste-icons/cjs/ProductAdminResoldCustomersIcon.js |
1.54 kB |
./packages/paste-icons/cjs/ProductAdminSSOIcon.js |
1.73 kB |
./packages/paste-icons/cjs/ProductAdminUsersIcon.js |
1.63 kB |
./packages/paste-icons/cjs/ProductAIAssistantsIcon.js |
1.54 kB |
./packages/paste-icons/cjs/ProductAlarmsIcon.js |
1.25 kB |
./packages/paste-icons/cjs/ProductAPIExplorerIcon.js |
1.41 kB |
./packages/paste-icons/cjs/ProductAssetsIcon.js |
1.21 kB |
./packages/paste-icons/cjs/ProductAudiencesIcon.js |
1.4 kB |
./packages/paste-icons/cjs/ProductAuthyIcon.js |
1.36 kB |
./packages/paste-icons/cjs/ProductAutopilotIcon.js |
1.56 kB |
./packages/paste-icons/cjs/ProductBillingIcon.js |
1.46 kB |
./packages/paste-icons/cjs/ProductChannelsIcon.js |
1.19 kB |
./packages/paste-icons/cjs/ProductChatIcon.js |
1.3 kB |
./packages/paste-icons/cjs/ProductCLIIcon.js |
1.23 kB |
./packages/paste-icons/cjs/ProductCodeExchangeCommunityIcon.js |
1.88 kB |
./packages/paste-icons/cjs/ProductCodeExchangePartnerIcon.js |
1.8 kB |
./packages/paste-icons/cjs/ProductCommsIcon.js |
1.25 kB |
./packages/paste-icons/cjs/ProductConnectedDevicesIcon.js |
1.67 kB |
./packages/paste-icons/cjs/ProductConnectionsIcon.js |
1.51 kB |
./packages/paste-icons/cjs/ProductContactCenterAdminIcon.js |
1.36 kB |
./packages/paste-icons/cjs/ProductContactCenterAssessmentsIcon.js |
1.38 kB |
./packages/paste-icons/cjs/ProductContactCenterQueuesIcon.js |
1.24 kB |
./packages/paste-icons/cjs/ProductContactCenterTasksIcon.js |
1.5 kB |
./packages/paste-icons/cjs/ProductContactCenterTeamsIcon.js |
1.61 kB |
./packages/paste-icons/cjs/ProductConversationsIcon.js |
1.37 kB |
./packages/paste-icons/cjs/ProductDebuggerIcon.js |
1.58 kB |
./packages/paste-icons/cjs/ProductDestinationsIcon.js |
1.13 kB |
./packages/paste-icons/cjs/ProductElasticSIPTrunkingIcon.js |
1.6 kB |
./packages/paste-icons/cjs/ProductEmailAPIIcon.js |
1.22 kB |
./packages/paste-icons/cjs/ProductEngageIcon.js |
1.42 kB |
./packages/paste-icons/cjs/ProductEngagementIntelligencePlatformIcon.js |
1.39 kB |
./packages/paste-icons/cjs/ProductEventLibraryIcon.js |
1.21 kB |
./packages/paste-icons/cjs/ProductEventStreamIcon.js |
1.14 kB |
./packages/paste-icons/cjs/ProductEventStreamsIcon.js |
1.46 kB |
./packages/paste-icons/cjs/ProductFaxIcon.js |
1.48 kB |
./packages/paste-icons/cjs/ProductFlexIcon.js |
1.23 kB |
./packages/paste-icons/cjs/ProductFlowIcon.js |
1.17 kB |
./packages/paste-icons/cjs/ProductFrontlineIcon.js |
1.23 kB |
./packages/paste-icons/cjs/ProductFunctionsIcon.js |
1.35 kB |
./packages/paste-icons/cjs/ProductHomeIcon.js |
1.22 kB |
./packages/paste-icons/cjs/ProductInsightsIcon.js |
1.51 kB |
./packages/paste-icons/cjs/ProductInterconnectIcon.js |
1.23 kB |
./packages/paste-icons/cjs/ProductInternetOfThingsEmbeddedSIMIcon.js |
1.26 kB |
./packages/paste-icons/cjs/ProductInternetOfThingsIcon.js |
1.28 kB |
./packages/paste-icons/cjs/ProductInternetOfThingsNarrowbandIcon.js |
1.42 kB |
./packages/paste-icons/cjs/ProductInternetOfThingsProgrammableAssetTrackerIcon.js |
1.66 kB |
./packages/paste-icons/cjs/ProductInternetOfThingsSuperSIMIcon.js |
1.46 kB |
./packages/paste-icons/cjs/ProductInternetOfThingsTrustOnboardIcon.js |
1.49 kB |
./packages/paste-icons/cjs/ProductInternetOfThingsWirelessIcon.js |
1.39 kB |
./packages/paste-icons/cjs/ProductJourneysIcon.js |
1.22 kB |
./packages/paste-icons/cjs/ProductKeysIcon.js |
1.58 kB |
./packages/paste-icons/cjs/ProductLiveIcon.js |
1.38 kB |
./packages/paste-icons/cjs/ProductLogsIcon.js |
1.41 kB |
./packages/paste-icons/cjs/ProductLookupIcon.js |
1.15 kB |
./packages/paste-icons/cjs/ProductMappingIcon.js |
1.14 kB |
./packages/paste-icons/cjs/ProductMarketingCampaignsIcon.js |
1.28 kB |
./packages/paste-icons/cjs/ProductMessagingIcon.js |
1.25 kB |
./packages/paste-icons/cjs/ProductMicrovisorIcon.js |
1.43 kB |
./packages/paste-icons/cjs/ProductNotifyIcon.js |
1.36 kB |
./packages/paste-icons/cjs/ProductOneAdminIcon.js |
1.24 kB |
./packages/paste-icons/cjs/ProductPayConnectorIcon.js |
1.5 kB |
./packages/paste-icons/cjs/ProductPersonasIcon.js |
1.49 kB |
./packages/paste-icons/cjs/ProductPhoneNumbersIcon.js |
1.37 kB |
./packages/paste-icons/cjs/ProductPrivacyIcon.js |
1.2 kB |
./packages/paste-icons/cjs/ProductProtocolsIcon.js |
1.66 kB |
./packages/paste-icons/cjs/ProductProxyIcon.js |
1.43 kB |
./packages/paste-icons/cjs/ProductRegionalIcon.js |
1.95 kB |
./packages/paste-icons/cjs/ProductReverseETLIcon.js |
1.71 kB |
./packages/paste-icons/cjs/ProductSDKIcon.js |
1.32 kB |
./packages/paste-icons/cjs/ProductSegmentIcon.js |
1.29 kB |
./packages/paste-icons/cjs/ProductSendGridIcon.js |
1.14 kB |
./packages/paste-icons/cjs/ProductSettingsIcon.js |
1.72 kB |
./packages/paste-icons/cjs/ProductSourceSchemaIcon.js |
1.29 kB |
./packages/paste-icons/cjs/ProductSourcesIcon.js |
1.14 kB |
./packages/paste-icons/cjs/ProductStudioIcon.js |
1.17 kB |
./packages/paste-icons/cjs/ProductSupportIcon.js |
1.22 kB |
./packages/paste-icons/cjs/ProductSwitcherIcon.js |
1.12 kB |
./packages/paste-icons/cjs/ProductSyncIcon.js |
1.39 kB |
./packages/paste-icons/cjs/ProductTaskRouterIcon.js |
1.21 kB |
./packages/paste-icons/cjs/ProductTraitsIcon.js |
1.39 kB |
./packages/paste-icons/cjs/ProductTrustHubIcon.js |
1.44 kB |
./packages/paste-icons/cjs/ProductTwilioOrgIcon.js |
1.44 kB |
./packages/paste-icons/cjs/ProductTwiMLBinsIcon.js |
1.15 kB |
./packages/paste-icons/cjs/ProductUnifyIcon.js |
1.49 kB |
./packages/paste-icons/cjs/ProductUsageIcon.js |
1.6 kB |
./packages/paste-icons/cjs/ProductUSSDIcon.js |
1.45 kB |
./packages/paste-icons/cjs/ProductVerifyIcon.js |
1.34 kB |
./packages/paste-icons/cjs/ProductVideoIcon.js |
1.26 kB |
./packages/paste-icons/cjs/ProductVoiceIcon.js |
1.47 kB |
./packages/paste-icons/cjs/ProductVoiceIntelligenceIcon.js |
1.39 kB |
./packages/paste-icons/cjs/RaiseHandIcon.js |
2.35 kB |
./packages/paste-icons/cjs/RecordIcon.js |
1.03 kB |
./packages/paste-icons/cjs/RedoIcon.js |
1.16 kB |
./packages/paste-icons/cjs/RefreshIcon.js |
1.2 kB |
./packages/paste-icons/cjs/RepeatIcon.js |
1.16 kB |
./packages/paste-icons/cjs/ResetIcon.js |
1.14 kB |
./packages/paste-icons/cjs/ScreenShareIcon.js |
1.21 kB |
./packages/paste-icons/cjs/SearchIcon.js |
1.12 kB |
./packages/paste-icons/cjs/SelectedIcon.js |
1.14 kB |
./packages/paste-icons/cjs/SelectIcon.js |
1.31 kB |
./packages/paste-icons/cjs/SendIcon.js |
1.27 kB |
./packages/paste-icons/cjs/SentIcon.js |
1.39 kB |
./packages/paste-icons/cjs/SentimentNegativeIcon.js |
1.18 kB |
./packages/paste-icons/cjs/SentimentNeutralIcon.js |
1.13 kB |
./packages/paste-icons/cjs/SentimentPositiveIcon.js |
1.25 kB |
./packages/paste-icons/cjs/ShareIcon.js |
1.27 kB |
./packages/paste-icons/cjs/ShowIcon.js |
1.4 kB |
./packages/paste-icons/cjs/ShrinkIcon.js |
1.32 kB |
./packages/paste-icons/cjs/SkipBackIcon.js |
1.23 kB |
./packages/paste-icons/cjs/SkipForwardIcon.js |
1.23 kB |
./packages/paste-icons/cjs/SMSCapableIcon.js |
1.18 kB |
./packages/paste-icons/cjs/SMSIcon.js |
1.46 kB |
./packages/paste-icons/cjs/SocialIcon.js |
1.59 kB |
./packages/paste-icons/cjs/SortAlphabeticalIcon.js |
1.54 kB |
./packages/paste-icons/cjs/SpacerVerticalIcon.js |
1.26 kB |
./packages/paste-icons/cjs/StarIcon.js |
1.43 kB |
./packages/paste-icons/cjs/StopIcon.js |
1.04 kB |
./packages/paste-icons/cjs/StopScreenShareIcon.js |
1.19 kB |
./packages/paste-icons/cjs/StoreIcon.js |
1.23 kB |
./packages/paste-icons/cjs/StrikethroughIcon.js |
1.35 kB |
./packages/paste-icons/cjs/SubscriptIcon.js |
1.26 kB |
./packages/paste-icons/cjs/SuccessIcon.js |
1.14 kB |
./packages/paste-icons/cjs/SuperscriptIcon.js |
1.24 kB |
./packages/paste-icons/cjs/SupportIcon.js |
1.21 kB |
./packages/paste-icons/cjs/SystemStatusIcon.js |
1.32 kB |
./packages/paste-icons/cjs/TaskIcon.js |
1.43 kB |
./packages/paste-icons/cjs/TextAlignCenterIcon.js |
1.1 kB |
./packages/paste-icons/cjs/TextAlignJustifyIcon.js |
1.08 kB |
./packages/paste-icons/cjs/TextAlignLeftIcon.js |
1.1 kB |
./packages/paste-icons/cjs/TextAlignRightIcon.js |
1.16 kB |
./packages/paste-icons/cjs/TextFormatClearIcon.js |
1.2 kB |
./packages/paste-icons/cjs/TextFormatIcon.js |
1.22 kB |
./packages/paste-icons/cjs/TextHighlightIcon.js |
1.31 kB |
./packages/paste-icons/cjs/ThemeIcon.js |
1.52 kB |
./packages/paste-icons/cjs/ThumbsDownIcon.js |
1.82 kB |
./packages/paste-icons/cjs/ThumbsUpIcon.js |
1.82 kB |
./packages/paste-icons/cjs/TimeIcon.js |
1.12 kB |
./packages/paste-icons/cjs/TipIcon.js |
1.66 kB |
./packages/paste-icons/cjs/TokenIcon.js |
1.57 kB |
./packages/paste-icons/cjs/TourIcon.js |
1.73 kB |
./packages/paste-icons/cjs/TranslationIcon.js |
1.35 kB |
./packages/paste-icons/cjs/TrendDownIcon.js |
1.15 kB |
./packages/paste-icons/cjs/TrendUpIcon.js |
1.15 kB |
./packages/paste-icons/cjs/UnarchiveIcon.js |
1.28 kB |
./packages/paste-icons/cjs/UnderlineIcon.js |
1.2 kB |
./packages/paste-icons/cjs/UndoIcon.js |
1.16 kB |
./packages/paste-icons/cjs/UnlockIcon.js |
1.17 kB |
./packages/paste-icons/cjs/UnorderedListIcon.js |
1.13 kB |
./packages/paste-icons/cjs/UnpinIcon.js |
1.22 kB |
./packages/paste-icons/cjs/UnsortedIcon.js |
1.23 kB |
./packages/paste-icons/cjs/UnsubscribeIcon.js |
1.28 kB |
./packages/paste-icons/cjs/UploadIcon.js |
1.11 kB |
./packages/paste-icons/cjs/UploadToCloudIcon.js |
1.59 kB |
./packages/paste-icons/cjs/UserIcon.js |
1.08 kB |
./packages/paste-icons/cjs/UsersIcon.js |
1.62 kB |
./packages/paste-icons/cjs/VideoOffIcon.js |
1.34 kB |
./packages/paste-icons/cjs/VideoOnIcon.js |
1.28 kB |
./packages/paste-icons/cjs/VoiceCapableIcon.js |
1.39 kB |
./packages/paste-icons/cjs/VoicemailIcon.js |
1.08 kB |
./packages/paste-icons/cjs/VolumeOffIcon.js |
1.4 kB |
./packages/paste-icons/cjs/VolumeOnIcon.js |
1.5 kB |
./packages/paste-icons/cjs/WarningIcon.js |
1.25 kB |
./packages/paste-icons/cjs/WebCapableIcon.js |
1.21 kB |
./packages/paste-icons/cjs/ZoomInIcon.js |
1.21 kB |
packages/paste-color-contrast-utils/dist/index.js |
15.1 kB |
packages/paste-core/components/account-switcher/dist/index.js |
941 B |
packages/paste-core/components/alert-dialog/dist/index.js |
1.59 kB |
packages/paste-core/components/alert/dist/index.js |
1.36 kB |
packages/paste-core/components/anchor/dist/index.js |
1.35 kB |
packages/paste-core/components/avatar/dist/index.js |
3.41 kB |
packages/paste-core/components/badge/dist/index.js |
1.89 kB |
packages/paste-core/components/base-radio-checkbox/dist/index.js |
1.26 kB |
packages/paste-core/components/breadcrumb/dist/index.js |
1.23 kB |
packages/paste-core/components/button-group/dist/index.js |
908 B |
packages/paste-core/components/button/dist/index.js |
5.6 kB |
packages/paste-core/components/callout/dist/index.js |
1.52 kB |
packages/paste-core/components/card/dist/index.js |
741 B |
packages/paste-core/components/chat-composer/dist/index.js |
2.72 kB |
packages/paste-core/components/chat-log/dist/index.js |
2.94 kB |
packages/paste-core/components/checkbox/dist/index.js |
2.35 kB |
packages/paste-core/components/combobox/dist/index.js |
20.4 kB |
packages/paste-core/components/data-grid/dist/index.js |
4.23 kB |
packages/paste-core/components/date-picker/dist/index.js |
7.69 kB |
packages/paste-core/components/description-list/dist/index.js |
1.03 kB |
packages/paste-core/components/detail-text/dist/index.js |
715 B |
packages/paste-core/components/disclosure/dist/index.js |
2.19 kB |
packages/paste-core/components/display-heading/dist/index.js |
854 B |
packages/paste-core/components/display-pill-group/dist/index.js |
1.03 kB |
packages/paste-core/components/editable-code-block/dist/index.js |
1.97 kB |
packages/paste-core/components/file-picker/dist/index.js |
1.45 kB |
packages/paste-core/components/file-uploader/dist/index.js |
6.06 kB |
packages/paste-core/components/form-pill-group/dist/index.js |
3.44 kB |
packages/paste-core/components/form/dist/index.js |
1.4 kB |
packages/paste-core/components/heading/dist/index.js |
878 B |
packages/paste-core/components/help-text/dist/index.js |
1.05 kB |
packages/paste-core/components/in-page-navigation/dist/index.js |
1.8 kB |
packages/paste-core/components/inline-code/dist/index.js |
768 B |
packages/paste-core/components/inline-control-group/dist/index.js |
1.14 kB |
packages/paste-core/components/input-box/dist/index.js |
2 kB |
packages/paste-core/components/input/dist/index.js |
2.33 kB |
packages/paste-core/components/label/dist/index.js |
1.23 kB |
packages/paste-core/components/list/dist/index.js |
1.68 kB |
packages/paste-core/components/menu/dist/index.js |
2.85 kB |
packages/paste-core/components/meter/dist/index.js |
1.38 kB |
packages/paste-core/components/minimizable-dialog/dist/index.js |
2.05 kB |
packages/paste-core/components/modal/dist/index.js |
2.16 kB |
packages/paste-core/components/page-header/dist/index.js |
1.88 kB |
packages/paste-core/components/pagination/dist/index.js |
2.89 kB |
packages/paste-core/components/paragraph/dist/index.js |
714 B |
packages/paste-core/components/popover/dist/index.js |
1.7 kB |
packages/paste-core/components/product-switcher/dist/index.js |
1.07 kB |
packages/paste-core/components/progress-bar/dist/index.js |
1.46 kB |
packages/paste-core/components/progress-steps/dist/index.js |
2.84 kB |
packages/paste-core/components/radio-button-group/dist/index.js |
2.08 kB |
packages/paste-core/components/radio-group/dist/index.js |
1.89 kB |
packages/paste-core/components/screen-reader-only/dist/index.js |
723 B |
packages/paste-core/components/select/dist/index.js |
1.57 kB |
packages/paste-core/components/separator/dist/index.js |
795 B |
packages/paste-core/components/side-modal/dist/index.js |
2.1 kB |
packages/paste-core/components/sidebar/dist/index.js |
5.26 kB |
packages/paste-core/components/skeleton-loader/dist/index.js |
1.15 kB |
packages/paste-core/components/slider/dist/index.js |
1.92 kB |
packages/paste-core/components/spinner/dist/index.js |
1.54 kB |
packages/paste-core/components/status/dist/index.js |
1.64 kB |
packages/paste-core/components/summary-detail/dist/index.js |
1.5 kB |
packages/paste-core/components/switch/dist/index.js |
2.75 kB |
packages/paste-core/components/table/dist/index.js |
1.77 kB |
packages/paste-core/components/textarea/dist/index.js |
1.2 kB |
packages/paste-core/components/time-picker/dist/index.js |
7.69 kB |
packages/paste-core/components/toast/dist/index.js |
2.83 kB |
packages/paste-core/components/tooltip/dist/index.js |
1.19 kB |
packages/paste-core/components/topbar/dist/index.js |
984 B |
packages/paste-core/components/truncate/dist/index.js |
703 B |
packages/paste-core/components/user-dialog/dist/index.js |
2.29 kB |
packages/paste-core/components/visual-picker/dist/index.js |
2.59 kB |
packages/paste-core/core-bundle/dist/account-switcher.js |
231 B |
packages/paste-core/core-bundle/dist/alert-dialog.js |
229 B |
packages/paste-core/core-bundle/dist/alert.js |
219 B |
packages/paste-core/core-bundle/dist/anchor.js |
220 B |
packages/paste-core/core-bundle/dist/animation-library.js |
232 B |
packages/paste-core/core-bundle/dist/aspect-ratio.js |
228 B |
packages/paste-core/core-bundle/dist/avatar.js |
220 B |
packages/paste-core/core-bundle/dist/badge.js |
220 B |
packages/paste-core/core-bundle/dist/base-radio-checkbox.js |
236 B |
packages/paste-core/core-bundle/dist/box.js |
218 B |
packages/paste-core/core-bundle/dist/breadcrumb.js |
224 B |
packages/paste-core/core-bundle/dist/button-group.js |
229 B |
packages/paste-core/core-bundle/dist/button.js |
220 B |
packages/paste-core/core-bundle/dist/callout.js |
220 B |
packages/paste-core/core-bundle/dist/card.js |
219 B |
packages/paste-core/core-bundle/dist/chat-composer.js |
230 B |
packages/paste-core/core-bundle/dist/chat-log.js |
225 B |
packages/paste-core/core-bundle/dist/checkbox.js |
223 B |
packages/paste-core/core-bundle/dist/clipboard-copy-library.js |
241 B |
packages/paste-core/core-bundle/dist/code-block.js |
227 B |
packages/paste-core/core-bundle/dist/code-editor-library.js |
235 B |
packages/paste-core/core-bundle/dist/color-contrast-utils.js |
239 B |
packages/paste-core/core-bundle/dist/combobox-primitive.js |
234 B |
packages/paste-core/core-bundle/dist/combobox.js |
222 B |
packages/paste-core/core-bundle/dist/customization.js |
225 B |
packages/paste-core/core-bundle/dist/data-grid.js |
226 B |
packages/paste-core/core-bundle/dist/data-visualization-library.js |
243 B |
packages/paste-core/core-bundle/dist/date-picker.js |
227 B |
packages/paste-core/core-bundle/dist/description-list.js |
230 B |
packages/paste-core/core-bundle/dist/design-tokens.js |
230 B |
packages/paste-core/core-bundle/dist/detail-text.js |
228 B |
packages/paste-core/core-bundle/dist/disclosure-primitive.js |
234 B |
packages/paste-core/core-bundle/dist/disclosure.js |
223 B |
packages/paste-core/core-bundle/dist/display-heading.js |
232 B |
packages/paste-core/core-bundle/dist/display-pill-group.js |
236 B |
packages/paste-core/core-bundle/dist/dropdown-library.js |
232 B |
packages/paste-core/core-bundle/dist/editable-code-block.js |
236 B |
packages/paste-core/core-bundle/dist/file-picker.js |
227 B |
packages/paste-core/core-bundle/dist/file-uploader.js |
230 B |
packages/paste-core/core-bundle/dist/flex.js |
219 B |
packages/paste-core/core-bundle/dist/form-pill-group.js |
234 B |
packages/paste-core/core-bundle/dist/form.js |
219 B |
packages/paste-core/core-bundle/dist/grid.js |
220 B |
packages/paste-core/core-bundle/dist/heading.js |
221 B |
packages/paste-core/core-bundle/dist/help-text.js |
226 B |
packages/paste-core/core-bundle/dist/in-page-navigation.js |
233 B |
packages/paste-core/core-bundle/dist/index.js |
2.16 kB |
packages/paste-core/core-bundle/dist/inline-code.js |
227 B |
packages/paste-core/core-bundle/dist/inline-control-group.js |
238 B |
packages/paste-core/core-bundle/dist/input-box.js |
226 B |
packages/paste-core/core-bundle/dist/input.js |
219 B |
packages/paste-core/core-bundle/dist/label.js |
220 B |
packages/paste-core/core-bundle/dist/lexical-library.js |
230 B |
packages/paste-core/core-bundle/dist/list.js |
219 B |
packages/paste-core/core-bundle/dist/listbox-primitive.js |
232 B |
packages/paste-core/core-bundle/dist/media-object.js |
226 B |
packages/paste-core/core-bundle/dist/menu-primitive.js |
230 B |
packages/paste-core/core-bundle/dist/menu.js |
219 B |
packages/paste-core/core-bundle/dist/meter.js |
219 B |
packages/paste-core/core-bundle/dist/minimizable-dialog.js |
235 B |
packages/paste-core/core-bundle/dist/modal-dialog-primitive.js |
241 B |
packages/paste-core/core-bundle/dist/modal.js |
220 B |
packages/paste-core/core-bundle/dist/non-modal-dialog-primitive.js |
244 B |
packages/paste-core/core-bundle/dist/page-header.js |
228 B |
packages/paste-core/core-bundle/dist/pagination.js |
224 B |
packages/paste-core/core-bundle/dist/paragraph.js |
224 B |
packages/paste-core/core-bundle/dist/popover.js |
220 B |
packages/paste-core/core-bundle/dist/product-switcher.js |
231 B |
packages/paste-core/core-bundle/dist/progress-bar.js |
228 B |
packages/paste-core/core-bundle/dist/progress-steps.js |
230 B |
packages/paste-core/core-bundle/dist/radio-button-group.js |
236 B |
packages/paste-core/core-bundle/dist/radio-group.js |
228 B |
packages/paste-core/core-bundle/dist/react-spectrum-library.js |
240 B |
packages/paste-core/core-bundle/dist/react-textarea-autosize-library.js |
248 B |
packages/paste-core/core-bundle/dist/reakit-library.js |
229 B |
packages/paste-core/core-bundle/dist/screen-reader-only.js |
235 B |
packages/paste-core/core-bundle/dist/select.js |
218 B |
packages/paste-core/core-bundle/dist/separator.js |
223 B |
packages/paste-core/core-bundle/dist/sibling-box.js |
228 B |
packages/paste-core/core-bundle/dist/side-modal.js |
226 B |
packages/paste-core/core-bundle/dist/sidebar.js |
220 B |
packages/paste-core/core-bundle/dist/skeleton-loader.js |
230 B |
packages/paste-core/core-bundle/dist/slider.js |
220 B |
packages/paste-core/core-bundle/dist/spinner.js |
221 B |
packages/paste-core/core-bundle/dist/stack.js |
220 B |
packages/paste-core/core-bundle/dist/status.js |
220 B |
packages/paste-core/core-bundle/dist/style-props.js |
226 B |
packages/paste-core/core-bundle/dist/styling-library.js |
230 B |
packages/paste-core/core-bundle/dist/summary-detail.js |
230 B |
packages/paste-core/core-bundle/dist/switch.js |
221 B |
packages/paste-core/core-bundle/dist/syntax-highlighter-library.js |
243 B |
packages/paste-core/core-bundle/dist/syntax-highlighter.js |
243 B |
packages/paste-core/core-bundle/dist/table.js |
218 B |
packages/paste-core/core-bundle/dist/tabs-primitive.js |
230 B |
packages/paste-core/core-bundle/dist/tabs.js |
219 B |
packages/paste-core/core-bundle/dist/text.js |
219 B |
packages/paste-core/core-bundle/dist/textarea.js |
221 B |
packages/paste-core/core-bundle/dist/theme.js |
220 B |
packages/paste-core/core-bundle/dist/time-picker.js |
228 B |
packages/paste-core/core-bundle/dist/toast.js |
218 B |
packages/paste-core/core-bundle/dist/tooltip-primitive.js |
231 B |
packages/paste-core/core-bundle/dist/tooltip.js |
221 B |
packages/paste-core/core-bundle/dist/topbar.js |
221 B |
packages/paste-core/core-bundle/dist/truncate.js |
221 B |
packages/paste-core/core-bundle/dist/types.js |
220 B |
packages/paste-core/core-bundle/dist/uid-library.js |
227 B |
packages/paste-core/core-bundle/dist/user-dialog.js |
228 B |
packages/paste-core/core-bundle/dist/utils.js |
219 B |
packages/paste-core/core-bundle/dist/visual-picker.js |
229 B |
packages/paste-core/layout/aspect-ratio/dist/index.js |
1 kB |
packages/paste-core/layout/flex/dist/index.js |
1.64 kB |
packages/paste-core/layout/grid/dist/index.js |
1.79 kB |
packages/paste-core/layout/media-object/dist/index.js |
903 B |
packages/paste-core/layout/stack/dist/index.js |
1.1 kB |
packages/paste-core/primitives/box/dist/index.js |
3.23 kB |
packages/paste-core/primitives/combobox/dist/index.js |
577 B |
packages/paste-core/primitives/disclosure/dist/index.js |
472 B |
packages/paste-core/primitives/listbox/dist/index.js |
865 B |
packages/paste-core/primitives/menu/dist/index.js |
522 B |
packages/paste-core/primitives/modal-dialog/dist/index.js |
21.6 kB |
packages/paste-core/primitives/non-modal-dialog/dist/index.js |
529 B |
packages/paste-core/primitives/sibling-box/dist/index.js |
1.2 kB |
packages/paste-core/primitives/tabs/dist/index.js |
474 B |
packages/paste-core/primitives/text/dist/index.js |
2.69 kB |
packages/paste-core/primitives/tooltip/dist/index.js |
481 B |
packages/paste-customization/dist/index.js |
2 kB |
packages/paste-design-tokens/dist/themes/dark/tokens.common.js |
4.92 kB |
packages/paste-design-tokens/dist/themes/dark/tokens.generic.js |
7.01 kB |
packages/paste-design-tokens/dist/themes/evergreen/tokens.common.js |
5.28 kB |
packages/paste-design-tokens/dist/themes/evergreen/tokens.generic.js |
7.5 kB |
packages/paste-design-tokens/dist/themes/sendgrid/tokens.common.js |
4.95 kB |
packages/paste-design-tokens/dist/themes/sendgrid/tokens.generic.js |
7.63 kB |
packages/paste-design-tokens/dist/themes/twilio-dark/tokens.common.js |
4.94 kB |
packages/paste-design-tokens/dist/themes/twilio-dark/tokens.generic.js |
7.05 kB |
packages/paste-design-tokens/dist/themes/twilio/tokens.common.js |
5 kB |
packages/paste-design-tokens/dist/themes/twilio/tokens.generic.js |
7.65 kB |
packages/paste-design-tokens/dist/tokens.common.js |
4.94 kB |
packages/paste-design-tokens/dist/tokens.generic.js |
7.61 kB |
packages/paste-libraries/animation/dist/index.js |
23.2 kB |
packages/paste-libraries/clipboard-copy/dist/index.js |
1.58 kB |
packages/paste-libraries/code-editor/dist/index.js |
8.64 kB |
packages/paste-libraries/data-visualization/dist/index.js |
2.07 kB |
packages/paste-libraries/dropdown/dist/index.js |
24.4 kB |
packages/paste-libraries/lexical/dist/index.js |
86.5 kB |
packages/paste-libraries/react-spectrum/dist/index.js |
14.3 kB |
packages/paste-libraries/react-textarea-autosize/dist/index.js |
7.95 kB |
packages/paste-libraries/reakit/dist/index.js |
41.7 kB |
packages/paste-libraries/styling/dist/index.js |
30.6 kB |
packages/paste-libraries/syntax-highlighter/dist/index.js |
34.5 kB |
packages/paste-libraries/uid/dist/index.js |
1.14 kB |
packages/paste-style-props/dist/index.js |
1.21 kB |
packages/paste-theme/dist/index.js |
4.18 kB |
packages/paste-types/dist/index.js |
335 B |
packages/paste-utils/dist/index.js |
11.9 kB |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
This pull request is automatically built and testable in CodeSandbox.
To see build info of the built libraries, click here or the icon next to each commit SHA.
Latest deployment of this branch, based on commit 19498cdecdca352d239c172f3083cf1dcf00485f:
| Sandbox | Source |
|---|---|
| @twilio-paste/nextjs-template | Configuration |
| @twilio-paste/token-contrast-checker | Configuration |
![codesandbox-ci[bot] avatar](https://avatars.githubusercontent.com/in/38409?v=4 "Published by a pub.dev verified publisher"){kind=small}
Passing run #7970 âī¸
 0 |
 79 |
 0 |
 0 |
 0 |
Details:
| chore: fixes | |||
| Project: Paste | Commit: 19498cdecd |
||
| Status: Passed | Duration: 04:37 đĄ | ||
| Started: Apr 23, 2024 6:11 PM | Ended: Apr 23, 2024 6:15 PM | ||
Review all test suite changes for PR #3857 âī¸
![cypress[bot] avatar](https://avatars.githubusercontent.com/in/9078?v=4 "Published by a pub.dev verified publisher"){kind=small}
This is blocked on an accessiblity issue where my solution added wrappers for the scrollbar around the individual tabs and the tab wrapper. The tabs need to be direct children of the tab wrapper, and it is causing screenreaders to not correctly link the two elements together.
A solution would be to use aria- tags to connect them, but I didn't have great success with it in my preliminary tests. This requires more experimentation.
Another solution would be to move my wrappers outside the tabWrapper rather than between it and the tabs, and then update the styling accordingly to make this solution work. I haven't explored this, and is just an idea.