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

[Feature] {all} - Add base configuration on component #107

Open
MGREMY opened this issue Dec 30, 2024 · 0 comments
Open

[Feature] {all} - Add base configuration on component #107

MGREMY opened this issue Dec 30, 2024 · 0 comments
Assignees
Labels
documentation Improvements or additions to documentation enhancement New feature or request

Comments

@MGREMY
Copy link
Collaborator

MGREMY commented Dec 30, 2024

Preview

Description

In the document, it would be nice to have a marker/int/something on each component pages to tell people this component is implementing a flowbite-angular standard theming.
By flowbite-angular standard, I mean, inside the theme configuration of that component, having different sections for different TailwindCSS states

Proposed solution

Documentation

Having a Check icon

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>

under the page's header with a little mention This component is implementing flowbite-angular configuration standard

Library

Implementing this feature on documentation AND components MUST NOT affect existing code (the customStyle input will be discussed later as it's a DeepPartial type, it won't break existing code, but it may not work anymore in some case)
Here are states that will must be implemented for each theme section

  • hover
  • dark
  • focus
  • disabled

If we take the color property for a random component, its theme should look like this

root: {
  ...
  color: {
    primary: {
      base: {
        light: '',
        dark: '',
      },
      hover: {
        light: '',
        dark: '',
      },
      focus: {
        light: '',
        dark: '',
      },
      disabled: {
        light: '',
        dark: '',
      },
    },
  },
  ...
},

Therefore, as it is always the same scheme, a global type should be created, named StandardThemeConfiguration located inside flowbite-angular/common/type-definition

type StandardThemeConfiguration = {
  base: {
    light: string;
    dark: string;
  };
  hover:
    | {
        light: string;
        dark: string;
      }
    | undefined;
  focus:
    | {
        light: string;
        dark: string;
      }
    | undefined;
  disabled:
    | {
        light: string;
        dark: string;
      }
    | undefined;
};

Having multiple input per component won't be verry clever, so I suggest to have one global type StandardThemeInput located inside flowbite-angular/common/type-definition, with key to boolean values like so

type StandardThemeInput = {
  hasDark: boolean;
  hasHover: boolean;
  hasFocus: boolean;
  hasDisabled: boolean;
}

As this will be a standardized way of doing things, we could create a function for theme services to merge and retrieve classes from a theme, with parameter of type StandardThemeInput

Default values for common cases could be created in the same file as StandardThemeInput

const allTrueStandardThemeInput = {
  hasDark: true,
  hasHover: true,
  hasFocus: true,
  hasDisabled: true,
}

const allFalseStandardThemeInput = {
  hasDark: false,
  hasHover: false,
  hasFocus: false,
  hasDisabled: false,
}

Alternatives considered

No response

@MGREMY MGREMY self-assigned this Dec 30, 2024
@MGREMY MGREMY added documentation Improvements or additions to documentation enhancement New feature or request labels Dec 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation enhancement New feature or request
Projects
None yet
Development

When branches are created from issues, their pull requests are automatically linked.

1 participant