Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bla 1167 | refactor(b2b-icon): bla-1167 update B2b to use icon-50/icon-100 #535

Merged
merged 4 commits into from
Feb 10, 2025
Merged

Bla 1167 | refactor(b2b-icon): bla-1167 update B2b to use icon-50/icon-100 #535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
12d838d
refactor(b2b-icon): bla-1167 update B2b to use icon-50/icon-100
sofeiyakalaimathy-tw Feb 6, 2025
70a0b14
refactor(b2b-icon): update b2b-icon 200 size to b2b-icon-100 prop size
sofeiyakalaimathy-tw Feb 7, 2025
11f63b1
refactor(b2b-icon): reverting branch name to main
sofeiyakalaimathy-tw Feb 7, 2025
208bf77
refactor(b2b-icon): uncomment deploy docker image
sofeiyakalaimathy-tw Feb 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/core-components/src/components/alert/alert.e2e.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,10 @@ describe('B2B-Alert', () => {
const page = await newE2EPage();

await page.setContent(
`<b2b-alert opened custom-icon><b2b-icon icon="b2b_icon-menu"></b2b-icon></b2b-alert>`,
`<b2b-alert opened custom-icon><b2b-icon-100 icon="b2b_icon-menu"></b2b-icon-100></b2b-alert>`,
);

const element = await page.find('b2b-icon');
const element = await page.find('b2b-icon-100');

expect(element).not.toBeNull();
});
Expand Down
2 changes: 1 addition & 1 deletion packages/core-components/src/components/alert/alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export class AlertComponent {

private chooseIcon = () => {
const iconName: IconName = `b2b_icon-${this.type}`;
return <b2b-icon icon={iconName}></b2b-icon>;
return <b2b-icon-100 icon={iconName}></b2b-icon-100>;
};

private close = () => {
Expand Down
6 changes: 3 additions & 3 deletions packages/core-components/src/components/alert/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
| `customIcon` | `custom-icon` | Whether or not you want to use a custom icon. Per default, it is false. | `boolean` | `false` |
| `hasCloseButton` | `has-close-button` | Whether or not the alert has a close button. Per default it is true. Note that errors and small alerts cannot be closed. | `boolean` | `true` |
| `opened` | `opened` | Whether the alert is currently open. Set to true to display the alert. | `boolean` | `false` |
| `size` | `size` | The size of the alert. Per default it is large. If set to small, the alert will only have an icon. | `"large" \| "small"` | `'small'` |
| `size` | `size` | The size of the alert. Per default it is large. If set to small, the alert will only have an icon. | `"large" \| "small"` | `'large'` |
| `type` | `type` | The type of alert. Per default it is info. | `"error" \| "info" \| "success" \| "warning"` | `'info'` |


Expand All @@ -27,12 +27,12 @@

### Depends on

- [b2b-icon](../icon)
- [b2b-icon-100](../icon-100)

### Graph
```mermaid
graph TD;
b2b-alert --> b2b-icon
b2b-alert --> b2b-icon-100
style b2b-alert fill:#f9f,stroke:#333,stroke-width:4px
```

Expand Down
4 changes: 2 additions & 2 deletions packages/core-components/src/components/button/button.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,13 +75,13 @@ defining `download`, the default name of the downloadable file will be changed t
In order to emphasize particularly important primary actions, a suitable icon should be used in addition to the text.
For example, a plus icon for "Create new service".

The button can contain the [b2b-icon component](?path=/docs/components-assets-icon--story-010-primary). If an
The button can contain the [b2b-icon-100 component](?path=/docs/components-assets-icon--story-010-primary). If an
icon is not yet available, the PaLi font icons can be used as well.

For this you should specify your icon in a reserved `named slot`, depending on if you want the icon at the beginning or at
the end of the button. Please check the following code examples to see how to use slot names.

Note: When using the b2b-icon, specify the color attribute as `inherit`; this will allow the icon
Note: When using the b2b-icon-100, specify the color attribute as `inherit`; this will allow the icon
to maintain the colors specified by the button slot in its different states, like disabled.

<Canvas of={ButtonStories.IconStart} />
Expand Down
4 changes: 2 additions & 2 deletions packages/core-components/src/components/button/button.e2e.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ describe('B2B-Button', () => {
it('should reduce padding on the button if there is only an icon', async () => {
page = await newE2EPage();
await page.setContent(`<b2b-button variant="primary" size="100">
<b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
<b2b-icon-100 slot="end" icon="b2b_icon-check"></b2b-icon-100>
</b2b-button>`);

const button = await page.find('b2b-button');
Expand All @@ -82,7 +82,7 @@ describe('B2B-Button', () => {
page = await newE2EPage();
await page.setContent(`<b2b-button variant="primary" size="100">
<span>Hello World</span>
<b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
<b2b-icon-100 slot="end" icon="b2b_icon-check"></b2b-icon-100>
</b2b-button>`);

const button = await page.find('b2b-button');
Expand Down
6 changes: 3 additions & 3 deletions packages/core-components/src/components/button/button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const IconStart: Story = {
disabled="${args.disabled}"
loading="${args.loading}"
type="${args.type}">
<b2b-icon slot="start" icon="b2b_icon-check" size="100"></b2b-icon>
<b2b-icon-100 slot="start" icon="b2b_icon-check"></b2b-icon-100>
${args.label}
</b2b-button>`,
};
Expand All @@ -81,7 +81,7 @@ export const IconEnd: Story = {
loading="${args.loading}"
type="${args.type}">
${args.label}
<b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
<b2b-icon-100 slot="end" icon="b2b_icon-check"></b2b-icon-100>
</b2b-button>`,
};

Expand Down Expand Up @@ -111,7 +111,7 @@ export const IconOnly: Story = {
disabled="${args.disabled}"
loading="${args.loading}"
type="${args.type}">
<b2b-icon slot="end" icon="b2b_icon-search" size="100"></b2b-icon>
<b2b-icon-100 slot="end" icon="b2b_icon-search"></b2b-icon-100>
</b2b-button>`,
};

Expand Down
2 changes: 1 addition & 1 deletion packages/core-components/src/components/button/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export class ButtonComponent {
if (children.length === 1) {
// even no chars or child nodes will return white space, so we need to trim
if (this.hostElement.textContent.trim().length === 0) {
if (children[0].tagName.toLowerCase() === 'b2b-icon') {
if (children[0].tagName.toLowerCase() === 'b2b-icon-100') {
return true;
} else if (children[0].tagName.toLowerCase() === 'i') {
return true;
Expand Down
8 changes: 6 additions & 2 deletions packages/core-components/src/components/date-picker/date-picker-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@ export class B2bDatePickerHeader {
(event.target as HTMLDivElement).blur();
}}
aria-label="previous month">
<b2b-icon icon="b2b_icon-arrow-left" clickable={true}></b2b-icon>
<b2b-icon-100
icon="b2b_icon-arrow-left"
clickable={true}></b2b-icon-100>
</button>
<b2b-headline
size={'100'}
Expand Down Expand Up @@ -101,7 +103,9 @@ export class B2bDatePickerHeader {
(event.target as HTMLDivElement).blur();
}}
aria-label="next month">
<b2b-icon icon="b2b_icon-arrow-right" clickable={true}></b2b-icon>
<b2b-icon-100
icon="b2b_icon-arrow-right"
clickable={true}></b2b-icon-100>
</button>
</div>
</Host>
Expand Down
8 changes: 4 additions & 4 deletions packages/core-components/src/components/date-picker/date-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -514,10 +514,10 @@ export class B2bDatePicker {
this.clearDateInput();
}
}}>
<b2b-icon
<b2b-icon-100
icon="b2b_icon-close"
aria-label="clear input"
clickable={true}></b2b-icon>
clickable={true}></b2b-icon-100>
</div>
)}

Expand All @@ -538,14 +538,14 @@ export class B2bDatePicker {
}
}}
class="b2b-event-icon">
<b2b-icon
<b2b-icon-100
aria-label={
this.showDatePicker
? 'close date picker'
: 'open date picker'
}
icon="b2b_icon-event"
clickable={true}></b2b-icon>
clickable={true}></b2b-icon-100>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/core-components/src/components/flyout-menu/flyout-menu.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ clicked
NOTE: Disabled and separator are optional. The component can simply be used like this without specifying any properties aside from the label:

<Source
code={`<b2b-flyout-menu><b2b-icon icon="b2b_icon-ellipsis" clickable focusable slot='trigger'></b2b-icon><b2b-flyout-menu-option slot='option' option='Cut' ></b2b-flyout-menu-option></b2b-flyout-menu>`}
code={`<b2b-flyout-menu><b2b-icon-100 icon="b2b_icon-ellipsis" clickable focusable slot='trigger'></b2b-icon-100><b2b-flyout-menu-option slot='option' option='Cut' ></b2b-flyout-menu-option></b2b-flyout-menu>`}
/>

## Properties
Expand Down
12 changes: 6 additions & 6 deletions packages/core-components/src/components/flyout-menu/flyout-menu.e2e.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ describe('B2B-FlyoutMenu', () => {
page = await newE2EPage();
await page.setContent(`
<b2b-flyout-menu>
<b2b-icon icon="b2b_icon-ellipsis" slot='trigger' clickable focusable></b2b-icon>
<b2b-icon-100 icon="b2b_icon-ellipsis" slot='trigger' clickable focusable></b2b-icon-100>
<b2b-flyout-menu-option slot='option' option='option1' >
</b2b-flyout-menu-option>
<b2b-flyout-menu-option slot='option' option='option2' >
Expand All @@ -29,7 +29,7 @@ describe('B2B-FlyoutMenu', () => {
});

it('should show the menu when icon is clicked', async () => {
const iconContainer = await page.find('b2b-icon');
const iconContainer = await page.find('b2b-icon-100');

iconContainer.click();
await page.waitForChanges();
Expand All @@ -39,7 +39,7 @@ describe('B2B-FlyoutMenu', () => {
});

it('should hide the menu when it loses focus', async () => {
const iconContainer = await page.find('b2b-icon');
const iconContainer = await page.find('b2b-icon-100');

iconContainer.click();
await page.waitForChanges();
Expand All @@ -59,7 +59,7 @@ describe('B2B-FlyoutMenu', () => {
/** Test is extremely flaky due to unknown global interaction. Test suite runs fine in isolation, so skipping for now. */
xit('should emit the selected event when a menu option is clicked', async () => {
const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
const icon = await page.find('b2b-icon >>> div');
const icon = await page.find('b2b-icon-100 >>> div');

await icon.click();
await page.waitForChanges();
Expand All @@ -77,7 +77,7 @@ describe('B2B-FlyoutMenu', () => {

it('should disable an option when disabled is true', async () => {
const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
const icon = await page.find('b2b-icon');
const icon = await page.find('b2b-icon-100');

icon.click();
await page.waitForChanges();
Expand All @@ -93,7 +93,7 @@ describe('B2B-FlyoutMenu', () => {
});

it('should display separator after an option when separator is true', async () => {
const icon = await page.find('b2b-icon');
const icon = await page.find('b2b-icon-100');

icon.click();
await page.waitForChanges();
Expand Down
8 changes: 4 additions & 4 deletions packages/core-components/src/components/flyout-menu/flyout-menu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ const meta: Meta = {
argTypes: getArgTypes('b2b-flyout-menu'),
render: ({ ...args }) => html` <div style="margin-left: 100px">
<b2b-flyout-menu>
<b2b-icon
<b2b-icon-100
icon="b2b_icon-ellipsis"
slot="trigger"
clickable
focusable></b2b-icon>
focusable></b2b-icon-100>
<b2b-flyout-menu-option
slot="option"
option="Delete"
Expand Down Expand Up @@ -56,11 +56,11 @@ export const AllStates: Story = {
args: { ...meta.args, disabled: true, separator: true },
render: ({ ...args }) => html` <div style="margin-left: 100px">
<b2b-flyout-menu opened="true">
<b2b-icon
<b2b-icon-100
icon="b2b_icon-ellipsis"
slot="trigger"
clickable
focusable></b2b-icon>
focusable></b2b-icon-100>
<b2b-flyout-menu-option
slot="option"
option="Delete"
Expand Down
2 changes: 1 addition & 1 deletion packages/core-components/src/components/input-group/input-group.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ This is the last element in the input group. It will have rounded corners on the

```html
<b2b-button slot="end" variant="primary"
><b2b-icon icon="b2b_icon-search"></b2b-icon
><b2b-icon-100 icon="b2b_icon-search"></b2b-icon-100
></b2b-button>
```

Expand Down
2 changes: 1 addition & 1 deletion packages/core-components/src/components/input-group/input-group.e2e.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ describe('B2B Input Group', () => {
<option value="one">€</option>
<option value="one">$</option>
</b2b-dropdown>
<b2b-button slot="end" variant="primary" disabled><b2b-icon icon="b2b_icon-search"></b2b-icon></b2b-button>
<b2b-button slot="end" variant="primary" disabled><b2b-icon-100 icon="b2b_icon-search"></b2b-icon-100></b2b-button>
</b2b-input-group>`);
});

Expand Down
2 changes: 1 addition & 1 deletion packages/core-components/src/components/input-group/input-group.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const Template: Story = ({
<option value="two">$</option>
</b2b-dropdown>
<b2b-button slot="end" variant="primary">
<b2b-icon icon="b2b_icon-search"></b2b-icon>
<b2b-icon-100 icon="b2b_icon-search"></b2b-icon-100>
</b2b-button>
</b2b-input-group>
</div>`
Expand Down
12 changes: 6 additions & 6 deletions packages/core-components/src/components/input-list/input-list.e2e.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ describe('B2B-InputList', () => {

let inputValue = inputList.getAttribute('value');
expect(inputValue).toBe(null);
const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
expect(closeIcon).toBeNull();
});

Expand All @@ -59,7 +59,7 @@ describe('B2B-InputList', () => {

let inputValue = inputList.getAttribute('value');
expect(inputValue).toBe('b2b');
const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
expect(closeIcon).toBeNull();
});

Expand Down Expand Up @@ -280,15 +280,15 @@ describe('B2B-InputList', () => {
await setOptionsList();
await typeInput();

const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');

expect(closeIcon).not.toBeNull();
});

it('should not show the close icon if the input is empty', async () => {
await setOptionsList();

const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');

expect(closeIcon).toBeNull();
});
Expand All @@ -301,7 +301,7 @@ describe('B2B-InputList', () => {
let inputValue = await input.getAttribute('value');
expect(inputValue).toBe('8');

const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');

closeIcon.click();
await page.waitForChanges();
Expand All @@ -314,7 +314,7 @@ describe('B2B-InputList', () => {
const onInputEventSpy = await page.spyOnEvent('b2b-clear');
await typeInput();

const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
closeIcon.click();
await page.waitForChanges();

Expand Down
2 changes: 1 addition & 1 deletion packages/core-components/src/components/input-list/input-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
}
}

b2b-icon {
b2b-icon-100 {
--b2b-icon-cursor: pointer;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/core-components/src/components/input-list/input-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,13 +221,13 @@ export class InputListComponent {
placeholder={this.placeholder}
required={this.required}>
{!(this.disabled || this.groupDisabled) && Boolean(this.value) && (
<b2b-icon
<b2b-icon-100
icon="b2b_icon-close"
aria-label="reset"
slot="end"
tabIndex={0}
onMouseDown={this.resetInput}
onKeyDown={this.resetInput}></b2b-icon>
onKeyDown={this.resetInput}></b2b-icon-100>
)}
</b2b-input>
{this.isElementFocused && Boolean(this.value) ? (
Expand Down
4 changes: 2 additions & 2 deletions packages/core-components/src/components/input/input.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export const Suffix: Story = {
error="${args.error}"
autofocus="${args.autofocus}"
invalid=${args.invalid}
><b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon
><b2b-icon-100 icon="b2b_icon-search" slot="end"></b2b-icon-100
>
</div>`,
};
Expand All @@ -147,7 +147,7 @@ export const PrefixAndSuffix: Story = {
error="${args.error}"
autofocus="${args.autofocus}"
invalid=${args.invalid}>
<b2b-icon icon="b2b_icon-search" slot="start"></b2b-icon
<b2b-icon-100 icon="b2b_icon-search" slot="start"></b2b-icon-100
><span slot="end">Registration Number</span></b2b-input
>
</div>`,
Expand Down
Loading