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.

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

refactor: Refactor LinkButtonProperties to be two base classes and make all components that currently implement the interface extend it #2212

Closed
DavideMininni-Fincons opened this issue Nov 21, 2023 · 0 comments · Fixed by #2364
Assignees
Milestone

Comments

@DavideMininni-Fincons
Copy link
Contributor

DavideMininni-Fincons commented Nov 21, 2023

We want to refactor our button and link components.
For this a base class should be created for button components and a separate one for link components. These should be created in src/components/core/common-behaviors. The base classes should include basic styles needed for every button or link (e.g. cursor, outline, display). This should be considered case by case if it makes sense.

With this we will split each current action elements into two components:

  • <sbb-button> => <sbb-button> + <sbb-button-link>
  • <sbb-link> => <sbb-link> + <sbb-link-button>
  • <sbb-card-action> => <sbb-card-button> + <sbb-card-link>
  • <sbb-header-action> => <sbb-header-button> + <sbb-header-link>
  • <sbb-menu-action> => <sbb-menu-button> + <sbb-menu-link>
  • <sbb-navigation-action> => <sbb-navigation-button> + <sbb-navigation-link>

Where necessary, create a common directory next to the components directory (e.g. src/components/button/{button,link,common}) for styles or common functionality (e.g. functions or mixins).
Avoid duplicating styles by using the possibility of adding an array of style objects to the custom element class.

.
└── src/components/
    ├── core/common-behaviors/
    │   ├── button-element-base.ts (SbbButtonElementBase)
    │   └── link-element-base.ts (SbbLinkElementBase)
    └── button/
        ├── common/
        │   ├── button-base.scss
        │   └── button-base.ts (common functionality/mixins)
        ├── button/
        │   ├── button.scss
        │   ├── button.ts (extends SbbButtonElementBase)
        │   ├── button.stories.ts
        │   ├── button.spec.ts
        │   └── button.e2e.ts
        └── button-link/
            ├── button-link.scss
            ├── button-link.ts (extends SbbLinkElementBase)
            ├── button-link.stories.ts
            ├── button-link.spec.ts
            └── button-link.e2e.ts
@DavideMininni-Fincons DavideMininni-Fincons converted this from a draft issue Nov 21, 2023
@DavideMininni-Fincons DavideMininni-Fincons self-assigned this Nov 21, 2023
@DavideMininni-Fincons DavideMininni-Fincons removed their assignment Nov 23, 2023
@dauriamarco dauriamarco self-assigned this Nov 28, 2023
@kyubisation kyubisation changed the title refactor: Refactor LinkButtonProperties to be a class and make all components that currently implement the interface extend it refactor: Refactor LinkButtonProperties to be two base classes and make all components that currently implement the interface extend it Dec 14, 2023
@DavideMininni-Fincons DavideMininni-Fincons self-assigned this Jan 11, 2024
@kyubisation kyubisation added this to the Release 1.0.0 milestone Feb 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants