Address height consistency between form elements

[jordanjones243]

Alaska Airlines Pull Request

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Resolves: #81

Summary:

Please summarize the scope of the changes you have submitted, what the intent of the work is and anything that describes the before/after state of the project.

Add custom property $trigger-height to src/style.scss to allow for the height of select to be manipulated.

Type of change:

Please delete options that are not relevant.

• New capability
• Revision of an existing capability
• Infrastructure change (automation, etc.)
• Other (please elaborate)

Checklist:

• My update follows the CONTRIBUTING guidelines of this project
• I have performed a self-review of my own update

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!

-- Auro Design System Team

[blackfalcon]

This issue really shouldn't have been a feature, but to address a bug.

Please update the commit message to something like:

fix(height): addjust to be consistent with other form elements #18

[blackfalcon]

Recommend not using this. We are moving away from Sass variables as much as possible. I'd suggest creating local CSS variables.

:root {
  --trigger-height: 40px;
}

Ideally, we would want this to be governed by an Auro Design Token, but this will be addressed in a future update that is still in the works. AlaskaAirlines/AuroDesignTokens#71

[jordanjones243]

Cannot create CSS variable in :root and use it in :host, therefore I created the variable in :host.

[blackfalcon]

A couple of things here.

1. When using Sass variables you do not need to use the #{} syntax. Referencing the $trigger-height variable itself would work.
2. Let's update this to var(--trigger-height);

[blackfalcon]

You don't need to wrap this in a :host selector. This will work.

Suggested change

	:host {
	/* Custom property to manipulate the height of auro-select element */
	--trigger-height: 40px;
	auro-dropdown {
	&::part(trigger) {
	min-height: var(--trigger-height);
	max-height: var(--trigger-height);
	}
	}
	}
	auro-dropdown {
	--trigger-height: 40px;
	&::part(trigger) {
	min-height: var(--trigger-height);
	max-height: var(--trigger-height);
	}
	}

[jordanjones243]

Fixed.

[DZwell]

👏 ❤️