Chore: spelling - ui (#24435)

eb734a2f · Josh Soref · GitHub · b5b1b9d6 · eb734a2f · eb734a2f
Commit eb734a2f authored Jun 22, 2020 by Josh Soref Committed by GitHub Jun 22, 2020
36 changed files
--- a/packages/grafana-ui/CHANGELOG.md
+++ b/packages/grafana-ui/CHANGELOG.md
@@ -108,7 +108,7 @@ onCreateOption={(customValue) => {
 - **@grafana/ui**: Create Icon component and replace icons. [#23402](https://github.com/grafana/grafana/pull/23402), [@ivanahuckova](https://github.com/ivanahuckova)
 - **@grafana/ui**: Create slider component. [#22275](https://github.com/grafana/grafana/pull/22275), [@ivanahuckova](https://github.com/ivanahuckova)
- **@grafana/ui**: Remove ColorPallete component. [#23592](https://github.com/grafana/grafana/pull/23592), [@ivanahuckova](https://github.com/ivanahuckova)
+- **@grafana/ui**: Remove ColorPalette component. [#23592](https://github.com/grafana/grafana/pull/23592), [@ivanahuckova](https://github.com/ivanahuckova)
 - **Components**: IconButton. [#23510](https://github.com/grafana/grafana/pull/23510), [@torkelo](https://github.com/torkelo)
 - **Docs**: Adding API reference documentation support for the packages libraries. [#21931](https://github.com/grafana/grafana/pull/21931), [@mckn](https://github.com/mckn)
 - **Migration**: Add old Input to legacy namespace. [#23286](https://github.com/grafana/grafana/pull/23286), [@tskarhed](https://github.com/tskarhed)

--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
@@ -14,7 +14,7 @@ import {
  FieldColorMode,
 } from '@grafana/data';
-// Compontents
+// Components
 import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
 // Utils

--- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
@@ -364,7 +364,7 @@ export class StackedWithChartLayout extends BigValueLayout {
    // make title fontsize it's a bit smaller than valueFontSize
    this.titleFontSize = Math.min(this.valueFontSize * 0.7, this.titleFontSize);
-    // make chart take up onused space
+    // make chart take up unused space
    this.chartHeight = height - this.titleFontSize * LINE_HEIGHT - this.valueFontSize * LINE_HEIGHT;
  }

--- a/packages/grafana-ui/src/components/Cascader/Cascader.tsx
+++ b/packages/grafana-ui/src/components/Cascader/Cascader.tsx
@@ -9,7 +9,7 @@ import { css } from 'emotion';
 import { onChangeCascader } from './optionMappings';
 interface CascaderProps {
-  /** The seperator between levels in the search */
+  /** The separator between levels in the search */
  separator?: string;
  placeholder?: string;
  options: CascaderOption[];

--- a/packages/grafana-ui/src/components/Chart/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Chart/Tooltip.tsx
@@ -10,7 +10,7 @@ export type TooltipMode = 'single' | 'multi';
 // Describes active dimensions user interacts with
 // It's a key-value pair where:
 // - key is the name of the dimension
-// - value is a tuple addresing which column and row from given dimension is active.
+// - value is a tuple addressing which column and row from given dimension is active.
 //   If row is undefined, it means that we are not hovering over a datapoint
 export type ActiveDimensions<T extends Dimensions = any> = { [key in keyof T]: [number, number | undefined] | null };

--- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.mdx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.mdx
@@ -7,7 +7,7 @@ import { ColorPicker } from './ColorPicker';
 The `ColorPicker` component group consists of several building blocks that are combined in Grafana to create the `ColorPicker`: popover, pickers and palettes. There are different combinations of these building blocks depending on where the `ColorPicker` is used in Grafana.
-The `Popover` is a tabbed view where you can switch between `Palettes`. The `NamedColorsPalette` shows an arrangement of preset colors, while the `SpectrumPalette` is an unlimited HSB color picker. The preset colors are opimized to work well with both light and dark theme. `Popover` is triggered, for example, by the series legend of graphs, or by `Pickers`.
+The `Popover` is a tabbed view where you can switch between `Palettes`. The `NamedColorsPalette` shows an arrangement of preset colors, while the `SpectrumPalette` is an unlimited HSB color picker. The preset colors are optimized to work well with both light and dark theme. `Popover` is triggered, for example, by the series legend of graphs, or by `Pickers`.
 The `Pickers` are single circular color fields that show the currently picked color. On click, they open the `Popover`.

--- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
@@ -85,5 +85,5 @@ export class AxisSelector extends React.PureComponent<AxisSelectorProps, AxisSel
  }
 }
-// This component is to enable SeriecColorPickerPopover usage via series-color-picker-popover directive
+// This component is to enable SeriesColorPickerPopover usage via series-color-picker-popover directive
 export const SeriesColorPickerPopoverWithTheme = withTheme(SeriesColorPickerPopover);
--- a/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx
+++ b/packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx
@@ -8,14 +8,14 @@ interface WithContextMenuProps {
 export const WithContextMenu: React.FC<WithContextMenuProps> = ({ children, getContextMenuItems }) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [menuPosition, setMenuPositon] = useState({ x: 0, y: 0 });
+  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
  return (
    <>
      {children({
        openMenu: e => {
          setIsMenuOpen(true);
-          setMenuPositon({
+          setMenuPosition({
            x: e.pageX,
            y: e.pageY,
          });

--- a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
@@ -45,7 +45,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
    }
  `,
  // Wrapper with child selector needed.
-  // When classnames are appplied to the same element as the wrapper, it causes the suggestions to stop working
+  // When classnames are applied to the same element as the wrapper, it causes the suggestions to stop working
  wrapperOverrides: css`
    width: 100%;
    > .slate-query-field__wrapper {

--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
@@ -29,7 +29,7 @@ export interface Props {
  onClose: () => void;
 }
-const getStyles = stylesFactory((theme: GrafanaTheme, scollableContent: boolean) => {
+const getStyles = stylesFactory((theme: GrafanaTheme, scrollableContent: boolean) => {
  return {
    drawer: css`
      .drawer-content {
@@ -61,7 +61,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scollableContent: boolean)
    content: css`
      padding: ${theme.spacing.md};
      flex-grow: 1;
-      overflow: ${!scollableContent ? 'hidden' : 'auto'};
+      overflow: ${!scrollableContent ? 'hidden' : 'auto'};
      z-index: 0;
      height: 100%;
    `,

--- a/packages/grafana-ui/src/components/Forms/Label.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Label.story.tsx
@@ -7,12 +7,12 @@ export default {
 };
 export const simple = () => {
-  return <Label description="Opton description">Option name</Label>;
+  return <Label description="Option description">Option name</Label>;
 };
 export const categorised = () => {
  return (
-    <Label category={['Category', 'Nested category']} description="Opton description">
+    <Label category={['Category', 'Nested category']} description="Option description">
      Option name
    </Label>
  );

--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx
@@ -13,10 +13,10 @@ export default {
 };
 export const basic = () => {
-  const intialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
+  const initialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
-  const value = object<SelectableValue<string>>('Selected Value:', intialState);
+  const value = object<SelectableValue<string>>('Selected Value:', initialState);
  const options = object<Array<SelectableValue<string>>>('Options:', [
-    intialState,
+    initialState,
    { label: 'Another label', value: 'Another value' },
  ]);

--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx
 import React from 'react';
 import { Icon } from '../../../Icon/Icon';
-// Ignoring because I couldn't get @types/react-select work wih Torkel's fork
+// Ignoring because I couldn't get @types/react-select work with Torkel's fork
 // @ts-ignore
 import { components } from '@torkelo/react-select';

--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/NoOptionsMessage.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/NoOptionsMessage.tsx
 import React from 'react';
-// Ignoring because I couldn't get @types/react-select work wih Torkel's fork
+// Ignoring because I couldn't get @types/react-select work with Torkel's fork
 // @ts-ignore
 import { components } from '@torkelo/react-select';
 // @ts-ignore

--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx
@@ -12,10 +12,10 @@ export default {
  decorators: [withCenteredStory, withKnobs],
 };
-const intialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
+const initialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
 const options = object<Array<SelectableValue<string>>>('Options:', [
-  intialState,
+  initialState,
  { label: 'Another label', value: 'Another value 1' },
  { label: 'Another label', value: 'Another value 2' },
  { label: 'Another label', value: 'Another value 3' },
@@ -25,7 +25,7 @@ const options = object<Array<SelectableValue<string>>>('Options:', [
 ]);
 export const basic = () => {
-  const value = object<SelectableValue<string>>('Selected Value:', intialState);
+  const value = object<SelectableValue<string>>('Selected Value:', initialState);
  return (
    <UseState initialState={value}>

--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx
@@ -2,7 +2,7 @@
 import classNames from 'classnames';
 import React, { PureComponent } from 'react';
-// Ignoring because I couldn't get @types/react-select work wih Torkel's fork
+// Ignoring because I couldn't get @types/react-select work with Torkel's fork
 // @ts-ignore
 import { default as ReactSelect } from '@torkelo/react-select';
 // @ts-ignore

--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOption.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOption.tsx
 import React from 'react';
 import { Icon } from '../../../Icon/Icon';
-// Ignoring because I couldn't get @types/react-select work wih Torkel's fork
+// Ignoring because I couldn't get @types/react-select work with Torkel's fork
 // @ts-ignore
 import { components } from '@torkelo/react-select';
 import { OptionProps } from 'react-select';

--- a/packages/grafana-ui/src/components/Graph/Graph.test.tsx
+++ b/packages/grafana-ui/src/components/Graph/Graph.test.tsx
@@ -134,7 +134,7 @@ describe('Graph', () => {
    });
    describe('in All Series mode', () => {
-      it('it renders all series summary regardles of mouse position', () => {
+      it('it renders all series summary regardless of mouse position', () => {
        // Given
        const graphWithTooltip = (
          <Graph {...mockGraphProps(true)}>

--- a/packages/grafana-ui/src/components/Graph/GraphLegend.story.tsx
+++ b/packages/grafana-ui/src/components/Graph/GraphLegend.story.tsx
@@ -9,7 +9,7 @@ import { LegendPlacement, LegendDisplayMode } from '../Legend/Legend';
 export default {
  title: 'Visualizations/Graph/GraphLegend',
  component: GraphLegend,
-  decororators: [withHorizontallyCenteredStory],
+  decorators: [withHorizontallyCenteredStory],
 };
 const getStoriesKnobs = (isList = false) => {

--- a/packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx
+++ b/packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx
@@ -60,9 +60,9 @@ describe('MultiModeGraphTooltip', () => {
      // We rendered two series rows
      const rows = container.find('SeriesTableRow');
-      // We expect A-series(1st row) to be higlighted
+      // We expect A-series(1st row) to be highlighted
      expect(rows.get(0).props.isActive).toBeTruthy();
-      // We expect B-series(2nd row) not to be higlighted
+      // We expect B-series(2nd row) not to be highlighted
      expect(rows.get(1).props.isActive).toBeFalsy();
    });
@@ -85,9 +85,9 @@ describe('MultiModeGraphTooltip', () => {
      // We rendered two series rows
      const rows = container.find('SeriesTableRow');
-      // We expect A-series(1st row) not to be higlighted
+      // We expect A-series(1st row) not to be highlighted
      expect(rows.get(0).props.isActive).toBeFalsy();
-      // We expect B-series(2nd row) not to be higlighted
+      // We expect B-series(2nd row) not to be highlighted
      expect(rows.get(1).props.isActive).toBeFalsy();
    });
  });

--- a/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx
+++ b/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx
@@ -47,7 +47,7 @@ export const basic = () => {
          The database user should only be granted SELECT permissions on the specified database &amp; tables you want to
          query. Grafana does not validate that queries are safe so queries can contain any SQL statement. For example,
          statements like <code>USE otherdb;</code> and <code>DROP TABLE user;</code> would be executed. To protect
-          against this we <strong>Highly</strong> recommmend you create a specific MySQL user with restricted
+          against this we <strong>Highly</strong> recommend you create a specific MySQL user with restricted
          permissions.
        </p>
      </InfoBox>

--- a/packages/grafana-ui/src/components/JSONFormatter/json_explorer/json_explorer.ts
+++ b/packages/grafana-ui/src/components/JSONFormatter/json_explorer/json_explorer.ts
@@ -9,7 +9,7 @@ const DATE_STRING_REGEX = /(^\d{1,4}[\.|\\/|-]\d{1,2}[\.|\\/|-]\d{1,4})(\s*(?:0?
 const PARTIAL_DATE_REGEX = /\d{2}:\d{2}:\d{2} GMT-\d{4}/;
 const JSON_DATE_REGEX = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
-// When toggleing, don't animated removal or addition of more than a few items
+// When toggling, don't animated removal or addition of more than a few items
 const MAX_ANIMATED_TOGGLE_ITEMS = 10;
 const requestAnimationFrame =

--- a/packages/grafana-ui/src/components/Legend/Legend.story.tsx
+++ b/packages/grafana-ui/src/components/Legend/Legend.story.tsx
@@ -33,7 +33,7 @@ const getStoriesKnobs = (table = false) => {
  const typeSpecificRenderer = table
    ? {
-        'Custom renderer(GraphLegendTablerow)': 'custom-tabe',
+        'Custom renderer(GraphLegendTablerow)': 'custom-table',
      }
    : {
        'Custom renderer(GraphLegendListItem)': 'custom-list',

--- a/packages/grafana-ui/src/components/Logs/LogLabels.test.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogLabels.test.tsx
@@ -14,7 +14,7 @@ describe('<LogLabels />', () => {
    expect(wrapper.text()).toContain('bar');
    expect(wrapper.text()).toContain('42');
  });
-  it('exlcudes labels with certain names or labels starting with underscore', () => {
+  it('excludes labels with certain names or labels starting with underscore', () => {
    const wrapper = shallow(<LogLabels labels={{ foo: 'bar', level: '42', _private: '13' }} theme={getTheme()} />);
    expect(wrapper.text()).toContain('bar');
    expect(wrapper.text()).not.toContain('42');

--- a/packages/grafana-ui/src/components/Logs/LogRowContextProvider.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRowContextProvider.tsx
@@ -123,17 +123,17 @@ export const LogRowContextProvider: React.FunctionComponent<LogRowContextProvide
  children,
 }) => {
  // React Hook that creates a number state value called limit to component state and a setter function called setLimit
-  // The intial value for limit is 10
+  // The initial value for limit is 10
  // Used for the number of rows to retrieve from backend from a specific point in time
  const [limit, setLimit] = useState(10);
  // React Hook that creates an object state value called result to component state and a setter function called setResult
-  // The intial value for result is null
+  // The initial value for result is null
  // Used for sorting the response from backend
  const [result, setResult] = useState<ResultType>((null as any) as ResultType);
  // React Hook that creates an object state value called hasMoreContextRows to component state and a setter function called setHasMoreContextRows
-  // The intial value for hasMoreContextRows is {before: true, after: true}
+  // The initial value for hasMoreContextRows is {before: true, after: true}
  // Used for indicating in UI if there are more rows to load in a given direction
  const [hasMoreContextRows, setHasMoreContextRows] = useState({
    before: true,

--- a/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx
+++ b/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx
@@ -72,7 +72,7 @@ describe('<QueryField />', () => {
      expect(wrapper.instance().editor).toBeFalsy();
      expect(spyOnChange).not.toBeCalled();
    });
-    it('should not re-render the editor twice once syntax is fully lodaded', () => {
+    it('should not re-render the editor twice once syntax is fully loaded', () => {
      const wrapper: any = shallow(<QueryField query="my query" portalOrigin="mock-origin" />);
      const spyOnChange = jest.spyOn(wrapper.instance(), 'onChange').mockImplementation(jest.fn());
      wrapper.instance().editor = { insertText: () => ({ deleteBackward: () => ({ value: 'fooo' }) }) };

--- a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
@@ -70,7 +70,7 @@ export const InputWithAutoFocus = () => {
  return (
    <SegmentFrame>
      {inputComponents.map((InputComponent: any) => (
-        <InputComponent intitialValue="test"></InputComponent>
+        <InputComponent initialValue="test"></InputComponent>
      ))}
      <a
        className="gf-form-label query-part"

--- a/packages/grafana-ui/src/components/Select/SingleValue.tsx
+++ b/packages/grafana-ui/src/components/Select/SingleValue.tsx
 import React from 'react';
 import { css, cx } from 'emotion';
-// Ignoring because I couldn't get @types/react-select work wih Torkel's fork
+// Ignoring because I couldn't get @types/react-select work with Torkel's fork
 // @ts-ignore
 import { components } from '@torkelo/react-select';
 import { useDelayedSwitch } from '../../utils/useDelayedSwitch';

--- a/packages/grafana-ui/src/components/SetInterval/SetInterval.tsx
+++ b/packages/grafana-ui/src/components/SetInterval/SetInterval.tsx
@@ -37,7 +37,7 @@ export class SetInterval extends PureComponent<Props> {
        // switchMap creates a new observables based on the input stream,
        // which becomes part of the propsSubject stream
        switchMap(props => {
-          // If the query is live, empty value is emited. `of` creates single value,
+          // If the query is live, empty value is emitted. `of` creates single value,
          // which is merged to propsSubject stream
          if (RefreshPicker.isLive(props.interval)) {
            return of({});
@@ -45,13 +45,13 @@ export class SetInterval extends PureComponent<Props> {
          // When query is loading, a new stream is merged. But it's a stream that emits no values(NEVER),
          // hence next call of this function will happen when query changes, and new props are passed into this component
-          // When query is NOT loading, a new value is emited, this time it's an interval value,
+          // When query is NOT loading, a new value is emitted, this time it's an interval value,
          // which makes tap function below execute on that interval basis.
          return props.loading ? NEVER : interval(stringToMs(props.interval));
        }),
        // tap will execute function passed via func prop
        // * on value from `of` stream merged if query is live
-        // * on specified interval (triggered by values emited by interval)
+        // * on specified interval (triggered by values emitted by interval)
        tap(() => this.props.func())
      )
      .subscribe();
@@ -67,7 +67,7 @@ export class SetInterval extends PureComponent<Props> {
    ) {
      return;
    }
-    // if props changed, a new value is emited from propsSubject
+    // if props changed, a new value is emitted from propsSubject
    this.propsSubject.next(this.props);
  }

--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -384,7 +384,7 @@ $panel-grid-placeholder-bg: darken(${theme.palette.blue77}, 30%);
 $panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue80};
 // logs
-$logs-color-unkown: $gray-2;
+$logs-color-unknown: $gray-2;
 // toggle-group
 $button-toggle-group-btn-active-bg: linear-gradient(90deg, #eb7b18, #d44a3a);

--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -377,7 +377,7 @@ $panel-grid-placeholder-bg: lighten(${theme.palette.blue95}, 30%);
 $panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue95};
 // logs
-$logs-color-unkown: $gray-5;
+$logs-color-unknown: $gray-5;
 // toggle-group
 $button-toggle-group-btn-active-bg: $brand-primary;

--- a/packages/grafana-ui/src/utils/index.ts
+++ b/packages/grafana-ui/src/utils/index.ts
@@ -7,6 +7,6 @@ export * from './scrollbar';
 export * from './measureText';
 export { default as ansicolor } from './ansicolor';
-import * as DOMUtil from './dom'; // includes Element.closest polyfil
+import * as DOMUtil from './dom'; // includes Element.closest polyfill
 export { DOMUtil };
 export { renderOrCallToRender } from './renderOrCallToRender';
--- a/packages/grafana-ui/src/utils/measureText.ts
+++ b/packages/grafana-ui/src/utils/measureText.ts
@@ -34,6 +34,6 @@ export function calculateFontSize(text: string, width: number, height: number, l
  const fontSizeBasedOnHeight = height / lineHeight;
  // final fontSize
-  const optimialSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);
+  const optimalSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);
-  return Math.min(optimialSize, maxSize ?? optimialSize);
+  return Math.min(optimalSize, maxSize ?? optimalSize);
 }
--- a/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx
@@ -47,7 +47,7 @@ export const withStoryContainer = (story: RenderFunction) => {
  const CONTAINER_GROUP = 'Container options';
  // ---
  const containerBoundary = boolean('Show container boundary', false, CONTAINER_GROUP);
-  const fullWidthContainter = boolean('Full width container', false, CONTAINER_GROUP);
+  const fullWidthContainer = boolean('Full width container', false, CONTAINER_GROUP);
  const containerWidth = number(
    'Container width',
    300,
@@ -72,7 +72,7 @@ export const withStoryContainer = (story: RenderFunction) => {
  );
  return (
    <StoryContainer
-      width={fullWidthContainter ? undefined : containerWidth}
+      width={fullWidthContainer ? undefined : containerWidth}
      height={containerHeight}
      showBoundaries={containerBoundary}
    >

--- a/packages/grafana-ui/src/utils/storybook/withTheme.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
@@ -6,7 +6,7 @@ import { RenderFunction } from '../../types';
 import { useDarkMode } from 'storybook-dark-mode';
 type SassThemeChangeHandler = (theme: GrafanaThemeType) => void;
-const ThemableStory: React.FunctionComponent<{ handleSassThemeChange: SassThemeChangeHandler }> = ({
+const ThemeableStory: React.FunctionComponent<{ handleSassThemeChange: SassThemeChangeHandler }> = ({
  children,
  handleSassThemeChange,
 }) => {
@@ -33,5 +33,5 @@ export const renderComponentWithTheme = (component: React.ComponentType<any>, pr
 };
 export const withTheme = (handleSassThemeChange: SassThemeChangeHandler) => (story: RenderFunction) => (
-  <ThemableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemableStory>
+  <ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>
 );
--- a/packages/grafana-ui/src/utils/useDelayedSwitch.ts
+++ b/packages/grafana-ui/src/utils/useDelayedSwitch.ts
@@ -24,7 +24,7 @@ export function useDelayedSwitch(value: boolean, options: DelayOptions = {}): bo
  useEffect(() => {
    let timeout: number | undefined;
    if (value) {
-      // If toggling to "on" state we always setTimout no matter how long we have been "off".
+      // If toggling to "on" state we always setTimeout no matter how long we have been "off".
      timeout = setTimeout(() => {
        onStartTime.current = new Date();
        setDelayedValue(value);