Skip to content

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

@MGREMY

Description

@MGREMY

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

Metadata

Metadata

Assignees

Labels

documentationImprovements or additions to documentationenhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions