helpers/help-card-data.js, separated help icons into helpers/icons and upgraded src/components/card.js to have hover styles and a RightArrow icon for the cardmbx-assembly-docs to prevent resolution errors in consuming repos.mr-ui getWindow util #607tagBackground to each theme for use in Tag component (#602)mbx-assembly-docsdocs-page-shellPageLayout component (no changes, but the wrong directory was mistakenly published as v5.1.5)PageLayout componentfeedback buttons from solid blue to gray with outline@sentry/browser to dependencies.subPages in GroupedGuides. #526This release updates to Assembly v1. #481
customStyles prop in Tag with customBorder, customColor, and customBackground. The new props accept class names.CardContainer no longer accepts a number for cardColSize, choose: '1/4' for 4 cards or '1/3' for 3 cards per row. The default is '1/2' for 2 cards per row.NavigiationAccordion when there is no activeItem. #495Feedback component. #518tracesSampleRate to 0.05. #517GuideGroupIndex in PageLayout to use CardContainer to display full width cards. #519DownloadButton with GeoJSON filetype. #484NavigationAccordion to handle pages that do not have a parent. #479DownloadButton component. #474.NavigationAccordion. #453.Feedback textarea where the cursor jumped to end of text. #477.Feedback to only send an event to Sentry if feedback exists. #475Feedback component to only send error to Sentry if forwardEvent returns one. #473Feedback component to introduce categories. #462Video to use a promise when handling play(). #459babel-plugin-transform-react-remove-prop-types to babel.config.js and use ES6 modules. #456AnalyticsShell with added sentryPerformance prop. #469sortVersions a common JS module. #470sortVersions for prerelease versions greater than 10. #464Search component, fix logic to prevent queries with results from being sent to Sentry.id with aria-label in VimeoPlayImage to prevent duplicated ids when more than one instance is on the same page. #438filename optional for CodeSnippetTitle.Search, NumberedCodeSnippet, and OnThisPage to improve performance. #437Video disable autoplay by default. #276Search component with a facade to improve performance. #430NumberedCodeSnippet prop onCopy is deprecated and will automatically send a track event to Segment. #442CodeSnippet prop highlighter no longer accepts an arrow function. #442highlighter={() => highlightJson}highlighter={highlightJson}Search to use the Swiftype API's spelling option to retry in cases where a typo is suspected.Search component. #452prepareSitemap Batfish helper to improve sitemap. #427. See prepareSitemap for instructions on how to add the dataSelector to your Batfish configuration. You will also want to add the following to the top of any redirect files so that they will be excluded from the sitemap:/*---
hideFromSearchEngines: true
---*/
edit.css prop is optional when displaying Edit in CodeSnippet. #421maxHeight is set, move Edit buttons in CodeSnippet above the code. #420pricing theme to Note. #416HelpPage, NavigationDropdown, SectionedNavigation, TopbarSticker, and Topbar components. #407css optional in Edit and CodeSnippet components. #293filename required for CodeSnippetTitle. #413anchor class (headings). #409This release drops support for Internet Explorer and makes small performance and accessibility improvements. #393
GLWrapper as MapWrapper.height of the map. This will set the height of the loader to prevent a content layout shift after the map loads.DemoIframe has a required title prop to provide a description of the iframe's content.vimeoThumbnail prop in RelatedPage no longer accepts a string. It must be an AppropriateImage instance. Example: vimeoThumbnail='./img/map-image.jpg' becomes vimeoThumbnail={<AppropriateImage alt='' imageId='map-image' />}position prop to Feedback component to identify place on page.GlWrapper component to check for Internet Explorer and provide reason for when the issue is not Internet Explorer or WebGL support. #387mbxMetadata when the component unmounts in AnalyticsShell. #383.pageSorter function in filter Batfish helper to sort "まず始めに" (Getting started) to top of the list.Breadcrumb component. This component is included as a feature in PageLayout. #331.OnThisPage component. This component displays headings on the page and performs scroll spy to indicate where you are on the page.@mapbox/dr-ui/plugins/create-sections plugin and it is now deprecated. You can safely remove it from your batfish.config.js.OnThisPage component must have the class anchor. The add-links-to-headings plugin will automatically add this class to markdown headings, but if you add HTML headings to the page, then you must add the anchor class to each h2 and h3 element to make sure the scroll spy can detect these headings.PageLayout component.OnThisPage and Feedback components. On larger devices, the aside is stuck to the right-side of the screen. On smaller devices, OnThisPage moves inline below the page's title and Feedback will appear at the bottom of the page. The aside feature does not stick on IE 11 and remains static, but still performs the core functionality of providing anchor links.OnThisPage will appear on all pages with layout: page by default, but nowhere else. If a boolean onThisPage frontmatter property is supplied, this can be overridden for any page.TopbarSticker from PageLayout. The main navigation now uses the NavigationAccordion on the sidebar to display main pages and subpages.NavigationAccordion to work as site navigation menu. The component will no longer track headings. We deprecated several props and introduced new ones, please consult the NavigationAccordion documentation.OverviewHeader component to the page by passing the component's properties in the frontMatter. When overviewHeader is defined in the frontMatter, then the title (h1) will not show on the page.exampleIndex layout. All page cards will be displayed in order of the order frontMatter property and then alphabetically by title. Filters will automatically appear for topics, levels, languages, and video if the pages have at least more than one unique option for each filter category. Filter selections are pushed to the query param and are set by a rendered query string.Feedback component.AsideHeading component to style the component's heading.docs-prose.css..unprose class on #docs-content h2 elements to remove the styling.sticky-mxl and scroll-auto-mxl classes to enable a sticky position and scrolling on displays >= 1200 pixels.ExamplePage component to HelpPage to better reflect that the component will display tutorial and troubleshooting page cards for Help pages. Adds data prop that accepts JSON to display cards.topics Batfish helper and replace with filters.formatTopics Batfish helper. Use the HelpPage component.accordion object from navigation and moved the dataset into navTabs as pages array.addPages parameter to buildNavigation helper function to support appending arbitrary items to site navigation.buildNavigation.small prop and variant to Tag.ProductMenu and moves tag above the title.Feedback component on examples pages with an Aside.ExamplesIndex component.OverviewHeader: theme to accept CSS classes to customize the container, lightText to enable white text, description to add a text description. The features prop is now optional.GlossaryCard, GlossaryPage, and GlossarySection components.LevelIndicator.Search to allow further customization by other subdomains. #329resultsOnly and overrideSearchTerm that will display only the Swiftype results for the given search term.themeCompact to condense result padding when enabled.emptyResultMessage to change the message when Swiftype returns no results for a query.segmentTrackEvent to change the name of the Segment event that is capture during a search.referrer tag in Feedback.5.24.2.hideSearch prop to PageLayout to remove the Search component in PageLayoutTopbar.hideTopBar prop to PageLayout to completely remove PageLayoutTopbar.ProductMenu.minHeight on PageLayoutTopbar to prevent layout shift as the Search component loads.Search in PageLayout.PageLayoutTopbar.formatTopics Batfish helper function. #328connector prop in PageLayout.type prop in PageLayout's Feedback component.Introducing layouts in PageLayout. See the PageLayout guide for more information on building with this component.
AnalyticsShell component. #307navigation and topics. #310split-pages. #317PageLayout to accept layouts. #309page, accordion, example, full, exampleIndex.sidebarTitle, sidebarContent, sidebarContentStickyTop, sidebarContentStickyTopNarrow, sidebarStackedOnNarrowScreens, sideBarColSize, interactiveClass.sidebarTheme is now defined from the frontMatter object.TopbarSticker/Topbar, Search, and Feedback components.user props is deprecated in Feedback. The component will now fetch this data and you can safely remove the user prop from this component. #324cardColSize prop to CardContainer to adjust size of cards.BackToTopButton. #290@sentry/browser and add it as a peer dependency along with react, react-dom, @mapbox/mr-ui, and @mapbox/mbx-assembly. #292limiter from Topbar. #282ContextlessAndroidActivityToggle. #278NumberedCodeSnippet component. #269NumberedCodeSnippet where if the last line was included in copyRanges that code chunk would not be highlighted. #268Topbar component. #274ProductMenu from truncating tag. #277SectionedNavigation onload. #249NavigationAccordion onload. #247NavigationAccordion, SectionedNavigation, and PageLayout sidebarTitle. #254sidebarTitle value of PageLayout, you should not need additional margin or padding classes. The sidebar text should line up with the PageLayout title text.icon option for third level items in NavigationAccordion. #252Feedback to catch failed forward-event events. #256Feeback text feedback to 1000 characters and set Sentry's maxValueLength to the same to prevent truncated feedback. #244Feedback component. #255userName prop has been replaced by user object.RelatedPage component:Note component. #240image option, every Note will use the theme's defined image.Note by setting size as a number to correct their size in Firefox. #233Edit component. #228Note and Tag themes. #223Search component. #203beta and download themes to Note. #202imageComponent option from Note. The theme will select the accompanying image or you can pass image={false} to prevent the theme's image from appearing in Note. #202RelatedPage component. #213GlossaryImage component. #213ExampleImage component. #213Tag component with several theme options.BetaFlag. Use <Tag theme="beta" /> instead.OverviewHeader, NavigationAccordion ProductMenu). Pass a string to the tag prop to use a predefined theme. To use a custom theme, pass custom to the theme prop and add a customTagProps prop. customTagProps is required when using the custom theme.tag prop for second and third level headings in NavigationAccordion. #212NumberedCodeSnippet to include the option to hide lines not included in copyRanges. Lines are hidden by default. #206Feedback component's Sentry integration. #209section and preferredLanguage.environment.feedbackSentryDsn to accept boolean (false) to disable sending text feedback to Sentry. If you're using the Feedback component, but not using Sentry to triage feedback, set this value to false.Themes component to hold shared styles for Tag and Note. #217highlight/theme-css which exports prism.css as string and allows us to easily import prism.css into mr-ui CodeSnippet and other components. #218Edit component to add "Edit in JSFiddle" and "Edit in CodePen" buttons to code blocks. #197CodeSnippet component as a wrapper to mr-ui's CodeSnippet with options to use Edit or CodeSnippetTitle components. #197cursor: pointer rule from H2 and H3 elements. #222Feedback component for text feedback issue management. #198groovy syntax highlighting. #201connector to the Search component. #200Highlight component. #191GlossaryCard, GlossarySection, and GlossaryPage components. #192Search button. #189Phone component. #195cleanAndroidActivity and cleanIosViewController helper functions. #194environment and location to the request in Feedback. #184Video component. #176Browser component. #177CodeSnippetTitle component. #179CodeToggle component to allow for the toggle labels to be different from the values and remove restrictions on specific strings for the language prop. #179ContextlessAndroidActivityToggle component that styles the ToggleableCodeSnippet component specifically for toggling between Activity code written in Java and Kotlin. It should be used with context defined in the repo where it is being used. #179ContextlessIosViewControllerToggle component that styles the ToggleableCodeSnippet component specifically for toggling between ViewController code written in Swift and Objective-C. It should be used with context defined in the repo where it is being used. #179NumberedCodeSnippet component for displaying line numbers and styling designated copyRanges inside snippets. #179AndroidLayoutCodeBlock component. #179prism.css to add styling for numbered lines in the NumberedCodeSnippet component. #179highlight/kotlin.js to add syntax highlighting for Kotlin code snippets. #179Add preferredLanguage as prop for Feedback and include browser name, version, and operating system with the event. #183
🚨Breaking changes:
Move all syntax highlighter functions from helpers directory to highlight component and simplifies each highlighter file name. #180
Modify the ToggleableCodeBlock component to include the code toggle when more than one option exists. Changes to props include:
codeSnippetcodeSnippet.language with selectedLanguagecodeSnippet.rawCode with codecodeSnippet.highlightedCode with highlightedCodecodeSnippet.preferredLanguageidcopyRangesoptionschangeLanguagefilenamelinklimitHeight (defaults to true)See #179
Note style with a green background that will be used to show off new or updated products or features. #162window.scroll() on BackToTopButton. #167Search component. #165GLWrapper and DemoIframe components. #166Note in IE11 by replacing Object.assign with a function. #159Search. #160Search by preventing the component from loading on IE11. #158Search. #151Feedback component. #135PageLayout. #146helpers/version-sort.js. #142version-sort helper function so it does not push pre-releases of the latest stable version. #148Search filter was not displaying with the first query.Search component. #145optionalDependencies and jest from package.json. #143Search to be a button and track toggle event.Search modal and TopbarSticker. #139Search results by current site or all docs. #138Search component. #140Search component to use a modal on larger screens. #133.PageLayout and TopbarSticker. #134compare-versions in the version-sort helper function. #132Search results. #129titleGenerator to Search component directory.Search component. #127titleGenerator helper function to format title meta tags and search result titles. #128LevelIndicator in txt-s txt-bold classes in Card. #/Search component. #121txt-bold and txt-s from LevelIndicator component to make it more flexible. #121CardContainer, SectionedNavigation, and TopbarSticker. (#119)(https://github.com/mapbox/dr-ui/pull/119)BackToTopButton. (#122)(https://github.com/mapbox/dr-ui/pull/122)sortVersion helper function. (#124)(https://github.com/mapbox/dr-ui/pull/124)BetaFlag component, beta prop to OverviewHeader, beta prop to ProductMenu; update mr-ui to v0.7.0. (#123)(https://github.com/mapbox/dr-ui/pull/123)npm run build.(#118)(https://github.com/mapbox/dr-ui/pull/118)NavigationAccordion to add tags to first level items. (#115)(https://github.com/mapbox/dr-ui/pull/115)SectionedNavigation. (#111)(https://github.com/mapbox/dr-ui/pull/111)mb24 to OverviewHeader. #112.prose pre rules in docs-prose.css to make specific to code blocks with .language- prefixed classes. #113Card and CardContainer. #104Note and removes ability to pass padding, background, fontSize, lineHeight, and color to Note. #102WarningImage for primary use with Note. #102width and height props with size on BookImage, BookletImage, ContactImage, TroubleshootImage. #102contactLink prop to OverviewHeader to create Contact us button. (#105)unStickWidth prop to TopbarSticker. (#100)sideBarColSize) to change the column size of the sidebar in PageLayout. (#96)#docs-content .prose. (#91)px12 on content element in PageLayout. (#98)interactiveClass prop to watch for changes on click in PageLayout to adjust the sidebar height. (#97)bottomBoundaryValue on PageLayout's sticky sidebar to account for slimmer docs-page-shell footer. (#88)ProductMenuDropdown and ProductMenuItems and refactors ProductMenu as a link. (#73)NavigationAccordion and add plugin to create sections in markdown files based on h2 and h3 headings. (#66)NavigationDropdown did not appear on mobile. (#79)BackToTopButton did not, in fact, go back to top on mobile. (#80)borderRadius class and give text color high contrast on Note. (#78)pt60 class from ExamplesPage component. (#70)Card and CardContainer components for consistent padding and spacing. (#71)TopbarSticker to prevent overlap with Mapbox logo on maps. (#67)hideSubItems option to SectionedNavigation and active class to current page. (#69)index.js file for the LevelIndicator component.ProductMenuItems. (#62)PageLayout was sticking when navigating directly to a hash at the bottom of the page. (#63)BackToTopButton was not centered. (#63)SectionedNavigation via the includeFilterBar prop. (#60)thirdLevelItems) to NavigationAccordion. (#58)ProductMenuItems. (#48)PageLayout when the sidebar contents overflow vertically. (#54)PageLayout, remove activeClass from the Sticky component to prevent temporary faint gray background when sidebarTheme is set to something other than the default. (#54)LevelIndicator component. (#55)level and language props to Card. (#55)ProductMenuItems. (#56)sidebarTitle prop type in the PageLayout component from string to string or node. (#43)lightText prop for styling the ProductMenu popover trigger on dark backgrounds. (#52)SectionedNavigtion. Note: This should be used to indicate which example you're currently viewing when displaying SectionedNavigation on individual examples pages. (#45)secondLevelItems in NavigationAccordion. (#44)