BUX Component Development Platform

Text Field: Primary 

<div class="bux-text-field">

    <label class="bux-text-field__label" for="bux-text-field__text-field-2087294565">
        Form Input Label
    </label>

    <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-2087294565">
        Helper Text
    </span>

    <input id="bux-text-field__text-field-2087294565" class="bux-text-field__input" name="text-field-default" aria-describedby="bux-text-field__helper-text-2087294565" placeholder="Placeholder Text (Optional)" />

</div>
 
{# 

Text Field

Available variables:

- required:             Boolean. Set to true to require form element.
- modifier:             Sets the variant of the form item.
                        Allowed values:
                            - null, error, disabled, password.
- input_label:          String for the form legend.
- helper_text:          String for the form helper text.
- input_name:       String for the form element name. Optional.
- placeholder_text:     Strong for the form's placeholder text.
- error_helper_text:    Content for the error helper text.

#}

{% import 'forms/_macros/attributes.twig' as Attributes %}

{% set random_seed = random() %}
{% set form_element = 'text-field' %}
{% set input_type = modifier == 'password' ? 'password-input' : 'text-input' %}
{% set element_id = "bux-" ~ form_element ~ "__" ~ form_element ~ "-" ~ random_seed %}
{% set base_class = "bux-" ~ form_element ~ "__input" %}
{% set modifier_class = modifier ? ' ' ~ base_class ~ "--" ~ modifier : '' %}

{% set aria_describedby = "bux-" ~ form_element ~ "__helper-text-" ~ random_seed %}

{% if modifier == 'error' %}
    {% set aria_error_describedby = 'error' ? "bux-" ~ form_element ~ "__error-message-" ~ random_seed %}
    {% set aria_describedby = aria_error_describedby ~ ' ' ~ aria_describedby %}
{% endif %}

{% set field = {
    form_element: form_element,
    element_id: element_id,
    descriptor: {
        tag: 'label',
        text: input_label
    },
    required: required,
    random_seed: random_seed,
    helper_text: helper_text,
    attributes: {
        id: element_id,
        class: base_class ~ modifier_class,
        name: input_name ?? element_id,
        type: modifier == 'password' ? modifier : false,
        'aria-describedby': helper_text ? aria_describedby: false,
        placeholder: placeholder_text,
        required: required ? true : false,
        disabled: modifier == 'disabled' ? true : false,
        'aria-invalid': modifier == 'error' ? true : false,
    },
    error_helper_text: error_helper_text
} %}

<div class="bux-{{ field.form_element }}">
    {% include '@descriptor' with field only %}

    {% if field.helper_text %}
        {% include '@helper' with field only %}
    {% endif %}

    {% if modifier == 'error' %}
        {% include '@error' with field only %}
    {% endif %}

    <input {{ Attributes.render(field.attributes) }} />

    {% if modifier == 'password' %}
        <button
                class="bux-{{ form_element }}__password-icon bux-{{ form_element }}__password-icon--view bux-tooltip__button"
                id="bux-{{ form_element }}__password-toggle-{{ random_seed }}"
                title="Show Password"
                aria-label="Show Password"
                aria-pressed="false"
        >
        </button>
    {% endif %}
</div>
 
input_label: Form Input Label
helper_text: Helper Text
placeholder_text: Placeholder Text (Optional)
input_name: text-field-default
  • Content: 
    .bux-text-field {
  @include form-element;

  &__input {
    @include form-input;

    &:focus {
      outline: 2px solid $focus;
    }

    &--disabled {
      @include form-input-disabled;
    }

    &--error {
      @include form-input-error;
    }

    &--password {
      display: inline-block;
    }
  }

  &__error-message {
    @include form-error-message;
  }

  &__password-icon {
    @include button-reset;
    bottom: $sp-12;
    height: 30px;
    width: 36px;
    font-size: 18px;
    position: absolute;
    right: 2px;
    margin-top: 18px;

    &:focus {
      outline: 2px solid $focus;
    }

    &--view:after {
      color: $gray-dark-80;
      content: "\f014";
      font-family: $icon;
    }

    &--hide:after {
      color: $gray-dark-80;
      content: "\f100";
      font-family: $icon;
    }
  }
}
  • URL: /components/raw/text-field/_text-field.scss
  • Filesystem Path: src/components/forms/text-field/_text-field.scss
  • Size: 826 Bytes
  • Content: 
    function passwordToggle(inputFieldId, toggleButtonId) {
  let inputField = document.querySelector(`#${inputFieldId}`);
  inputField.type = inputField.type === "password" ? "text" : "password";

  let toggleButton = document.querySelector(`#${toggleButtonId}`);
  toggleButton.classList.toggle("bux-text-field__password-icon--hide");
  toggleButton.title = toggleButton.title === "Hide Password" ? "Show Password" : "Hide Password";
  toggleButton.ariaPressed = toggleButton.title === "Hide Password" ? "true": "false";
}

let passwordToggleButtons = document.querySelectorAll(".bux-text-field__password-icon");
passwordToggleButtons.forEach((toggleButton) => {
  let randomId = toggleButton.id.split("-")[4];
  let inputFieldId = `bux-text-field__text-field-${randomId}`;
  toggleButton.addEventListener("click", () => passwordToggle(inputFieldId, toggleButton.id));
});
  • URL: /components/raw/text-field/text-field.js
  • Filesystem Path: src/components/forms/text-field/text-field.js
  • Size: 871 Bytes

No notes defined.