paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 22 Packages Projects Releases Wiki Activity

Update all components names

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-01-15 22:29:50 +00:00
parent fd041fd0a2
commit 96034a8c65
19 changed files with 152 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/src/components/Container/Container.tsx
+6 -6
View File
@@ -16,6 +16,7 @@
import React, { forwardRef } from 'react';
import { ContainerProps } from './types';
import { getClassNames } from '../../utils/getClassNames';
import clsx from 'clsx';
/** @public */
export const Container = forwardRef<HTMLDivElement, ContainerProps>(
@@ -25,13 +26,12 @@ export const Container = forwardRef<HTMLDivElement, ContainerProps>(
// Generate utility class names
const utilityClassNames = getClassNames(restProps);
// Combine the base class name, the sprinkles class name, and any additional class names
const classNames = ['canon-container', utilityClassNames, className]
.filter(Boolean)
.join(' ');
return (
<div ref={ref} className={classNames} style={style}>
<div
ref={ref}
className={clsx('canon-Container', utilityClassNames, className)}
style={style}
>
{children}
</div>
);
packages/canon/src/components/Container/styles.css
+3 -3
View File
@@ -1,5 +1,5 @@
.canon-container {
max-width: var(--canon-container-max-width);
.canon-Container {
max-width: 75rem;
padding: 0 1rem;
margin: 0 auto;
padding: 0 var(--canon-container-padding);
}
packages/canon/src/components/Grid/Grid.tsx
+3 -10
View File
@@ -17,6 +17,7 @@
import { createElement, forwardRef } from 'react';
import { GridItemProps, GridProps } from './types';
import { getClassNames } from '../../utils/getClassNames';
import clsx from 'clsx';
const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
const {
@@ -30,13 +31,9 @@ const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
const utilityClassNames = getClassNames({ gap, columns, ...restProps });
const classNames = ['canon-grid', utilityClassNames, className]
.filter(Boolean)
.join(' ');
return createElement('div', {
ref,
className: classNames,
className: clsx('canon-Grid', utilityClassNames, className),
style,
children,
});
@@ -47,13 +44,9 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
const utilityClassNames = getClassNames(restProps);
const classNames = ['grid-item', utilityClassNames, className]
.filter(Boolean)
.join(' ');
return createElement('div', {
ref,
className: classNames,
className: clsx('canon-GridItem', utilityClassNames, className),
style,
children,
});
packages/canon/src/components/Grid/styles.css
+1 -1
View File
@@ -1,3 +1,3 @@
.canon-grid {
.canon-Grid {
display: grid;
}
packages/canon/src/components/Heading/Heading.tsx
+13 -4
View File
@@ -19,11 +19,18 @@
import React, { forwardRef } from 'react';
import { HeadingProps } from './types';
import { useCanon } from '../../contexts/canon';
import clsx from 'clsx';
/** @public */
export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
(props, ref) => {
const { children, variant = 'title1', as = 'h1', ...restProps } = props;
const {
children,
variant = 'title1',
as = 'h1',
className,
...restProps
} = props;
const { getResponsiveValue } = useCanon();
// Get the responsive value for the variant
@@ -40,10 +47,12 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
return (
<Component
ref={ref}
className={clsx(
'canon-Heading',
responsiveVariant && `canon-Heading--variant-${responsiveVariant}`,
className,
)}
{...restProps}
className={`text ${
responsiveVariant ? `text-${responsiveVariant}` : ''
}`}
>
{children}
</Component>
packages/canon/src/components/Heading/styles.css
+32 -37
View File
@@ -14,45 +14,40 @@
* limitations under the License.
*/
.text {
.canon-Heading {
font-family: var(--canon-font-regular);
color: var(--canon-text-primary);
line-height: 100%;
padding: 0;
margin: 0;
&.text-display {
font-size: var(--canon-font-size-display);
line-height: 100%;
font-weight: var(--canon-font-weight-bold);
}
&.text-title1 {
font-size: var(--canon-font-size-title1);
line-height: 100%;
font-weight: var(--canon-font-weight-bold);
}
&.text-title2 {
font-size: var(--canon-font-size-title2);
line-height: 100%;
font-weight: var(--canon-font-weight-bold);
}
&.text-title3 {
font-size: var(--canon-font-size-title3);
line-height: 100%;
font-weight: var(--canon-font-weight-bold);
}
&.text-title4 {
font-size: var(--canon-font-size-title4);
line-height: 100%;
font-weight: var(--canon-font-weight-bold);
}
&.text-title5 {
font-size: var(--canon-font-size-title5);
line-height: 100%;
font-weight: var(--canon-font-weight-bold);
}
}
.canon-Heading--variant-display {
font-size: var(--canon-font-size-display);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title1 {
font-size: var(--canon-font-size-title1);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title2 {
font-size: var(--canon-font-size-title2);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title3 {
font-size: var(--canon-font-size-title3);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title4 {
font-size: var(--canon-font-size-title4);
font-weight: var(--canon-font-weight-bold);
}
.canon-Heading--variant-title5 {
font-size: var(--canon-font-size-title5);
font-weight: var(--canon-font-weight-bold);
}
packages/canon/src/components/Heading/types.ts
+2
View File
@@ -33,4 +33,6 @@ export interface HeadingProps {
>
>;
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
className?: string;
style?: React.CSSProperties;
}
packages/canon/src/components/Icon/Icon.tsx
+11 -4
View File
@@ -19,18 +19,25 @@
import React from 'react';
import { useCanon } from '../../contexts/canon';
import type { IconProps } from './types';
import clsx from 'clsx';
/** @public */
export const Icon = (props: IconProps) => {
const { name, size = 16 } = props;
const { name, size = 16, className, style, ...restProps } = props;
const { icons } = useCanon();
const RemixIcon = icons[name] as React.ComponentType<{ className?: string }>;
const CanonIcon = icons[name] as React.ComponentType<Omit<IconProps, 'name'>>;
if (!RemixIcon) {
if (!CanonIcon) {
console.error(`Icon "${name}" not found or is not a valid component.`);
return <svg />; // Return a default icon or handle the error appropriately
}
return <RemixIcon className={`icon-${size}`} />;
return (
<CanonIcon
className={clsx('canon-Icon', className)}
style={{ width: size, height: size, ...style }}
{...restProps}
/>
);
};
packages/canon/src/components/Icon/styles.css
+3 -13
View File
@@ -14,17 +14,7 @@
* limitations under the License.
*/
.icon-12 {
width: 12px;
height: 12px;
}
.icon-16 {
width: 16px;
height: 16px;
}
.icon-24 {
width: 24px;
height: 24px;
.canon-Icon {
width: 1rem;
height: 1rem;
}
packages/canon/src/components/Icon/types.ts
+2
View File
@@ -44,4 +44,6 @@ export type IconMap = Partial<Record<IconNames, React.ComponentType>>;
export type IconProps = {
name: IconNames;
size?: number;
className?: string;
style?: React.CSSProperties;
};
packages/canon/src/components/Inline/Inline.tsx
+2 -6
View File
@@ -18,6 +18,7 @@ import { createElement, forwardRef } from 'react';
import type { InlineProps } from './types';
import { getClassNames } from '../../utils/getClassNames';
import { JustifyContent, Breakpoint, AlignItems } from '../../types';
import clsx from 'clsx';
// Function to map align values
const mapAlignValue = (value?: InlineProps['align']) => {
@@ -75,14 +76,9 @@ export const Inline = forwardRef<HTMLElement, InlineProps>((props, ref) => {
...restProps,
});
// Combine the base class name, the sprinkles class name, and any additional class names
const classNames = ['canon-inline', utilityClassNames, className]
.filter(Boolean)
.join(' ');
return createElement(as, {
ref,
className: classNames,
className: clsx('canon-Inline', utilityClassNames, className),
style,
children,
});
packages/canon/src/components/Inline/styles.css
+17 -1
View File
@@ -1,4 +1,20 @@
.canon-inline {
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.canon-Inline {
display: flex;
flex-wrap: wrap;
}
packages/canon/src/components/Stack/Stack.tsx
+2 -6
View File
@@ -18,6 +18,7 @@ import { createElement, forwardRef } from 'react';
import { StackProps } from './types';
import { getClassNames } from '../../utils/getClassNames';
import type { AlignItems, Breakpoint } from '../../types';
import clsx from 'clsx';
// Function to map align values
const mapAlignValue = (value?: StackProps['align']) => {
@@ -56,14 +57,9 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
...restProps,
});
// Combine the base class name, the sprinkles class name, and any additional class names
const classNames = ['canon-stack', utilityClassNames, className]
.filter(Boolean)
.join(' ');
return createElement(as, {
ref,
className: classNames,
className: clsx('canon-Stack', utilityClassNames, className),
style,
children,
});
packages/canon/src/components/Stack/styles.css
+17 -1
View File
@@ -1,4 +1,20 @@
.canon-stack {
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.canon-Stack {
display: flex;
flex-direction: column;
}
packages/canon/src/components/Table/styles.css
-6
View File
@@ -16,12 +16,6 @@
}
}
.table-header {
tr {
/* border-bottom: 1px solid var(--canon-border); */
}
}
.table-head {
text-align: left;
padding: var(--canon-spacing-xs);
packages/canon/src/components/Text/Text.tsx
+8 -4
View File
@@ -19,7 +19,7 @@
import React, { forwardRef } from 'react';
import { TextProps } from './types';
import { useCanon } from '../../contexts/canon';
import clsx from 'clsx';
/** @public */
export const Text = forwardRef<HTMLParagraphElement, TextProps>(
(props, ref) => {
@@ -28,6 +28,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
variant = 'body',
weight = 'regular',
style,
className,
...restProps
} = props;
@@ -40,9 +41,12 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
return (
<p
ref={ref}
className={`text ${
responsiveVariant ? `text-${responsiveVariant}` : ''
} ${responsiveWeight ? `text-${responsiveWeight}` : ''}`}
className={clsx(
'canon-Text',
responsiveVariant && `canon-Text--variant-${responsiveVariant}`,
responsiveWeight && `canon-Text--weight-${responsiveWeight}`,
className,
)}
style={style}
{...restProps}
>
packages/canon/src/components/Text/styles.css
+29 -29
View File
@@ -14,37 +14,37 @@
* limitations under the License.
*/
.text {
.canon-Text {
font-family: var(--canon-font-regular);
color: var(--canon-text-primary);
padding: 0;
margin: 0;
&.text-body {
font-size: var(--canon-font-size-body);
line-height: 140%;
}
&.text-subtitle {
font-size: var(--canon-font-size-subtitle);
line-height: 140%;
}
&.text-caption {
font-size: var(--canon-font-size-caption);
line-height: 140%;
}
&.text-label {
font-size: var(--canon-font-size-label);
line-height: 140%;
}
&.text-regular {
font-weight: var(--canon-font-weight-regular);
}
&.text-bold {
font-weight: var(--canon-font-weight-bold);
}
}
.canon-Text--variant-body {
font-size: var(--canon-font-size-body);
line-height: 140%;
}
.canon-Text--variant-subtitle {
font-size: var(--canon-font-size-subtitle);
line-height: 140%;
}
.canon-Text--variant-caption {
font-size: var(--canon-font-size-caption);
line-height: 140%;
}
.canon-Text--variant-label {
font-size: var(--canon-font-size-label);
line-height: 140%;
}
.canon-Text--weight-regular {
font-weight: var(--canon-font-weight-regular);
}
.canon-Text--weight-bold {
font-weight: var(--canon-font-weight-bold);
}
packages/canon/src/components/Text/types.ts
+1
View File
@@ -27,5 +27,6 @@ export interface TextProps {
| 'label'
| Partial<Record<Breakpoint, 'subtitle' | 'body' | 'caption' | 'label'>>;
weight?: 'regular' | 'bold' | Partial<Record<Breakpoint, 'regular' | 'bold'>>;
className?: string;
style?: CSSProperties;
}
packages/canon/src/css/core.css
-4
View File
@@ -66,10 +66,6 @@
--canon-border-radius-xl: 1.25rem; /* 20px */
--canon-border-radius-2xl: 1.5rem; /* 24px */
/* Container */
--canon-container-max-width: 1200px;
--canon-container-padding: 1rem;
/* Colors */
--canon-accent: #000;
--canon-background: #f8f8f8;