Skip to content

Commit

Permalink
Merge pull request #1063 from securityscorecard/next
Browse files Browse the repository at this point in the history
🚀 Next release
  • Loading branch information
ajkl2533 authored Aug 28, 2024
2 parents 877be36 + 3fe19ab commit 0f50390
Show file tree
Hide file tree
Showing 302 changed files with 2,884 additions and 736 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .storybook/image-snapshots/expected/components_Filters_Default.png
Binary file modified .storybook/image-snapshots/expected/components_Snippet_Expanded.png
Binary file modified .storybook/image-snapshots/expected/components_Tooltip_Width.png
1 change: 1 addition & 0 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const config: StorybookConfig = {
// '@storybook/addon-a11y',
'@storybook/addon-designs',
'@storybook/addon-themes',
'@storybook/addon-coverage',
'storycap',
],
docs: { defaultName: 'Documentation' },
Expand Down
4 changes: 4 additions & 0 deletions .storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const preview: Preview = {
},
options: {
storySort: {
method: 'alphabetical-by-kind',
order: [
'Getting Started',
'Overview',
Expand Down Expand Up @@ -67,6 +68,9 @@ const preview: Preview = {
},
docs: {
source: { type: 'dynamic' },
controls:{
sort: 'requiredFirst'
}
},
// storycap settings
screenshot: {
Expand Down
134 changes: 134 additions & 0 deletions docs/guides/buttonV2Migration.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import { Meta } from '@storybook/blocks';

import ex1before from './images/button-ex-01-before.png';
import ex1after from './images/button-ex-01-after.png';
import ex2before from './images/button-ex-02-before.png';
import ex2after from './images/button-ex-02-after.png';
import ex3before from './images/button-ex-03-before.png';
import ex3after from './images/button-ex-03-after.png';
import ex4before from './images/button-ex-04-before.png';
import ex4after from './images/button-ex-04-after.png';
import ex5before from './images/button-ex-05-before.png';
import ex5after from './images/button-ex-05-after.png';

<Meta title="Guides/ButtonV2 migration guide" />

# ButtonV2 migration guide

The Button component in our design system has been updated to version 2.0, introducing a few breaking changes that you'll need to be aware of when migrating your existing implementations.

Any of the following steps expect change of the imported component from `Button` to `ButtonV2`.

## Button element is no longer inferred from props

In the previous version of the Button component, the underlying HTML element was inferred based on the provided props (e.g. using an `href` prop would render an `<a>` tag).
In `ButtonV2`, you must now explicitly define the element to be rendered using the `as` prop. The default value for `as` is still `button`, but you can now pass in `a` or a custom React component (like `Link` from react-router-dom) to render the appropriate element.
This change increases type-safety, as the component will now correctly infer the available props based on the as value. It also decouples the design system from specific UI frameworks, making it more flexible and reusable.

### Migration steps:

- Ensure you are passing an explicit `as` prop to the Button component, specifying the desired underlying element.
- Update any existing Button usages to include the `as` prop.

## Button label must now be a string

Previously, the `children` prop of the `Button` component could accept any React node, allowing for custom content to be rendered inside the button.
In `ButtonV2`, the `children` prop is now restricted to only accepting string values. This change helps ensure a consistent visual appearance and avoid potential rendering artifacts caused by custom React nodes.
If you previously passed non-string content (such as icons) inside the button's children, you should migrate to using the dedicated `iconStart` or `iconEnd` props instead. This props allows you to add an icon before or after the button's label, maintaining the expected visual design.
For buttons that contain only an icon without any label, we've introduced a new `IconButton` component that you should use.

### Migration steps:

- Update any `Button` usages to pass a string value for the `children` prop.
- If you need to display an icon, use `iconStart` or `iconEnd` props instead of including it in the children.
- For buttons with only an icon, switch to using the new `IconButton` component.

Please let me know if you have any other questions or need further assistance with the migration to Button v2.

## Button variants naming has changed

You were used to use variants like `solid` or `outline`. These names had larger coupling with the visual style than with actual button hierarchy. The `ButtonV2` changes this and implements new naming to better communicate how buttons should be used.

### Migration steps:

- Update any `variant` property on Button according to following rules:
- `variant=solid` -> `variant` property can be omitted (default value) or `variant=base`
- `variant=outline` -> `variant=subtle` variant
- `variant=text` -> `variant=ghost` variant
- Remove any `color` property and update `variant` according to following rules:
- `variant=solid + color=danger` -> `variant=danger`
- `variant=outline + color=danger` -> `variant=danger-ghost`
- `variant=text + color=danger` -> `variant=danger-ghost`
- `variant=ghost + color=danger` -> `variant=danger-ghost`

## Common migration examples

### External link without explicit `as` property

<img
alt="Wrong: the button does not have explicitly set `as` property but use the `href` property"
src={ex4before}
width={470}
/>

<img
alt="Correct: the `as` property is set to `a`"
src={ex4after}
width={470}
/>

### React Router link without explicit `as` property

<img
alt="Wrong: the button does not have explicitly set `as` property but use the `to` property"
src={ex5before}
width={470}
/>

<img
alt="Correct: the `Link` component is imported and the `as` property is set to `Link` on the button"
src={ex5after}
width={470}
/>

### Button with nested icon

<img
alt="Wrong: example of nested Icon componente inside Button"
src={ex1before}
width={470}
/>

<img
alt="Correct: the new IconButton component is used instead"
src={ex1after}
width={470}
/>

### Button with nested React component

<img
alt="Wrong: a React component is used in button label instead of plain string"
src={ex2before}
width={470}
/>

<img
alt="Correct: the button label contains only string and React component is extracted next to it"
src={ex2after}
width={470}
/>

### Button with icon after label

<img
alt="Wrong: an Icon component is used next to the button label"
src={ex3before}
width={470}
/>

<img
alt="Correct: the `iconEnd` property is correctly used and the button label contains only string"
src={ex3after}
width={470}
/>
Binary file added docs/guides/images/button-ex-01-after.png
Binary file added docs/guides/images/button-ex-01-before.png
Binary file added docs/guides/images/button-ex-02-after.png
Binary file added docs/guides/images/button-ex-02-before.png
Binary file added docs/guides/images/button-ex-03-after.png
Binary file added docs/guides/images/button-ex-03-before.png
Binary file added docs/guides/images/button-ex-04-after.png
Binary file added docs/guides/images/button-ex-04-before.png
Binary file added docs/guides/images/button-ex-05-after.png
Binary file added docs/guides/images/button-ex-05-before.png
5 changes: 5 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@
"test:storybook:visual:ci": "./visual-regressions/bin/take-and-check-in-docker-ci.sh",
"test": "jest -w 4",
"test:watch": "jest --watch",
"test:storybook:coverage": "test-storybook --coverage --coverageDirectory coverage/storybook --maxWorkers 4 --url=http://localhost:8008",
"test:unit:coverage": "yarn run test --coverage --coverageDirectory coverage/jest",
"test:coverage": "yarn run test:unit:coverage & yarn run test:storybook:coverage",
"types": "tsc -b",
"lint": "eslint . --ext js,ts,jsx,tsx,md,mdx",
"lint:fix": "eslint . --ext js,ts,jsx,tsx,md,mdx --fix",
Expand Down Expand Up @@ -98,6 +101,7 @@
"@semantic-release/release-notes-generator": "^14.0.1",
"@storybook/addon-a11y": "^8.2.7",
"@storybook/addon-actions": "^8.2.7",
"@storybook/addon-coverage": "^1.0.4",
"@storybook/addon-designs": "^8.0.3",
"@storybook/addon-essentials": "^8.2.7",
"@storybook/addon-themes": "^8.2.7",
Expand All @@ -106,6 +110,7 @@
"@storybook/preview-api": "^8.2.7",
"@storybook/react": "^8.2.7",
"@storybook/react-vite": "^8.2.7",
"@storybook/test-runner": "^0.19.1",
"@storybook/theming": "^8.2.7",
"@testing-library/dom": ">=7.21.4",
"@testing-library/jest-dom": "^5.16.4",
Expand Down
49 changes: 23 additions & 26 deletions src/components/Breadcrumbs/BreadcrumbItem.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { isNotUndefined } from 'ramda-adjunct';

import { BreadcrumbItemProps } from './Breadcrumbs.types';
import { Text, TextEnums } from '../Text';
import { TextSizes } from '../Text/Text.enums';
import { Button } from '../Button';
import { Text } from '../Text';
import { SSCIconNames } from '../../theme/icons/icons.enums';
import type { SSCIcons } from '../Icon/Icon.types';

export const BreadcrumbLink = styled(Button)`
font-weight: var(--sscds-font-weight-body-default);
padding-inline: 0;
width: auto;
`;
import { Link } from '../Link';
import { Icon } from '../Icon';

const ListItem = styled.li`
list-style-type: none;
display: flex;
align-items: center;
`;

export const IconLink = styled(Link)`
&:hover {
color: var(--sscds-color-icon-subtle);
}
`;

const BreadcrumbItem = ({
Expand All @@ -30,31 +31,27 @@ const BreadcrumbItem = ({
...props
}: BreadcrumbItemProps) => {
const hasIcon = isNotUndefined(iconName);
const label = hasIcon ? { 'aria-label': children } : { children };

return (
<ListItem>
{isSelected ? (
<Text
aria-current="page"
size={TextSizes.md}
variant={TextEnums.TextVariants.secondary}
>
<Text aria-current="page" variant="subtle">
{children}
</Text>
) : (
<BreadcrumbLink
) : hasIcon ? (
<IconLink
color="secondary"
href={href}
iconStart={
typeof iconName !== 'undefined'
? { name: iconName, type: iconType }
: undefined
}
to={to}
variant="ghost"
{...props}
{...label}
/>
aria-label={children}
>
<Icon name={iconName} size="sm" type={iconType} />
</IconLink>
) : (
<Link color="secondary" href={href} to={to} {...props}>
{children}
</Link>
)}
</ListItem>
);
Expand Down
41 changes: 12 additions & 29 deletions src/components/Breadcrumbs/Breadcrumbs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,10 @@ import { SSCIconNames } from '../../theme/icons/icons.enums';
import { Icon } from '../Icon';
import { DropdownMenu } from '../_internal/BaseDropdownMenu';
import { ActionKinds } from '../../types/action.types';
import { getColor, pxToRem } from '../../utils';
import { ColorTypes, SpaceSizes } from '../../theme';
import { Inline } from '../layout';
import { CLX_COMPONENT } from '../../theme/constants';
import { BreadcrumbLink } from './BreadcrumbItem';

const IconWrapper = styled.li`
display: flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
`;

const DropdownBreadcrumbLink = styled(BreadcrumbLink)`
color: ${getColor('neutral.700')};
width: ${pxToRem(21)};
`;
import { IconLink } from './BreadcrumbItem';

const BreadcrumbsWrapper = styled.nav`
display: flex;
Expand All @@ -52,14 +38,14 @@ const insertSeparators = (items: React.ReactElement[]) => {
return [
...prev,
current,
// eslint-disable-next-line react/no-array-index-key
<IconWrapper key={`separator-${index}`} aria-hidden>
<Icon
color={ColorTypes.neutral600}
name={SSCIconNames.angleRight}
size="sm"
/>
</IconWrapper>,
<Icon
// eslint-disable-next-line react/no-array-index-key
key={`separator-${index}`}
color={ColorTypes.neutral600}
name={SSCIconNames.angleRight}
size="sm"
hasFixedSize
/>,
];
}

Expand All @@ -75,12 +61,9 @@ const renderDropdown = (actions: ActionKinds<React.MouseEvent[]>[]) => (
placement="bottom-start"
aria-hidden
>
<DropdownBreadcrumbLink
aria-label="Open breadcrumbs menu"
color="secondary"
iconName={SSCIconNames.ellipsisH}
variant="text"
/>
<IconLink aria-label="Open breadcrumbs menu" color="secondary">
<Icon name="ellipsis-h" size="sm" />
</IconLink>
</DropdownMenu>
</li>
);
Expand Down
Loading

0 comments on commit 0f50390

Please sign in to comment.