Autocomplete Sass API

Variables

autocomplete-disable-everything

$autocomplete-disable-everything: false !default;

autocomplete-disable-clear-button

$autocomplete-disable-clear-button: false !default;

Used By

• @function autocomplete-_right-addon-calc
• @mixin autocomplete-styles

autocomplete-disable-clear-button-display-none-query

$autocomplete-disable-clear-button-display-none-query: false !default;

Used By

• @mixin autocomplete-styles

autocomplete-disable-dropdown-button

$autocomplete-disable-dropdown-button: false !default;

Used By

• @function autocomplete-_right-addon-calc
• @mixin autocomplete-styles

autocomplete-disable-circular-progress

$autocomplete-disable-circular-progress: false !default;

Used By

• @function autocomplete-_right-addon-calc
• @mixin autocomplete-styles
• $button-styles
• @mixin switch-styles

autocomplete-disable-text-overflow-ellipsis

$autocomplete-disable-text-overflow-ellipsis: false !default;

Used By

• @mixin autocomplete-styles

autocomplete-disable-inline-chips

$autocomplete-disable-inline-chips: chip.$disable-everything !default;

Used By

• @mixin autocomplete-variables
• @mixin autocomplete-styles

autocomplete-inline-min-width

$autocomplete-inline-min-width: 5rem !default;

Used By

• @mixin autocomplete-variables

autocomplete-inline-chips-gap

$autocomplete-inline-chips-gap: icon.get-var(spacing) !default;

Used By

• @mixin autocomplete-variables

autocomplete-inline-outlined-vertical-padding

$autocomplete-inline-outlined-vertical-padding: calc(
  (text-field.get-var(height) - chip.get-var(height)) / 2 -
    text-field.$border-width
) !default;

Used By

• @mixin autocomplete-styles

autocomplete-inline-input-leading-padding

$autocomplete-inline-input-leading-padding: chip.get-var(horizontal-padding) !default;

Used By

• @mixin autocomplete-styles

autocomplete-button-size

$autocomplete-button-size: button.$icon-small-size !default;

Used By

• @mixin autocomplete-styles

autocomplete-circular-progress-size

$autocomplete-circular-progress-size: button.$icon-small-size !default;

Used By

• @mixin autocomplete-styles
• $button-styles
• @mixin switch-styles

autocomplete-addon-gap

$autocomplete-addon-gap: text-field.$addon-gap !default;

Used By

• @mixin autocomplete-variables
• @mixin text-field-addon-styles

autocomplete-addon-spacing

$autocomplete-addon-spacing: text-field.get-var(addon-spacing) !default;

Used By

• @mixin autocomplete-variables
• @mixin text-field-variables

autocomplete-clear-button-size

$autocomplete-clear-button-size: calc(button.get-var(icon-font-size) * 2) !default;

Used By

• @mixin autocomplete-styles

autocomplete-dropdown-button-size

$autocomplete-dropdown-button-size: calc(button.get-var(icon-font-size) * 2) !default;

Used By

• @mixin autocomplete-styles

autocomplete-variables

$autocomplete-variables: (
  clear-button-size,
  dropdown-button-size,
  circular-progress-size,
  inline-gap,
  inline-min-width,
  addon-gap,
  gap-count,
  addon-spacing
);

Mixins

autocomplete-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

autocomplete-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

autocomplete-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $autocomplete-addon-gap
• $autocomplete-addon-spacing
• $autocomplete-disable-inline-chips
• $autocomplete-inline-chips-gap
• $autocomplete-inline-min-width

autocomplete-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin app-bar-set-var
• @mixin app-bar-use-var
• @function autocomplete-_right-addon-calc
• @function autocomplete-_add-has-selector
• @function app-bar-get-var
• $app-bar-disable-everything
• $autocomplete-disable-clear-button
• $autocomplete-disable-dropdown-button
• $autocomplete-button-size
• $autocomplete-disable-circular-progress
• $autocomplete-circular-progress-size
• $autocomplete-disable-text-overflow-ellipsis
• $autocomplete-clear-button-size
• $autocomplete-dropdown-button-size
• $autocomplete-_clear-button-selector
• $autocomplete-_dropdown-button-selector
• $autocomplete-disable-clear-button-display-none-query
• $autocomplete-disable-inline-chips
• $form-disable-filled-theme
• $form-disable-underlined-theme
• $autocomplete-_underline-selector
• $autocomplete-_chip-selector
• $form-disable-outlined-theme
• $autocomplete-_outline-selector
• $autocomplete-inline-outlined-vertical-padding
• $autocomplete-inline-input-leading-padding

Functions

autocomplete-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function get-var-name
• @mixin app-bar-variables

Set to true to disable all the styles

Set to true to disable the clear button styles

The default behavior for the clear button is to become visible only when:

• the input has a value AND
• the user is hovering the input OR the user is focusing the input

Set this to true to always show the clear button unless the disableClearButton was enabled on the Autocomplete.

Set to true to disable the dropdown button styles

Set to true to disable the circular progress styles

Set to true to disable setting text-overflow: ellipsis on the input

Set to true to disable the inline chip styles

This is the min width for the input when there are inline chips. This causes the input to wrap to the next line.

The amount of spacing between each inline chip

The vertical padding to apply to the text field when using inline chips and the outline theme. This is used so that the chips and floating label look nice.

The amount of padding to apply to the text field when there is at least one chip visible. The default behavior makes it so the text in the input matches with a chip if they were stacked.

Updates all the icon button sizes that appear within the autocomplete to use this new size

The size of the circular progress and used to generate the correct padding for all the inline addons

The amount of gap between the circular progress, clear button, and dropdown button (when they exist).

The spacing between the input and the circular progress/clear button/dropdown button addons.

The size of the clear button and used to generate the correct padding for all the inline addons

The size of the dropdown button and used to generate the correct padding for all the inline addons

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

Conditionally applies the css variables based on feature flags

Generates all the styles for the Autocomplete components based on feature flags.

Set this to true to disable the layer behavior

a var() statement

The supported variable name

An optional fallback value