Add focus styles to FileInput

[ggdouglas]

Fixes #6859

Checklist

• [N/A] Includes tests
• [N/A] Update documentation

Changes proposed in this pull request:

Add visual focus styles to FileInput to match other input components.

Reviewers should focus on:

Screenshot

Focus (light mode)

Before	After

Focus (dark mode)

Before	After

[changelog-app]

Generate changelog in packages/core/changelog/@unreleased

What do the change types mean?

• feature: A new feature of the service.
• improvement: An incremental improvement in the functionality or operation of the service.
• fix: Remedies the incorrect behaviour of a component of the service in a backwards-compatible way.
• break: Has the potential to break consumers of this service's API, inclusive of both Palantir services
  and external consumers of the service's API (e.g. customer-written software or integrations).
• deprecation: Advertises the intention to remove service functionality without any change to the
  operation of the service itself.
• manualTask: Requires the possibility of manual intervention (running a script, eyeballing configuration,
  performing database surgery, ...) at the time of upgrade for it to succeed.
• migration: A fully automatic upgrade migration task with no engineer input required.

Note: only one type should be chosen.

How are new versions calculated?

• ❗The break and manual task changelog types will result in a major release!
• 🐛 The fix changelog type will result in a minor release in most cases, and a patch release version for patch branches. This behaviour is configurable in autorelease.
• ✨ All others will result in a minor version release.

Type

• Feature
• Improvement
• Fix
• Break
• Deprecation
• Manual task
• Migration

Description

Add focus styles to FileInput

Check the box to generate changelog(s)

• Generate changelog entry

[svc-palantir-github]

Add focus state styles to file input

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[svc-palantir-github]

Add focus state styles to file input

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[evansjohnson]

is this a paired down version of the pt-input-intent mixin? maybe we could comment that if so to at least loosely link these

also wondering if we should be using the same 2px found in that mixin for consistency? is there a reason these should be different?

[ggdouglas]

The box shadows here were pulled from the base pt-input mixin:

blueprint/packages/core/src/components/forms/_common.scss

Lines 109 to 112 in dc1b162

	&:focus,
	&.#{$ns}-active {
	box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
	}

blueprint/packages/core/src/components/forms/_common.scss

Lines 59 to 73 in dc1b162

	@function input-transition-shadow(
	$color: $input-shadow-color-focus,
	$focus: false,
	$outer-shadow-focus-width: 1px,
	) {
	@if $focus {
	@return
	inset border-shadow(0.752, $color, 1px),
	border-shadow(0.752, $color, $outer-shadow-focus-width);
	} @else {
	@return
	border-shadow(0, $color, 0),
	border-shadow(0, $color, 0);
	}
	}

blueprint/packages/core/src/common/_mixins.scss

Lines 100 to 102 in c50a4a4

	@function border-shadow($alpha, $color: $black, $size: 1px) {
	@return 0 0 0 $size rgba($color, $alpha);
	}

blueprint/packages/core/src/components/forms/_common.scss

Lines 30 to 32 in dc1b162

	// avoids edge blurriness for light theme focused default input
	// second box-shadow of $pt-input-box-shadow
	$input-box-shadow-focus: inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;

and the base pt-dark-input mixin:

blueprint/packages/core/src/components/forms/_common.scss

Lines 200 to 202 in dc1b162

	&:focus {
	box-shadow: dark-input-transition-shadow($dark-input-shadow-color-focus, true);
	}

blueprint/packages/core/src/components/forms/_common.scss

Lines 75 to 89 in dc1b162

	@function dark-input-transition-shadow(
	$color: $dark-input-shadow-color-focus,
	$focus: false,
	$outer-shadow-focus-width: 1px,
	) {
	@if $focus {
	@return
	inset border-shadow(0.752, $color, 1px),
	border-shadow(0.752, $color, $outer-shadow-focus-width);
	} @else {
	@return
	border-shadow(0, $color, 0),
	border-shadow(0, $color, 0);
	}
	}

The default focus box shadow on input groups without an intent appears to be 2px total (1px inset + 1px).

For input groups with an intent, it appears to be 3px (1px inset + 2px)

I chose to go with the non-intent style box shadow for file input since it currently does not have the ability to have our intent styles applied. I do think it's a bit odd that the default, non-intent focus outline doesn't match the width of the focused outlines. Perhaps that's something to address in a FLUP? For now, I can comment to reference where these are coming from.

[evansjohnson]

I do think it's a bit odd that the default, non-intent focus outline doesn't match the width of the focused outlines.

ahh nice catch - I just recently updated these focus styles. looking back at this comment: #6854 (comment) I'm seeing originally I used a lighter color for the 2px which then became the same color (and a that point I probably just missed keeping it consistent at 2px)

[evansjohnson]

oh - maybe I did that because it already starts out with the 1px colored border when not focused

agreed without intent it makes sense for this to just be the 2px focus state!

[svc-palantir-github]

Add comment

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.