From 259c54b88753724dbeacba04b8611362a189da0d Mon Sep 17 00:00:00 2001 From: alphashr Date: Thu, 2 Dec 2021 20:59:42 -0500 Subject: [PATCH 1/2] flex items should be aligned on cross axis. --- .../src/button/fixtures/button.html | 21 +++++++++++++++++++ .../number-field/fixtures/number-field.html | 17 +++++++++++++++ .../src/number-field/number-field.styles.ts | 8 +++++++ .../src/search/fixtures/search.html | 17 +++++++++++++++ .../src/search/search.styles.ts | 7 +++++++ .../src/styles/patterns/button.ts | 10 +++++++-- .../src/text-field/fixtures/text-field.html | 17 +++++++++++++++ .../src/text-field/text-field.styles.ts | 7 +++++++ 8 files changed, 102 insertions(+), 2 deletions(-) diff --git a/packages/web-components/fast-components/src/button/fixtures/button.html b/packages/web-components/fast-components/src/button/fixtures/button.html index 926e8f539c1..751cb19cc59 100644 --- a/packages/web-components/fast-components/src/button/fixtures/button.html +++ b/packages/web-components/fast-components/src/button/fixtures/button.html @@ -78,3 +78,24 @@

With aria-label

Reset + +

One default, one with start slot, and one with end slot

+
+ Default + + SVG in Start + + + + + + SVG in End + + + + +
diff --git a/packages/web-components/fast-components/src/number-field/fixtures/number-field.html b/packages/web-components/fast-components/src/number-field/fixtures/number-field.html index b84323dfb8c..b72122932b4 100644 --- a/packages/web-components/fast-components/src/number-field/fixtures/number-field.html +++ b/packages/web-components/fast-components/src/number-field/fixtures/number-field.html @@ -128,3 +128,20 @@

In a form

> + +

One default, one with start slot, and one with end slot

+ + + + + + + + + + + diff --git a/packages/web-components/fast-components/src/number-field/number-field.styles.ts b/packages/web-components/fast-components/src/number-field/number-field.styles.ts index 472827daf84..75b137ec985 100644 --- a/packages/web-components/fast-components/src/number-field/number-field.styles.ts +++ b/packages/web-components/fast-components/src/number-field/number-field.styles.ts @@ -57,6 +57,7 @@ export const numberFieldStyles: ( border-radius: calc(${controlCornerRadius} * 1px); border: calc(${strokeWidth} * 1px) solid ${accentFillRest}; height: calc(${heightNumber} * 1px); + align-items: baseline; } .control { @@ -100,6 +101,13 @@ export const numberFieldStyles: ( visibility: hidden; } + .start, + .control, + .controls, + .end { + align-self: center; + } + .start, .end { margin: auto; diff --git a/packages/web-components/fast-components/src/search/fixtures/search.html b/packages/web-components/fast-components/src/search/fixtures/search.html index d1d9784d013..bd8b76f8eff 100644 --- a/packages/web-components/fast-components/src/search/fixtures/search.html +++ b/packages/web-components/fast-components/src/search/fixtures/search.html @@ -113,3 +113,20 @@

In a form

+ +

One default, one with start slot, and one with end slot

+ + + + + + + + + + + diff --git a/packages/web-components/fast-components/src/search/search.styles.ts b/packages/web-components/fast-components/src/search/search.styles.ts index 3db326e6664..1439ac12695 100644 --- a/packages/web-components/fast-components/src/search/search.styles.ts +++ b/packages/web-components/fast-components/src/search/search.styles.ts @@ -50,6 +50,7 @@ export const searchStyles: ( border-radius: calc(${controlCornerRadius} * 1px); border: calc(${strokeWidth} * 1px) solid ${accentFillRest}; height: calc(${heightNumber} * 1px); + align-items: baseline; } .control { @@ -109,6 +110,12 @@ export const searchStyles: ( visibility: hidden; } + .input-wrapper, + .start, + .end { + align-self: center; + } + .start, .end { display: flex; diff --git a/packages/web-components/fast-components/src/styles/patterns/button.ts b/packages/web-components/fast-components/src/styles/patterns/button.ts index 8c7b124c119..61aa21bf39a 100644 --- a/packages/web-components/fast-components/src/styles/patterns/button.ts +++ b/packages/web-components/fast-components/src/styles/patterns/button.ts @@ -60,7 +60,7 @@ export const BaseButtonStyles = css` box-sizing: border-box; display: inline-flex; justify-content: center; - align-items: center; + align-items: baseline; padding: 0 calc((10 + (${designUnit} * 2 * ${density})) * 1px); white-space: nowrap; outline: none; @@ -92,6 +92,12 @@ export const BaseButtonStyles = css` border: 0; } + .start, + .content, + .end { + align-self: center; + } + .start, .end { display: flex; @@ -127,7 +133,7 @@ export const BaseButtonStyles = css` color: ${SystemColors.ButtonText}; fill: currentColor; } - + :host(:hover) .control { forced-color-adjust: none; background-color: ${SystemColors.Highlight}; diff --git a/packages/web-components/fast-components/src/text-field/fixtures/text-field.html b/packages/web-components/fast-components/src/text-field/fixtures/text-field.html index dc3f7b6d327..a12bcb34cd2 100644 --- a/packages/web-components/fast-components/src/text-field/fixtures/text-field.html +++ b/packages/web-components/fast-components/src/text-field/fixtures/text-field.html @@ -99,3 +99,20 @@

In a form

> + +

One default, one with start slot, and one with end slot

+ + + + + + + + + + + diff --git a/packages/web-components/fast-components/src/text-field/text-field.styles.ts b/packages/web-components/fast-components/src/text-field/text-field.styles.ts index 34d7d648dd8..11f236c15a0 100644 --- a/packages/web-components/fast-components/src/text-field/text-field.styles.ts +++ b/packages/web-components/fast-components/src/text-field/text-field.styles.ts @@ -54,6 +54,7 @@ export const textFieldStyles: ( border-radius: calc(${controlCornerRadius} * 1px); border: calc(${strokeWidth} * 1px) solid ${accentFillRest}; height: calc(${heightNumber} * 1px); + align-items: baseline; } .control { @@ -93,6 +94,12 @@ export const textFieldStyles: ( visibility: hidden; } + .start, + .control, + .end { + align-self: center; + } + .start, .end { display: flex; From ec8da1f976ac64587218919e2ef755f93aa96987 Mon Sep 17 00:00:00 2001 From: alphashr Date: Thu, 2 Dec 2021 21:04:05 -0500 Subject: [PATCH 2/2] Change files --- ...st-components-86b3473d-11b0-4783-ab8c-6e102807d0c9.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@microsoft-fast-components-86b3473d-11b0-4783-ab8c-6e102807d0c9.json diff --git a/change/@microsoft-fast-components-86b3473d-11b0-4783-ab8c-6e102807d0c9.json b/change/@microsoft-fast-components-86b3473d-11b0-4783-ab8c-6e102807d0c9.json new file mode 100644 index 00000000000..a5ae59e001c --- /dev/null +++ b/change/@microsoft-fast-components-86b3473d-11b0-4783-ab8c-6e102807d0c9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "flex items should be aligned on cross axis.", + "packageName": "@microsoft/fast-components", + "email": "srdsecond@gmail.com", + "dependentChangeType": "patch" +}