Refine client rail icons and motion
This commit is contained in:
@@ -146,34 +146,32 @@ test('secondary menus share one right rail and switch equal drawers as a vertica
|
||||
assert.match(disabledRulesLabel, /opacity:\s*0/);
|
||||
assert.match(disabledRulesLabel, /filter:\s*blur\(5px\)/);
|
||||
assert.match(styles, /\.client-local-rules-toggle:disabled:hover span\s*\{[\s\S]*opacity:\s*1/);
|
||||
assert.match(subscription, /client-rail-subscription-back[\s\S]*client-rail-subscription-front[\s\S]*client-rail-subscription-lines/);
|
||||
assert.match(subscription, /client-rail-subscription-back[\s\S]*client-rail-subscription-front[\s\S]*client-rail-subscription-lines[\s\S]*client-rail-subscription-scan/);
|
||||
assert.match(instructions, /client-rail-info-ring[\s\S]*client-rail-info-sweep[\s\S]*client-rail-info-mark/);
|
||||
assert.match(component, /<InstructionsToggle[\s\S]*<DevicesToggle[\s\S]*<DiagnosticsToggle[\s\S]*<RoutingToggle/);
|
||||
assert.match(diagnosticsFeature, /client-rail-diagnostics-base[\s\S]*client-rail-diagnostics-pulse/);
|
||||
assert.match(devices, /client-rail-device-primary[\s\S]*client-rail-device-secondary[\s\S]*client-rail-device-link[\s\S]*client-rail-device-bridge[\s\S]*client-rail-device-pulse/);
|
||||
assert.match(routing, /client-rail-rule-track[\s\S]*client-rail-rule-knob is-top[\s\S]*client-rail-rule-knob is-bottom/);
|
||||
assert.match(styles, /\.client-rail-subscription-lines \{[\s\S]*opacity:\s*0\.9/);
|
||||
assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-front \{[\s\S]*translate\(-1\.5px, 1px\)/);
|
||||
assert.match(diagnosticsFeature, /client-rail-diagnostics-glass[\s\S]*client-rail-diagnostics-trace[\s\S]*client-rail-diagnostics-scan/);
|
||||
assert.match(devices, /client-rail-device-monitor[\s\S]*client-rail-device-phone[\s\S]*client-rail-device-bridge[\s\S]*client-rail-device-packet/);
|
||||
assert.match(routing, /client-rail-rule-track[\s\S]*client-rail-rule-scan is-top[\s\S]*client-rail-rule-scan is-bottom[\s\S]*client-rail-rule-knob is-top[\s\S]*client-rail-rule-knob is-bottom/);
|
||||
assert.match(styles, /\.client-rail-action:active:not\(:disabled\) svg \{[\s\S]*scale\(0\.94\)[\s\S]*120ms/);
|
||||
assert.match(styles, /\.client-rail-action svg \{[\s\S]*stroke-width:\s*1\.75/);
|
||||
assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-back \{[\s\S]*translate\(1\.5px, -1px\)/);
|
||||
assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-front \{[\s\S]*translate\(-2px, 1px\)/);
|
||||
assert.match(styles, /\.client-rail-info-ring \{[\s\S]*stroke-dasharray:\s*1 0/);
|
||||
assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-info-ring \{[\s\S]*stroke-dasharray:\s*0\.78 0\.22/);
|
||||
assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-primary \{[\s\S]*translateX\(0\.6px\)/);
|
||||
assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-secondary \{[\s\S]*translateX\(-0\.6px\)/);
|
||||
assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-info-ring \{[\s\S]*stroke-dasharray:\s*0\.9 0\.1/);
|
||||
assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-info-mark \{[\s\S]*translateY\(-1px\)/);
|
||||
assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-monitor \{[\s\S]*translateX\(1px\)/);
|
||||
assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-phone \{[\s\S]*translateX\(-1px\)/);
|
||||
assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-bridge \{[\s\S]*scaleX\(1\)/);
|
||||
assert.match(styles, /\.client-rail-diagnostics-base,[\s\S]*scaleY\(0\.8\)/);
|
||||
assert.match(styles, /\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-base,[\s\S]*scaleY\(1\)/);
|
||||
assert.match(styles, /\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-glass \{[\s\S]*translate\(1px, -1px\) rotate\(-4deg\)/);
|
||||
assert.match(routing, /client-rail-rule-knob is-top" cx="15"[\s\S]*client-rail-rule-knob is-bottom" cx="9"/);
|
||||
assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob\.is-top \{[\s\S]*translateX\(2px\)/);
|
||||
assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob\.is-bottom \{[\s\S]*translateX\(-2px\)/);
|
||||
assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-lines \{[\s\S]*animation:\s*client-rail-detail-pulse 10s/);
|
||||
assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-info-sweep \{[\s\S]*animation:\s*client-rail-info-scan 10s/);
|
||||
assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-pulse \{[\s\S]*animation:\s*client-rail-device-signal 10s/);
|
||||
assert.match(styles, /\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-pulse \{[\s\S]*animation:\s*client-rail-diagnostics-scan 10s/);
|
||||
assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob \{[\s\S]*animation:\s*client-rail-rule-pulse 10s/);
|
||||
assert.match(styles, /@keyframes client-rail-info-scan[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
|
||||
assert.match(styles, /@keyframes client-rail-device-signal[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
|
||||
assert.match(styles, /@keyframes client-rail-diagnostics-scan[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
|
||||
assert.match(styles, /transition: transform 620ms cubic-bezier\(0\.16, 1, 0\.3, 1\)/);
|
||||
assert.doesNotMatch(styles, /client-rail-info-refill|client-rail-device-left|client-rail-rule-top|client-rail-book-page/);
|
||||
assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-scan,[\s\S]*\.client-local-rules-toggle\.is-open \.client-rail-rule-scan \{[\s\S]*client-rail-ambient-trace 10s 1\.1s/);
|
||||
assert.match(styles, /@keyframes client-rail-ambient-trace[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
|
||||
assert.match(styles, /--client-rail-state-duration:\s*340ms/);
|
||||
assert.match(styles, /\.client-rail-action\.is-open \{[\s\S]*--client-rail-state-duration:\s*480ms/);
|
||||
assert.match(styles, /transition: transform var\(--client-rail-state-duration\) cubic-bezier\(0\.16, 1, 0\.3, 1\)/);
|
||||
assert.doesNotMatch(styles, /client-rail-info-refill|client-rail-device-left|client-rail-rule-top|client-rail-book-page|client-rail-device-primary|client-rail-diagnostics-base|client-rail-rule-pulse/);
|
||||
assert.doesNotMatch(styles, /client-secondary-icon-motion|\.client-local-rules-toggle\.is-open svg\s*\{[^}]*rotate/);
|
||||
assert.match(rule('.client-drawer'), /inset:\s*0 0 0 auto/);
|
||||
assert.match(rule('.client-drawer'), /width:\s*min\(580px, 100vw\)/);
|
||||
@@ -257,6 +255,7 @@ test('responsive motion has a reduced-motion fallback', () => {
|
||||
assert.match(reducedMotion, /\.client-drawer/);
|
||||
assert.match(reducedMotion, /transition:\s*none/);
|
||||
assert.match(reducedMotion, /animation:\s*none/);
|
||||
assert.match(reducedMotion, /\.client-rail-action:active:not\(:disabled\) svg[\s\S]*transform:\s*none/);
|
||||
});
|
||||
|
||||
test('tooltips stay opaque, above adjacent content, and do not stick after pointer clicks', () => {
|
||||
|
||||
@@ -38,25 +38,25 @@ const sha256 = (value) => crypto.createHash('sha256').update(value).digest('hex'
|
||||
const acceptedLedger = {
|
||||
counts: {
|
||||
cascadeEdges: 823,
|
||||
customProperties: 103,
|
||||
declarations: 3333,
|
||||
customProperties: 105,
|
||||
declarations: 3314,
|
||||
important: 0,
|
||||
keyframes: 55,
|
||||
keyframes: 51,
|
||||
media: 12,
|
||||
rules: 961,
|
||||
variableReferences: 811,
|
||||
rules: 946,
|
||||
variableReferences: 814,
|
||||
},
|
||||
hashes: {
|
||||
cascadeEdges: '20d8763bd907f8182994186e2c53e03885ecdcb8dda07c69ff7e64b5ac808625',
|
||||
customProperties: 'ef70fb1d9b61b177f1939f811babe1116bee631de26f5eac0aa0d0009ca5a1fb',
|
||||
declarations: '633264a595c8ade20cae3adb50bb484c61c22f430b7760155efb4ec4b15d30de',
|
||||
cascadeEdges: '42851684f732dd5e7f04959d009648dd4a8fab85904759da16786411ab199d1a',
|
||||
customProperties: 'dede9598ee62929fb29ff470897cd475ca34eb5af5dda342b09e306f3eaee887',
|
||||
declarations: 'fac169725174c1303de5673abfd42b7316c2180830d66173dca8a2e449b1db5e',
|
||||
duplicateKeyframes: '4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945',
|
||||
duplicateSelectors: '0fa66e370695261a2a5c6a189752c07d518d80d68d3e79a3ba4bb34407893c0e',
|
||||
keyframes: '35e40cc917b4c0d5a99bb0a3a626736e134167d29cf303ec41d02bf713d18637',
|
||||
ruleDeclarationSequences: 'b7643608ce8526684769dc22bf6641962e324093f9f20b6239e7d71dab031272',
|
||||
selectors: '896dc29ad2ed823b0754d4c667c093c5733bc54af951cf2b9ed83e9c022836d5',
|
||||
variableReferences: '0ffb99792db35b451fb35d1ced24e1aeef3a6df769cb37bf3d61229b0c970eba',
|
||||
witnesses: 'f9c177d5f967c116a1f8a79c05a6d1faf1231775045dbafbc1772d2f916e40e0',
|
||||
keyframes: 'b2b826683e11dfa95cf2d01996d43a02b3a2b33672a14353ebfbee7701d4532e',
|
||||
ruleDeclarationSequences: '7750298af4530d2b0f7d7b0feee21c6bd00a5f9a7ed1d6cfa368e2d9bcace26c',
|
||||
selectors: 'aa487c004e9960e60982e983fcbdb3becef76b0007d3ef85a96f45d4c3d7933e',
|
||||
variableReferences: '67fbd84828e97d10d7fe163ebea6504e8c48355e99616ede2498307d836fa616',
|
||||
witnesses: '5ae376bbd8884cc14a6907fc94302e0cd34974bf0b5beeb66dda1978a23d1959',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -209,7 +209,7 @@ test('client typography uses the shared semantic scale outside the token owner',
|
||||
|
||||
test('accepted stylesheet has pinned declaration, selector, keyframe, variable, and cascade ledgers', () => {
|
||||
const witnesses = readStyleWitnesses(root);
|
||||
assert.equal(witnesses.length, 817);
|
||||
assert.equal(witnesses.length, 824);
|
||||
assert.equal(witnesses.filter((witness) => witness.unknown || witness.ancestorUnknown).length, 0);
|
||||
const ledger = createStyleLedger(readStyleSource(root), { witnesses });
|
||||
assert.deepEqual(ledger.counts, acceptedLedger.counts);
|
||||
@@ -405,8 +405,8 @@ test('main owns one public stylesheet and the regrouped production CSS is determ
|
||||
assert.equal((main.match(/import ['"][^'"]+\.css['"]/g) || []).length, 1);
|
||||
|
||||
const assets = fs.readdirSync(path.join(root, 'dist/assets')).filter((file) => file.endsWith('.css'));
|
||||
assert.deepEqual(assets, ['index-Ceg2DPeq.css']);
|
||||
assert.deepEqual(assets, ['index-DUedU53N.css']);
|
||||
const built = fs.readFileSync(path.join(root, 'dist/assets', assets[0]));
|
||||
assert.equal(built.byteLength, 129584);
|
||||
assert.equal(sha256(built), '8ccbb067a01c28e729a1aa34908a96e508f07fb9e12c0d05ead10ddc959731bc');
|
||||
assert.equal(built.byteLength, 128983);
|
||||
assert.equal(sha256(built), 'eeeb9cc0bebc7afc37c2d6e60808aa4980f91c564762e47d240c654dd1b00fcf');
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user