Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
dougfabris committed Aug 31, 2022
2 parents c9b3fa6 + 530d056 commit 3f8b190
Show file tree
Hide file tree
Showing 360 changed files with 12,119 additions and 1,012 deletions.
4 changes: 3 additions & 1 deletion .github/workflows/cd.yml
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ jobs:
packages/fuselage/storybook-static
packages/fuselage-ui-kit/storybook-static
packages/onboarding-ui/storybook-static
packages/uikit-playground/build
- if: github.ref == 'refs/heads/master'
uses: actions/upload-artifact@v2
with:
Expand Down Expand Up @@ -123,8 +124,9 @@ jobs:
name: docs
path: .
- run: |
rm -rf "fuselage/${{ needs.build-and-test.outputs.branch-name }}" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}" "onboarding-ui/${{ needs.build-and-test.outputs.branch-name }}"
rm -rf "fuselage/${{ needs.build-and-test.outputs.branch-name }}" "uikit-playground/${{ needs.build-and-test.outputs.branch-name }}" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}" "onboarding-ui/${{ needs.build-and-test.outputs.branch-name }}"
mv -v "packages/fuselage/storybook-static" "fuselage/${{ needs.build-and-test.outputs.branch-name }}"
mv -v "packages/uikit-playground/build" "uikit-playground/${{ needs.build-and-test.outputs.branch-name }}"
mv -v "packages/fuselage-ui-kit/storybook-static" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}"
mv -v "packages/onboarding-ui/storybook-static" "onboarding-ui/${{ needs.build-and-test.outputs.branch-name }}"
rm -rf packages
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/ci-pr-closed.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ jobs:
- uses: actions/checkout@v2
with:
ref: gh-pages
- run: rm -rf "fuselage/${{ github.event.number }}" "fuselage-ui-kit/${{ github.event.number }}" "onboarding-ui/${{ github.event.number }}"
- run: rm -rf "fuselage/${{ github.event.number }}" "fuselage-ui-kit/${{ github.event.number }}" "uikit-playground/${{ github.event.number }}" "onboarding-ui/${{ github.event.number }}"
- uses: crazy-max/ghaction-github-pages@v2
with:
target_branch: gh-pages
Expand Down
6 changes: 4 additions & 2 deletions .github/workflows/ci-pr-opened.yml
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ jobs:
name: storybooks
path: |
fuselage/storybook-static
uikit-playground/build
fuselage-ui-kit/storybook-static
onboarding-ui/storybook-static
publish-to-gh-pages:
Expand All @@ -51,7 +52,7 @@ jobs:
runs-on: ubuntu-latest
environment:
name: github-pages
url: "https://rocketchat.github.io/Rocket.Chat.Fuselage/fuselage/${{ needs.download-artifact.outputs.pr-number }}"
url: "https://rocketchat.github.io/fuselage/fuselage/${{ needs.download-artifact.outputs.pr-number }}"
steps:
- uses: actions/checkout@v2
with:
Expand All @@ -61,8 +62,9 @@ jobs:
name: storybooks
path: packages
- run: |
rm -rf "fuselage/${{ needs.download-artifact.outputs.pr-number }}" "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}" "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
rm -rf "fuselage/${{ needs.download-artifact.outputs.pr-number }}" "uikit-playground/${{ needs.download-artifact.outputs.pr-number }}" "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}" "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
mv -v packages/fuselage/storybook-static "fuselage/${{ needs.download-artifact.outputs.pr-number }}"
mv -v packages/uikit-playground/build "uikit-playground/${{ needs.download-artifact.outputs.pr-number }}"
mv -v packages/fuselage-ui-kit/storybook-static "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}"
mv -v packages/onboarding-ui/storybook-static "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
rm -rf packages
Expand Down
1 change: 1 addition & 0 deletions .github/workflows/ci-pr.yml
Original file line number Diff line number Diff line change
Expand Up @@ -42,5 +42,6 @@ jobs:
name: "storybooks-${{ github.event.number }}"
path: |
packages/fuselage/storybook-static
packages/uikit-playground/build
packages/fuselage-ui-kit/storybook-static
packages/onboarding-ui/storybook-static
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,4 @@ storybook-static/
.turbo
**/.storybook/jest-results.json
**/bundle-report.html
.env
21 changes: 21 additions & 0 deletions .kodiak.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# .kodiak.toml
version = 1

