Chore: spelling - ui (#24435)

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)

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

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;
   }
 

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[];

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 };
 

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`.
 

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);

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,
           });

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 {

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%;
     `,

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>
   );

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 value = object<SelectableValue<string>>('Selected Value:', intialState);
+  const initialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
+  const value = object<SelectableValue<string>>('Selected Value:', initialState);
   const options = object<Array<SelectableValue<string>>>('Options:', [
-    intialState,
+    initialState,
     { label: 'Another label', value: 'Another value' },
   ]);
 

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';
 

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

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}>

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

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';

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)}>

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) => {

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();
     });
   });

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 & 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>

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 =

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',

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');

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,

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' }) }) };

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"

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';

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);
   }
 

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);

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;

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';

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);
-  return Math.min(optimialSize, maxSize ?? optimialSize);
+  const optimalSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);
+  return Math.min(optimalSize, maxSize ?? optimalSize);
 }

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}
     >

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>
 );

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);