Conversation
✅ Deploy Preview for authentik-docs canceled.
|
✅ Deploy Preview for authentik-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for authentik-integrations canceled.
|
❌ 2 Tests Failed:
View the top 2 failed test(s) by shortest run time
To view more test analytics, go to the Test Analytics Dashboard |
|
authentik PR Installation instructions Instructions for docker-composeAdd the following block to your AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-b330d7523f3f290613f32e4b466b48698470b7ca
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)sAfterwards, run the upgrade commands from the latest release notes. Instructions for KubernetesAdd the following block to your authentik:
outposts:
container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
global:
image:
repository: ghcr.io/goauthentik/dev-server
tag: gh-b330d7523f3f290613f32e4b466b48698470b7caAfterwards, run the upgrade commands from the latest release notes. |
d355e96 to
67f45b3
Compare
| */ | ||
| @customElement("ak-locale-context") | ||
| export class LocaleContext extends WithBrandConfig(AKElement) { | ||
| protected createRenderRoot(): HTMLElement | DocumentFragment { |
There was a problem hiding this comment.
Ensures one less level of injected global styles. We’ve slowly moved towards this in all “context-like” components which have no styles of their own.
| * | ||
| * This method is very defensive to avoid unnecessary DOM repaints. | ||
| */ | ||
| export function applyBackgroundImageProperty(value?: string | null): void { |
There was a problem hiding this comment.
Extracted from the FlowExecutor. We can use this elsewhere in the future
| title = html`<h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo.title}</h1>`; | ||
| } | ||
| return html`${title ? html`<div class="pf-c-login__main-header">${title}</div>` : nothing} | ||
| const footer = this.hasSlotted("footer") ? html`<slot name="footer"></slot>` : null; |
There was a problem hiding this comment.
For ternaries that potentially represent a template result, preferring null over nothing allows us to use the value’s truthiness in predicates — less boilerplate to check if we should render a container if its children are existent
| align-items: center; | ||
| width: 100%; | ||
| display: grid; | ||
| grid-template-columns: minmax(auto, 2rem) minmax(33%, max-content); |
There was a problem hiding this comment.
Ported from our current design. This needs some attention to make use of PatternFly’s existing full width card buttons
| extends WithCapabilitiesConfig(WithBrandConfig(Interface)) | ||
| implements StageHost | ||
| { | ||
| static readonly DefaultLayout: FlowLayoutEnum = |
There was a problem hiding this comment.
Not sure if this is a bug per se, but if the authentication flow’s layout does not match the invalidation flow’s layout, the contents will shift when clicking the “not you?” link.
| </div> | ||
| </div> | ||
| </section>`; | ||
| return html`<span class="pf-c-spinner pf-m-xl" aria-hidden="true"> |
There was a problem hiding this comment.
BeryJu @kensternberg-authentik
The loading spinner needs some additional support to fully work with the screen reader and the “ARIA live” concept, but this iteration ensures that the progress bar is read as a momentary and indefinite value.
In some cases, the timing of this render path can also result in the screen reader discovering the progress bar after the parent component has already rendered. IMO a future revision might be more practical as a Django template partial rather than a full web component which depends on JavaScript to initialize.
|
|
||
| .pf-c-card { | ||
| --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md-bottom); | ||
| --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--150); |
There was a problem hiding this comment.
Removed since cards now inherit the color from the global styles
b330d75 to
f511b55
Compare
web: Apply footer resize. web: Fix application of global styles in style roots. web: Fix missing layout attribute. web: Normalize background alignment. web: Fix layout issues, color overrides. web: Fix alignment, colors, jank. web: Separate method into function. web: Clean up alignment, reflow. web: Fix colors, compatibility mode. web: Add content left/right support. web: Fix colors, compatibility mode overrides.
f511b55 to
acb323c
Compare
|
Resolved via #17444 |
Dependencies
Details
This PR is a follow up on #17280, fixing layout and palette issues.
Caveats
This iteration includes a few strategies to retain visual stability as flow cards load, with some caveats:
Keeping all the content within the viewport is prioritized over the card’s baseline centering. For mobile and desktop screens, there is no shift, however on tablet sized screens there can be a slight shift as the upper padding shrinks. IMO this is a good balance since the two most common device sizes have a stable layout without any scroll bars
When using a sidebar layout, the flow card will default to stacked if the screen’s aspect ratio would result in a just a sliver of background visibility. This also keeps the contents stable without scroll bars