merge.require_automerge_label = false
merge.method = "squash"

[merge.automerge_dependencies]
# only auto merge "minor" and "patch" version upgrades.
# do not automerge "major" version upgrades.
versions = ["minor", "patch"]
usernames = ["dependabot", "renovate"]


[merge.message]
title = "pull_request_title"
body = "empty"
include_coauthors=true

merge.blocking_labels = ["wip"]

merge.prioritize_ready_to_merge = true
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
| 📦 [`@rocket.chat/fuselage-tokens`](/packages/fuselage-tokens) | Design tokens for Fuselage, Rocket.Chat's design system | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-tokens?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Ffuselage-tokens&style=flat-square) |
| 📦 [`@rocket.chat/fuselage-ui-kit`](/packages/fuselage-ui-kit) | UiKit elements for Rocket.Chat Apps built under Fuselage design system | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-ui-kit?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Ffuselage-ui-kit&style=flat-square) |
| 📦 [`@rocket.chat/icons`](/packages/icons) | | [![npm](https://img.shields.io/npm/v/@rocket.chat/icons?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Ficons&style=flat-square) |
| 📦 [`@rocket.chat/layout`](/packages/layout) | layout | [![npm](https://img.shields.io/npm/v/@rocket.chat/layout?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Flayout&style=flat-square) |
| 📦 [`@rocket.chat/logo`](/packages/logo) | Rocket.Chat logo package | [![npm](https://img.shields.io/npm/v/@rocket.chat/logo?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Flogo&style=flat-square) |
| 📦 [`@rocket.chat/memo`](/packages/memo) | Memoization utilities | [![npm](https://img.shields.io/npm/v/@rocket.chat/memo?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Fmemo&style=flat-square) |
| 📦 [`@rocket.chat/message-parser`](/packages/message-parser) | Rocket.Chat parser for messages | [![npm](https://img.shields.io/npm/v/@rocket.chat/message-parser?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Fmessage-parser&style=flat-square) |
Expand All @@ -37,3 +38,4 @@
| 📦 [`@rocket.chat/styled`](/packages/styled) | A simple styled API for React components | [![npm](https://img.shields.io/npm/v/@rocket.chat/styled?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Fstyled&style=flat-square) |
| 📦 [`@rocket.chat/stylis-logical-props-middleware`](/packages/stylis-logical-props-middleware) | Stylis middleware to handle CSS Logical Properties and their fallbacks | [![npm](https://img.shields.io/npm/v/@rocket.chat/stylis-logical-props-middleware?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Fstylis-logical-props-middleware&style=flat-square) |
| 📦 [`@rocket.chat/ui-kit`](/packages/ui-kit) | Interactive UI elements for Rocket.Chat Apps | [![npm](https://img.shields.io/npm/v/@rocket.chat/ui-kit?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Fui-kit&style=flat-square) |
| 📦 [`@rocket.chat/uikit-playground`](/packages/uikit-playground) | | [![npm](https://img.shields.io/npm/v/@rocket.chat/uikit-playground?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/david/RocketChat/fuselage?path=packages%2Fuikit-playground&style=flat-square) |
2 changes: 1 addition & 1 deletion packages/fuselage-tokens/src/button/base.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"backgroundSecondaryKeyfocus": { "value": "{colors.n400}" },
"backgroundSecondaryDisabled": { "value": "{colors.n300}" },
"fontOnSecondary": { "value": "{colors.n900}" },
"fontOnSecondaryDisabled": { "value": "{colors.n600}" },
"fontOnSecondaryDisabled": { "value": "{colors.n500}" },

"backgroundSecondaryDangerDefault": { "value": "{colors.n400}" },
"backgroundSecondaryDangerHover": { "value": "{colors.n500}" },
Expand Down
1 change: 1 addition & 0 deletions packages/fuselage-tokens/src/colors/base.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
"s700": { "value": "#19AC7C", "group": "colors" },
"s800": { "value": "#148660", "group": "colors" },
"s900": { "value": "#106D4F", "group": "colors" },
"s1000": { "value": "#0D5940", "group": "colors" },
"s1-100": { "value": "#FDE8D7", "group": "colors" },
"s1-200": { "value": "#FAD1B0", "group": "colors" },
"s1-300": { "value": "#F7B27B", "group": "colors" },
Expand Down
1 change: 1 addition & 0 deletions packages/fuselage/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"lint-and-fix": "lint-and-fix",
"lint-staged": "lint-staged",
"test": "jest --runInBand",
"watch": "jest --watch",
"docs": "cross-env NODE_ENV=production build-storybook -o ../../static/fuselage",
"build-storybook": "cross-env NODE_ENV=production build-storybook",
"bump-next": "bump-next"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@

text-align: start;

color: colors.foreground(default);
color: colors.font(default);

border-width: lengths.border-width(2);
border-color: colors.neutral(300) transparent transparent;
Expand All @@ -48,7 +48,7 @@
&--disabled {
cursor: not-allowed;

color: colors.foreground(disabled);
color: colors.font(disabled);
background-color: colors.neutral(100);
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,39 @@ $sizes: 16, 18, 20, 24, 28, 32, 36, 40, 48, 124, 200, 332;
&__element {
position: relative;

border-radius: lengths.border-width(2);
@each $size in $sizes {
&--x#{$size} {
@include square(functions.to-rem($size));

&--rounded {
border-radius: 100%;
@if $size <= 18 {
border-radius: theme(
'avatar-border-radius-#{$size}',
lengths.border-radius(small)
);
} @else if $size == 332 {
border-radius: theme(
'avatar-border-radius-#{$size}',
lengths.border-radius(large)
);
} @else {
border-radius: theme(
'avatar-border-radius-#{$size}',
lengths.border-radius(medium)
);
}
}
}

&--object-fit {
object-fit: contain;
}

&--rounded {
border-radius: theme(
'avatar-border-radius-rounded',
lengths.border-radius(full)
);
}
}

&-stack {
Expand All @@ -43,10 +67,4 @@ $sizes: 16, 18, 20, 24, 28, 32, 36, 40, 48, 124, 200, 332;
}
}
}

@each $size in $sizes {
&--x#{$size} {
@include square(functions.to-rem($size));
}
}
}
4 changes: 2 additions & 2 deletions packages/fuselage/src/components/Avatar/Avatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ export const Avatar = ({
);
const innerClass = [
'rcx-avatar__element',
rounded && 'rcx-avatar__element--rounded',
objectFit && 'rcx-avatar__element--object-fit',
size && `rcx-avatar--${size}`,
size && `rcx-avatar__element--${size}`,
rounded && 'rcx-avatar__element--rounded',
]
.filter(Boolean)
.join(' ');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

$badge-colors-secondary-color: theme(
'badge-colors-secondary-color',
colors.foreground(primary)
colors.font(info)
);
$badge-colors-secondary-background-color: theme(
'badge-colors-secondary-background-color',
Expand All @@ -13,7 +13,7 @@ $badge-colors-secondary-background-color: theme(

$badge-colors-primary-color: theme(
'badge-colors-primary-color',
colors.foreground(alternative)
colors.font(white)
);
$badge-colors-primary-background-color: theme(
'badge-colors-primary-background-color',
Expand All @@ -22,7 +22,7 @@ $badge-colors-primary-background-color: theme(

$badge-colors-danger-color: theme(
'badge-colors-danger-color',
colors.foreground(alternative)
colors.font(white)
);
$badge-colors-danger-background-color: theme(
'badge-colors-danger-background-color',
Expand All @@ -31,7 +31,7 @@ $badge-colors-danger-background-color: theme(

$badge-colors-ghost-color: theme(
'badge-colors-ghost-color',
colors.foreground(alternative)
colors.font(white)
);
$badge-colors-ghost-background-color: theme(
'badge-colors-ghost-background-color',
Expand All @@ -40,7 +40,7 @@ $badge-colors-ghost-background-color: theme(

$badge-colors-warning-color: theme(
'badge-colors-warning-color',
colors.foreground(alternative)
colors.font(white)
);
$badge-colors-warning-background-color: theme(
'badge-colors-warning-background-color',
Expand All @@ -49,7 +49,7 @@ $badge-colors-warning-background-color: theme(

$badge-colors-disabled-color: theme(
'badge-colors-disabled-color',
colors.foreground(hint)
colors.font(secondary-info)
);
$badge-colors-disabled-background-color: theme(
'badge-colors-disabled-background-color',
Expand All @@ -75,7 +75,7 @@ $badge-colors-disabled-background-color: theme(

word-break: keep-all;

border-radius: lengths.border-radius(full);
border-radius: theme('badge-border-radius', lengths.border-radius(full));

@include typography.use-font-scale(micro);

Expand Down
39 changes: 36 additions & 3 deletions packages/fuselage/src/components/Button/IconButton.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
import type { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';

import type { ButtonGroup } from '../ButtonGroup';
import { ButtonGroup } from '../ButtonGroup';
import { IconButton } from './IconButton';

export default {
Expand Down Expand Up @@ -39,8 +39,41 @@ export const _IconButtonDisabled: ComponentStory<typeof IconButton> = () => (
<IconButton icon='balloon' disabled />
);

export const _IconButtonMini: ComponentStory<typeof IconButton> = () => (
<IconButton icon='balloon' mini />
export const Variants = () => (
<>
<ButtonGroup>
<IconButton icon='balloon' small />
<IconButton icon='balloon' secondary small />
<IconButton icon='balloon' info small />
<IconButton icon='balloon' secondary info small />
<IconButton icon='balloon' success small />
<IconButton icon='balloon' secondary success small />
<IconButton icon='balloon' warning small />
<IconButton icon='balloon' secondary warning small />
<IconButton icon='balloon' danger small />
<IconButton icon='balloon' secondary danger small />
</ButtonGroup>
<ButtonGroup>
<IconButton icon='balloon' disabled small />
<IconButton icon='balloon' disabled secondary small />
<IconButton icon='balloon' disabled info small />
<IconButton icon='balloon' disabled secondary info small />
<IconButton icon='balloon' disabled success small />
<IconButton icon='balloon' disabled secondary success small />
<IconButton icon='balloon' disabled warning small />
<IconButton icon='balloon' disabled secondary warning small />
<IconButton icon='balloon' disabled danger small />
<IconButton icon='balloon' disabled secondary danger small />
</ButtonGroup>
</>
);

export const Sizes = () => (
<ButtonGroup>
<IconButton icon='balloon' secondary info small />
<IconButton icon='balloon' secondary info tiny />
<IconButton icon='balloon' secondary info mini />
</ButtonGroup>
);

export const _IconButtonInfo: ComponentStory<typeof IconButton> = () => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

color: theme('callout-color', colors.font(default));

border-radius: lengths.border-radius(2);
border-radius: theme('callout-border-radius', lengths.border-radius(medium));

background-color: theme('callout-background-color', colors.surface(neutral));

Expand Down
35 changes: 33 additions & 2 deletions packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,44 @@
import { composeStories } from '@storybook/testing-react';
import { render } from '@testing-library/react';
import { fireEvent, getByRole, render } from '@testing-library/react';
import React from 'react';

import * as stories from './CheckBox.stories';

const { Default } = composeStories(stories);
const { Default, Indeterminate, Disabled, DefaultChecked } =
composeStories(stories);

describe('[CheckBox Component]', () => {
it('renders without crashing', () => {
render(<Default />);
});
it('changes style of element as checkbox is checked', () => {
const { container } = render(<Default />);
const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
fireEvent.click(checkbox);
expect(checkbox.checked).toEqual(true);
});
it('changes style of element as checkbox is checked/unchecked', () => {
const { container } = render(<Default />);
const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
fireEvent.click(checkbox);
fireEvent.click(checkbox);
expect(checkbox.checked).toEqual(false);
});
it('displays checkbox indeterminate correctly', () => {
const { container } = render(<Indeterminate />);
const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
expect(checkbox.indeterminate).toEqual(true);
});

it('displays checkbox with defaultChecked value correctly', () => {
const { container } = render(<DefaultChecked />);
const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
expect(checkbox.defaultChecked).toEqual(true);
});

it('displays checkbox disabled correctly', () => {
const { container } = render(<Disabled />);
const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
expect(checkbox.disabled).toEqual(true);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@ export const Disabled = Template.bind({});
Disabled.args = {
disabled: true,
};
export const DefaultChecked = Template.bind({});
DefaultChecked.args = {
defaultChecked: true,
};

export const States = () => (
<PropsVariationSection
Expand Down
Loading

0 comments on commit 3f8b190

Please sign in to comment.