Drawer: Introduce a size property that set's width percentage and minWidth (#67809)

* Drawer: Introduce drawer size that sets width and min-width

* media queries

* Change large drawer to 75%

* Change news drawer to medium as the news items have better layout then with images on the side

* Tweaks and fixed inline drawer issue

* review fixes

* Deprecate inline, update mdx docs

* remove inline var

public/app/core/components/AppChrome/News/NewsContainer.tsx

@@ -22,7 +22,12 @@ export function NewsContainer({ className }: NewsContainerProps) {
     <>
       <ToolbarButton className={className} onClick={onChildClick} iconOnly icon="rss" aria-label="News" />
       {showNewsDrawer && (
-        <Drawer title={t('news.title', 'Latest from the blog')} scrollableContent onClose={onToggleShowNewsDrawer}>
+        <Drawer
+          title={t('news.title', 'Latest from the blog')}
+          scrollableContent
+          onClose={onToggleShowNewsDrawer}
+          size="md"
+        >
           <NewsWrapper feedUrl={DEFAULT_FEED_URL} />
         </Drawer>
       )}

public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx

@@ -72,7 +72,7 @@ export function HelpWizard({ panel, plugin, onClose }: Props) {
   return (
     <Drawer
       title={`Get help with this panel`}
-      width="90%"
+      size="lg"
       onClose={onClose}
       expandable
       scrollableContent

public/app/features/dashboard/components/Inspector/InspectContent.tsx

@@ -68,7 +68,6 @@ export const InspectContent = ({
     <Drawer
       title={title}
       subtitle={data && formatStats(data)}
-      width="50%"
       onClose={onClose}
       expandable
       scrollableContent

public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx

@@ -131,7 +131,6 @@ export const SaveDashboardDrawer = ({ dashboard, onDismiss, onSaveSuccess, isCop
     <Drawer
       title={title}
       onClose={onDismiss}
-      width={'40%'}
       subtitle={dashboard.title}
       tabs={
         <TabsBar>