Skip to content

Commit 2938481

Browse files
tewarigtewarig
authored
Merge pull request #52 from SigNoz/feat/icon-updates
feat: add default aria labes and icon export type in @signozhq/icons
2 parents f088ee8 + 4a5b94c commit 2938481

1,649 files changed

Lines changed: 26704 additions & 13164 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎index-template.cjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ function indexTemplate(fileEntries) {
5454
return `export { default as ${exportName} } from './${basename}.js'`;
5555
});
5656

57-
return `export type { IconSize, IconStrokeWidth } from '../icon-config.js';\n${exportLines.join('\n')}`;
57+
return `export type { IconSize, IconStrokeWidth, IconProps, IconType } from '../icon-config.js';\n${exportLines.join('\n')}`;
5858
}
5959

6060
module.exports = indexTemplate;

‎lib/icon-config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type React from 'react';
2+
13
export type IconSize = '5xl' | '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
24

35
export const ICON_SIZE_MAP: Record<IconSize, number> = {
@@ -25,3 +27,13 @@ export const STROKE_WIDTH_MAP: Record<IconSize, number> = {
2527
};
2628

2729
export type IconStrokeWidth = (typeof STROKE_WIDTH_MAP)[IconSize];
30+
31+
export interface IconProps extends React.SVGProps<SVGSVGElement> {
32+
size?: IconSize | number;
33+
strokeWidth?: number;
34+
className?: string;
35+
}
36+
37+
export type IconType = React.ForwardRefExoticComponent<
38+
IconProps & React.RefAttributes<SVGSVGElement>
39+
>;

‎lib/icons/AArrowDown.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import type React from 'react';
21
import { cloneElement, forwardRef } from 'react';
3-
import type { IconSize } from '../icon-config.js';
2+
import type { IconProps } from '../icon-config.js';
43
import { ICON_SIZE_MAP, STROKE_WIDTH_MAP } from '../icon-config.js';
5-
export interface IconProps extends React.SVGProps<SVGSVGElement> {
6-
size?: IconSize | number;
7-
strokeWidth?: number;
8-
className?: string;
9-
}
4+
export type { IconProps };
5+
const ICON_NAME = 'a-arrow-down';
106
const SvgAArrowDown = forwardRef<SVGSVGElement, IconProps>(
117
({ color = 'currentColor', size, strokeWidth, className, ...props }, ref) => {
128
const element = (
@@ -36,10 +32,22 @@ const SvgAArrowDown = forwardRef<SVGSVGElement, IconProps>(
3632
const w = element.props.width != null ? Number(element.props.width) : 24;
3733
const h = element.props.height != null ? Number(element.props.height) : 24;
3834
const viewBoxWhenMissing = `0 0 ${w} ${h}`;
35+
const isHidden = props['aria-hidden'] === true || props['aria-hidden'] === 'true';
36+
const a11yDefaults = isHidden
37+
? {
38+
focusable: 'false',
39+
}
40+
: {
41+
role: 'img',
42+
'aria-label': ICON_NAME,
43+
focusable: 'false',
44+
};
45+
const baseClassName = `signoz-icon signoz-icon-${ICON_NAME}`;
3946
const elementProps = {
47+
...a11yDefaults,
4048
...props,
4149
ref,
42-
className: className ? `signoz-icon ${className}` : 'signoz-icon',
50+
className: className ? `${baseClassName} ${className}` : baseClassName,
4351
...(!isCustomIcon && {
4452
stroke: color,
4553
strokeWidth: resolvedStrokeWidth,

‎lib/icons/AArrowUp.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import type React from 'react';
21
import { cloneElement, forwardRef } from 'react';
3-
import type { IconSize } from '../icon-config.js';
2+
import type { IconProps } from '../icon-config.js';
43
import { ICON_SIZE_MAP, STROKE_WIDTH_MAP } from '../icon-config.js';
5-
export interface IconProps extends React.SVGProps<SVGSVGElement> {
6-
size?: IconSize | number;
7-
strokeWidth?: number;
8-
className?: string;
9-
}
4+
export type { IconProps };
5+
const ICON_NAME = 'a-arrow-up';
106
const SvgAArrowUp = forwardRef<SVGSVGElement, IconProps>(
117
({ color = 'currentColor', size, strokeWidth, className, ...props }, ref) => {
128
const element = (
@@ -36,10 +32,22 @@ const SvgAArrowUp = forwardRef<SVGSVGElement, IconProps>(
3632
const w = element.props.width != null ? Number(element.props.width) : 24;
3733
const h = element.props.height != null ? Number(element.props.height) : 24;
3834
const viewBoxWhenMissing = `0 0 ${w} ${h}`;
35+
const isHidden = props['aria-hidden'] === true || props['aria-hidden'] === 'true';
36+
const a11yDefaults = isHidden
37+
? {
38+
focusable: 'false',
39+
}
40+
: {
41+
role: 'img',
42+
'aria-label': ICON_NAME,
43+
focusable: 'false',
44+
};
45+
const baseClassName = `signoz-icon signoz-icon-${ICON_NAME}`;
3946
const elementProps = {
47+
...a11yDefaults,
4048
...props,
4149
ref,
42-
className: className ? `signoz-icon ${className}` : 'signoz-icon',
50+
className: className ? `${baseClassName} ${className}` : baseClassName,
4351
...(!isCustomIcon && {
4452
stroke: color,
4553
strokeWidth: resolvedStrokeWidth,

‎lib/icons/ALargeSmall.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import type React from 'react';
21
import { cloneElement, forwardRef } from 'react';
3-
import type { IconSize } from '../icon-config.js';
2+
import type { IconProps } from '../icon-config.js';
43
import { ICON_SIZE_MAP, STROKE_WIDTH_MAP } from '../icon-config.js';
5-
export interface IconProps extends React.SVGProps<SVGSVGElement> {
6-
size?: IconSize | number;
7-
strokeWidth?: number;
8-
className?: string;
9-
}
4+
export type { IconProps };
5+
const ICON_NAME = 'a-large-small';
106
const SvgALargeSmall = forwardRef<SVGSVGElement, IconProps>(
117
({ color = 'currentColor', size, strokeWidth, className, ...props }, ref) => {
128
const element = (
@@ -36,10 +32,22 @@ const SvgALargeSmall = forwardRef<SVGSVGElement, IconProps>(
3632
const w = element.props.width != null ? Number(element.props.width) : 24;
3733
const h = element.props.height != null ? Number(element.props.height) : 24;
3834
const viewBoxWhenMissing = `0 0 ${w} ${h}`;
35+
const isHidden = props['aria-hidden'] === true || props['aria-hidden'] === 'true';
36+
const a11yDefaults = isHidden
37+
? {
38+
focusable: 'false',
39+
}
40+
: {
41+
role: 'img',
42+
'aria-label': ICON_NAME,
43+
focusable: 'false',
44+
};
45+
const baseClassName = `signoz-icon signoz-icon-${ICON_NAME}`;
3946
const elementProps = {
47+
...a11yDefaults,
4048
...props,
4149
ref,
42-
className: className ? `signoz-icon ${className}` : 'signoz-icon',
50+
className: className ? `${baseClassName} ${className}` : baseClassName,
4351
...(!isCustomIcon && {
4452
stroke: color,
4553
strokeWidth: resolvedStrokeWidth,

‎lib/icons/Accessibility.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import type React from 'react';
21
import { cloneElement, forwardRef } from 'react';
3-
import type { IconSize } from '../icon-config.js';
2+
import type { IconProps } from '../icon-config.js';
43
import { ICON_SIZE_MAP, STROKE_WIDTH_MAP } from '../icon-config.js';
5-
export interface IconProps extends React.SVGProps<SVGSVGElement> {
6-
size?: IconSize | number;
7-
strokeWidth?: number;
8-
className?: string;
9-
}
4+
export type { IconProps };
5+
const ICON_NAME = 'accessibility';
106
const SvgAccessibility = forwardRef<SVGSVGElement, IconProps>(
117
({ color = 'currentColor', size, strokeWidth, className, ...props }, ref) => {
128
const element = (
@@ -36,10 +32,22 @@ const SvgAccessibility = forwardRef<SVGSVGElement, IconProps>(
3632
const w = element.props.width != null ? Number(element.props.width) : 24;
3733
const h = element.props.height != null ? Number(element.props.height) : 24;
3834
const viewBoxWhenMissing = `0 0 ${w} ${h}`;
35+
const isHidden = props['aria-hidden'] === true || props['aria-hidden'] === 'true';
36+
const a11yDefaults = isHidden
37+
? {
38+
focusable: 'false',
39+
}
40+
: {
41+
role: 'img',
42+
'aria-label': ICON_NAME,
43+
focusable: 'false',
44+
};
45+
const baseClassName = `signoz-icon signoz-icon-${ICON_NAME}`;
3946
const elementProps = {
47+
...a11yDefaults,
4048
...props,
4149
ref,
42-
className: className ? `signoz-icon ${className}` : 'signoz-icon',
50+
className: className ? `${baseClassName} ${className}` : baseClassName,
4351
...(!isCustomIcon && {
4452
stroke: color,
4553
strokeWidth: resolvedStrokeWidth,

‎lib/icons/Activity.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import type React from 'react';
21
import { cloneElement, forwardRef } from 'react';
3-
import type { IconSize } from '../icon-config.js';
2+
import type { IconProps } from '../icon-config.js';
43
import { ICON_SIZE_MAP, STROKE_WIDTH_MAP } from '../icon-config.js';
5-
export interface IconProps extends React.SVGProps<SVGSVGElement> {
6-
size?: IconSize | number;
7-
strokeWidth?: number;
8-
className?: string;
9-
}
4+
export type { IconProps };
5+
const ICON_NAME = 'activity';
106
const SvgActivity = forwardRef<SVGSVGElement, IconProps>(
117
({ color = 'currentColor', size, strokeWidth, className, ...props }, ref) => {
128
const element = (
@@ -43,10 +39,22 @@ const SvgActivity = forwardRef<SVGSVGElement, IconProps>(
4339
const w = element.props.width != null ? Number(element.props.width) : 24;
4440
const h = element.props.height != null ? Number(element.props.height) : 24;
4541
const viewBoxWhenMissing = `0 0 ${w} ${h}`;
42+
const isHidden = props['aria-hidden'] === true || props['aria-hidden'] === 'true';
43+
const a11yDefaults = isHidden
44+
? {
45+
focusable: 'false',
46+
}
47+
: {
48+
role: 'img',
49+
'aria-label': ICON_NAME,
50+
focusable: 'false',
51+
};
52+
const baseClassName = `signoz-icon signoz-icon-${ICON_NAME}`;
4653
const elementProps = {
54+
...a11yDefaults,
4755
...props,
4856
ref,
49-
className: className ? `signoz-icon ${className}` : 'signoz-icon',
57+
className: className ? `${baseClassName} ${className}` : baseClassName,
5058
...(!isCustomIcon && {
5159
stroke: color,
5260
strokeWidth: resolvedStrokeWidth,

‎lib/icons/AddToView.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import type React from 'react';
21
import { cloneElement, forwardRef } from 'react';
3-
import type { IconSize } from '../icon-config.js';
2+
import type { IconProps } from '../icon-config.js';
43
import { ICON_SIZE_MAP, STROKE_WIDTH_MAP } from '../icon-config.js';
5-
export interface IconProps extends React.SVGProps<SVGSVGElement> {
6-
size?: IconSize | number;
7-
strokeWidth?: number;
8-
className?: string;
9-
}
4+
export type { IconProps };
5+
const ICON_NAME = 'add-to-view';
106
const SvgAddToView = forwardRef<SVGSVGElement, IconProps>(
117
({ color = 'currentColor', size, strokeWidth, className, ...props }, ref) => {
128
const element = (
@@ -43,10 +39,22 @@ const SvgAddToView = forwardRef<SVGSVGElement, IconProps>(
4339
const w = element.props.width != null ? Number(element.props.width) : 24;
4440
const h = element.props.height != null ? Number(element.props.height) : 24;
4541
const viewBoxWhenMissing = `0 0 ${w} ${h}`;
42+
const isHidden = props['aria-hidden'] === true || props['aria-hidden'] === 'true';
43+
const a11yDefaults = isHidden
44+
? {
45+
focusable: 'false',
46+
}
47+
: {
48+
role: 'img',
49+
'aria-label': ICON_NAME,
50+
focusable: 'false',
51+
};
52+
const baseClassName = `signoz-icon signoz-icon-${ICON_NAME}`;
4653
const elementProps = {
54+
...a11yDefaults,
4755
...props,
4856
ref,
49-
className: className ? `signoz-icon ${className}` : 'signoz-icon',
57+
className: className ? `${baseClassName} ${className}` : baseClassName,
5058
...(!isCustomIcon && {
5159
stroke: color,
5260
strokeWidth: resolvedStrokeWidth,

‎lib/icons/AirVent.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import type React from 'react';
21
import { cloneElement, forwardRef } from 'react';
3-
import type { IconSize } from '../icon-config.js';
2+
import type { IconProps } from '../icon-config.js';
43
import { ICON_SIZE_MAP, STROKE_WIDTH_MAP } from '../icon-config.js';
5-
export interface IconProps extends React.SVGProps<SVGSVGElement> {
6-
size?: IconSize | number;
7-
strokeWidth?: number;
8-
className?: string;
9-
}
4+
export type { IconProps };
5+
const ICON_NAME = 'air-vent';
106
const SvgAirVent = forwardRef<SVGSVGElement, IconProps>(
117
({ color = 'currentColor', size, strokeWidth, className, ...props }, ref) => {
128
const element = (
@@ -36,10 +32,22 @@ const SvgAirVent = forwardRef<SVGSVGElement, IconProps>(
3632
const w = element.props.width != null ? Number(element.props.width) : 24;
3733
const h = element.props.height != null ? Number(element.props.height) : 24;
3834
const viewBoxWhenMissing = `0 0 ${w} ${h}`;
35+
const isHidden = props['aria-hidden'] === true || props['aria-hidden'] === 'true';
36+
const a11yDefaults = isHidden
37+
? {
38+
focusable: 'false',
39+
}
40+
: {
41+
role: 'img',
42+
'aria-label': ICON_NAME,
43+
focusable: 'false',
44+
};
45+
const baseClassName = `signoz-icon signoz-icon-${ICON_NAME}`;
3946
const elementProps = {
47+
...a11yDefaults,
4048
...props,
4149
ref,
42-
className: className ? `signoz-icon ${className}` : 'signoz-icon',
50+
className: className ? `${baseClassName} ${className}` : baseClassName,
4351
...(!isCustomIcon && {
4452
stroke: color,
4553
strokeWidth: resolvedStrokeWidth,

‎lib/icons/Airplay.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import type React from 'react';
21
import { cloneElement, forwardRef } from 'react';
3-
import type { IconSize } from '../icon-config.js';
2+
import type { IconProps } from '../icon-config.js';
43
import { ICON_SIZE_MAP, STROKE_WIDTH_MAP } from '../icon-config.js';
5-
export interface IconProps extends React.SVGProps<SVGSVGElement> {
6-
size?: IconSize | number;
7-
strokeWidth?: number;
8-
className?: string;
9-
}
4+
export type { IconProps };
5+
const ICON_NAME = 'airplay';
106
const SvgAirplay = forwardRef<SVGSVGElement, IconProps>(
117
({ color = 'currentColor', size, strokeWidth, className, ...props }, ref) => {
128
const element = (
@@ -36,10 +32,22 @@ const SvgAirplay = forwardRef<SVGSVGElement, IconProps>(
3632
const w = element.props.width != null ? Number(element.props.width) : 24;
3733
const h = element.props.height != null ? Number(element.props.height) : 24;
3834
const viewBoxWhenMissing = `0 0 ${w} ${h}`;
35+
const isHidden = props['aria-hidden'] === true || props['aria-hidden'] === 'true';
36+
const a11yDefaults = isHidden
37+
? {
38+
focusable: 'false',
39+
}
40+
: {
41+
role: 'img',
42+
'aria-label': ICON_NAME,
43+
focusable: 'false',
44+
};
45+
const baseClassName = `signoz-icon signoz-icon-${ICON_NAME}`;
3946
const elementProps = {
47+
...a11yDefaults,
4048
...props,
4149
ref,
42-
className: className ? `signoz-icon ${className}` : 'signoz-icon',
50+
className: className ? `${baseClassName} ${className}` : baseClassName,
4351
...(!isCustomIcon && {
4452
stroke: color,
4553
strokeWidth: resolvedStrokeWidth,

0 commit comments

Comments
 (0)