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

Merge pull request #28055 from backstage/canon-checkbox

Browse Source 
Add new Checkbox component
This commit is contained in:
Charles de Dreuille
2024-12-10 10:52:13 +00:00
committed by GitHub
parent f169170b06 6b2d46b046
commit 1f7d205fbe
13 changed files with 326 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/report.api.md
+34 -1
View File
@@ -129,6 +129,35 @@ export interface ButtonProps {
variant?: 'primary' | 'secondary' | 'tertiary';
}
// @public (undocumented)
export const Checkbox: React_2.ForwardRefExoticComponent<
CheckboxProps & React_2.RefAttributes<HTMLButtonElement>
>;
// @public (undocumented)
export interface CheckboxProps {
// (undocumented)
checked?: boolean;
// (undocumented)
className?: string;
// (undocumented)
defaultChecked?: boolean;
// (undocumented)
disabled?: boolean;
// (undocumented)
label?: string;
// (undocumented)
name?: string;
// (undocumented)
onChange?: (checked: boolean) => void;
// (undocumented)
required?: boolean;
// (undocumented)
style?: React.CSSProperties;
// (undocumented)
value?: string;
}
// @public (undocumented)
export type Color =
| 'primary'
@@ -237,7 +266,10 @@ export interface GridProps extends SpaceProps, ColorProps {
}
// @public (undocumented)
export const Icon: ({ name }: { name: IconNames }) => React_2.JSX.Element;
export const Icon: (props: {
name: IconNames;
size?: number;
}) => React_2.JSX.Element;
// @public (undocumented)
export type IconMap = Partial<Record<IconNames, React.ComponentType>>;
@@ -252,6 +284,7 @@ export type IconNames =
| 'arrowLeftCircle'
| 'arrowRightCircle'
| 'arrowUpCircle'
| 'check'
| 'chevronDown'
| 'chevronLeft'
| 'chevronRight'
packages/canon/src/components/Checkbox/Checkbox.stories.tsx
+35
View File
@@ -0,0 +1,35 @@
/*
* 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.
*/
import type { Meta, StoryObj } from '@storybook/react';
import { Checkbox } from './Checkbox';
const meta = {
title: 'Components/Checkbox',
component: Checkbox,
parameters: {
layout: 'centered',
},
} satisfies Meta<typeof Checkbox>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
label: 'Accept terms and conditions',
},
};
packages/canon/src/components/Checkbox/Checkbox.tsx
+64
View File
@@ -0,0 +1,64 @@
/*
* 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.
*/
import React from 'react';
import { CheckboxRoot, CheckboxIndicator } from '@base_ui/react';
import { Icon } from '@backstage/canon';
import type { CheckboxProps } from './types';
/** @public */
export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
(props, ref) => {
const {
label,
checked,
onChange,
disabled,
required,
className,
name,
value,
style,
} = props;
const checkboxElement = (
<CheckboxRoot
ref={ref}
className={`checkbox ${className}`}
checked={checked}
onCheckedChange={onChange}
disabled={disabled}
required={required}
name={name}
value={value}
style={style}
>
<CheckboxIndicator className="checkbox-indicator">
<Icon name="check" size={12} />
</CheckboxIndicator>
</CheckboxRoot>
);
return label ? (
<label className="checkbox-label">
{checkboxElement}
{label}
</label>
) : (
checkboxElement
);
},
);
packages/canon/src/components/Checkbox/Docs.mdx
+66
View File
@@ -0,0 +1,66 @@
import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
import * as CheckboxStories from './Checkbox.stories';
import { Title, Text } from '../../../docs/components';
import { PropsTable } from '../../../docs/components/PropsTable';
<Meta of={CheckboxStories} />
<Unstyled>
<Title type="h1">Checkbox</Title>
<Text>A checkbox component that can be used to trigger actions.</Text>
<Canvas of={CheckboxStories.Primary} />
<Source of={CheckboxStories.Primary} dark />
<Title type="h2" style={{ marginBottom: '16px' }}>
API reference
</Title>
<PropsTable
data={{
label: {
type: 'string',
responsive: false,
},
defaultChecked: {
type: ['boolean', "'indeterminate'"],
responsive: false,
},
checked: {
type: ['boolean', "'indeterminate'"],
responsive: false,
},
onChange: {
type: "(checked: boolean | 'indeterminate') => void",
responsive: false,
},
disabled: {
type: 'boolean',
responsive: false,
},
required: {
type: 'boolean',
responsive: false,
},
name: {
type: 'string',
responsive: false,
},
value: {
type: 'string',
responsive: false,
},
className: {
type: 'string',
responsive: false,
},
style: {
type: 'CSSProperties',
responsive: false,
},
}}
/>
</Unstyled>
packages/canon/src/components/Checkbox/index.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* 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.
*/
export { Checkbox } from './Checkbox';
export type { CheckboxProps } from './types';
packages/canon/src/components/Checkbox/styles.css
+39
View File
@@ -0,0 +1,39 @@
.checkbox-label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--canon-spacing-xs);
font-size: var(--canon-font-sizes-xs);
font-family: var(--canon-font-regular);
color: var(--canon-text-primary);
& .checkbox {
all: unset;
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
box-shadow: inset 0 0 0 1px var(--canon-outline);
cursor: pointer;
border-radius: 2px;
&[data-state='unchecked'] {
& .checkbox-indicator {
display: none;
}
}
&[data-state='checked'] {
background: var(--canon-accent);
}
}
& .checkbox-indicator {
display: flex;
align-items: center;
justify-content: center;
color: var(--canon-text-primary-on-accent);
}
}
packages/canon/src/components/Checkbox/types.ts
+29
View File
@@ -0,0 +1,29 @@
/*
* 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.
*/
/** @public */
export interface CheckboxProps {
label?: string;
defaultChecked?: boolean;
checked?: boolean;
onChange?: (checked: boolean) => void;
disabled?: boolean;
required?: boolean;
className?: string;
name?: string;
value?: string;
style?: React.CSSProperties;
}
packages/canon/src/components/Icon/Icon.tsx
+6 -5
View File
@@ -19,15 +19,16 @@ import { useTheme } from '../../theme/context';
import type { IconNames } from './types';
/** @public */
export const Icon = ({ name }: { name: IconNames }) => {
export const Icon = (props: { name: IconNames; size?: number }) => {
const { name, size = 16 } = props;
const { icons } = useTheme();
const RemixIcon = icons[name];
const RemixIcon = icons[name] as React.ComponentType<{ className?: string }>;
if (!RemixIcon) {
console.error(`Icon "${name}" not found.`);
return <svg />; // Return default icon perhaps?
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 />;
return <RemixIcon className={`icon-${size}`} />;
};
packages/canon/src/components/Icon/icons.ts
+2
View File
@@ -34,6 +34,7 @@ import {
RiArrowLeftCircleLine,
RiArrowRightCircleLine,
RiArrowUpCircleLine,
RiCheckLine,
} from '@remixicon/react';
// List of default icons
@@ -46,6 +47,7 @@ export const defaultIcons: IconMap = {
arrowLeftCircle: RiArrowLeftCircleLine,
arrowRightCircle: RiArrowRightCircleLine,
arrowUpCircle: RiArrowUpCircleLine,
check: RiCheckLine,
chevronDown: RiArrowDownSLine,
chevronUp: RiArrowUpSLine,
chevronLeft: RiArrowLeftSLine,
packages/canon/src/components/Icon/styles.css
+30
View File
@@ -0,0 +1,30 @@
/*
* 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.
*/
.icon-12 {
width: 12px;
height: 12px;
}
.icon-16 {
width: 16px;
height: 16px;
}
.icon-24 {
width: 24px;
height: 24px;
}
packages/canon/src/components/Icon/types.ts
+1
View File
@@ -24,6 +24,7 @@ export type IconNames =
| 'arrowLeftCircle'
| 'arrowRightCircle'
| 'arrowUpCircle'
| 'check'
| 'chevronDown'
| 'chevronLeft'
| 'chevronRight'
packages/canon/src/index.ts
+1
View File
@@ -33,3 +33,4 @@ export * from './components/Container';
// UI components
export * from './components/Button';
export * from './components/Icon';
export * from './components/Checkbox';
packages/canon/src/theme/styles.css
+2
View File
@@ -27,3 +27,5 @@
@import '../components/Inline/styles.css';
@import '../components/Grid/styles.css';
@import '../components/Container/styles.css';
@import '../components/Icon/styles.css';
@import '../components/Checkbox/styles.css';