Nokia Button Component

The Nokia Button Component is an Angular UI primitive designed to simplify button styling and usage in your projects. Built with an attribute selector (nokia-button), it allows you to use a native <button> element while automatically applying consistent design and style rules.

Usage

Once installed, import the component (or its module if provided) into your Angular application. For standalone usage, simply utilize the selector in your template:

<!-- Default variant (secondary styling) medium sized by default-->
<button nokia-button>Click Me</button>

<!-- Negative variant -->
<button nokia-button negative>Click Me</button>

<!-- Example with size modification (if supported) -->
<button nokia-button negative large>Click Me</button>

<!-- Disabled Example -->
 <button nokia-button disabled="true">Click Me</button>

If the styles of the button component are to be overridden by theme values that are being set in the application that uses the button component, the following variables can be utilized in a style description in the host application (e.g. styles.scss):

  --font-size-xx-small
  --font-weight-bold
  --font-letter-spacing-medium
  --nokia-button-background-color
  --nokia-button-color
  --nokia-button-hover-background-color
  --nokia-button-hover-color
  --nokia-button-focus-outline-color

The component automatically applies the nokia-button class along with additional classes based on attributes (such as negative), so your button will look and behave consistently across your app.

nokia-button.directive.ts

• The directive is used to apply a consistent style and behavior to button elements throughout the application. • The nokia-button attribute is used to identify the button elements that should be styled by the directive. • The host metadata is used to dynamically add and remove CSS classes based on the input properties. • The negative, large, and disabled input properties are used to control the appearance and behavior of the button.

nokia-button.components.ts

• The component is used to create a reusable button component with a consistent style and behavior. • The nokia-button attribute is used to identify the button elements that should be styled by the component. • The ViewEncapsulation.None encapsulation is used to allow the component's styles to be easily overridden. • The ng-container and ng-content elements are used to create a flexible template that can accommodate different types of button content. • The icon and disabled input properties are used to control the appearance and behavior of the button. • The host bindings are used to dynamically add and remove CSS classes and attributes based on the component's input properties.

nokia-button.component.scss

• The CSS variables are used to make the button's styling customizable. By defining these variables, users can easily change the button's appearance by overriding the variable values. • The !default flag is used to ensure that the button's default styling is only applied if the user hasn't already defined their own styling. • The .nokia-button class is used to define the base styling for the button. This ensures that all buttons with the nokia-button attribute will have a consistent appearance. • The &:hover:not(:disabled) selector is used to provide visual feedback to the user when they hover over the button.

Implementation Approach

The Nokia Button Component is built as an atomic component using an attribute selector. This approach was chosen for the following reasons:

• Direct HTML Element Access: By using an attribute selector (<button nokia-button>), we leverage the full functionality of the native HTML button. This ensures that all default button behaviors and attributes remain available without needing extra inputs.
• Clean Markup: Instead of using multiple class names (like btn primary large), a single attribute makes the markup simple and maintainable.
• Extensibility: Using Angular's HostBinding to apply styles based on the presence of attributes (e.g., negative) adheres to the open-closed principle. This minimizes changes to the component when requirements evolve.
• Design Consistency: Encapsulating styling within the component means that UI variations are maintained in a single location—the component's SCSS—simplifying updates when design changes are needed.
• Documentation and Onboarding: (to be added!) Combined with a UI documentation tool (like Storybook), all available buttons and their variants are easily discoverable by your team. This supports rapid onboarding and ensures consistency across the project.

By combining Angular’s powerful component and directive system with a well-documented, atomic design approach, the Nokia Button Component provides a robust, reusable solution for building sophisticated UI elements while reducing common pitfalls found in repetitive class-based styling.

The current theming approach, which relies on CSS variables with !default flags, is a solid and flexible strategy for creating reusable component libraries.

Here's a breakdown of its strengths and weaknesses:

Strengths:

• Customization: CSS variables allow consumers of your library to easily override the default styles by simply redefining the variables in their own CSS.
• Prioritization: The !default flag ensures that your component's styles don't override styles defined by the consumer, providing a good balance between providing defaults and allowing customization.
• Maintainability: Using CSS variables makes it easier to maintain and update your component's styles, as you can change the variable values in one place and have them propagate throughout the component.
• Compatibility: CSS variables are widely supported in modern browsers.

Weaknesses:

• Complexity: For very complex theming scenarios, CSS variables alone might not be sufficient, and you might need to combine them with other techniques like SCSS mixins or custom CSS classes.
• Discoverability: Consumers of your library need to know which CSS variables are available for customization. You'll need to provide clear documentation.

To be Added: ->Tests!

Overall:

This approach is a good starting point for most component libraries. It provides a good balance between flexibility, maintainability, and compatibility. As the library evolves, more advanced theming options can be added as needed.